/*
Theme Name: Coffe House
*/
* {
	margin: 0;
	padding: 0;
	outline: 0;
}

body {
	font-family: Georgia,serif;
	font-size: 15px;
	color: #000;
	background:#E0C482;
}

a img { border: 0; }

a { color: #7A4516; }
a:hover { color:#333; }
h2, h3 {
	font-size: 22px;
	color: #7A4516;
}
h2 a, h3 a {
	text-decoration: none;
}
h2 a:hover{
	color:#333;
}

.postmetadata {
	text-align: center;
	font-size:11px;
}


.cl, .clear {
	clear: both;
	display: block;
	height: 0;
	font-size: 0;
	line-height: 0;
	text-indent: -10000px;
}

.left{
	float: left;
	display: inline;
}

.right {
	float: right;
	display: inline;
}

.hidden {
	font-size: 0;
	line-height: 0;
	text-indent: -10000px;
}
#shell {
	margin: 0 auto;
	max-width: 1024px;	
}

#header {
	background: url(images/header.gif) no-repeat 0 top;
	height: 200px;
}

.link-menu { display: none; margin-top: 15px;  }
.link-menu span { position: relative; display:block; width: 40px; border-top: 3px solid #5A300A; background-color: transparent; }
    
.link-menu span:before,
.link-menu span:after { position: absolute; width: 100%; height: 3px; background: #5A300A; content: ''; }

.link-menu span:before { top: -10px; left: 0; }
.link-menu span:after { top: 4px; left: 0; }

h1#logo {
	float: left;
	height: 40px;
	width: 283px;
	font-size: 18px;
	padding: 31px 0 0 212px;
}

#logo a, #logo a:hover {
	display: block;
	height: 40px;
        text-decoration:none;
        color: #462100;
}
h2#slogan a, h2#slogan a:hover {
/* 	float: left;
clear: left;
height: 58px;
width: 460px;
margin: -4px 0 0 62px;
display:inline;
        color: #462100;
        font-size:21px; */
}

h2#slogan a  { float: left;
clear: left;
height: 58px;
width: 460px;
margin: -4px 0 0 62px;
display:inline;
        color: #462100;
        font-size:21px;}


#navigation {
	padding: 18px 0 0 60px;
}

#navigation ul {
	list-style-type: none;
}

#navigation li {
	height: 50px;
	float: left;
	text-align: center;
}

.b1 {
	background: url(images/b1.gif) no-repeat 0 0;
	width: 164px;
	
}

.b2 {
	background: url(images/b2.gif) no-repeat 0 0;
	width: 121px;
}

.b3 {
	background: url(images/b3.gif) no-repeat  0 0;
	width: 205px;
}

.b4 {
	background: url(images/b4.gif) no-repeat 0 0;
	width: 175px;
}

.b5 {
	background: url(images/b5.gif) no-repeat 0 0;
	width: 124px;
}

.b6 {
	background: url(images/b6.gif) no-repeat 0 0;
	width: 121px;
}

.b1,.b2,.b3,.b4,.b5,.b6 { background-size: 100% 100%; }

#navigation a {
	display: block;
	font-size: 0;
	line-height: 50px;
	text-indent: -10000px;
}

#content {
	background: url(images/content.gif) repeat-y 0 0;
	width: 100%;
	background-size: 100% 100%;
}

#content-box {
        padding: 0 40px 0 75px;
}


#mainbox {
	width: 605px;
	padding: 15px 15px 0px 0;
	background:url(images/line.gif) repeat-y right 10px;
}


#mainbox .post small {
	display: block;
	font-weight:bold;
	font-size: 16px;
	padding: 5px 0;
}

#mainbox .entry {
	line-height:1.5;
        margin-bottom:20px;
}

#mainbox p {
	padding: 10px 20px 0 0;
	
        letter-spacing: 0px;
	word-spacing: 2px;
}

#mainbox .post h2 {
        font-size:16px;
        color: #7A4516;
}

#mainbox ul {
	list-style: disc inside;
	margin:10px 0;
}

#mainbox ul li {
	padding: 10px 0;
	padding-left: 15px;
}

#mainbox ol li {
	padding: 10px 0;
	padding-left: 0;
        margin-left: 20px;
}

#mainboxhome {
	width: 530px;
	padding: 15px 15px 0px 0;
	background:url(images/line.gif) repeat-y right 10px;
}
#mainboxhome .entry {
	line-height:1.3;
        font-size: 16px;
}

#mainboxhome p {
	padding: 10px 0 0 0;
	text-indent: 25px;
}

#mainboxhome ul {
	list-style-type: none;
	margin:10px 0;
}

#mainboxhome li {
	background: url(images/icon-bullet.gif) no-repeat 0 17px;
	padding: 10px 0;
	padding-left: 15px;
}

.postmetadata {
	font-size: 13px;
	padding: 5px 0;
	color:#bb6512;
}

.postmetadata a {
	color:#bb6512;
}

.postmetadata a:hover {
	color: #000;
}

.post {
	padding-bottom: 0px;
}

#sidebar {
	width: 250px;
	padding: 15px 0px;
	font-size:14px;
	margin-right:20px;
}

#sidebarhome {
	width: 325px;
	padding: 15px 0px;
	font-size:16px;
	margin-right:20px;
}

#sidebar ul li { padding-bottom:10px; }
#sidebar ul li li { padding:6px 0; }
#sidebar ul li ul { padding:0 0 0 5px; }
#sidebar h2 {
	font-size: 17px;
	color: #7a4516;
	text-transform: uppercase;
}
#sidebar h3, #sidebarhome h3 {
	font-size: 16px;
	color: #462100;
}

#sidebar p, #sidebarhome p {
	padding :10px 15px 10px 0;
	text-indent: 20px;
	line-height:1.4;
}

#sidebarhome form {
	background: url(images/sidebar-box.gif) no-repeat 0 0;
	width: 279px;
	height: 103px;
	padding: 15px 20px;
}

#sidebarhome form span {
	font-size: 14px;
	line-height:18px;
	padding-top:2px;
	float:left;
	width:110px;
	font-weight: bold;
	text-align: right;
}

#sidebarhome .field {
	float:left;
	background: #fff;
	border: 1px solid #462100;
	margin: 0;
	padding:3px 2px;
	width: 152px;
	margin-bottom:7px;
	margin-left:5px;
}

#sidebarhome .btn {
	background: url(images/btn.gif) no-repeat 0 0;
	cursor: pointer;
	height: 30px;
	width: 145px;
	border: none;
	margin: 6px 0 10px 122px;
}

#sidebarhome span {
	line-height: 25px;
}

#sidebar li a {
	color: #8F4300;
	text-decoration: none;
        font-size:80%;
        font-weight:bold;
}

#sidebar li a:hover {
	color: #000;
}


#sidebar ul{
	list-style-type: none;
}

#sidebar li {
	padding: 3px 0 3px 15px;
}

#sidebar #s {
	border:1px solid #5c3815;
}

#sidebar input {
	border: 1px solid #5c3815;
}

#sidebar .widget_twitter-tracker { font-size:11px; }
#sidebar div.avatar { width: 35px; float:left; }
#sidebar .avatar img { max-width:30px; }
#sidebar ol.tweets {list-style-type:none;}



#footer {
	background: url(images/footer.gif) no-repeat 0 0;
	height: 81px;
	text-align: center;
	padding-top: 25px;
	font-weight: bold;
	background-size: 100% 100%; width: 100%; 
}
#footer a {
	color: #462100;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

#footer span {
	color: #462100;
	padding: 0 3px;
}

#searchform {
	margin: 10px auto;
	padding: 5px 3px;
	text-align: center;
}

#sidebar #searchform #s {
	width: 108px;
	padding: 2px;
}

#sidebar #searchsubmit {
	padding: 1px;
}

.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
}


#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
}

#commentform {
	margin: 5px 10px 0 0;
	}
#commentform textarea {
	width: 90%;
	padding: 2px;
	}
#commentform #submit {
	margin: 0 0 5px 5px;
	float: left;
	}
	
#sidebar form {
	margin: 0;
}

.post {
	margin: 0 0;
}

.post h2 {
	font-size: 22px;
	padding-left: 5px;
	letter-spacing: -0.05em;
	color: #462100;
}

.post hr {
	display: block;
}

.widecolumn .post {
	margin: 0;
}
	
.navigation { color:#7A4516; padding-bottom:10px; }
.navigation div{ padding-bottom:3px; }
.alignright {
	text-align: right;
}
#mainbox .post .alt small{
	font-weight: normal;
	font-size:13px;
	text-align: left;
}

.commentlist { list-style-type: none; font-size:13px; }
.commentlist p{ padding:5px 0; font-size:15px; }
.commentlist li{ border-bottom:solid 1px #f5d6b8; }
.commentlist img{ float:right; }

#respond { padding-top:20px; }

.pagetitle {
	text-align: center;
	font-size:14px;
}

#searchform label { display:none; }

textarea { overflow:auto; }

.post ul, 
.post ol {
	padding:10px 0 10px 0px;
}

.alignleft {
   float: left;
   margin: 10px 10px 10px 0;
}

.alignright {
   float: right;
   margin: 10px 0 10px 10px;
}


/* ------------------------------------------------------------ *\
	Transition & Animations
\* ------------------------------------------------------------ */

.link-menu.shown span { border-color: #A15919; }
.link-menu.shown span:before,
.link-menu.shown span:after { background: #A15919; }

/* ------------------------------------------------------------ *\
	Media Queries
\* ------------------------------------------------------------ */



/* ipad landscape */
@media only screen and (max-width: 1024px) {
	
	#header {background: url("images/header.gif") no-repeat scroll 0px top transparent; height: 200px; width: 100%; background-size: 100% 100%; }

	.b1 { width: 144px; }
	.b2 { width: 121px; }
	.b3 { width: 185px; }
	.b4 { width: 155px; }
	.b5 { width: 104px; }
	.b6 { width: 101px; }
	
	#mainbox { width: -webkit-calc(100% - 265px); width: -moz-calc(100% - 265px); width: calc(100% - 265px); }
	#mainboxhome { width: -webkit-calc(100% - 377px); width: -moz-calc(100% - 377px); width: calc(100% - 377px); }
	
	#sidebarhome { overflow: hidden; margin-right: 0;  }
	#sidebar { margin-right: 0; }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { 
	
	#sidebarhome {  margin-right: 15px;  }

}

@media only screen and (max-width: 909px) {

	.b1 { width: 124px; }
	.b2 { width: 101px; }
	.b3 { width: 165px; }
	.b4 { width: 135px; }
	.b5 { width: 84px; }
	.b6 { width: 81px; }

	#navigation { padding: 18px 0px 0px 40px; }
	
	#mainboxhome { width: -webkit-calc(100% - 282px); width: -moz-calc(100% - 282px); width: calc(100% - 282px); }
	#sidebarhome { width: 250px; }
	#sidebarhome form { width: 239px; }

	table tr td { display: block; text-align: left; }
	table { top: -50px !important; left: -10px;  }

	#sidebarhome form { width: 140px; margin-left: 25px; border-radius: 10px;}

	#footer a { font-size: 13px; }
}

@media only screen and (max-width: 770px) { 
	
	.b1 { width: 114px; }
	.b2 { width: 91px; }
	.b3 { width: 155px; }
	.b4 { width: 125px; }
	.b5 { width: 74px; }
	.b6 { width: 71px; }

	#navigation { padding: 18px 0px 0px 25px; }
	

	#footer a { font-size: 12px; font-weight: normal;  }

	audio { width: 100%; }
	.post div { width: 100% !important;  }	
	.post { padding-bottom: 15px; }

	.post ol {  padding: 10px 0 10px 15px; }
	
	.entry img { margin: 10px 0 10px 10px !important; }

	.post h2 { padding-left: 0; }

	#header { background-size: 901px 176px;   height: 162px; background-position: -100px 0; }

	.link-menu { display: inline-block; padding-left: 30px; }
	.nav-expanded { display: inline-block; position: absolute; top: 162px; left: 0px; width: 100%; z-index: 100; }
	#navigation  { padding: 0; display: none; }
	#navigation a { width: 100%; padding-left: 10px; color: #574019; font-weight: bold; box-sizing:border-box; background-image: none; font-size: 15px; text-indent: 0; background-color: #c8b28b; text-decoration: none; }
	#navigation li { display: block; float: none; text-align: left; border-bottom: 1px solid #000; }
	#navigation li:last-child { border: none;}

	#footer,
 	#content { background: none; }

 	#content-box { margin: 10px 10px 0; background-color: #fff; padding-top: 10px; border-radius: 5px; box-shadow: 0px 1px 6px 1px rgba(50, 50, 50, 0.75);  padding: 0 6px 0 27px; }

 	.nav-expanded { top: 161px; }

} 


@media only screen and (max-width: 690px) {
	
	#header {  position: relative; }

	

	#content-box {padding: 0px 11px 0px 19px; }
	#mainboxhome {  width: -webkit-calc(100% - 211px); width: -moz-calc(100% - 211px); width: calc(100% - 211px);}
	#sidebarhome  { width: 185px; }

	
	
	.post h2 { font-size: 20px; }

	#mainboxhome .entry ,
	#sidebarhome,
	#sidebarhome h3 { font-size: 14px; }

	#sidebarhome form { margin-left: 0px;  }

	#mainboxhome ul { margin: 0; }

	h1#logo { padding: 31px 0 0 120px;  }
	h2#slogan a {   margin: -4px 0 0 0px; padding-left: 26px; width: 100%; box-sizing:border-box; font-size: 18px; padding-right: 10px;  }

	#mainbox { width: 100%; }
	#sidebar { width: 100%; }
	#sidebar li { padding-left: 0; } 
	#sidebar form { text-align: left; }

	.entry img { width: 100%; height: auto; }

	.entry p span strong { font-size: 20px; }
	.post { padding-bottom: 20px; }

	#mainbox ol li { margin-left: 0; }
	
	#sidebar #searchform #s { width: 86%; }
	#sidebar #searchsubmit {  display: inline-block;  }

	.textwidget iframe { width: 100% !important; }
 }

 @media only screen and (max-width: 500px) {
	
	#header { background-size: 901px 176px;   height: 162px; background-position: -100px 0; }

	#content-box { padding: 0 26px; }

	#sidebarhome, 
 	#mainboxhome { width: 100%; float: none; }

 	#sidebarhome form {   left: 50%; position: relative; margin-left: -95px; }

 	#mainboxhome li { padding-bottom: 0; }
 	#mainboxhome p { padding-top: 5px; }
 	#mainboxhome  { background: none; border-bottom: 1px solid #c39066; float: left; width: 100%; padding: 15px 0 0 0; margin-bottom: 10px;  }

 	h2#slogan a { font-size: 16px; }
 	h1#logo { padding-left: 70px; width: auto; }
 	

 	#mainbox p { padding-top: 5px; padding-right: 0;  }

 	.comment-meta.commentmetadata p a:link,
 	.comment-body > p { font-size: 13px !important; }
 	.comment-body p a { font-size: 10px !important; }

 	#sidebar #searchform #s { width: 77%; }