/*   
Theme Name: LSW
Theme URI: http://lsystemworks.com
Description: This is Lester's System Works site.
Author: Lester Carpenter
Author URI: http://lsystemworks.com
Version: 1
*/

/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

/*body, button, input, select, textarea { font-family: sans-serif; color: #222; }*/

/* 
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */

/*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }*/

/* ======= CSS Reset ======= */

* {
	padding:		0;
	margin:			0;
	font-size:		100%;
	font-weight:	normal;
	font-style:		normal;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	list-style:none;
}

@viewport {
	width:device-width;
	-moz-width:device-width;
	-webkit-width:device-width;
	-o-width:device-width;
	-ms-width:device-width;
}

html {
	background:#444 url(images/bg.jpg);
}

#global_wrapper {
	background-color:#fffcec;
	margin:0 auto;
	max-width:72em;
	height:120em;
	padding-bottom:2em;
}

body {
	font-size:.625em;
	font-family: 'Roboto', sans-serif;
	color:#333;
}






#header_wrapper {
	padding: 0 3em 0 3em;
}

#header_container {
	border-bottom:solid 2px #666;
	max-width:620em;
	height:15em;
}

img {
	margin:2em 0 0 0;
}




/******************************** navigation *************/

#nav_div_container {
	max-width:70.255295%;
	margin:-4.75em 0 0 19.75em;
	border:solid px green;
}

#nav_div_container ul {
	list-style:none;
	overflow:hidden;
}

#nav_div_container ul li a {
	box-shadow: inset 1em 0 2em #b8b8b8;
	font-family: 'Oswald';
} 
		
#nav_div_container li a {
	float:left;
	background:#ededed;
	color:#663333;
	display:block;
	padding:.4em;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	width:25%;
	border:solid px black;
	font-size:1.5em;
	letter-spacing:.1em;
}

#nav_div_container li a:focus {
	outline:thin dotted;
}

#nav_div_container li a:hover, .main_nav a:active {
	outline:0;
	color:#be2900;
}




/************************* slider ******************/

/*.widget {
	position:relative;
	width:70.255295%;
	height:25em;
	background-color:#fff;
	border:solid 1px #be2900;
	margin:0 0 2em 0;
	float:right;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}*/

@-moz-keyframes slider  {
	0% {
		background-position:0% bottom;}
	20% {
		background-position:0% bottom;}
	25% {
		background-position:33.33333% bottom;}
	45% {
		background-position:33.33333% bottom;}
	50% {
		background-position:66.66667% bottom;}
	70% {
		background-position:66.66667% bottom;}
	75% {
		background-position:100% bottom;}
	95% {
		background-position:100% bottom;}
	100% {
		background-position:133.33% bottom;}
}

@-webkit-keyframes slider {
	0% {
		background-position:0% bottom;}
	20% {
		background-position:0% bottom;}
	25% {
		background-position:33.33333% bottom;}
	45% {
		background-position:33.33333% bottom;}
	50% {
		background-position:66.66667% bottom;}
	70% {
		background-position:66.66667% bottom;}
	75% {
		background-position:100% bottom;}
	95% {
		background-position:100% bottom;}
	100% {
		background-position:133.33% bottom;}
}

@-o-keyframes slider {
	0% {
		background-position:0% bottom;}
	20% {
		background-position:0% bottom;}
	25% {
		background-position:33.33333% bottom;}
	45% {
		background-position:33.33333% bottom;}
	50% {
		background-position:66.66667% bottom;}
	70% {
		background-position:66.66667% bottom;}
	75% {
		background-position:100% bottom;}
	95% {
		background-position:100% bottom;}
	100% {
		background-position:133.33% bottom;}
}

#slider {
	position:relative;
	width:70.255295%;
	border:solid 1px #be2900;
	margin:0 0 2em 0;
	float:right;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	background:url(images/slider_demo.jpg) 0 bottom repeat-x;
	background-size:400%;
	padding-bottom:34%;
  -moz-animation: slider 28s ease-out infinite;
  -webkit-animation: slider 28s ease-out infinite;
  -o-animation: slider 28s ease-out infinite;
  -ie-animation: slider 28s ease-out infinite;
}

/************************* main content ******************/

#main_content_wrapper {
	margin:1.5em 3em 2em 3em;
}

h3 {
	color:#fff;
	background-color:#be2900;
	padding:.35em 0 .10em 1em;
	text-transform:uppercase;
	margin:-1em -2em 1.5em -2em;
	font-size:1.1em;
}
	
#main_blog {
	background-color:#fff;
	float:right;
	width:70.255295%;
	height:100%;
	border:solid 1px #be2900;
	margin-bottom:2em;
	padding:1em 2em 2em 2em;
	/*overflow:hidden;*/
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
	clear:both;
}

#main_blog h2 a {
	font-family: 'Roboto', sans-serif;
	font-weight:900;
	text-transform:none;
	font-size:2.2em;
	line-height:1.25em;
	color:#333333;
	letter-spacing:.01em;
	text-decoration:none;
}

#main_blog p a {
	color:#be2900;
}

	
.time time {
	/*font-size:1.25em;*/
	text-transform:uppercase;
	color:#bbbaba;
	letter-spacing:.1em;
	margin:1.25em 0 .5em 0;
}

.time {
	margin:1.25em 0 0 0;
}

.blog_posts p {
	font-size:1.4em;
	line-height:1.5em;
	letter-spacing:.03em;
	padding:0 0 .5em 0;
}

footer {
	width:70.255295%;
	height:7em;
	border:solid px #be2900;
	float:right;
	clear:both;
}

footer p {
	font-family: 'Oswald';
	letter-spacing:.0125em;
	text-align:center;
	padding:.5em 1em .5em 1em;
}

footer p a {
	font-family: 'Oswald';
	font-size:1.5em;
	color:#663333;
	text-decoration:none;
	letter-spacing:.0125em;
	padding:0 1em;
}
		
footer p a:focus {
	outline:thin dotted;
}

footer p a:hover, .main_nav a:active {
	outline:0;
	color:#be2900;
}

#copyright {
	font-size:1.25em;
}


/************************************************ mobile styles */
@media only screen
and (max-width: 41em /*26.9em*/)
{
	
	#global_wrapper {
		height:auto;
	}

	#header_wrapper {
		padding: 0 1em ;
	}
	

	#header_container {
		border:solid px purple;
		max-width:620em;
		height:13em;
	}

	img {
		margin:0;
		border:solid red px;
	}
		
	#nav_div_container {
		max-width:100%;
		max-height:100%;
		margin:.25em 0 0 0;
		border:none;
	}

	#nav_div_container ul {
		box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 2.0);
	} 


	#nav_div_container ul li a {
		box-shadow: inset 1em 1em 2em #cbcbcb;
		font-size:1.5em;
		letter-spacing:.1em;
		padding:.75em .5em;
	} 
	
	#nav_div_container li a {
		width:50%;
	}

	#slider {
		float:none;
		width:auto;
		height:auto;
		margin:11.5em 1em 1em 1em;
		padding-bottom:48%;
	}

	#main_content_wrapper {
		margin:0;
		/*border:solid 1px #be2900;*/
	}
	
	#main_blog {
		float:none;
		width:auto;
		height:auto;
		margin:0 1em;
	}

	footer {
		width:100%;
		height:auto;
		border:solid px #be2900;
		float:none;
		padding:2em 0 0 0;
	}

	footer p {
		letter-spacing:.0125em;
		padding:.5em 0 0 0;
	}

	footer p a {
		padding:1.5em 1em;
	}

}
	
/************************************************ mobile styles */
@media only screen
and (max-width: 20em /**/)
{
	
	#slider {
		margin:9.5em 1em 1em 1em;
		padding-bottom:46%;
	}


	#nav_div_container {
		margin:0;
		border:none;
	}

	#nav_div_container ul li a {
		font-size:1.25em;
		letter-spacing:.05em;
		padding:.75em .5em;
	} 
	
	footer p a {
		padding:0 .5em;
	}

}