/* ---------------------
	Title: One Pica codebase - blank screen stylesheet
	Filename: screen.css
	Author: One Pica Inc, Boston MA
	
	Table of Contents:
		Searchstring (Section Name)				Description
		
		=General (General Styles):				Set font sizes, Page backgrounds, link behaviors, etc
		=Master (Master #container Styles):		Placing, sizing, styling the main container
		=Branding (Branding Styles):			Logos, taglines, branding info
		=Nav (Navigation Styles):				The navigation bar; internal and external
		=Forms (Form Styles)					Set appearance of forms, inputs, buttons, etc
		=Multicol (Multi-Column Styles):		The cases where the content needs to be in multiple columns
		=Content (Content Styles):				The main content of the page
		...Further style sections go here...
		=Footer (Credit/Footer Styles):			The footer
		=Uni (Universal Styles):				Classes and elements that apply throughout ('clear', 'blue', etc)
	
	Common Color Table:
		White:									#FFFFFF;
		Background Blue:						#EFEFFF;
	
	Thanks To:
		CSS structure/commenting: http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
		Markup structure: http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
		Stylesheet searchstring flags: http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
---------------------- */

/* =General
---------------------- 
	General Styles applied to 'normalize' things
	Notes:
		'Em' styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
---------------------- */
html {
	padding: 0;
	margin: 0;
	font-size: 100%; /* Ensures font consistency across browsers */
	height: 100%;
}
body {
	padding: 0;
	margin: 0;
	font-size: 10px; /* Sets base font-size for browsers that resize text correctly */
	line-height: 1.5; /* Sets base leading for lines of text */
	background-color: #FFFFFF;
	font-family: Georgia, serif;
	color:#6D6E71;
	height: 100%;
	background:url('../images/branding/copyright.gif') bottom right no-repeat;
}
p {padding: 0; margin: 0 0 1em 0}

input, select, th, td {font-size: 1em}

h1 {font-size: 2em} /* 24px */
h2 {font-size: 1.5em} /* 18px */
h3 {font-size: 1.1em;
	color:#00B4CC;
	margin:0;
	padding:0;
	} /* 15px */
h4 {font-size: 1em} /* 12px */

img, a img {
	border: none; /* Remove default border on linked images */
}

/* Basic link styles */
a, a:link {
	color: #00B4CC;
	text-decoration: underline;
}
a:visited {
	color: #00B4CC;
}
a:hover, a:active {
	color: #EAE827;
	text-decoration: underline;
}
.arrowlink {
	font-weight:bold;
	background:url('../images/branding/arrow.gif') 0px 5px no-repeat;
	padding-left:11px;
}
.arrowlink:hover {
	background:url('../images/branding/arrow_on.gif') 0px 5px no-repeat;
}
/* =Master
---------------------- 
	Master Container
	Notes:
		margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
	position: relative;
	margin: 0px auto;
	padding: 0;
	width: 850px;
	font-size: 1em; /* 10px (based on value from body) */
	text-align: left; /* Normalize alignment; unfix all browsers from fix in IE stylesheet */
	border:0px solid blue;
}

/* Skip link: This is the very first link anywhere on the page; by tabbing to it or hitting accesskey 2, a user can skip the header/navigation of a page and go directly to the page content. It is normally 'hidden' by being positioned far, far off the page; bringing it into focus with Tab makes it visible. */
	#skiplink a {
		position: absolute;
		top: -1000px;
		left: -2000px;
	}
		#skiplink a:focus, #skiplink a:active {
			position: absolute;
			margin: 0;
			top: 0;
			left: 0;
			display: block;
			padding: 0;
			background: #000;
			color: #fff;
			font-weight: bold;
		}
		#skiplink a:hover { 
		}

/* =Branding
----------------------
	Branding styles: Usually the logo and tagline
	Notes:
		Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
	
}
	#branding-logo {
		cursor: pointer;
		width: 850px;
		height:149px; /* Set dimensions once here, and use 100% for all dimensions in both rules below */
		
	}
		#branding-logo h1 {
			text-indent: -5000px;
			overflow: hidden;
			background:url('../images/branding/onepica_logo.gif') no-repeat;
			width: 100%;
			height: 100%;
			line-height: 1;
			padding: 0;
			margin: 0; /* Change this */
		}
			#branding-logo h1 a {
				display: block;
				width: 100%;
				height: 100%;
			}
	#branding-tagline {
			width: 850px;
			height: 51px; /* See branding-logo above */
	}
		#branding-tagline h2 {
			text-indent: -5000px;
			overflow: hidden;
			background:url('../images/branding/onepica_title.gif') no-repeat;
			width: 100%;
			height: 100%;
			line-height: 1;
			padding: 0;
			margin: 0; /* Change this */
		}
	#branding-info {
	}

/* =Nav
----------------------
	Navigation styles
	Notes:
		Navigation belongs in an UL tag with <ul><li><a></a></li></ul> as the markup scheme.
		Keep each of the below #elements as divs, and put the UL inside them
		If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
---------------------- */
#nav {
}
	#nav-main {
	}
	#nav-section {
	}
	#nav-external {
	}

/* =Forms
----------------------
	Form styles
	Notes:
		A <p></p> should always enclose every label-input (or label-select) pair.
		Widths are in % to start, so that they scale, but they are the attributes most likely to change.
		Remember -- the IE stylesheet has different percentage widths to start.
---------------------- */
form {
	display: block;
	margin: 18px 0 0 0;
	padding: 0;
	width: 100%;
	font-size: 0.9em;
}
	fieldset {
		border: 0px solid;
		padding: 0;
		margin: 0 0 1.4em 0;
	}
	form p {
		display: block;
		clear: both;
		margin: 0 0 0.4em 0;
		padding: 0;	
	}
		form label {
			display: inline;
			float: left;
			width: 34%;
			padding: 0 5% 0 0;
			margin: 0;
		}
		form input, form select, form textarea {
		   margin: 0;
		   padding: 0;
		   width: 59.2%; /* CLOSE to full width; use pixels for the real thing */
		   font-size: 1em;
		   border: solid 1px #999;
		   border-bottom-color: #ccc;
		   background-color: #fff;
		   /*font-family: Tahoma, sans-serif;*/
		   font-family: Georgia, serif;
		}
		form input {height: 1.3em}
		form select {width: 59.5%; height: 1.5em}  /* Selects are not the same as inputs */
		form textarea {height: 6em}
		
		/* Radio buttons */
		form input.radio, form input.radiobtn {
			text-align: left;
			width: 1.3em;
			margin: 0.3em 0.2em 0 0;
			padding: 0;
			border: none;
			background: none;
		}
		form .radiotext {
			margin: 0 1em 0 0;
		}
		
		/* Check boxes */
		form input.ckbx, form input.checkbox {
			text-align: left;
			width: 1.2em;
			margin: 0.3em 0.2em 0 0;
			padding: 0;
			border: none;
			background: none;
		}
		
	form p.indent { /* For buttons or text that need to align with inputs/selects */
		margin-left: 40%;
	}
	form p.xspa { /* "extra space after" */
		margin-bottom: 2.0em;
	}
	form .req, form .required {
		color: red;
	}
	form input:focus {
		/* however we want the focused field to look */
	}
	form input.submit, button { /* There are lots of default values to fix */
		border: 3px double #999;
		border-top-color: #ccc;
		border-left-color: #ccc;
		padding: 1px 2px;
		background: #f6f6f6;
		color: #555;
		font-size: 0.9em;
		font-weight: bold;
		height: auto;
		width: auto;
		cursor: pointer;
		font-family: inherit;
	}
	form input.submit:hover, button:hover { /* IE6 can't see these, too bad */
		color: #fff;
		background-color: #ff0000;
	}
	form input.submit:active, button:active { /* Button 'feedback' behavior */
		border: 3px double #ccc;
		border-top-color: #999;
		border-left-color: #999;
	}
	form .contact-btn {
		border: none;
		padding: 0;
		margin: 0;
		
		height: 20px;
		width: 70px;
		background: url("../images/inline/contact_sendit.gif") top left no-repeat;
	}
	form .contact-btn:hover {
		background: url("../images/inline/contact_sendit_over.gif") top left no-repeat;
	}
	form input.leftout {
		background: #FF5F5F;
	}
	.err {
		color: #FF5F5F;
		margin-top:14px;
	}
	
/* =Multicol
----------------------
	Multi-Column Content styles
	Notes:
		These columns should be used for text within #content.
		Values are in percentages to start off -- remember that the IE stylesheet has different values.
		If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
.twoColumnLayout {
	width: 47%;
	float: left;
	clear: none;
}
	.twoColumnLeft {
		margin-right: 5%;
	}
.threeColumnLayout {
	width: 30%;
	float: left;
	clear: none;
}
	.threeColumnLeft {
		margin-right: 4%;
	}
	.threeColumnMiddle {
		margin-right: 4%;
	}
	.threeColumnRight {
		margin-right: 0;
	}

/* =Content
----------------------
	Main Content styles
	Notes:
		
		Font-size is inherited, so some math will be necessary to size child elements up or down correctly
---------------------- */
#content {
	margin-top:10px;
	clear:both;
	font-size: 1em; /* Inherits 12px from #container */
	position: relative;
}
	#content-main {
	}
	#content-news {
	}

.leftCol {
	float:left;
	width:182px;
	margin:21px 32px 0 0;
	border-top:1px solid #EAE827;
	font-size:1.1em;
	text-align:right;
}
.leftCol p{
	padding:8px 0 8px 0;
	border-bottom:1px solid #EAE827;
}

.rightCol {
	float:left;
	width:636px;
	padding:0px 0 0 0;
	text-align:right;
}
.rightColSubpage {
	float: left;
	text-align: left;
	width: 604px;
	_width: 600px;
	padding: 20px 15px 20px 15px;
	border: 1px solid #CCCCCC;
	height: auto !important;
	height: 330px;
	min-height: 330px;
	position: relative;
}
.rightCol p, .rightColSubpage p{
	font-size:1.2em;
	margin:0 0 6px 0;
	padding:0;
}
#recentwork {
	background:url('../images/branding/recent_work.gif') 0px 0px no-repeat;
	height:238px;
	padding:21px 0 0 0;
	position:inherit;
	display: block;
	width: 100%;
	float: right;
}
#recentwork .projectbutton {
	width: 206px;
	float:right;
	margin:0 9px 0 0;
}
#recentwork .first {
	margin:0;
}
#recentwork a {
	border:1px solid #CCCCCC;
	height:56px;
	display:block;
	padding:2px;
}
#recentwork .rowtwo {
	display:block;
	margin-top:14px;
}
/*
#recentwork a .plus {
	width:15px;
	height:15px;
	line-height:1px;
	background:url('../images/branding/plus.gif') 4px 4px no-repeat #00B4CC;
	position:absolute;
	bottom:0;
	right:0;
	margin:0 3px 3px 0;
	border-left:1px solid white;
	border-top:1px solid white;
}
#recentwork a:hover .plus {
	background-color:#EAE827;
}
*/
#recentwork a:hover{
	border:1px solid #EAE827;

}
#content .small1{
	font-size:1.1em;
	margin:0;
}
#content .small2{
	font-size:1.1em;
	color:#AAAAAA;
	margin:0 0 15px 0;
	}
.phonenumber {
	float:right;
	width:144px;
	height:25px;
	background:url('../images/branding/phonenumber.gif') no-repeat;
	}
/* =POPUP window */
.popup {
	width:832px;
	xheight:273px;
	padding:8px;
	border:1px solid #CCCCCC;
	position:absolute;
	top:210px;
	left:0;
	z-index:100;
	background:#FFFFFF;
	font-size:1.2em;
	line-height:1.6em;
}
.popup img {
	float:left;
	margin-right:15px;
}
.popup .content {
	float:left;
	margin:10px 19px 0 15px;
	border:0px solid green;
	width:385px;
	height:300px;
	}
.popup a.close {
	width:15px;
	height:15px;
	line-height:1px;
	background:url('../images/branding/close.gif') 4px 4px no-repeat #00B4CC;
	float:right;
	bottom:0;
	right:0;
	margin:0 -4px -4px 0;
	border-left:1px solid white;
	border-top:1px solid white;
}
.popup a.close:hover {
	background-color:#EAE827;
}
.popup .twoColumn {
	width:45%;
	float:left;
	margin-right:15px;
}
.large {
	font-size:1.3em;
	font-weight:bold;
	}
/* =Footer
----------------------
	Credit/footer styles: Usually the copyright/company info
	Notes:
---------------------- */

#siteinfo {
	background: url('../images/branding/phonenumber.gif') right 0 no-repeat;
	width: 350px;
	float: right;
	text-align: right;
	padding: 25px 0 0 0;
	margin: 32px 0 0 0;
}
	#siteinfo p {
		font-size: 14px;
		line-height: 18px;
		color: #aaaaaa;
		margin: 0;
	}
	#siteinfo ul {
		list-style: none outside;
		font-weight: bold;
		float: right;
		margin: 0;
		padding: 0;
	}
		#siteinfo ul li {
			margin: 0 0 2px 0;
			float: left;
			display: inline;
			padding: 0 0 0 10px;
		}
			#siteinfo ul li#current {
			}
			#siteinfo ul li a {
				font-size: 1.4em;
				line-height: 1.4em;
				color: #00b4cc;
				text-decoration: none;
				background: url('../images/icons/li_icon_footer.gif') 0 center no-repeat;
				padding-left: 12px;
			}
				#siteinfo ul li a:hover {
					text-decoration: underline;
					background: url('../images/icons/li_icon_footer_over.gif') 0 center no-repeat;
					color: #EAE827;
				}
				
	
.sidelinks a {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.4em;
	color: #00b4cc;
	text-decoration: none;
	background: url('../images/icons/li_icon_footer.gif') center right no-repeat;
	padding-right: 12px;
}
	.sidelinks a:hover {
		text-decoration: underline;
		background: url('../images/icons/li_icon_footer_over.gif') center right no-repeat;
		color: #EAE827;
	}


/* =Uni
----------------------
	Universal styles: Styles that apply to elements found throughout the site
	Notes:
		The best example of this is the "clear" div
---------------------- */
.clear {
	clear: left;
	/* Try adding any/all of these if clear divs aren't working right:
	height: 1%;
	width: 100%;
	font-size: 1%;
	line-height: 1;
	clear: both;
	*/
}
.bold {font-weight: bold}
.em {font-style: italic}
.dark{color:#404041;}

div.left-col {
	float: left;
	width: 48%;
	margin-top:10px;
}
div.right-col {
	float: left;
	width: 49%;
	margin-left: 3%;
	margin-top:10px;
}
div.full-width {
	float: left;
	margin: 10px 0 0 0;
	width: 100%;
}
div.full-width label {
	width: 113px;
	margin: 0;
	padding: 0;
}
div.full-width textarea {
	width: 485px;
	_width: 482px;
	margin: 0;
}
p.emphasis {
	display: inline;
	font-size: 18px;
	font-weight: bold;
	margin: 0 15px 20px 0;
}
p.emphasis.blue {
	color:#00B4CC;
}

.clientspgs {
	position:absolute;
	margin-top:-3000px;
}

#closeButton {
	position: absolute;
	right: 3px;
	bottom: 3px;
	}
#closeButton a {
	display: block;
	height: 15px;
	width: 15px;
	background: url("../images/inline/blue_close.gif") top left no-repeat;
}
#closeButton a:hover {
	background: url("../images/inline/blue_close_over.gif") top left no-repeat;	
}