@charset "UTF-8";

/*-------------------------------------------------------------------- 

[Admin Stylesheet] 
  
- Project:    The Portfolio of Sebastian Jaramillo T - sebastianjt.com - ADMIN SECTION
- Version:    2.0 

- Author: Sebastian Jaramillo T.


- Last CSS Update: December 18 - 2008
			
-------------------------------------------------------------------*/

/*-----------------------------------------*/
/*--------- GENERAL RULES ----------*/

* {
	margin: 0px;
	padding: 0px;
}

html {
	background: #1f383d;
}

body {
	background-color: #fcfdfd;
	color: #a2a2a2;
	font-family: "Helvetica Neue", Helvetica, Geneva, Arial, sans-serif;
}

/*-----*/
#wrapper {
	margin: 0px auto;
}

#container {
	width: 960px;
	margin: 0 auto;
}
/*-----*/

p {
	line-height: 1.2em;
}

a:link {
	text-decoration: none;
	color: #668d97;
}

a:visited {
	text-decoration: none;
	color: #668d97;
}

a:hover {
	text-decoration: underline;
	color: #e28725;
}

input {
	height: 16px;
	vertical-align: middle;
}

input, textarea {
	color: #8a8a8a;
	font-size: 14px;
	padding: 4px 2px;
}

input:focus, textarea:focus{
	background-color: #e2f8fe;
	color: #3e3e3e;
}

/*------ Clear Fix ------*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* End hide from IE-mac */
/*----------------------*/

/*-----------------------------------------*/
/*--------- TOP BAR ----------*/

#topbar {
	background-color: #e3ebc0;
	border-bottom: 1px solid #b7cda3;
	border-left: 1px solid #c5dcaf;
	border-right: 1px solid #9bad89;
	color: #768a63;
	height: 26px;
	min-width: 930px;
	margin: 0px 30px;
	padding: 0px;
}

#topbar .topbox {
	font-size: 11px;
	height: 26px;
	padding: 0px 12px;
	border-top: 1px solid #fff;
}

#topbar .topbox a:link {
	color: #9db637;
	display: block;
	height: 18px;
	padding: 8px 0px 0px;
}

#topbar .topbox a:visited {
	color: #9db637;
	display: block;
	height: 18px;
	padding: 8px 0px 0px;
}

#topbar .topbox a:hover {
	color: #e28725;
	display: block;
	height: 18px;
	padding: 8px 0px 0px;
}

/*Welcome*/
#topbar #welcome {
	border-right: 1px solid #bfd5a9;
	float: left;
}

#topbar #welcome h1 {
	display: block;
	height: 18px;
	padding: 5px 0px 0px;
	font-size: 12px;
}

#topbar #adminpage {
	border-left: 1px solid #bfd5a9;
	float: right;
}

#topbar #adminpage h2 {
	display: block;
	height: 18px;
	padding: 5px 0px 0px;
	font-size: 12px;
}

#topbar #logout {
	border-left: 1px solid #bfd5a9;
	float: right;
}


/*-----------------------------------------*/
/*--------- HEADER ----------*/

/*-- Logo --*/

#header {
	margin: 0px 0px 30px 0px;
}

#header h1#sjlogo {
	display: block;
	float: left;
	width: 425px;
	height: 80px;
	margin: 52px 0px 0px 0px;
}

#header h1#sjlogo a {
	background: url(../../imgs/head_logo.jpg) no-repeat 0 0;
	display: block;
	width: 425px;
	height: 0px;
	overflow: hidden;
	padding-top: 80px;
}

/*-- Main Nav --*/

#header ul#mainnav {
	float: right;
	font: 21px Georgia, "Times New Roman", Times, serif;
	margin: 92px 0px 0px 0px;
	text-transform: lowercase;
}

#header ul#mainnav a:link {
	border-right: 1px solid #fcfdfd;
	border-bottom: 1px solid #fcfdfd;
	color: #668d97;	
	display: block;
	padding: 14px 15px 13px 16px;	
}

#header ul#mainnav a:visited {
	border-right: 1px solid #fcfdfd;
	border-bottom: 1px solid #fcfdfd;
	color: #668d97;	
	display: block;
	padding: 14px 15px 13px 16px;	
}

#header ul#mainnav a:hover {
	background-color: #f7fadf;
	border-right: 1px solid #e5e9d5;
	border-bottom: 1px solid #e5e9d5;
	color: #e28725;
	text-decoration: none;
}

#header ul#mainnav li a.current {
	background-color: #f0f4db;
	border-right: 1px solid #e5e9d5;
	border-bottom: 1px solid #f0f4db;
	color: #9fb739;
	text-decoration: none;
}

#header ul#mainnav li {
	float: left;
	display: inline;
}

/*-- Sub Nav --*/

#header ul#subnav {
	width: 100%;
	height: 35px;
	float: right;
	display: inline;
	margin: 0px 0px;
	background-color: #f0f4db;
	border-right: 1px solid #cde6b7;
	border-bottom: 1px solid #cde6b7;
	border-left: 1px solid #cde6b7;
}

#header ul#subnav li {
	float: right;
	display: inline;
}

#header ul#subnav li a {
	display: block;
	padding: 13px 15px 8px;
	font-size: 14px;
	border-right: 1px solid #e8ecd5;
	border-left: 1px solid #e8ecd5;
}

#header ul#subnav li a.current {
	color: #9fb739;
}

#header ul#subnav li a.current.add, #header ul#subnav li a.current.edit, #header ul#subnav li a.current.thumbs {
	background-color: #fafee6;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-right: 1px solid #e1e5cf;
	border-left: 1px solid #e1e5cf;
}

/*Add*/
#header ul#subnav li a.add {
	padding-left: 32px;
	background: url(../../imgs/ico_plus_circle.png) no-repeat 10px 10px;
}

/*Edit*/
#header ul#subnav li a.edit {
	padding-left: 32px;
	background: url(../../imgs/ico_tables_pencil.png) no-repeat 10px 10px;
}

/*Thumbs*/
#header ul#subnav li a.thumbs {
	padding-left: 32px;
	background: url(../../imgs/ico_images_pencil.png) no-repeat 10px 10px;
}


/*-----------------------------------------*/
/*--------- CONTENT ----------*/

#content {
	
}

#content h2.adcontheading {
	margin-bottom: 30px;
	padding-bottom: 15px;
	font-size: 20px;
	color: #9fb739;
	border-bottom: 1px solid #cddeba;
}

#content h2.adcontheading span {
	color: #374f59;
	font-style: italic;
}

#content h2.adcontheading em {
	color: #668d97;
	font-size: 30px;
}


/*-- Middle Section and Half Columns --*/

#content .midsec {
	float: left;
	margin: 30px 0px 0px;
	width: 960px;
}

#content .midsec #halfleft {
	width: 465px;
	float: left;
}

#content .midsec #halfright {
	width: 465px;
	float: right;
}

#content .midsec p.explain {
	margin-bottom: 15px;
}

/*-- Message Boxes --*/

div.msgbox {
	padding: 15px;
	margin: 30px 0px;
	background-color: #d8ebfe;
	border: 1px solid #7f969c;
	color: #434343;
	text-align: center;
}

div.msgbox h2 {
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: uppercase;
}

div.msgbox span.warning {
	padding: 5px;
	background-color: #fbca48;
	border: 1px solid #c59e39;
	color: #554418;
}

div.msgbox.success {
	background: #dde8bd url(../imgs/message_box_icon.jpg) no-repeat 30px 50%;
	border-color: #9eb738;
}

div.msgbox.error {
	border-color: #fb000d;
	background-color: #fed6da;
}

/*-------------------------*/
/*--------- MAIN ----------*/

/*-- Main Info Box --*/
#content div#maininfo {
	margin: 0px 0px 27px;
	padding: 0px 0px 10px;
	background-color: #f0f0f0;
	color: #606060;
	border-top: 1px solid #e4e4e4;
	border-right: 1px solid #dbdbdb;
	border-bottom: 1px solid #d8d8d8;
	border-left: 1px solid #e1e1e1;
}

#content div#maininfo h2 {
	margin: 0px 0px 10px;
	padding: 14px 10px 10px;
	background-color: #e28725;
	border-top: 1px solid #b66d1e;
	border-right: 1px solid #b66d1e;
	border-bottom: 1px solid #ababab;
	border-left: 1px solid #c87821;
	color: #fff;
}

#content div#maininfo p {
	margin: 5px 0px 0px;
	padding: 0px 15px;
}

/*----- Third Boxes -----*/
#content div.third {
	width: 280px;
	min-height: 206px;
	float: left;
	display: inline;
	margin: 0px 27px 0px 0px;
	padding: 10px 10px 15px;
	border: 1px solid #d8d8d8;
}

#content div.third.last {
	margin: 0px;
}

div.third h2.main {
	margin: 0px 0px 10px;
	padding: 10px;
	border: 1px solid #d8d8d8;
	background-color: #f0f0f0;
	color: #252525;
}

div.third h2.main a {
	background-color: #f0f0f0;
	color: #252525;
}

/*-- Recent Projects Box --*/
#content div#recent {
}

#content div#recent ul li {
	margin: 0px 0px 10px;
	border-bottom: 1px solid #d8d8d8;
	background-color: #f5f5f5;
}

#content div#recent ul h2 {
	margin: 0px 0px 5px;
	font-size: 13px;
	text-align: center;
}

#content div#recent ul img {
	display: block;
	margin: 0px auto;
}

/*-- Recent Blog Posts Box --*/
div#recentposts {
	position: relative;
	min-height: 467px;
}

div#recentposts a#rsslink {
	width: 14px;
	height: 0px;
	padding: 14px 0px 0px 0px;
	position: absolute;
	top: 22px;
	right: 20px;
	overflow: hidden;
	background-image: url(../../imgs/extra_rss.png);
}

div#recentposts ul  {
	margin: 0px 0px 15px;
}

div#recentposts ul li {
	padding: 20px 15px;
	background-color: #f5f5f5;
	border-bottom: 1px solid #d8d8d8;
	color: #252525;
}

div#recentposts ul li:hover {
	background-color: #e2e2e2;
}

div#recentposts ul h3 {
	margin: 0px 0px 5px;
	color: #585858;
	font-size: 15px;
}

div#recentposts ul p {
	color: #585858;
	font-size: 12px;
	font-style: italic;
}

div#recentposts a#newsbottom {
	margin: 0px 35px;
}

/*-- Clients Box --*/
#content #clients {
	margin-bottom: 28px;
}

#content #clients, #content #users {
	min-height: 206px;
}

/*-------------------------*/
/*------ PROJECT FORMS -------*/

div#formleftcolumn {
	width: 440px;	
	float: left;
	padding-right: 22px;
	border-right: solid 1px #c3d7db;
}

div#formrightcolumn {
	float: right;
	width: 440px;	
}

.formstyle {
	background: #f2f9f9;
	border: 2px solid #cfe6e6;
	margin: 0px;
	padding: 14px;
	position: relative;
}

#adminlogin .formstyle {
	width: 440px;
	margin: 50px auto 0px;
}

.formstyle form {

}

.formstyle h1 {
	clear: both;
	color: #484848;
	font-size: 15px;
	font-weight: bold;
	margin: 0px 0px 20px 0px;
}

.formstyle p {
	border-bottom: solid 1px #c3d7db;
	clear: both;
	color: #666666;
	font-size: 13px;
	margin: 8px 0px;
	padding-bottom: 10px;
}

.formstyle .indv_box {
	margin: 0px;
	padding: 15px 0px;
	background: url(../../imgs/form_required.jpg) no-repeat 100% 22px;
}

.formstyle .indv_box:hover {
	/*background-color: #e6e6e6;*/
}

.formstyle label {
	color: #9db730;
	display: block;
	float: left;
	font-size: 16px;
}

.formstyle label span.small {
	color: #919191;
	display: block;
	font-size: 11px;
	margin-top: 5px;
}

.formstyle label, .formstyle .small {
	text-align: right;
	width: 140px;
}

.formstyle input {
	height: 22px;
	vertical-align: middle;
}

.formstyle textarea {

}

.formstyle input, .formstyle textarea {
	border: 1px solid #c3d7db;
	color: #8a8a8a;
	float: left;
	font-size: 18px;
	margin: 0 0 0 20px;
	padding: 4px 2px;
	width: 245px;
}

/*Radio Buttons*/
.formstyle div.indv_box div.radiocont {
	float: left;
	width: 245px;
	margin-left: 20px;
}

.formstyle div.indv_box div.radiocont div.radios {
	float: left;
	width: 245px;
	margin-bottom: 10px;
}

.formstyle input.radio {
	width: 30px;
	margin-left: 0px;
}

.formstyle div.indv_box div.radiocont div.radios span {
	display: block;
	float: left;
	margin-left: 10px;
}
/*---------*/

.formstyle input:focus, .formstyle textarea:focus{
	background-color: #e2f8fe;
	color: #3e3e3e;
}

.formstyle .form_button {
	background-color: #9fba2f;
	border: 1px solid #94ad2c;
	clear: both;
	color: #FFFFFF;
	font-size: 13px;
	float: right;
	letter-spacing: 0.1em;
	margin: 10px 30px 0px 0px;
	width: 250px;
	height: 31px;
	text-align: center;
	vertical-align: middle;
}

.formstyle .form_button:hover {
	background-color: #6b7e20;
	cursor: pointer;
}

.formstyle .form_button.reset {
	background-color: #436870;
	border: 1px solid #36545b;
	width: 100px;
	height: 20px;
	margin: 10px 30px 0px 0px;
	font-size: 10px;
}

.formstyle .form_button.reset:hover {
	background-color: #ac5217;
	cursor: pointer;
}

#myform div.requiredfields {
	background: #fafaf8 url(../../imgs/form_required.jpg) no-repeat 8px 4px;
	border: 1px solid #bfd4d5;
	color: #86917b;
	display: block;
	font-size: 12px;
	font-style: italic;
	margin: 8px 15px 0px 0px;
	padding: 4px 4px 4px 27px;
	width: 90px;
	position: absolute;
	top: 0;
	right: 0;

}

.formstyle div.indv_box span.note {
	color: #e28725;
	display: block;
	float: right;
	font-style: italic;
	font-size: 11px;
	margin: 10px 30px 0px 0px;
	width: 245px;
}

/*-- Client Info --*/

.formstyle div#clientinfo {
	padding: 0px 0px 10px 0px;
	margin-bottom: 10px;
	border-bottom: 1px solid #c3d7db;
}

/*-- Client Info --*/

.formstyle div#imagebox {
	padding: 0px 0px 10px 0px;
	margin: 25px 0px;
	border-bottom: 1px solid #c3d7db;
}

/*-- Long Description Box*/
div#desclongbox {
	clear: both;
}

/*-- Long Description Box*/
div#desclongbox textarea {
	width: 730px;
}

/*-----------------------------------------*/
/*---------- PROJECTS SINGLE EDIT ---------*/

#content div.maininfo {
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 20px 0px;
	border-bottom: 1px solid #cddeba;
}

#content div.maininfo img {
	float: right;
}

#content div.maininfo div.info {
	width: 465px;
	float: left;
}

#content div.maininfo div.info h2 {
	margin: 0px 0px 10px 0px;
	color: #e28725;
	font-size: 20px;
}

#content div.maininfo h2 span {
	color: #8f8f90;
	font: italic 16px Georgia, "Times New Roman", Times, serif;
}

#content div.maininfo div.info p {
	color: #464646;
	font: italic 20px Georgia, "Times New Roman", Times, serif;

}

#content div.maininfo div.info p span {
	color: #8f8f90;
	font-size: 14px;
	font-style: italic;
	margin: 0px 5px 0px 0px;
}

#content div.maininfo div.info2 {
	width: 465px;
	float: right;
	display: inline;
	font-size: 14px;
	font-style: italic;
	text-align: right;
}

#content div.maininfo div.info2 a {
	margin: 0px 0px 5px;
	float: right;
	display: inline;
	clear: right;
	font-size: 14px;
	font-style: italic;
	text-align: right;
}

/* PROGRESS BAR */

div.progressBar{
	width:216px;
	height:41px;
	background:url(../../imgs/progress_bg_bar.gif) no-repeat 0 0;
	position:relative;
	margin: 5px 0px 0px 0px;
}
div.progressBar span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(../../imgs/progress_bar.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
div.progressBar em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(../../imgs/progress_bg_cover.gif) repeat-x 0 0;
	top:0;
}

#content div.maininfo div.progressBar p.number{
	position:absolute;
	bottom: 11px;
	right: -59px;
	color: #94a14c;
	font: italic 20px Georgia, "Times New Roman", Times, serif;
}


/*-----------------------------------------*/
/*------------- ACTION BOXES --------------*/

#content div.actionbox {
	width: 480px;
	height: 25px;
	margin: 0px 0px 20px 0px;
	padding: 15px;
	border: 1px solid #c7d47e;
	background-color: #f4f4f4;
}

#content div.actionbox p {
	float: left;
	display: inline;
	margin-right: 20px;
	font-size: 14px;
	font-style: italic;
	color: #5d5d5d;
}

#content div.actionbox select {
	width: 200px;
	height: 25px;
	margin: 0px 20px 0px 0px;
	background-color: #fcfdfd;
	color: #747474;
	font-size: 14px;
}

#content div.actionbox input {
	width: 120px;
	height: 25px;
	padding: 5px 0px 0px 0px;
	background-color: #f0f4db;
	border: 1px solid #c7c7c7;
	color: #545454;
	cursor: pointer;
	font-size: 14px;
}

#content div.actionbox input:hover {
	background-color: #d8ebfb;
}


/*-----------------------------------------*/
/*-------------- TABLES --------------*/

.midsec table {
	width: 960px;
	border: 1px solid #bfcc7c;
}

.midsec table tr th {
	background-color: #c7d47e;
	border-bottom: 2px solid #878f56;
	color: #484848;
	font-weight: bold;
	padding: 15px;
	font-size: 15px;
}


/* Pointers */
.midsec table.selectable tr {
	cursor: pointer;
}

/*-- Icons --*/
th.activeico {
	width: 16px;
	background: url(../../imgs/ico_tick_circle.png) no-repeat 15px 13px;
}

.midsec table tr:hover td {
	background-color: #f7fee7;
	color: #333;
}

.midsec table tr td {
	background-color: #f2fcca;
	border-bottom: 1px dashed #bfcc7c;
	color: #888;
	font-size: 14px;
	font-style: italic;
	padding: 10px 15px 6px;
}

.midsec table tr td a {
	color: #69696a;
}

/*-- Motion Table --*/

.midsec table#motiontable {
	margin-top: 20px;
	border: 1px solid #719bb8;
}

.midsec table#motiontable tr th {
	background-color: #83b3d3;
	border-bottom: 2px solid #5d8098;
}

.midsec table#motiontable tr:hover td {
	background-color: #e4eefd;
}

.midsec table#motiontable tr td {
	background-color: #d2e3fb;
	border-bottom: 1px dashed #83b5d7;
}

/*-- Design Table --*/

.midsec table#designtable {
	margin-top: 20px;
	border: 1px solid #b8a35a;
}

.midsec table#designtable tr th {
	background-color: #d1b966;
	border-bottom: 2px solid #97864a;
}

.midsec table#designtable tr:hover td {
	background-color: #f8f1cc;
}

.midsec table#designtable tr td {
	background-color: #f3eda8;
	border-bottom: 1px dashed #c6b061;
}


/*-------------------------*/
/*------ PROJECT THUMBS -------*/

#content ul#allprojects li {
	float: left;
	display: inline;
	margin: 0px 10px 5px;
}


/*-------------------------*/
/*------ CLIENTS -------*/

#content div.currentclientbox {
	padding: 15px;
	background-color: #f2f9f9;
	border-top: 2px solid #cfe6e6;
	border-right: 2px solid #cfe6e6;
	border-left: 2px solid #cfe6e6;
}

#content div.currentclientbox h3 {
	color: #484848;
	font-size: 20px;
}

#content div.currentclientbox p {
	font-size: 15px;
	color: #7e7e7e;
}

/*-------------------------*/
/*------ QUOTES -------*/

#quotes input.quote {
	width: 660px;
}



/*----------------------------------*/
/*------------- FOOTER -------------*/

#footerwrap {
	background: #1f383d url(../../imgs/footerwrap_bg.jpg) repeat-x;
	margin-top: 60px;
}

#footer {
	background: url(../../imgs/footer_bg.jpg) no-repeat 0 0;
	color: #7d9ba3;
	margin: 0px auto;
	padding: 54px 40px 30px;
	width: 880px;
}

#footer a:link {
	color: #d3dcdf;
}

#footer a:visited {
	color: #ebf5f7;
}

#footer a:hover {
	color: #ebf5f7;
	text-decoration: underline;
}

/*-- Footer Top --*/

#footer #foottop {
	clear: both;
	font-family: Georgia, "Times New Roman", Times, serif;
	width: 880px;
	height: 30px;
	margin: 0px 0px 26px;
}

#footer #foottop #footernav {
	display: inline;
	float: left;
}

#footer #foottop #footernav li {
	border-right: 1px solid #617980;
	display: inline;
	float: left;
	margin-right: 10px;
	padding-right: 10px;
}

#footer #foottop #footernav li.last {
	border-right: none;
	display: inline;
	float: left;
	margin-right: 0px;
	padding-right: 0px;
}

#footer #foottop #footernav li a:link {
	color: #7d9ba3;
	text-transform: lowercase;
	font-size: 16px;
}

#footer #foottop #footernav li a:visited {
	color: #7d9ba3;
	text-transform: lowercase;
	font-size: 16px;
}

#footer #foottop #footernav li a:hover {
	color: #ebf5f7;
	text-transform: lowercase;
	text-decoration: underline;
	font-size: 16px;
}

#footer #foottop #footernav li a.current {
	color: #9fb739;
	text-decoration: underline;
}

#footer #foottop #footerdownloads {
	display: inline;
	float: right;
	font-size: 13px;
}

#footer #foottop #footerdownloads a {
	font-style: italic;
	background-repeat: no-repeat;
}

/*-- Footer Middle --*/

#footer #footmid {
	clear: both;
	height: 174px;
	width: 880px;
}

/* Flickr */
#flickrbox {
	clear: both;
	display: inline;
	float: left;
	width: 390px;
}

#flickrbox h2 {
	display: block;
	margin: 0px 0px 30px 0px;
	padding: 0px 0px 3px 30px;
	background: url(../../imgs/footer_flickr_ico.jpg) no-repeat 0 0;
	font-size: 13px;
	font-style: italic;
}

#flickrbox #photos {
	margin-left: 30px;
}

#flickrbox #photos .flickr_badge_image {
	background-color: #1f3237;
	border: 1px solid #34484d;
	display: inline;
	float: left;
	margin: 0 20px 0 0;
	padding: 6px;
	width: 75px;
	height: 75px;
}

/* Twitter */
#twitter_container {
	display: inline;
	float: right;
	width: 430px;
	height: 150px;
}

#twitter_container #twitters {
	display: inline;
	float: right;
	width: 285px;
	margin-right: 23px;
}

#twitter_container #twitters span.status {
	color: #a2cfdb;
	height: 65px;
	font-size: 14px;
		display: table-cell;/* to make the vertical align work */
		vertical-align: middle;
}

#twitter_container #twitters span.time {
	display: block;
	font-size: 11px;
	font-style: italic;
	margin-right: 50px;
	margin-top: 10px;
	text-align: right;
}

#twitter_container #twitt_loader {
	display: inline;
	float: left;
	margin: 15px 0px 0px 15px;
}

#twitter_container #twitt_loader img {
	margin: 0px 7px 0px 0px;
}

/*-- Footer Bottom --*/

#footer #footbottom {
	clear: both;
	color: #52747d;
	width: 880px;
	border-top: 1px solid #445d62;
	font-size: 11px;
	padding: 10px 0px 0px;
}

#footer #footbottom #copyrights {
	display: inline;
	float: left;
	width: 400px;
}

#footer #footbottom #quotebox {
	display: inline;
	float: right;
	width: 450px;
	text-align: right;
}

#footer #footbottom #quotebox p span.author {
	font-style: italic;
	color: #c0dcdf;
}