/*   
Theme Name: Grace Creates - 2012 Theme
Theme URI: http://www.gracecreates.com
Description: 2012 theme v1
Author: matt adams
Author URI: http://www.mattadams.co
Version: 1
*/


@import url("css/reset.css");
@import url("css/comments.css");


body {
	font-family: 'Palatino Linotype', Palatino, Georgia, Times, Serif;
	background: url(images/bg-main.jpg) repeat; /* bg-main.jpg */
	color: #595751; /* #595751 */
	}
	

.wrap {width: 95%; margin: 0 auto;}


a, a:visited {color: #31900d; text-decoration: underline;}

input {
	border: 1px solid #c5b69b;
	padding: 8px 10px;
	margin: 8px 0;
	}
	
	input.button, #searchsubmit {
		background: #a2c5bd;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		padding: 7px;
		border: none;
		margin: 4px 0;
		width: 95%;
		}

/* smartphone */
@media screen and (min-width: 320px) {

/* typography general */

p {
	font-size: 17px;
	margin: 0 0 15px;
	line-height: 28px !important;
	color: #595751;
	}
	
	ol, li {font-size: 15px; margin-bottom: 20px;}
	


h1 {
	font-size: 40px; 
	padding: 10px 0 10px; 
	color: #222; 
	font-family: "Bevan", arial, verdana, sans-serif;
}


h2, h3 {font-family: 'Palatino Linotype', Palatino, Georgia, Times, Serif;}
h2 {font-size: 30px; color:#333;}
h3 {font-size: 18px;}
	
	
/* Misc */



a.button {
    background: url(http://www.gracecreates.com/themes/site_themes/gracecreates_2011/images/btn-slider-right.png) no-repeat scroll top right; 
	display: block;
	float: left;
	height: 46px; 
	margin-right: 6px;
	padding-right: 13px; 
	text-decoration: none;
	color: #3e3e3e;
	font-family: Georgia;
	font-size:18px;
}
a.button span {
	float:left;
	background: url(http://www.gracecreates.com/themes/site_themes/gracecreates_2011/images/btn-slider.png) no-repeat; 
	display: block;
	line-height: 46px; 
	padding: 1px 5px 5px 18px;
} 
a.button:hover span{ text-decoration:underline; }



/* branding header */


.branding {
	width: 100%;
	background: url(images/bg-top.jpg) repeat #222;
	padding: 20px 0;
	margin: 0;
	z-index: 999;
	}

.branding h1 {
	margin: 15px auto;
	display: block;
	font-family: Georgia, Times, Serif;
	height: 92px;
	width: 397px;
	text-indent: -5000px;
	}
	

.branding h1 a {
	text-decoration: none;
	background: url(images/logo.gif) no-repeat center;
	height: 92px;
	width: 397px;
	display: block;
	}
	
.branding nav {
	display: block;
	margin: 0px;
	font-family: Georgia, Times, Serif;
	text-align: center;
	}
	
.branding nav ul {
	margin: 10px 0 0 0;
	padding: 0;
	}


	.branding nav ul ul {display: none;}
	
.branding nav li {
	list-style: none;
	margin: 0;
	padding: 5px;
	display: inline-block;
	width: 100%;
	position: relative;
	}
	
.branding nav li a,
.branding nav li a:visited {
	text-decoration: none;
	color: #faefdb;
	font-family: "oswald", arial, verdana, sans-serif;
	text-transform: uppercase;
	padding: 10px;}

.branding nav li a:hover {
	color: #fff !important;
	background: #31900d;
	}
	
	.branding nav li li a:hover {
	color: #fff;
	background: #31900d;
	}

	
/* add in drop downs for bigger screens */

.branding nav li ul {
	display: none; 
	background: #f1f1f1;
	margin: 0;
	padding: 0;
	z-index: 100;
	position: absolute;
	top: 30px;
	left: 5px;
	text-align: left;}
	
.branding nav li:hover ul {
	display: block;
	position: absolute;
	margin: 0px 0 0 0;
	padding: 0; 
	z-index: 99;}
	
.branding nav li li a {
	height: 10px;
	width: 155px;
	display: block;
	font-size: 0.8em;
	color: #333 !important;
	z-index: 100;
	}
	
	
	.branding nav li li:last-child  {
	border-bottom: 0px;
	}
	
	
.branding nav li:hover li {
	float: none; 
	margin: 0;
	padding: 0;
	}




.pagehead {
	background: url(images/bg-tease.jpg) top center;
	margin-bottom: 20px;
}

.pagehead h1 {
	color: #222;
	font-family: "oswald", arial, verdana, sans-serif;
	font-size: 28px;
	text-align: left;
	padding: 10px 0;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
	filter: dropshadow(color=#111, offx=2, offy=2);

}

.pagehead img {width: 98%; height: auto; margin: 0 auto;}



.sidebar, .infobar, .content {
	width: 95%;
	margin: 0 auto 30px;
	}
	
	
/* blog stuff */
	
.post {
	margin: 0 0 80px 0;}
	
.post h2, .post h2 a {
	margin: 0; 
	padding: 0; 
	color: #222; 
	font-family: "oswald", arial, verdana, sans-serif;
	text-transform: capitalize;
	font-size: 28px;
	text-decoration: none;}
	
.post img {width: 100%; max-width: 600px; height: auto;}


	
.meta {
	font-size: 11px; color: #333;
	margin: 5px 0 15px;}


/* Sidebar styles */
	
.sidebar ul, .infobar ul {margin: 0 0 40px 0; padding: 0;}
.sidebar li, .infobar li {margin: 0; padding: 0 0 5px; list-style: none; font-family: helvetica, arial, sans-serif;}
.sidebar li a, .infobar li a {text-decoration: none;}
.sidebar h2, .infobar h2 {font-family: "Bevan", arial, verdana, sans-serif; color: #87ba67;}


	
/* footer stuff */
footer {
	width: 100%;
	background: url(images/bg-footer.gif) repeat;
	display: block;
	clear: both;
	padding: 25px 0;
	margin: 25px 0 0;}

	footer h3 {
		color: #fff4e0;
		font-family: "Bevan", arial, verdana, sans-serif;}
		
	footer .widget-container {width: 90%; text-align: center; margin: 0 auto 20px;}
	footer .widget-container .easy-social-icons {display: inline-block; text-align: center;}
	
	#twitter_update_list li {
		background: url(images/twitterbg2.png) no-repeat right bottom;
		padding: 20px 10px 35px;}
	
}     /* ================================================= */

/* tablet */
@media screen and (min-width: 768px) {

p {
	font-size: 17px;
	line-height: 28px !important;
	}
	


.wrap {
	width: 760px;
	margin: 0 auto; 
	position: relative;
	}



	
.branding nav li {width: auto;}
.branding nav li ul {width: 175px;}

.branding nav li ul {
	display: none; 
	background: #f1f1f1;
	margin: 0;
	padding: 0;
	z-index: 100;
	position: absolute;
	top: 30px;
	left: 5px;
	text-align: left;}
	


.pagehead h1 {
	font-size: 35px;
	padding: 15px 0;
}


.infobar, 
.content {
	width: 60%;
	float: right;
	position: relative;
	right: 0px;
	margin: 0 0 30px;
	}
	
.content img {
	max-width: 450px; height: auto; width: auto;}
	
.alignright {float: right; margin: 0 0 5px 15px; width: auto;}
.alignleft {float: left; margin: 0 15px 5px 0; width: auto;}

.alignright img, .alignleft img {width: auto;}
	
.sidebar {
	float: left;
	position: absolute;
	left: 0px;
	width: 30%;
	margin: 0 2% 0 0;}



/*  Two Column Layout */
.twocol .content {left: 0px; float: left;}
.twocol .sidebar {float: right; left: 65%;}

/*  One Column Layout */
.onecol .content {width: 100%; left: 0px; float: none;}	


/* footer */
	footer .widget-container {
		width: 25%; 
		text-align: left; 
		margin: 0 0 20px;
		display: block;
		float: left;}
		
		footer .widget-container.Recent_Tweets_widget {width: 40%;}



}     /* ================================================= */

/* desktop */
@media screen and (min-width: 1024px) {


	

.wrap {
	width: 95%;
	max-width: 1150px;
	position: relative;
	margin: 0 auto;}	



.branding h1 {
	float: left;
	margin: 20px 10px 10px 5px;
}
	
.branding nav {
	float: right;
	margin-top: 40px;}
	

.pagehead h1 {
	font-size: 36px;
	padding: 20px 0;
}

.pagehead img {max-width: 850px; height: auto;}

.content {
	width: 40%;
	float: left;
	position: relative;
	left: 25%;
	margin: 0 0 30px;
	min-height: 500px;
	}
	
.sidebar {
	position: absolute;
	left: 0px;
	width: 20%;
	margin: 0 2% 0 0;}
	
	.infobar {
		position: absolute; 
		right: 0px;
		width: 30%;
	}

/*  Two Column Layout */

.twocol .sidebar {float: right; left: 75%;}
.twocol .content {float: left; left: 0px; width: 70%}

/*  One Column Layout */
.onecol .content {width: 90%; position: inherit; margin: 0 auto; float: none;}


/* footer */
	footer .widget-container {
		width: 25%; 
		text-align: left; 
		margin: 0 0 20px;
		display: block;
		float: left;}
		
		footer .widget-container.Recent_Tweets_widget {width: 50%;}


	
	}