/* @override http://localhost:8000/media/css/master.css */

/*	WdeB
	breadandpepper.com
	................................... */

@import "reset.css";
@import "syntax.css";

/*	html5 elements
    ................................... */

header, section, footer,
aside, nav, article, figure {
    display: block;
}


/*	Main elements
    ................................... */

html, body{
	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
	height: 100%;
}

#wrapper{
	position: absolute;
	width: 100%;
	min-height: 100%;
	height: auto !important; 
	height: 100%;
	background: url(../img/bg-pixels.png) repeat fixed center center;
}

#container{
	width: 1030px;
	min-height: 500px;
	margin: 50px auto 70px;
	padding: 0 0 20px;
	border: 1px solid #fff;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background: #ece7e4 url(../img/bg-container.png) repeat-y;
	/*background: #eee url(../img/grid.png) repeat-y center top;*/
	
}

#page-header{
	height: 135px;
	position: relative;
}

footer{
	width: 1030px;
	margin: 30px auto 0;
	text-align: center;
	padding: 15px 0 15px;

}



/*	Type + Images
    ................................... */
p{
	font-size: 1.1em;
	color: #333;
	line-height: 1.35em;
	text-shadow: #fff 0 1px 0;
	margin-bottom: 0.6em;
}


blockquote p{
		color: #7b7a7a;
		font-size: 1.5em;
}

p.crumb{
	text-transform: uppercase;
	font-size: 0.8em;
	margin: 0 15px;
	background: url(../img/stripe.png) repeat-x center bottom;
	padding: 0 0 3px;
}

p.crumb a{
	border: none;
}

footer p{
	font-size: 0.9em;
}



p a{
	border-bottom: 1px dotted;
	font-weight: bold;
} 

a{
	color: #780000;
	text-decoration: none;
}

a:hover{
	color: #ad0714;
}

a.more{
	font-weight: bold;
	font-size: 0.8em;
	border: none;
}

h1, h2, h3, h4, h5, h6{
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #111;
}

h1{
	font-size: 3.0em;
}

h1.page-title{
	margin: 0 15px;
	background: url(../img/stripe.png) repeat-x left bottom;
}

h2{
	font-size: 2.0em;
	margin: 0.9em 0 0 0;
}

h3{
	font-size: 1.6em;
	margin: 0.8em 0 0 0;
}

h4{
	font-size: 1.3em;
	margin: 0.8em 0 0 0;
}

h5{
	font-size: 1.1em;
	margin: 0.5em 0 0 0;
}

h6{
	font-size: 1.0em;
}

hr{
	margin: 0 15px;
	border: none;
	height: 2px;
	background: url(../img/stripe.png) repeat-x;
}

article ul, article ol{
	margin-bottom: 0.7em;
}

article li{
	font-size: 1.1em;
	color: #333;
	line-height: 1.35em;
	text-shadow: #fff 0 1px 0;
	margin-bottom: 0.3em;
}

article ul li{
	margin-left: 45px;
	list-style-type: disc;
}

article ol li{
	list-style-type: decimal;
	margin-left: 45px;
}

article blockquote{
	margin: 0 15px 0 -150px;
	padding: 0 0 0 85px;
	width: 435px;
	float: left;
	background: url(../img/quote.png) no-repeat 0 5px;
}

article blockquote p{
	margin: 0;
	padding: 1px 25px 5px 0;
}

article img{
	padding: 5px 5px 15px;
	background-color: #fff;
	margin: 0 0 10px 0;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 0px 4px #999;
	-moz-box-shadow: 0 0px 4px #999;
	-webkit-box-shadow: 0 0px 4px #999;
}

article img.large_right{
	width: 700px;
	float: right;
	margin: 0 -85px 10px 15px;
}

article img.large_left{
	width: 700px;
	float: left;
	margin: 0 15px 10px -85px;
}

article img.medium_right{
	width: 500px;
	float: right;
	margin: 0 -85px 10px 15px;
}

article img.medium_left{
	width: 500px;
	float: left;
	margin: 0 15px 10px -85px;
}

article img.small_right{
	width: 300px;
	float: right;
	margin: 0 0 10px 15px;
}

article img.small_left{
	width: 300px;
	float: left;
	margin: 0 15px 10px 0;
}

article img.full{
	width: 700px;
	float: left;
	margin: 0 0 10px 0;
}

/*	Header + Nav
    ................................... */

#page-header h1{
	width: 150px;
	height: 112px;
	position: absolute;
	left: 15px;
	top: -2px;
}

#page-header h1 a{
	width: 150px;
	height: 112px;
	display: block;
	text-indent: -9999px;
	background: url(../img/bread-and-pepper-logo.png) center top;
}

#page-header h1 a:hover{
	background: url(../img/bread-and-pepper-logo.png) center bottom;
}

#page-header nav{
	position: absolute;
	right: 15px;
}

#page-header nav ul{
	border-right: 1px dotted #a9a8a7;
	height: 47px;
	margin: 36px 1px 0 0;
}

#page-header nav li{
	width: 150px;
	height: 120px;
	float: left;
}

#page-header nav li a{
	width: 134px;
	padding: 5px 0 0 15px;
	height: 42px;
	display: block;
	color: #111;
	border-left: 1px dotted #a9a8a7;
	font: 1.4em/0.4em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

nav li a span{
	font-size: 60%;
	color: #a8a7a6;
}

#page-header nav li a:hover span
{
	color: #333;
}

#home li.home a,
#products li.products a,
#blog li.blog a,
#company li.company a{
	padding: 6px 0 0 15px;
	height: 41px;
	background: url(../img/bg-nav.png) no-repeat left center;
}

#home li.home a span,
#products li.products a span,
#blog li.blog a span,
#company li.company a span{
	color: #333;
}


/*	Page-Home
    ................................... */
#banner{
	height: 300px;
	width: 1000px;
	margin: 0 15px 5px;
	overflow: hidden;
    position: relative;
	background: url(../img/bg-projects.jpg) no-repeat left top;
}

#banner .items {
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute;
    left: 0;
    top: 0;
 
}

#banner .items li {
    float: left;
    position: relative;
    width: 1000px;
    height: 300px;
}


ul.banner-nav{
	height: 19px;
	margin: 0 18px 20px;
}

ul.banner-nav li{
	width: 19px;
	height: 19px;
	float: right;
	margin: 0 0 0 3px;
}

ul.banner-nav li a{
	width: 19px;
	height: 19px;
	display: block;
	background: url(../img/slide-nav.png) 0 bottom;
}

ul.banner-nav li.active a{
	width: 19px;
	height: 19px;
	display: block;
	background: url(../img/slide-nav.png) 0 top;
}


#tagline{
	background: url(../img/crew.png) no-repeat 15px 0;
	margin: 0 15px 45px;
	padding: 0;
	height: 170px;
}

#tagline:hover{
	background-position: 15px -166px;
} 

blockquote#tagline p{
	font-size: 1.45em;
	background: url(../img/quote.png) no-repeat 525px 0;
	padding: 20px 0 0 610px;
	color: #7b7a7a;
	font-weight: normal;
	font-style: normal;
} 



/*	Page-Work
    ................................... */
#work-list{
	overflow: auto;
	margin: 30px 15px 0 15px;
}

#work-list li{
	overflow: hidden;
	position: relative;
	background: url(../img/stripe.png) repeat-x center bottom;
	margin: 0 0 45px;
	padding: 0 0 45px;
}

#work-list li.left .work-slides{
	float: left;
}

#work-list li.right .work-slides{
	float: right;
	
}

.work-slides{    	position:relative; 
    overflow:hidden; 
    width: 660px; 
    height: 300px; 
}

.work-slides ul.items { 
    /* this cannot be too large */ 
    width:20000em;     position:absolute; 
} 

.work-slides ul.items li {
    float: left;
	position: relative;
	width: 660px;
	height: 300px;
}

a.visit{
	position: absolute;
	top: 265px;
	width: 647px;
	padding: 5px;
	left: 1px;
	color: #ebe7e3;
	text-align: center;
	display: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font: bold 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	background: url(../img/trans-dark.png) repeat;

}

ul.items li:hover a.visit{
	display: block;
}

a.nextPage, a.prevPage{
	position: absolute;
	top: 262px;
	width: 30px;
	height: 30px;
	display: block;
	background-image: url(../img/arrows.png);
	text-indent: -9999px;
}


a.prevPage{	
	background-position: left top;
}

.left a.prevPage{
	right: 265px;
}

.right a.prevPage{
	left: 230px;
}

a.prevPage:hover{
	background-position: left bottom;
}

a.nextPage{
	background-position: right top;
}

.left a.nextPage{
	right: 230px;
}

.right a.nextPage{
	left: 265px;
}

a.nextPage:hover{
	background-position: right bottom;
}

#work-list li.left h2{
	width: 295px;
	float: right;
	margin: 0;
	font-size: 1.6em;
}

#work-list li.right h2{
	width: 295px;
	float: left;
	margin: 0;
	font-size: 1.6em;
}

.left .project-info{
	width: 295px;
	float: right;
	margin: 8px 0 0;
}

.right .project-info{
	width: 295px;
	float: left;
	margin: 8px 0 0;
}

a.url{
	position: absolute;
	bottom: 60px;
	font-size: 0.9em;
	border-bottom: 1px dotted;
	font-weight: bold;
}

.right a.url{
	left: 0;
}   

.left a.url{
	right: 0;
}

/*	Page-Blog
    ................................... */

article.teaser{
	margin: 0 15px 0;
	padding: 38px 0;
	overflow: auto;
	background: url(../img/stripe.png) repeat-x center bottom;
}

article.full{
	width: 700px;
	margin: 50px auto 30px;
	position: relative;
}


p.post-info{
	font-size: 0.7em;
	width: 150px;
	float: left;
	margin: 3px 0 0 0;
	color: #8f8e8e;
	font-weight: bold;
	text-transform: uppercase;
}
p.post-info a{
	border: none;
}

.tease{
	float: right;
	width: 450px;
	margin: -3px 0 0 25px;
}

p.tags{
	margin: 30px 0 40px;
	font-weight: bold;
}

.full p.post-info{
	margin: 0 0 0 -150px;
}

article.teaser h2{
	float: left;
	width: 360px;
	margin: -2px 0 0 0;
}

article.teaser h2 a{
	color: #111;
}

article.teaser h2 a:hover{
	color: #333;
}


.article-body{
	float: left;
	width: 750px;
	margin: 45px 0 0 0;
}

#archive{
	margin: 0 15px 0;
	overflow: auto;
	width: 1000px;
}

#archive{
	display: none;
}

#archive.opened{
	background: #fef9f4 none repeat-x center bottom;
	box-shadow: 0 1px 3px #999;
	-moz-box-shadow: 0 1px 3px #999;
	-webkit-box-shadow: 0 1px 3px #999;
	-moz-border-radius-bottomleft: 6px;
    	-webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
}


#month-list dd, #tag-list dd{
	float: left;
	margin: 5px 5px 7px 0;
}

#month-list dd a, #tag-list dd a{
	background-color: #eae5e1;
	padding: 5px 9px 3px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	font-size: 0.75em;
	text-transform: uppercase;
	font-weight: bold;
}

#tag-list{
	width: 395px;
	padding: 15px;
	float: left;

}

#month-list{
	width: 395px;
	padding: 15px;
	float: left;
	border-bottom: 1px dotted #ddd;
}

#popular-list{
	width: 544px;
	overflow: auto;
	float: right;
	border-left: 1px dotted #ddd;
	padding: 15px;
}

#popular-list dd{
	float: left;
	margin: 6px 0;
	width: 544px;
}

a.label{
	width: 148px;
	height: 27px;
	display: block;
	margin: 0 0 0 440px;
	text-align: center;
	line-height: 28px;
	font-weight: bold;
	color: #111;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 12px;
	-moz-border-radius-bottomleft: 6px;
    	-webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom: 1px solid fff;
	background: #a9a8a7 url(../img/grad.png) 0 0px;
	box-shadow: 0 2px 2px #a9a8a7;
	-moz-box-shadow: 0 2px 2px #a9a8a7;
	-webkit-box-shadow: 0 2px 2px #a9a8a7;
	border: 1px solid #c8c6c5;
	clear: both;
	text-shadow: #f0eded 0 1px 0;
}

a.label:hover{
	color: #790000;
}

a.close{
	display: none;
}


.article-nav{
	position: absolute;
}

article a.nextPage{
	top: 10px;
	right: -150px;
}
article a.prevPage{
	top: 10px;
	left: -150px;
}

#comments{
	margin: 45px 15px;	
}

#comments h3{
	border-bottom: 3px solid #a9a8a7;
	padding: 0 0 0 150px;
}

#comments li{
	background: url(../img/stripe.png) repeat-x 0 bottom;
	overflow: auto;
	padding: 30px 0;
}

.comment-author{
	width: 115px;
	padding: 0 10px 3px 25px;
	float: left;
	font-size: 0.9em;
	font-weight: bold;
	overflow: hidden;
	color: #252525;

}

.comment-author img{
	clear: both;
	width: 50px;
	height: 50px;
	padding: 2px;
	background-color: #fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 0 3px #999;
	-moz-box-shadow: 0 0 3px #999;
	-webkit-box-shadow: 0 0 3px #999;	
}

div.comment-text{
	width: 600px;
	float: left;
	overflow: auto;
}

.comment-date{
	float: right;
	font-size: 0.8em;
	margin: 0 25px 0 0;
	color: #8f8e8e;
}

#comments li.comment-form{
	padding: 30px 150px;
}

p.form-info{
	margin: 50px 0 0 133px;
	font-size: 0.9em;
}

form{
	padding: 7px 0 0 0;
	width: 700px;
}		

form p{
	padding: 0;

}

form p label{
	width: 107px;
	float: left;
	display: block;
	padding: 10px 25px 0 0;
	text-align: right;
	font-size: 0.9em;
	font-weight: normal;
	color: #444;
	font-style: normal;
}

input{
	width: 400px;
	background-color: #fff;
	padding: 6px 10px;
	color: #000;
	 -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
	font-size: 1.2em;
	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
	border: 1px solid #bbb;
	
}

input:focus, textarea:focus{
	border: 1px solid #780000;
}

textarea{
	width: 407px;
	height: 5em;
	padding: 6px;
	color: #000;
	 -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
	font-size: 1.2em;
	border: 1px solid #bbb;
	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
	
}


input.button{
	width: inherit;
	margin: 0 0 0 133px;
	text-transform: uppercase;
	padding: 8px 40px;
	letter-spacing: 1px;
	font-size: 12px;
	color: #fff;
	border: 1px solid#ccc;
	background: #aaa9a8 url(../img/grad.png) repeat-x;
	 -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	font-weight: bold;
}

input.button:hover{
	color: #eee;
	border-color: #c5c2c1;
	cursor: pointer;
}

input.button:active{
	background-image: none;
	background-color: #b1b0af;
}

ul.errorlist li{
	padding: 0 0 0 165px;
	font-weight: bold;
	font-size: 11px;
	letter-spacing: 1px;
}


p.pager{
	text-align: center;
	background-image: none;
	margin: 30px 15px;
	font: 1.0em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

p.pager span{
	font-size: 0.8em;
	padding: 2px 8px 3px;
	background-color: #fff9f7;
	border: 1px solid #b5b4b3;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-image: url(../img/grad.png);
	font-weight: bold;
}

p.pager a{
	border-bottom: none;
}


/*	Page-Company
    ................................... */

#content{
	overflow: auto;
	padding: 0;
}

.center{
	width: 595px;
	margin: 40px 0 30px 100px;
	position: relative;

}  

address{
	font-weight: normal;
	font-style: normal;
	font-size: 0.9em;
	line-height: 1.3em;
	letter-spacing: 1px;
	color: #7b7a7a;
	float: right;
	margin: 0 -320px 0 0;
	width: 255px;
}  


.center blockquote{
	margin: 0 0 0 -85px;
	padding: 0 0 0 85px;
	width: 380px;
	float: left;
	background: url(../img/quote.png) no-repeat 0 5px;
}
 
#team{
	clear: both;
	margin: 45px 0 0 15px;
	padding: 0 0 30px;
	overflow: auto;
	background: url(../img/stripe.png) repeat-x center bottom;
}
  

#team li{
	width: 320px;
	min-height: 160px;
	margin: 0 18px 0 0;
	float: left;
	overflow: hidden;
	text-align: left;
}

#team li h3{
	font-size: 1.0em;
	margin: 0 0 15px;
}

#team li p{
	font-size: 0.8em;
}

#team li div{
	float: left;
	margin: 0 15px 0 0 ;
}

li#crew-jd div{
	width: 150px;
	height: 160px;
	background: url(../img/crew.png) right bottom;
}

li#crew-pr div{
	width: 156px;
	height: 160px;
	background: url(../img/crew.png) -158px bottom;
}

li#crew-wb div{
	width: 158px;
	height: 160px;
	background: url(../img/crew.png) 0 bottom;
}

img.office{
	padding: 5px 5px 15px;
	background-color: #fff;
	margin: 0 0 10px 0;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 0px 4px #999;
	-moz-box-shadow: 0 0px 4px #999;
	-webkit-box-shadow: 0 0px 4px #999;
}



/*	404 error
    ................................... */    

#error-page{
	margin: 80px 15px 0;
	background: url(../img/crew.png) no-repeat 30px bottom;
	height: 160px;
	padding: 0 0 0 550px;
}

#error-page ul li{
	list-style-type: disc;
	list-style-position: inside;
}

#error-page ul li p{
	margin: 0;
}