/*
	CSS for pjmacklin.com
	author: PJ Macklin
*/


/* Page Structure */

html{
	-webkit-font-smoothing: antialiased;
}

body {
	font-size: 100%;
	font:normal 1em/1.25 "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Georgia",serif;
	color: #565656;
/* 	background:transparent url('/images/grid.gif') 50% 0 repeat-y; */
	margin:0;
	padding:0;
}

#page{}

#header{
	border-top:.25em solid #34c4ae;
	height:4.688em; /* 80px/16 = 5 | 75px/16 = 4.6875 */
	border-bottom:1px solid #dddddd;
	
}

#content{
	margin:0 auto;
	width:942px; /* 940px/16 = 58.75 */
}

#footer{
	border-top:1px solid #dddddd;
	margin:0 auto;
	width:58.75em; /* 940px/16 = 58.75 */
}

/* Navigation */

#nav{
	margin:0 auto;
	padding:0;
	width:58.75em; /* 940px/16 = 58.75 */
}

#nav li{
	list-style-type:none;	
}

#nav li ul{
	text-align: right;
	display:block;	
	padding-top:39px; /* 43px/16 = 2.6875 */
}

#nav li a{
	margin-right:1.538em;/* 20px/21 | 20/13px = 1.538*/
	vertical-align:baseline;
	margin-top:3.37em; /* 6px/21=.286 | 34px/13 = 2.538 */
	color:#565656;
	text-decoration: none;
/* 	height:1.429; /* 30px/21 = 1.429 */ 
	font:bold .8125em/.952 "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",georgia,serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	outline:none;
	display: block-inline;
	float:left;
	}

#nav li a#logo-type{
	font:normal 2.125em/.588 "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",georgia,serif;
	color:#34c4ae;
	letter-spacing: 0;
	text-transform: none;
	outline:none;
	margin-top:.294em;
/* 	width: 480px; */
	margin-right: 0;
}

#nav li a#logo-type span{
	display:block;
	font:bold .3824em "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",georgia,serif;
	text-transform: uppercase;
	letter-spacing: .25em;
	color:#aaaaaa;
}
#nav li ul li{
	display:inline;
	margin-top:3.37em; /* 6px/21=.286 | 34px/13 = 2.538 */
}
#nav li ul li a{
	float:none;
	display:inline;
	margin-right:0;
	padding:3px 8px;
	background-color:#ffffff;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-khtml-border-radius: 12px;
	-webkit-transition:all .5s ease-out;
}

#nav li ul li a:hover{
	color:#ffffff;
	background-color:#34c4ae;
	-webkit-transition:all .5s ease-out;
}

#nav li ul li a#contact{
	margin-right:0;
}

.work #nav li ul li a#work, .contact #nav li ul li a#contact{
	color:#ffffff;
	background-color:#34c4ae;
}

#content #portfolio-thumbs{
	overflow: hidden;
	margin-top:40px;
}

#content #portfolio-thumbs .thumb{
	width:220px;
	float:left;
	margin-right:20px;
	text-align:center;
	margin-bottom: 20px;
}
#content #portfolio-thumbs .fourthumb{
	margin-right:0 !important;
}

#content #portfolio-thumbs .thumb a:hover{text-decoration: none;}

#content #portfolio-thumbs .thumb a img{
	border:1px solid #ddd;
	-webkit-transition:all 1s ease-out;
	opacity:1;
	margin-bottom:5px;
}
#content #portfolio-thumbs .thumb a:hover img{
	border:1px solid #34c4ae;
	opacity:.75;
	-webkit-transition:all .5s ease-out;
}

#content #portfolio-thumbs .thumb a span{
	text-align:center;
	margin-top:5px;
	padding:0 5px;
	color:#565656;
	/*-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;*/
	-webkit-transition:all .5s ease-out;
}
#content #portfolio-thumbs .thumb a:hover span{
	color:#34c4ae;
	-webkit-transition:all .5s ease-out;
}

#portfolio-piece{
	overflow: hidden;
	border-top:1px solid #ddd;
	margin-top:0px;
	padding-top:30px;
}

#portfolio-piece #details{
	width:440px;
	float:left; /* 460/16 = 28.75em; */
}

#portfolio-piece #portfolio-image{
	width:28.75em; /* 460px/16 = 28.75 */
	float:right;
	padding:0 2px 20px 0;
}

#portfolio-piece #portfolio-image img{
	border:1px solid #ddd;
}

ul#project-nav{
	text-align: center;
	padding-left: 0;
	padding-top: 10px; 
	border-top:2px solid #dddddd;
	margin:10px 0;
}
ul#project-nav li{list-style-type:none;display:inline;}
ul#project-nav li.pipe{padding:0 10px;}
ul#project-nav li a{
	font:normal 16px/20px "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",georgia,serif;
	height:25px;
	display:inline-block;
}

ul#project-nav li #previous-project{
	background:transparent url(/images/ui/left-arrow.gif) 0% 0% no-repeat;
	padding:0 0 0 30px;
}
ul#project-nav li #previous-project:hover{
	background-position: 0% 100%;
}
ul#project-nav li #previous-project:active{
	
}

ul#project-nav li #all-projects{
	background:transparent url(/images/ui/home-icon.gif) 0% 0% no-repeat;
	padding:0 0 0 30px;
}
ul#project-nav li #all-projects:hover{
	background-position: 0% 100%;
}
ul#project-nav li #all-projects:active{

}

ul#project-nav li #next-project{
	background:transparent url(/images/ui/right-arrow.gif) 100% 0% no-repeat;
	padding:0 30px 0 0;
}
ul#project-nav li #next-project:hover{
	background-position: 100% 100%;
}
ul#project-nav li #next-project:active{

}

#page #content .contact-threecol{
	width:280px;
	float:left;
	margin-right:20px;
	padding:0 10px;

}

#page #content .contact-twocol{
	width:600px;
	padding:0 10px 0 330px;
}

/* Typography */
a{
	color:#34c4ae;
	text-decoration: none;
/* 	border-bottom:1px dotted #34c4ae; */
	-webkit-transition:color .5s ease-out;
}
a:hover{
	color:#347bc4;
/* 	border-bottom:1px solid #347bc4; */
	-webkit-transition:color .5s ease-out;
	text-decoration: underline;
}

h3{
	margin:10px 0;
	font-size:21px;
	}

#page #content p{
	margin:0 0 20px;

}

#page #content h1{
	font:bold 2.625em/.952 "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Georgia",serif;
	color:#565656;
	text-align:center;
	margin:20px 0;
}

#page #content h2{
	font:italic 1.625em/.882 "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Georgia",serif; 
	color:#999999;
	text-align:center;
	margin:-10px 0 20px 0;
}
#page #content h2 .arrow-circle{
	/*padding:5px;
	-moz-border-radius: 20px;
	-khtml-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	background-color:#999999;
	height:20px;
	width:20px;
	display:inline-block;*/
}


#page #content dl{
	margin:20px 0px;
	background-color:#f4f4f4;
	border:1px solid #dddddd;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;	
	border-top:1px solid #dddddd;
}

#page #content dl.contact-list{
	width:280px;
	}
#page #content dt{
	font:bold 13px/20px "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Georgia",serif;
	color:#000000;
	text-shadow: 0px 1px 0 #ffffff;
	float:left;
	width:130px;
	padding:5px 10px 5px 10px;
	text-align:right;
	
}
#page #content dd{
	font:normal 13px/20px "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Georgia",serif;
	color:#414141;
	text-shadow: 0px 1px 0 #ffffff;
	margin:0;
	padding:5px 0;
	border-bottom:1px solid #dddddd;
}

#page #content dd.bullet{
	margin-right:10px;
	font-size:6px;
	color:#787878;
	padding-bottom:3px;
	position:relative;
	bottom:0px;
	float:left;
	border:none;
	}

#page #content dl.contact-list dt{
	width:60px;
	
}



#page #content dt.no-border{border:0;}
#page #content dd.no-border{border:0;}