/* 
Title: Racine Web Works CSS
Ver: 2.0
Date: August 2009
Author: jesse@racinewebworks.com

#################################

colors:
red: ac162e, 9e1122
gray: a3a3a3
tan: c0af81
lt.tan: efead8 (hyperlinks)
*/

/* general styles 
#################################*/

body {
	background: url(/img/black_header_tan.gif) top left repeat-x #fff;
	color: #000;
	font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;	
	}
p {
	font-size: 1.3em;
	}
#footer p {
	font-size: 1em;
	}
a:link 	{
	color: #ac162e;
	text-decoration: none;
	}
a:visited {
	color: #ac162e;
	text-decoration: none; 
	}
a:hover {
	color: #ac162e;
	border-bottom: 1px dotted #aea997;
	}
a:active {
  	outline:none;
	}
:focus {
  	-moz-outline-style:none;
	}
#header h1, #header h2 {
	margin-top: 0;
	color: #ac162e;
	font-size: 2.4em;
	font-family:Helvetica, Arial, sans-serif;
	letter-spacing: 1px;
 	}
#header h1 a:hover, #header h2 a:hover {
	color: #ac162e;
	text-decoration: underline;
	border: none;
	}
#header p {
	margin: 0;
	padding: 0;
	font-size: 1.2em;
	font-style:italic;
	color: #574c40;
 	}
#header {
	margin-top: 100px;
	border-bottom: 4px solid  #a3a3a3;
	padding-bottom: 20px;
	}
#body_index #header { /* take it off the homepage */
 	border-bottom: none;
	}

/* main nav  
#################################*/

ul#nav { 	
	margin: 0;
	padding: 0;
	float: left;
	font-size: 1.2em;
	font-weight: bold;	
	}
#nav li {
	margin: 0;
	padding: 0;
	float: left;
	list-style-type: none;	
	}
#nav a {
	float: left;
	width: 70px;
	margin-right: 10px;
	text-align: right;
	color: #ac162e;
	text-decoration: none;
	text-transform:lowercase;
	font-weight: bold;
	}	
#nav_contact a {
	border-right: none;
	margin-right: 0;
	}
#nav a:hover {
	color: #ac162e;
	text-decoration: underline;
	border: none;
	}
#body_index #nav_index a, #body_work #nav_work a, #body_about #nav_about a, #body_contact #nav_contact a, #body_weblog #nav_weblog a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
	}  

/* footer nav
#################################*/

ul#footer_nav { 	
	margin: 0;
	padding: 0;
	float: left;
	font-size: .95em;
	font-weight: bold;	
	}
 #footer_nav li {
	margin: 0;
	padding: 0;
	float: left;
	list-style-type: none;	
	}
#footer_nav a {
	float: left;
	width: 70px;
	margin-right: 10px;
	text-align: left;
	color: #ac162e;
	text-decoration: none;
	text-transform:lowercase;
	font-weight: bold;
	}	
#nav_contact a {
	border-right: none;
	margin-right: 0;
	}
#footer_nav a:hover {
	color: #ac162e;
	text-decoration: underline;
	border: none;
	}
#body_index #footer_nav_index a, #body_work #footer_nav_work a, #body_about #footer_nav_about a, #body_contact #footer_nav_contact a, #body_weblog #footer_nav_weblog a {
	color: #000;
	font-weight: bold;
	}  
.thanks {
	color: #ccc;
	font-style: italic;
	}

/* page specific tweaks 
#################################*/

#body_index #featured_work img {
	float: right;
	margin: 10px 10px 0 0;
	border: 1px solid #a3a3a3;
	}
#body_index #featured_work p, #body_index #featured_work h4 {
	padding-right: 350px;
	clear:left;
	}
#body_index #header form {
	margin-bottom: 0;
	}
#search_box form {
	margin-bottom: 0;
	}
#search_box {
	margin-top: -6px;
	}
#intro.container {
	position: relative;
	}
#intro #greeting p {
	position: absolute;
	top: 0;
	left: 250px;
	padding: 0 15px 0 10px;
	line-height: 2.5;
	font-size: 2.2em;
	}
#intro #greeting p.fancy {
	padding-top: 30px;
	color: #000;
	word-spacing: 1px;
	}
#intro #greeting p a:link {
	color: #ac162e;	
	}
#intro #greeting p a:hover {	
	text-decoration: underline;
	}
h3.code_text. h3.edit_text, h3.design_text, h3.search_text { /* a little sprite action (homepage) */
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	background-color:#fff;
	}
h3.code_text {
	background: #fff url(/img/icons/sprite.png) 0 -64px no-repeat;
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	background-color:#fff;
	}
h3.edit_text {
	background: #fff url(/img/icons/sprite.png) 0 -128px no-repeat;
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	background-color:#fff;
	}
h3.design_text {
	background: #fff url(/img/icons/sprite.png) 0 0 no-repeat;
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	background-color:#fff;
	}
h3.search_text {
	background: #fff url(/img/icons/sprite.png) 0 -192px no-repeat;
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	background-color:#fff;
	}
#body_work #secondary_content p {
	clear: left;
	}
#body_work #secondary_content h3 {
	margin-top: 0;
	}
#body_work #secondary_content img {
	border: 1px solid #a3a3a3;
	}
#body_work #secondary_content p img {
	border: 1px solid #a3a3a3;
	}
ul.services {
	list-style-type: none; 
	margin-left: 0;
	float: left;
	}
ul.services li {
	margin: 7px 0 0 17px;
	padding-left: 20px; display:block;
	float: left;
	}
ul.services li:first-child {
	margin-left: 0;
	}
li.services_Code { /*work page sprites*/
	background: #fff url(/img/icons/sprite_sm.png) 0 -32px no-repeat; 
	height: 16px;
	}
li.services_Copywrite {
	background: #fff url(/img/icons/sprite_sm.png) 0 -64px no-repeat;
	height: 16px;
	}
li.services_Design {
	background: #fff url(/img/icons/sprite_sm.png) 0 0 no-repeat;  
	height: 16px;
	}
li.services_SEO {
	background: #fff url(/img/icons/sprite_sm.png) 0 -96px no-repeat;  
	height: 16px;
	}
li.services_code { /*work page sprites*/
	background: #fff url(/img/icons/sprite_sm.png) 0 -32px no-repeat; 
	height: 16px;
	}
li.services_edit {
	background: #fff url(/img/icons/sprite_sm.png) 0 -64px no-repeat;
	height: 16px;
	}
li.services_design {
	background: #fff url(/img/icons/sprite_sm.png) 0 0 no-repeat;  
	height: 16px;
	}
li.services_search {
	background: #fff url(/img/icons/sprite_sm.png) 0 -96px no-repeat;  
	height: 16px;
	}

#body_about #secondary_content #profile {
	position: relative;
	}
#body_about #secondary_content p#quote {
	position: absolute;
	top: 5px;
	left: 20px;
	padding: 0 50px 0 10px;
	line-height: 2.5;
	font-size: 2.2em;
	}
#body_about #secondary_content p#quote.fancy {
	color: #000;
	word-spacing: 1px;
	} 
/*h2#feed {
	height: 40px;
	width: 250px;
	padding-top: 15px;
	margin-bottom: -5px;
	background: url(/img/Feed.png) 185px 8px no-repeat;
	}

h2#tweet {
	height: 40px;
	width: 200px;
	padding-top: 15px;
	margin-bottom: -5px;
	background: url(/img/twitter.png) 110px 8px no-repeat;
	}*/

/*sticky footer 
#################################*/

html, body, #wrapper {
	height: 100%;
	}

body > #wrapper {
	height: auto; 
	min-height: 100%;
	}
#main_content {
	padding-bottom: 200px;/* must be same height as the footer */
	}  
#footer {
	position: relative;
	margin-top: -200px; /* negative value of footer height*/
	height: 200px;
	clear:both;
	background-color:#c0af81;
	} 
.clearfix_footer:after { /* clear fix for footer*/
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
.clearfix_footer {
	display: inline-block;
	}
/* Hides from IE-mac \*/
* html .clearfix_footer { 
	height: 1%;
	}
.clearfix_footer {
	display: block;
	}
/* End hide from IE-mac */

/*search box tweaks
#################################*/

input#search {
	width: 126px;
	background: url(/img/search_bkg.gif) 2px 2px no-repeat #fff;
	padding-left: 20px;
	}

/*contact form 
#################################*/

form#freeform ul {
	margin: 0;
	padding: 0;
	}

form#freeform ul li {
	list-style: none;
	padding: 10px 0;
	margin: 0;
	}

form#freeform label {
	display: inline-block;
	width: 80px;
	padding-left: 0;
	font-size: 1.2em;
	}

p#tip {
	font-weight: bold;
	font-size: 13px;
	}

#freeform input, #freeform textarea {
	width: 370px;
	background: #f5f5f5;
	border: 1px solid #eae9e9;
	font-size: 13px;*/
	}

p#submit input {
	width: 50px;
	margin-left: 80px;
	}
form#freeform label.error {
	width: 160px;
	padding-left: 5px;
	margin-left: 5px;
	}

/* jQuery Tools 
#################################*/

/* scrollable */

/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 550px;	
	height:250px;	
	padding:10px 0;	
	background-color:#fff;				
	}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	width:20000em;/* this cannot be too large */	
	position:absolute;
	clear:both;		
	margin-left:10px;
	}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	width:550px;
	}

/* active item */
div.scrollable div.items div.active {
	background-color:#fff;
	}

/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
	}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(/img/arrow/left.png) no-repeat;
	float:left;
	margin:110px 10px 0 10px;
	cursor:pointer;
	font-size:1px;
	}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
	}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
	}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(/img/arrow/right.png);
	clear:right;	
	}

/* navigator */


/* position and dimensions of the navigator 
div.navi {
	margin-left:328px;
	width:200px;
	height:20px;
	}*/


/* items inside navigator 
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(/img/arrow/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
	}*/

/* mouseover state 
div.navi a:hover {
	background-position:0 -8px;      
	}*/

/* active state (current page state) 
div.navi a.active {
	background-position:0 -16px;     
	}*/

/* overlay */

/* the overlayed element */
div.overlay {
	
	/* growing background image */
	background-image:url(/img/overlay/white.png);
	
	/* dimensions after the growing animation finishes  */
	width:656px;
	height:526px;		
	
	/* initially overlay is hidden */
	display:none;
	}

#body_work #secondary_content div.overlay img {
	border: none;
	margin: 28px;
	margin-top: 38px;
	}

/* default close button positioned on upper right corner */
div.overlay div.close {
	background-image:url(/img/overlay/close.png);
	position:absolute;
	right:5px;
	top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
	}
.span-7.last p.fancy {
	margin: 0 0 7px 0;
	padding: 0;
	}