/*
 Theme Name:   Twenty Eleven Child
 Theme URI:    http://ppeeters.be/twenty-eleven-child/
 Description:  Twenty Eleven Child Theme
 Author:       Peter Peeters
 Author URI:   http://ppeeters.be
 Template:     twentyeleven
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-eleven-child
*/

@import "css/reset.css";
@import "css/layout.css";

html{
	height: 100%;
}
body{
	background: #5a5a5a url('images/bg.jpg') no-repeat center top;
	height: 100%;
}
a{	
	text-decoration: none;
	color: #C2FC48;
}
a:hover{
	color:#fff;
}
.clear{
	clear: both;
}
#page-wrap{
	width: 1280px;
	position: relative;
	margin: 0 auto 40px;	
}
/* =Header
----------------------------------------------- */

#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
#site-title {
	margin-right: 270px;
	padding: 1.5em 0 0;
}
#site-title a {
	color: #111;
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	color: #1982d1;
}
#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}
#branding img {
	height: auto;
	display: block;
	width: 100%;
}



#header{
	height: 111px;
	padding: 0 10px 0 50px;
}
#header h1{
	float:left;
}
#header h1 a{
    font-family: Georgia,Arial,Helvetica,sans-serif;
    font-size: 48px;
    position: relative;
    text-decoration: none;
    text-shadow: 2px 2px 1px #000000;
    top: 64px;
    width: auto;
    z-index: 1000;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;    
}
#header h1 a:hover{
	color:#f4f6f0;
}
ul#social{
	float: right;
	top: 95px;
	position:relative;
}
ul#social li{
	float: left;
	margin-right: 10px;
	display: inline;
}
ul#social li a{
	width: 16px;
	height: 16px;
	display: block;
	background-image: url('images/layout-icons.png');
	text-indent: -99999px;
}
ul#social li a.feed{
	background-position: -16px 32px;
}
ul#social li a.facebook{
	background-position: 0 32px;
}
ul#social li a.twitter{
	background-position: 0 16px;
}
/*--Main Content Styles Start here --*/
#main-content{
	padding: 10px 60px 10px 80px;
	background-color: #000;	
	border-bottom: 1px #696969 solid;
	border-left: 1px #696969 solid;
	border-right: 1px #696969 solid;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.3 opacity */
	background: rgba(0, 0, 0, 0.3);
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color:#c7c7c7;
	line-height: 16px;
}
#main-content a:hover{
	color: #fff;
}
#layout-controls{
	margin-bottom: 15px;
}
#layout-controls span{
	width: 20px;
	height: 26px;
	display: block;
	background-image: url('images/layout-icons.png');
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-indent: -99999px;
}
#layout-controls a{
	width: 20px;
	height: 26px;
	display: block;
	float: left;
	background-image: url('images/layout-icons.png');	
	margin-right: 10px;
	display: inline;	
}
#layout-controls a.grid span{ 
	background-position: left 0;
}
#layout-controls a.grid{
	background-position: left -26px;
}
#layout-controls a.list span{
	background-position: right 0;
}
#layout-controls a.list{
	background-position: right -26px;
}
#layout-controls a:hover span{
	opacity: 0; /* other browsers */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* this works in IE6, IE7, and IE8 */
}
/*-------------Folio Styles Starts Here---------------*/
ul#folio li a{
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
ul#folio li{
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.3 opacity */
	background: rgba(0, 0, 0, 0.3);
	padding: 20px;
	border: 1px #4c4c4c solid;
	margin-bottom: 22px;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
ul#folio li:hover{
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.3 opacity */
	background: rgba(0, 0, 0, 0.1);
}
ul#folio li .image{
	text-align: center;
}
ul#folio li .image span{
	width: 158px;
	height: 116px;
	display: block;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 10px;
}
ul#folio li .image span a{
	width: 158px;
	height: 116px;
	display: block;
}
ul#folio li .image a{
	font-weight: bold;
}
/*------------------Grid Layout Starts Here-------------------*/
ul#folio.grid li{
	width: 158px;
	height: 130px;
	float: left;	
	margin-right: 19px;	
	display: inline;
}
ul#folio.grid li .content{
	display: none;	
}
ul#folio.grid li .image span a{
	width: 158px;
	height: 116px;
	display: block;
}
ul#folio.grid li.rightmost{
	margin-right: 0;
}
/*------------------List Layout Starts Here-------------------*/
ul#folio.list li{
	display: block;
}
ul#folio.list li .image,ul#folio li.details .image{
	width: 158px;
	height: 130px;
	float:left;
}
ul#folio.list li .content{
	float: left;
	padding: 0 10px 0 40px;
	width: 598px;
}
ul#folio.list li .content h2,ul#folio li.details .content h2{
	font-size: 24px;
	color: #C2FC48;
	margin-bottom: 6px;
	font-family: Georgia, Arial, Helvetica, sans-serif;
}
ul#folio.list li .content span.tags,ul#folio li.details .content span.tags{
	color: #fff;
	font-size: 11px;
	font-style: italic;
	margin-bottom: 10px;
	display: block;
}
/*------------------Details Layout Starts Here-------------------*/
ul#folio li.details{
	display: block;
	width: auto;
	height: auto;
	width: 820px;
	float: left;	
	margin-right: 19px;	
	min-height:130px;	
}
ul#folio li.details .content{
	display: block !important;	
	float: left;
	padding: 0 10px 0 40px;
	width: 598px;
}
/*----------------Footer Styles Starts here --------------------*/
#footer{
	padding: 10px 50px;
	color: #8b8b8b;	
}
#footer p{
	float: left;
	width: 719px;
}
#footer a{
	color: #dadada;
}
#footer a:hover{
	text-decoration: underline;
}
#footer a.nettuts{
	background-image: url('images/nettuts.jpg');
	width: 66px;
	height: 20px;
	display: block;
	float: right;
	text-indent: -99999px;
}