/* CSS 2.1
Author: Ryan R Smith
Website: http://ratioswitch.com
Email: ryan (@) ratioswitch (.) com
Date: 9/17/2007
Modified: 8/10/2010
Version: 1.3
*/

body {background-color: #d5e4f3; /*#b2c2d2, #e5e5e5 ... don't forget to also match the footer bkgd color */}
div.yui-gd, div.yui-ge, div#content, div#ft {padding: 0 20px 10px 20px;} /* div.yui-gc, div.yui-u */
div.pad {padding: 0 20px;} /* This padding is set so that yui-g can full bleed */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Headlines - Standard Font Styles */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#tmplt { /* Base Font */
	font: 13px/1.4 "Lucida Grande", "Lucida Sans", Helvetica, sans-serif;
	}
#tmplt h1 {
	font: 180%/1.5 "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	color: #369;
	}
#tmplt h2 {
	font: 120%/1.4 "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	color: #f90;
	letter-spacing: 0.1em;
	}
#tmplt h3 {
	font: bold 130%/1 "Lucida Grande", "Lucida Sans", Helvetica, sans-serif;
	color: #369;
	margin-bottom: 0.4em;
	}
#tmplt h4 {
	font: bold 110%/1 "Lucida Grande", "Lucida Sans", Helvetica, sans-serif;
	color: #369;
	margin-bottom: 0.2em;
	}
#tmplt h5 {
	font: 120%/1 "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;
	color: #f90;
	margin: 1em 0 0.5em 0;
	}
#tmplt h6 {
	font: 110%/1.4 "Lucida Grande", "Lucida Sans", Helvetica, sans-serif;
	color: #369;
	}
#tmplt p {
	font: 100%/1.6 "Lucida Grande", "Lucida Sans", Helvetica, sans-serif;
	color: #3c3c3c;
	margin-bottom: 0.7em;
	}
#tmplt p strong {font-weight: bold;}

p#breadcrumb {margin-bottom: 1.5em; font: 90%/1.4 "Lucida Grande", "Lucida Sans", Helvetica, sans-serif; color: #999;}

a:link, a:visited {color: #369; text-decoration: underline;}
a:hover, a:active {color: #f90; text-decoration: underline;}

#tmplt h1 a:link, #tmplt h1 a:visited, #tmplt h1 a:hover, #tmplt h1 a:active {text-decoration: none;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* YOU ARE HERE */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body#homepage li#home a:link, body#homepage li#home a:visited, body#homepage li#home a:hover, body#homepage li#home a:active,
body#aboutpage li#about a:link, body#aboutpage li#about a:visited, body#aboutpage li#about a:hover, body#aboutpage li#about a:active,
body#blogpage li#blog a:link, body#blogpage li#blog a:visited, body#blogpage li#blog a:hover, body#blogpage li#blog a:active,
body#portfoliopage li#portfolio a:link, body#portfoliopage li#portfolio a:visited, body#portfoliopage li#portfolio a:hover, body#portfoliopage li#portfolio a:active,
body#servicespage li#services a:link, body#servicespage li#services a:visited, body#services li#services a:hover, body#servicespage li#services a:active,
/*body#uxpage li#ux a:link, body#uxpage li#ux a:visited, body#ux li#ux a:hover, body#uxpage li#ux a:active,*/
body#partnerspage li#partners a:link, body#partnerspage li#partners a:visited, body#partnerspage li#partners a:hover, body#partnerspage li#partners a:active,
body#contactpage li#contact a:link, body#contactpage li#contact a:visited, body#contactpage li#contact a:hover, body#contactpage li#contact a:active
	{color: #f90; text-decoration: overline; cursor: default;}

#tmplt h2 a:link, #tmplt h2 a:visited,
#tmplt h3 a:link, #tmplt h3 a:visited,
#tmplt h4 a:link, #tmplt h4 a:visited,
#tmplt h5 a:link, #tmplt h5 a:visited,
#tmplt h6 a:link, #tmplt h6 a:visited,
#tmplt p a:link, #tmplt p a:visited {text-decoration: underline;}

#tmplt h2 a:hover, #tmplt h2 a:active,
#tmplt h3 a:hover, #tmplt h3 a:active,
#tmplt h4 a:hover, #tmplt h4 a:active,
#tmplt h5 a:hover, #tmplt h5 a:active,
#tmplt h6 a:hover, #tmplt h6 a:active,
#tmplt p a:hover, #tmplt p a:active {text-decoration: underline;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Special Styles */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
hr {margin: 0.5em 0;}
hr.clear_divider {clear: left; display: none;}
em {font-style: italic; font-weight: bold;}
.f_l {float: left; padding-right: 0.6em;}
.f_r {float: right; padding-left: 0.6em;}
/*.registered. sup.registered {font-size: 60%;}*/
#tmplt .exclaim, #tmplt p.exclaim, #tmplt em.exclaim, #tmplt span.exclaim {color: #900;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Logo */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#logo {margin: 0 auto; padding: 1em 0 0.25em 20px; background-color: #fff;}
#logo p {line-height: 1.4em; color: #369;}
#logo h1 a:link, #logo h1 a:visited {font: bold 150%/1 Helvetica, "Century Gothic", "Trebuchet MS", sans-serif; text-transform: lowercase; letter-spacing: 0.1em;  margin: 0;}
/* NO LONGER IN USE, 2010_0810: #logo h1 span {position: relative; top: 0.3em; letter-spacing: 0.2em; color: #f90;}  asterisk */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Navigation and Left Content*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
ul#nav {margin: 1em 0; padding: 0 0.5em 0 20px;}
ul#nav li {display: inline; font: bold 140%/1.5 "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;}
ul#nav li a:link, ul#nav li a:visited, ul#nav li a:hover, ul#nav li a:active {padding: 0 0.5em 0 0; text-decoration: none;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Content and Side Content */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#doc {background-color: #FFF;}
img.liquimage {margin-bottom: 1em; width: 100%; overflow: hidden;}
div.full_bleed {margin: 0; padding: 0;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*PHOTO CREDIT - HOMEPAGE*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*
h6#photo_credit a:link, h6#photo_credit a:visited {margin: 0 .5em 0 0; position: relative; bottom: 2em; float: right; font: 80%/1.4 "Lucida Grande", "Lucida Sans", Helvetica, sans-serif; text-align: right; color: #9cf;}
h6#photo_credit a:hover, h6#photo_credit a:active {color: #fff;}*/

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*CONTACT	*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#contactpage .yui-gb .yui-u #widgets, 
#contactpage .yui-gc .yui-u #widgets, 
#contactpage .yui-gd .yui-u #widgets {
	margin-left: 1% !important;
	width: 33% !important;
}

form#mycontact {margin-top: 1.5em;}
form#mycontact p {margin-bottom: 0.75em; color: #222;}
form#mycontact fieldset {margin: 1em 0; padding: 1em; border: 1px solid #ccc; background: #f8f8f8;}
form#mycontact legend {color: #666; font-weight: bold;}
form#mycontact label {display: block;}
form#mycontact input.formbox {width: 200px; padding: 0.25em;}
form#mycontact textarea {width: 99%; height: 100px;}
form#mycontact input[type="text"] {width: 200px;}
input#send, input#reset {padding: 0.4em;}
input:focus, textarea:focus {background-color: #ffc;}
p.myform {margin-top: 1em; }
.required, .warning {color: #900;}
.good_to_go {color: #090;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*SIDEBAR*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#side_content {padding: 0.5em 0.5em 0 0.5em;}
#side_content img {margin-bottom: 1em; border: 1px solid #666;}

.yui-u .side_box					{margin: 1em 0;}
.yui-u .side_box .top			{margin: 0 0 1em 0;}
.yui-u .side_box .bottom	{margin: 1em 0 0 0;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*PORTFOLIO*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a.portfolio_image {margin-bottom: 1.5em;}
p.split_p {width:48%;}
#portfoliopage div.divider {
	margin-bottom: 1.25em;
	width: 100%;
	height: 1px;
	background: #fff url(/css/images/divider.gif) repeat-x scroll left;
	color: #ccc;
	}
#portfoliopage div.divider hr {display: none;}	
	
#portfoliopage ul#screenshots {margin-top: 5px;}
#portfoliopage ul#screenshots li {margin-bottom: 1.25em;}
#portfoliopage ul#screenshots li a {text-decoration: none;}
#portfoliopage ul#screenshots li a img {
	/*padding: 5px; border-top: 1px solid #ccc; border-right: 4px solid #999; border-bottom: 4px solid #999; border-left: 1px solid #ccc; background-color: #eef;*/
	border: 1px solid #999;
	text-decoration: none !important;
	}

ul.support_links {margin: 0; padding: 0; display: inline; list-style-type: none;}
ul.support_links li a {padding: 0.25em 0; padding-left: 20px; line-height: 1.75em;}
ul.support_links li a:link.read_more, ul.support_links li a:visited.read_more,/* {width: 16px; background: url(/css/images/icons/book_open.gif) no-repeat 0 50%;}*/
ul.support_links li a:hover.read_more, ul.support_links li a:active.read_more {width: 16px; background: url(/css/images/icons/book_open.gif) no-repeat 0 50%;}
ul.support_links li a:link.view_site, ul.support_links li a:visited.view_site,/* {width: 16px; background: url(/css/images/icons/world.gif) no-repeat 0 50%;}*/
ul.support_links li a:hover.view_site, ul.support_links li a:active.view_site {width: 16px; background: url(/css/images/icons/world.gif) no-repeat 0 50%;}

ul.project_info {
	margin-left: 20px;
	list-style-image: url(/css/images/icons/bullet_blue.gif);
	}
ul.project_info li p {
	font: 100%/1.25 "Lucida Grande", "Lucida Sans", Helvetica, sans-serif;
	color: #3c3c3c;
	margin-bottom: 0.7em;
	}
.team_members {margin-bottom: 1em;}
.team_members strong {font-weight: bold;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* FOOTER */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#ft {
	float: left;
	height: 2.5em;
	margin: 1em 0;
	padding: 0;
	font: 80%/1.4 "Lucida Grande", "Lucida Sans", Helvetica, sans-serif;
	color: #666;
	background-color: #d5e4f3;
}

#ft ul {padding-left: 0px;}
#ft li {display: inline; font-size: 10px;}
#ft-legal {float: left;}
#ft-links {float: right;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* MISC STYLING */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.borderHide {border: 1px solid #FFF !important;}
.center {text-align: center;}
.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 */

.hide {height: 0px !important; display: none !important; visibility: hidden;}