/***************************************************

dropdowndesign.com primary stylesheet

author: cameron ley

last updated: 06/12/09

style guide---

primary colour palate-- 

dark grey 1 (background): #161616

dark grey 2 (link border bottom): #202020

baby blue: #81b6ef

hot pink: #eb2866

off white 1 (text) : #d8d8d8

off white 2 (image borders): #706868

widths and dimentions--

wrapper: 1024px

colum 1: 262px

colum 2: 762px

colum 3: 345px

gutter width: 30px


***************************************************/

/*global styles*/

body {
	background-color:#161616;
	font-family: "Palatino", Georgia, serif;
	font-size:14px;
	line-height:1.25em;
	letter-spacing:0.75px;
	color:#d8d8d8;
	text-transform:lowercase;
}

a {
	color:#81b6ef;
	text-decoration:none;
	border-bottom:1px solid #202020;
}

a:hover {
	border-bottom:1px solid #81b6ef;
}

body p {
	font-weight:300;
}

p {
  margin-bottom: 30px;

}

img {
	padding:3px;
	border:1px solid #706868;
}

.clear {
	clear:both;
}

.bold {
	color:#EB2866;
	font-style:italic;
}

/*layout and structure*/

#wrapper {
	width:1024px;
	margin:auto;
	word-spacing:2px;	
}


#header {
	padding:10px 0px 0px 0px;
	
}

#main_nav {
	margin:40px 0px 20px 262px;
  	width:762px;
	height:102px;
	background:url('../images/nav_divider.gif') repeat-x;
	position:relative;
}

	#main_nav li {
		display:inline;
		width:762px;
	}

	#main_nav li a {
		margin:0px 54px 0px 0px;
		border-bottom:none;
		float:left;
		position:relative;
	}

	#main_nav ul {
		padding:44px 0px 0px 0px;
	}

	#main_content {
		width:762px;
		margin:0px 0px 0px 262px;
	}

#intro {
	float:left;
	width:345px;
}

	#intro .section_title {
		background: url(../images/vertical_divider.gif) repeat-y;
		margin:0px 0px 0px 387px;
		padding:0px 0px 0px 30px;
		min-height:100%;
	
	}

#link_list {
	float:right;
	background: url(../images/vertical_divider.gif) repeat-y;
	padding:0px 30px 0px 30px;
	width:142px;
}

	#link_list h3.section_title {
		margin:0px 0px 30px 0px;
	}

	#link_list li {
		margin:2px 0px 5px 0px;
	
	}

#about_studio, #about_cameron {
	background: url(../images/vertical_divider.gif) repeat-y;
	width: 345px;
	float:right;
	margin: 0px 0px 30px 0px;
	padding:0px 0px 0px 30px;
}

.portfolio_item img.imagery {
	margin:0px 0px 60px 0px;
}

.responsabilities {
	float:left;
	width: 262px;
}

	.responsabilities li {
		font-style:italic;
		margin: 0px 0px 15px 0px;
	}

#footer {
	background-image: url(../images/nav_divider.gif);
	background-repeat:repeat-x;
	padding:20px 0px 0px 0px;
}


/*headers and typography*/

#header h1 {
	width:257px;
	height:51px;
	position:relative;
	padding:0px 0px 20px 0px;
	background:url('../images/divider.gif') repeat-x;
}

	#header h1 span {
		background:url('../images/header.gif') no-repeat;
		position:absolute;
		width:100%;
		height:100%;
	}

#header h2 {
	width:714px;
	height:26px;
	position:relative;
	margin:30px 0px 0px 262px;
}

	#header h2 span {
		background:url('../images/services.gif') no-repeat;
		width:100%;
		height:100%;
		position:absolute;
	}

#header p.read_more {
	margin:40px 0px 0px 262px;
	font-size:18px;
}

#intro .section_title {
	font-size:24px;
}

.work_description {
	background-image:url(../images/vertical_divider.gif);
	background-repeat:repeat-y;
	width:345px;
	float:right;
	padding:0px 0px 0px 30px;
}

.description {
	font-size:11px;
	font-style:italic;
	
}

.section_title {
	font-size:24px;
	font-family:"veranda";
	line-height:1.25em;
	text-transform:lowercase;
}

/*Gilder Levin method for image replacement*/

#main_nav li#home a {
	display:block;
	height:17px;
	width:46px;
	background:url('../images/nav_home.gif') no-repeat 0 0;
	text-indent:-9000px;
}

	#main_nav li#home a:hover {
		background-position: 0 -17px;
	
	}

#main_nav li#about a {
	display:block;
	height:17px;
	width:46px;
	background:url('../images/nav_about.gif') no-repeat 0 0;
	text-indent:-9000px;
}

	#main_nav li#about a:hover {
		background-position: 0 -17px;
	
	}

#main_nav li#work a {
	display:block;
	height:17px;
	width:46px;
	background:url('../images/nav_work.gif') no-repeat 0 0;
	text-indent:-9000px;
}

	#main_nav li#work a:hover {
		background-position: 0 -17px;
	
	}

/*imagery*/

.imagery {
	float:left;
}