/*
Theme Name: 	Baker of Brighton
Theme URI: 		http://wordpress.org/
Description: 	Bespoke theme for BakerofBrighton.com
Version: 		0.1
Author: 		Alex Goluszko
Author URI:  	www.alexandtheweb.com
Tags: 			custom

*/


/* RESET -------------------------- */

/*reset.css*/ body{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*fonts.css*/ body {}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:99%;}

/* FONTS */

@font-face {
	font-family: Powell;
	src: 
		local("Powell Antique"),
		url("../fonts/PowellAntique.ttf") format("truetype");}	
		
/* ELEMENTS */

body {
	background: rgb(248,239,229) url(../images/body-bg.jpg) no-repeat top center;
	color: rgb(25,27,45);
	font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
	font-size: 62.5%;
	line-height: 1;}
	
a {
	color: rgb(114,103,127);
	font-weight: bold;
	text-decoration: none;}	
	
a:hover, a:visited {
	color: rgb(49,51,86);}	
	
h1, h2.home {
	font-size: 3.6em;
	color: rgb(49,51,86);
	line-height: 1.1;
	margin-bottom: 18px;
	padding-right: 120px;
	text-transform: capitalize;
	text-shadow: 1px 1px 1px #FDFAF7;
	background: none;
	font-family: "Powell", Georgia, Times, serif;}	

h2, h3, h4, h5 {
	color: rgb(83,79,117);}	

	
h2 {	
	font-family: Georgia, Times, serif;
	text-transform: uppercase;
	font-size: 2em;
	padding-bottom: 12px;
	margin-bottom: 14px;}	

h3 {
	font-family: Georgia, Times, serif;
	text-transform: uppercase;
	font-size: 1.6em;
	font-weight: bold;
	padding-bottom: 12px;}
	
h4 {
	font-family: Georgia, Times, serif;
	text-transform: uppercase;
	font-size: 1.4em;
	font-weight: bold;
	padding-bottom: 7px;
	margin-bottom: 14px;}	
	
p, li {
	font-size: 1.4em;
	line-height: 1.5;}

li p, li li {
	font-size: 100%;}

p, ul {
	margin-bottom: 14px;}
	
li p, li h3, li h4 {
	font-size: 100%;}	
	
blockquote {
	padding: 20px;}	

	
/* STRUCTURE */	

	#container {
		width: 980px;
		clear: both;
		overflow: hidden;
		margin: 0 auto 40px;}

	#header {
		position: relative;
		z-index: 2;
		height: 170px;}
	
	#header .wrapper {
		position: relative;}
		
	#header #logo {
		position: absolute;
		margin: 30px 0;
		left: -25px;
		top: 30px;}		

	#header #logoSmall {
		position: absolute;
		margin: 8px 0;
		left: -25px;
		top: -15px;}	

	#intro {
		position: relative;
		z-index: 1;
		top: -50px;		
		background: url(../images/intro-bg.jpg) no-repeat top center;
		height: auto;
		-moz-box-shadow: 0 15px 12px -12px rgb(187,163,145);
		-webkit-box-shadow: 0 15px 12px -12px rgb(187,163,145);
		box-shadow: 0 15px 12px -12px rgb(187,163,145);
		float: left;
		width: 100%;}	
		
	#intro p {
		font-size: 150%;
		font-family: Arial, Helvetica, sans-serif;}	
		
	#intro .date {
		right: 35px;
		left: auto;		
		top: 15px;}	
	
	.wrapper {
		width: 980px;
		clear: both;
		margin: 0 auto;}
	
	.block {
		overflow: hidden;
		margin-bottom: 20px;}	
		
	.clear {
		clear: both;}	
	
	.column	{
		width: 298px;}
	
	.columnWide {
		width: 640px;
		position: relative;}
		
	.floatLeft {
		float: left;}
		
	.floatRight {
		float: right;}	
	
	.inner {
		padding: 20px;
		position: relative;}
		
	.nudged {
		margin-right: 20px;
		clear: left;}	
		
	/* Styling classes */
	
	.topLine {
		border-top: 1px dotted rgb(223,215,213);}		

	.bottomLine {
		border-bottom: 1px dotted rgb(223,215,213);}		
		
	.breathing {
		padding: 20px 0;}	

	.shaded {
		background: url(../images/shaded.png) no-repeat right bottom;}	
		
	.recipe {
		background: url(../images/recipe.png) no-repeat top left;
		padding: 40px 20px 30px;
		font-family:Georgia,Times,serif;
		text-transform: uppercase;
		font-weight:bold;		
		line-height: 3em;
		margin-left: -10px;}			
		
	.hint {
		color: rgb(223,215,213);}	
		
	.desc {
		font-weight: bold;
		font-size: 120%;}	

	.pictureBox {
		background: url(../images/image-bg.png) no-repeat top left;
		-moz-box-shadow: -1px 1px 6px rgba(187,163,145,0.6);
		-webkit-box-shadow: -1px 1px 6px rgba(187,163,145,0.6);
		box-shadow: -1px 1px 6px rgba(187,163,145,0.6);		
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
		margin-bottom: 14px;
		position: relative;}	
		
	.pictureBox a {
		display: block;}		
		
	.pictureBox img {
		padding: 8px;}	
		
	.pictureBox span {
		background-color: #F8EFE5;
		margin: 10px 8px;
		padding: 20px;
		position: absolute;
		width: 580px;
		text-align: right;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-weight: bold;
		text-transform:uppercase;
		top:-2px;
		left: 0;
		color: rgb(91,87,128);
		font-size: 14px;
		font-weight: bold;}	

	.page .size-thumbnail {
		-moz-box-shadow: -1px 1px 6px rgba(187,163,145,0.6);
		-webkit-box-shadow: -1px 1px 6px rgba(187,163,145,0.6);
		box-shadow: -1px 1px 6px rgba(187,163,145,0.6);		
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
		padding: 8px;
		background: url(../images/image-bg.png) no-repeat top left;		
		margin-right:20px;}

	.columnList li:last-child {
		float: right;
		margin-right: 0;}

	.columnList li {
		margin-right: 30px;}
		
	/* Flickr feed */
	
	.flickrFeed h4 {
		font-size: 2.8em;
		color: rgb(79,73,77);
		line-height: 1.1;
		text-align: center;
		margin-bottom: 18px;
		text-transform: none;
		font-family: "Powell", Georgia, Times, serif;}	

	/* Tag cloud styles */
	
	.tags {
		margin: 120px 0 0 0;}
		
	.tags ul {		
		-moz-column-count: 2;
		-moz-column-width: 140px;		
		-webkit-column-count: 2;
		-webkit-column-width: 140px;}	

	.tags li {
		padding: 4px 0;
		text-transform: capitalize;
		border-top: 1px dotted rgb(223,215,213);}

	.tagsHome {
		margin: 0;}
		
	.tagsHome ul {		
		-moz-column-count: 6;
		-moz-column-width: 140px;		
		-webkit-column-count: 6;
		-webkit-column-width: 140px;}			
		
	/* Entry styles */
	
	.entry {
		padding: 30px 0;
		clear: both;
		position: relative;}				
		
	.entry h2 {
		padding-left: 90px;
		line-height: 1.5;
		margin-bottom: 35px;}	
		
	.full .flickrPic img {
		width: 620px;
		height: 465px;}	
		
	.entry ul li {
		list-style-type: none;
		padding-left: 30px;
		background: url(../images/bullet-blue.gif) no-repeat left 9px;
		margin-left: 15px;}	
		
	.entry ol li {
		margin-left: 15px;
		list-style-type: decimal;
		list-style-position: inside;}	
		
	.date {
		position: absolute;
		top: 35px;		
		left: 0;
		color: rgb(248,239,229);
		font-family: Georgia,"Times New Roman",serif;
		font-size: 1.2em;
		padding: 10px 5px;
		text-transform: uppercase;
		text-align: center;
		background: #003366 url(../images/square-bg.jpg) no-repeat top left;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		width: 65px;}	
		
	.date span:last-child {
		font-size: 150%;}
		
	.thumbnailBig {
		zoom: 1;
		display: block;}
		
	/* Page styles */		
	
	.page .entry img {
		float: left;
		margin-right: 15px;}
		
	/* Lists - Navigation */
	
	#menu-main-nav {
		position: absolute;
		right: 80px;
		top: 15px;}
	
	#menu-main-nav li {
		font-family: Georgia, Times New Roman, Times, serif;
		font-size:1.4em;
		float: left;
		width:135px;
		text-align: center;
		text-transform: uppercase;
		line-height:1.8;
		font-weight: bold;
		padding: 12px 3px;}	
		
	#menu-main-nav a, #menu-main-nav span {
		display: block;
		color:#4E2F16;
		text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FDFAF7, 0 0 31px #F8EFE5, 0 0 45px #F8EFE5;		
		padding-right: 10px;}	
		
	#menu-main-nav li.current-menu-item a {
		color: rgb(49,51,86);}			

	/* Lists - Pagination */
	
	#paging {
		text-align: center;
		margin-bottom: 28px;
		clear: both;		
		width: 100%;}
	
	#paging ul {
		margin: 0 auto;
		width: auto;}

	#paging li {
		font-family: Georgia, Times New Roman, Times, serif;
		text-align: center;
		font-size: 1.8em;
		display: inline;
		padding: 5px;}

	#paging li:first-child {
		background: transparent url(../images/ornaments.png) -880px -90px;		
		padding-left: 80px;}

	#paging li:last-child {
		background: transparent url(../images/ornaments.png) -1240px -90px;		
		padding-right: 80px;}	

	/* Ornamental item */
	
	.fancy {
		clear: both;}
	
	.fancy>* {
		background: transparent url(../images/ornamentsNav.png) no-repeat left 12px;
		font-family: Georgia, "Times New Roman", Times, serif;		
		border-top: 1px dotted rgb(223,215,213);
		font-weight: bold;
		display: block;
		padding: 8px 0 8px 35px;}

	.fancy>li:first-child {
		border-top: none;}

	/* Centered link */

	.centered {
		text-align: center;
		margin-bottom: 28px;
		background: transparent url(../images/ornamentsSmall.png) no-repeat right top;		
		padding-right: 80px;
		margin: 0 auto;
		clear: both;
		width: auto;}
		

	.centered>* {
		background: transparent url(../images/ornamentsSmall.png) no-repeat left top;		
		padding-left: 80px;
		text-transform: uppercase;
		font-weight: bold;
		font-family: Georgia, "Times New Roman", Times, serif;
		display: block;
		margin: 0 auto;
		width: auto;}	


	/* Forms */
	
	input[type="text"], select, textarea {
		border: 1px solid rgb(223,215,213);
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
		padding: 2px 7px;
		color: rgba(25,27,45,0.8);
		background: rgb(248,239,229);
		-moz-box-shadow: inset 0 10px 12px -12px #BBA391;
		-webkit-box-shadow: inset 0 10px 12px -12px #BBA391;
		font-size: 14px;}

	/* Comments */
	
	.comments {
		overflow: hidden;}

	.comments label {
		display: block;}
		
	.comments input[type="text"],
	.comments textarea {
		width: 90%;}		
		
	.comment-meta {
		background: url(../images/bg-comment.gif) no-repeat top center;
		height: auto;
		margin-bottom:12px;
		opacity:0.7;
		padding:10px 12px 5px;
		width:95%;
		-moz-box-shadow: 0 2px 2px  rgb(187,163,145);
		-webkit-box-shadow: 0 2px 2px rgb(187,163,145);
		box-shadow: -0 2px 2px rgb(187,163,145);
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;}	
		
	/* Footer */

	#footer .wrapper {
		padding: 20px 0 30px;
		overflow: hidden;}
		
	.copyright {
		line-height: 22px;
		color: rgba(25,27,45,0.5);
		float: left;
		width: 600px;
		margin: 0;}	
	
	#footer form {
		float: right;
		width: 320px;}
		
	#footer label {
		width: 0;
		text-indent: -1000em;}
	
	#footer label, #footer input {
		float: left;}
		
	#footer input[type="text"] {
		width: 210px;
		margin-right: 10px;}


		
/* jQuery Lightbox Plugin Styles */

/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
	#jquery-overlay {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 90;
		width: 100%;
		height: 500px;
	}
	#jquery-lightbox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		text-align: center;
		line-height: 0;
	}
	#jquery-lightbox a img { border: none; }
	#lightbox-container-image-box {
		position: relative;
		background-color: #fff;
		width: 250px;
		height: 250px;
		margin: 0 auto;
	}
	#lightbox-container-image { padding: 10px; }
	#lightbox-loading {
		position: absolute;
		top: 40%;
		left: 0%;
		height: 25%;
		width: 100%;
		text-align: center;
		line-height: 0;
	}
	#lightbox-nav {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 10;
	}
	#lightbox-container-image-box > #lightbox-nav { left: 0; }
	#lightbox-nav a { outline: none;}
	#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
		width: 49%;
		height: 100%;
		zoom: 1;
		display: block;
	}
	#lightbox-nav-btnPrev { 
		left: 0; 
		float: left;
	}
	#lightbox-nav-btnNext { 
		right: 0; 
		float: right;
	}
	#lightbox-container-image-data-box {
		font: 10px Verdana, Helvetica, sans-serif;
		background-color: #fff;
		margin: 0 auto;
		line-height: 1.4em;
		overflow: auto;
		width: 100%;
		padding: 0 10px 0;
	}
	#lightbox-container-image-data {
		padding: 0 10px; 
		color: #666; 
	}
	#lightbox-container-image-data #lightbox-image-details { 
		width: 70%; 
		float: left; 
		text-align: left; 
	}	
	#lightbox-image-details-caption { font-weight: bold; }
	#lightbox-image-details-currentNumber {
		display: block; 
		clear: left; 
		padding-bottom: 1.0em;}			
		
	#lightbox-secNav-btnClose {
		width: 66px; 
		float: right;
		padding-bottom: 0.7em;}		
		
@media screen and (max-width: 480px),
	   screen and (max-device-width: 480px) {

	h1, h2.home {
		padding-right: 0;}

	#container {
		min-width: 320px;
		width: 100%;
		clear: both;
		overflow: hidden;
		margin: 0 auto 20px;}	
	
	 .wrapper {
	 	width: 94%;
		padding: 0 3%;}
		
	.inner {
		padding: 0;}		
		
	.columnWide, .column {
		padding: 8px 0;
		width: 100%;}

	.floatLeft, .floatRight {
		float: none;}

	#logo {
		left: 0;}

	#logo img {
		width: 100%;
		height: 100%;}

	#header {
		height: 10px;}

	#header #logo, #header #logoSmall {
		display: none;}

	#menu-main-nav {
		position: static;
		right:0;
		top:0;
		width:100%;}

	#menu-main-nav li {
		font-size:120%;
		padding:3px 2%;
		display: none;
		width:100%;}
				
	#intro {
		float: none;
		height: auto;
		padding:8px 3%;
		margin-bottom: 10px;
		position:static;
		top:0;
		width:94%;
		background-image: none;
		background-color: rgba(227,203,191, 0.5);}		
	
	#intro p {}
	
	.pictureBox span {
		display: none;}

	.pictureBox img {
		width: 95%;
		height: auto;}

	.entry {
		padding: 8px;}
		
	.entry h2 {
		margin-bottom:8px;
		padding-left: 15%;}
		
	.date {	
		top: 13px;
		width: 10%;}

	.copyright {
		float:none;
		width:100%;}
		
	#footer form {
		float: none;
		margin-top: 20px;
		width: 100%;}		
		
}