/*  
Theme Name: Express Yourself
Theme URI: http://jasonthings.com/freelance
Description: Theme for Puremotif full site, in Wordpress
Version: 1.0
Author: Jason Rhodes
Author URI: http://jasonthings.com/freelance
*/

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

CSS Reset built on Elliot Jay Stocks' STARKERS CSS reset.

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

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; }
ol, ul, li { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 { font-size:100%; }
q:before, q:after { content:''}
a { text-decoration:none; ; outline: none; }

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */
p { margin: 0 0 1.2em 0; }
td { padding: 5px; }

.clear { clear: both; } /* For clearing floats, sad but true */

.post ul, .entry ul { padding-left: 30px; margin-bottom: 1.5em; }
.post ul li, .entry ul li { list-style: disc; }

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

Styles

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


#buttons a {
	display: block;
	text-indent: -9999px;
	width: 164px;
	height: 166px;
	float: left;
	margin-top: 30px;
	margin-bottom: 30px;
}
.button_photo { margin-right: 20px; background: url(images/button_photo.jpg) center top no-repeat; }
.button_design { background: url(images/button_design.jpg) center top no-repeat; }

#buttons a:hover { background-position: center bottom; background-color: transparent; }

/* Rachel Styles -- brought over from old style.css to maintain styles in old blog posts, can still be used if you want */

img.alignleft, img[align="left"] {
	float:left;
	margin:2px 10px 5px 0;
}

body {
	font: 100% Lucida Grande, Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-image: url(images/backgroundslice2.jpg);
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	line-height: 150%;
	}

#container {
	padding: 0;
	width: 800px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	}
	
/* Use this class to put some padding around a link and make it feel like a button on hover. */
a.button { padding: 5px 10px; position: relative; left: -10px; } 

a#logo { 
	display: block; 
	height: 160px; 
	text-indent: -9999px; 
	background: url(images/puremotif-newlargelogo2.jpg) center center no-repeat; 
	}
	
/* Main Link Styles */

a { color: #13A1D0; }
a:hover { color: #fff; background-color: #603913; }

/* Nav Styles */

ul#nav { 
	margin: 0; 
	padding: 0; 
	height: 25px;
	width: 800px;
	}
ul#nav a { text-indent: -9999px; display: block; height: 25px; background-position: center top; background-repeat: no-repeat; }
ul#nav a:hover, #container ul#nav .current a { background-position: center bottom; }
ul#nav li { height: 25px; float: left; list-style: none; }
	
ul#nav .photo a { width: 172px; background-image: url(images/nav/navsprite-photo.jpg); }
ul#nav .design a { width: 84px; background-image: url(images/nav/navsprite-design.jpg); }
ul#nav .blog a { width: 67px; background-image: url(images/nav/navsprite-blog.jpg); }
ul#nav .about a { width: 78px; background-image: url(images/nav/navsprite-about.jpg); }
ul#nav .contact a { width: 100px; background-image: url(images/nav/navsprite-contact.jpg); }
ul#nav .vendors a { width: 98px; background-image: url(images/nav/navsprite-vendors.jpg); }
ul#nav .onlineproof a {width: 201px; background-image: url(images/nav/navsprite-onlineproof.jpg);  }

/* END Nav Styles */

h1 {
	font-size: 14px;
	color: #4D2B10;
	}
	
	#news h1 { color: #4e2a10; font-size: 18px; font-weight: normal; font-family: Trajan Pro, Georgia, Times New Roman, serif; }
	#single-content h1 { color: #4e2a10; font-size: 18px; font-weight: bold; font-family: Times New Roman, Georgia, serif; }

	
h2 {
	font-size: 12px;
	color: #13A1D0;
	}
	
body,td,th {
	color: #4E2A10;
	font-size: 12px;
	}
	
.pics {  
    height:  185px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 
 
.pics img {  
    padding: 0px;
    width:  800px; 
    height: 185px; 
    top:  0; 
    left: 0 
} 

.clear { clear: both; } /* For clearing floats, when necessary */

/* Layout Styles */

#mainContent { background: url(images/bg_mainContent.jpg) right top repeat-y; } /* Creates the faux column of blue behind the right sidebar */

#intro { width: 350px; min-height: 460px; padding: 30px 50px; float: left; background: url(images/bg_intro.jpg) center -60px no-repeat; }

#news { width: 310px; padding: 30px 20px; float: left; background-color: #c4ebf4; }

.frontpage h2 { margin: 15px 0 0px 0; }
.frontpage .timestamp { margin-bottom: 10px; font-size: 10px; }
.frontpage .post { margin-bottom: 30px; }


/* Single Content Styles -- Styles for single pages, single posts, etc. */

#single-content { padding: 10px 50px; line-height: 160%; }
#single-content h1 { font-size: 16px; margin: 20px 0; clear: both; }

#single-content .sectionlist { margin: 20px 35px 20px 0; width: 200px; float: left; }
#single-content .sectionlist h2 { margin-bottom: 10px; }
#single-content .sectionlist ul { padding-left: 15px; }
#single-content .sectionlist li { list-style: none; list-style-image: url(http://www.puremotif.com/images/bullet2.jpg); padding-bottom: 5px; line-height: 20px; }

.page-image-right { float: right; margin-left: 30px; margin-bottom: 10px; }



/* Portfolio Pages Styles */
.Photography #single-content, .Design #single-content { background: #fff; width: 540px; float: left; padding: 0 30px; }
	.Blog #single-content { width: }
.Photography #container, .Design #container { background: #fff url(images/bg_portfolio.jpg) center top no-repeat; min-height: 700px; }
/* .single #container { background: url(images/bg_blog.jpg) left top repeat-y; } */
.Blog #container { background: #fff; }

.Photography #single-content h1, .page #single-content h1 { color: #00b2d9; text-transform: uppercase; letter-spacing: 4px; font-size: 24px; border-bottom: 1px solid #c4ebf4; margin-bottom: 10px; }

	/* Flickr Integration styles */
	
	.gallery li { margin-right: 10px; margin-bottom: 10px; float: left; }
	.gallery li a { padding: 5px; border: 1px solid #ccc; display: block; }
	.gallery { padding-bottom: 50px; margin: 10px auto 50px auto; width: 530px; }
	.gallery .see-photoset { margin-top: 20px; text-transform: uppercase; }
		.gallery .see-photoset a { padding: 5px 10px; }
	.gallery .flickr-gallery-next { display: none; }
	#lightbox-overlay-text { display: none; }


/* BLOG Styles */ 

.Blog #single-content h2 {
	border-bottom: 1px dotted #DFD266;
	color: #3399CC;
	font-family: Trajan Pro, Georgia, Times New Roman, serif;
	font-size: 20px;
	margin: 40px 0 3px 0;
	padding: 5px 5px 5px 20px;
	background: url(http://www.puremotif.com/images/bullet2.jpg) left 6px no-repeat;
	text-transform: capitalize;
}

/* .single .post-content img { display: inline; } */

#single-content .title-text {
	font-family: Trajan Pro, Times New Roman, Georgia;
	font-size: 14px;
	margin: 40px 0 20px 0;
	text-transform: capitalize;
}

	.Blog #single-content h2 a, #single-content .title-text a { padding: 5px 0; }

.Blog #single-content .entry p, .single .post-content p {
	width: 700px;
}

.Blog p { clear: right; }

.post-calendar {
	color:#53544E;
	float:right;
	font-size:10px;
	padding-left:5px;
	margin-bottom: 15px;
}

.Blog .postmetadata {
	border-top: solid 1px #efefef;
	border-bottom: solid 1px #efefef;
	color:#000000;
	font-size:12px;
	height:18px;
	padding:8px;
	width: 100%;
}
.Blog .navigation { text-align: center; }
.Blog .next-entries { padding-left: 30px; } 

/* COMMENTS Styles */

#commentlist { border-top: 1px solid #ccc; margin-bottom: 20px; }
#commentlist li { padding-left: 50px; position: relative; border-bottom: 1px solid #ccc; padding-top: 20px; width: 600px; }
	#commentlist li.bypostauthor { background-color: #F6F6F6; padding-left: 60px; width: 590px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
#commentlist li .avatar { position: absolute; top: 18px; left: 0px; padding: 3px; border: 1px solid #ccc; }
	#commentlist li.bypostauthor .avatar { left: 10px; }
#commentlist cite, #commentlist .comment-edit-link { font-size: 10px; color: #999; }
	#commentlist .comment-edit-link { padding: 5px; }


.archive h2 { margin: 20px 0; font-size: 30px; }
.archive #single-content .title-text { margin: 30px 0 0 0; font-size: 16px; }

ul.vendors { margin: 30px 0; }
ul.vendors li { list-style: none; margin-bottom: 20px; }
ul.vendors li a { padding: 5px; }

.post-comments { float: right; }
.post-cat { float: left; }
.Blog .post { margin-bottom: 80px; }

.single #single-content h1 { font-size: 24px; }

.subnav { width: 200px; float: left; margin: 20px 0; }
.subnav li { list-style: none; }
.subnav li a { position: static; display: block; padding: 10px 35px; text-transform: uppercase; color: #603913; font-family: 'Trajan Pro', Georgia, "Times New Roman", Times, serif; font-size: 14px; letter-spacing: 2px; background: url(images/subnav_roll.jpg) -200px center no-repeat; }
.subnav li a:hover, .subnav li a.current { background-position: left 1px; }


/* Sidebar Styles */

#sidebar { width: 160px; float: left; padding: 20px; font-size: 85%; }
#sidebar li { margin-bottom: 30px; }
#sidebar li li { margin-bottom: 5px; }
#sidebar h2 { margin-bottom: 10px; }

/* Footer Styles */

#footer { clear: both; text-align: center; height: 80px; padding-top: 20px; border-top: solid 1px #C4EBF4; }
#footer ul { margin-bottom: 20px; }
#footer li { font-size: 11px; list-style: none; display: inline; margin-right: 20px; color: #324c34; }
#footer li a { color: #324c34; background: transparent; }
#footer li a:hover { color: #fff; background-color: #603913; }