/*
	Theme Name:1stwebdesigner HTML5/CSS3 Layout
	Date:March 2013
	Description:Basic HTML5/CSS3 layout built on a responsive framework
	Version:1.0
	Author:Christian Vasile
	Author URL:http://christianvasile.com
*/

/* ===========================
   ======= Body style ======== 
   =========================== */

@font-face {
    font-family:'ralewayregular';
    src:url('fonts/raleway_regular/raleway-webfont.eot');
    src:url('fonts/raleway_regular/raleway-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway_regular/raleway-webfont.woff2') format('woff2'),
         url('fonts/raleway_regular/raleway-webfont.woff') format('woff'),
         url('fonts/raleway_regular/raleway-webfont.ttf') format('truetype'),
         url('fonts/raleway_regular/raleway-webfont.svg#ralewayregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family:'ralewaybold';
    src:url('fonts/raleway_bold/raleway-bold-webfont.eot');
    src:url('fonts/raleway_bold/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway_bold/raleway-bold-webfont.woff2') format('woff2'),
         url('fonts/raleway_bold/raleway-bold-webfont.woff') format('woff'),
         url('fonts/raleway_bold/raleway-bold-webfont.ttf') format('truetype'),
         url('fonts/raleway_bold/raleway-bold-webfont.svg#ralewayregular') format('svg');
    font-weight:normal;
    font-style:normal;
}
   
body {
	color:#000305;
	background-image: url(img/bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-size:90%; /* Base font size:14px */
	font-family:ralewayregular, Arial, sans-serif;
	line-height:1.429;
	margin:0;
	padding:0;
	text-align:left;
}
	
.body {
	clear:both; 
	margin:0 auto; 
	width:75%;
}
	
/* ===========================
   ========= Headings ======== 
   =========================== */
h2 {font-size:1.571em; color:#439fd3;}	/* 22px */
h3 {font-size:1.429em; color:#7ba400;}	/* 20px */
h4 {font-size:1.286em}	/* 18px */
h5 {font-size:1.143em}	/* 16px */
h6 {font-size:1em;}		/* 14px */

h2, h3, h4, h5 {
	font-family:ralewaybold, Arial, sans-serif;
	font-weight:400;
	line-height:1.1;
	margin-bottom:.8em;
}

h6 {
	font-family:ralewaybold, Arial, sans-serif;
	font-weight:400;
	line-height:1.0;
	margin-bottom:0;
}
/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
	outline:0;
	}

a img {
	border:0px; 
	text-decoration:none;
}

a:link, a:visited {
	color:#439fd3;
	text-decoration:none;
}

a:hover, a:active {
	color:#7ba400;
	text-decoration:none;
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */

.mainHeader nav {
	background:rgba(255, 255, 255, 0.2);
	font-size:1.143em;
	height:40px;
	line-height:30px;
	margin:0 auto 30px auto;
	text-align:center;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
	
.mainHeader nav ul {
	list-style:none; 
	margin: auto;
}

.mainHeader nav ul li {
	float:left; 
	display:inline; 
}
	
.mainHeader nav a:link, .mainHeader nav a:visited {
	color:#fff;
	display:inline-block;
	height:30px;
	padding:5px 23px;
	text-decoration:none;
}

.mainHeader nav a:hover {
	background:rgba(255, 255, 255, 0.1);
	color:#fff;
}

.mainHeader nav a:active {
	background:rgba(255, 255, 255, 0.1);
	color:#fff;
}

.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	background:rgba(38, 177, 255, 0.6);
	color:#fff;
}
	
.mainHeader img {
	width:30%;
	height:auto;
	margin:1% 0;
}

/* ===========================
   ======= Content Area ====== 
   =========================== */

.mainContent {
	overflow:hidden;
	line-height:25px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.mainContent ul {
	list-style-image:url('img/list_blue.png');
	padding:0 0 10px 10px;
	margin:0 0 0 15px;
}

.topcontent {
	background-color:#fff;
	padding:1% 5% 3% 5%;
	margin-bottom:3%;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

.middlecontent {
	background-color:#fff;
	padding:1% 5% 3% 5%;
	margin-bottom:3%;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.bottomcontent {
	background-color:#fff;
	padding:1% 5% 3% 5%;
	margin-bottom: 2%;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.content {
	width:63%;
	float:left;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

.post-info {
	font-style:italic;
	color:#999;
	font-size:85%;
}

input, textarea { 
    padding:9px; 
    border:solid 1px #d9d9d9; 
    outline:0; 
    font:normal 13px/100% ralewayregular, Arial, sans-serif; 
    width:200px; 
    background:#fff; 
    box-shadow:rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow:rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow:rgba(0,0,0, 0.1) 0px 0px 8px;
    border-radius:3px;
    -webkit-border-radius:3px; 
	-moz-border-radius:3px;
} 
   
textarea { 
    width:400px; 
    max-width:400px; 
    height:150px; 
    line-height:150%; 
} 
   
input:hover, textarea:hover, input:focus, textarea:focus { 
    border-color:#439fd3; 
} 
 
input:focus, textarea:focus {
	background:#F8FACA;
}
   
.form label { 
    margin-left:10px; 
    color:#7f7f7f;
}

.form span {
	color:#f70000;
}
   
.button {
	background-color:#439ed3;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #d9d9d9;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	font-family:ralewaybold, Arial, sans-serif;
	font-size:15px;
	padding:9px 23px;
	text-decoration:none;
}

.button:hover {
	background-color:#0688fa;
}

.button:active {
	color:#b9b9b9;
	background-color:#32779f;
}

.shadow {
  position:relative;
}

.shadow:before, .shadow:after {
  z-index:-1;
  position:absolute;
  content:"";
  bottom:15px;
  left:10px;
  width:50%;
  top:80%;
  max-width:300px;
  background:#777;
  -webkit-box-shadow:0 15px 10px #777;
  -moz-box-shadow:0 15px 10px #777;
  box-shadow:0 15px 10px #777;
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  -o-transform:rotate(-3deg);
  -ms-transform:rotate(-3deg);
  transform:rotate(-3deg);
}

.shadow:after {
  -webkit-transform:rotate(3deg);
  -moz-transform:rotate(3deg);
  -o-transform:rotate(3deg);
  -ms-transform:rotate(3deg);
  transform:rotate(3deg);
  right:10px;
  left:auto;
}
    
/* ===========================
   ======== Sidebar ========== 
   =========================== */

.top-sidebar {
	width:29%;
	float:left;
	margin:0 0 2% 2%;	
	padding:1% 3% 2% 3%;
	background-color:#fff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.middle-sidebar {
	width:29%;
	float:left;
	margin:0 0 2% 2%;	
	padding:1% 3% 2% 3%;
	background-color:#fff;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.bottom-sidebar {
	width:29%;
	float:left;
	margin:0 0 2% 2%;
	padding:1% 3% 2% 3%;
	background-color:#fff;	
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.top-sidebar ul, .middle-sidebar ul, .bottom-sidebar ul {
	list-style-image:url('img/list_green.png');
	padding:0 0 0 10px;
	margin:0;
}
.top-sidebar ul:last-child, .middle-sidebar ul:last-child, .bottom-sidebar ul:last-child {
	margin-bottom:2%;
}

/* ===========================
   ========= Footer ========== 
   =========================== */

.mainFooter {
	width:100%;
	float:left;
	margin:2% 0;
	padding-left:0;
	color:#fff;
	background:rgba(255, 255, 255, 0.2);
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

.mainFooter p {
	width:91%;
	margin:1% auto;
}

/* ===========================
   ====== Media Queries ====== 
   =========================== */

@media only screen and (min-width :150px) and (max-width :780px)
{
	.body {
		clear:both; 
		margin:0 auto; 
		width:90%;
		font-size:90%;
	}
	
	.mainHeader nav {
		background:#666;
		font-size:1.143em;
		height:120px;
		line-height:30px;
		margin-bottom:0;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
	}
		
	.mainHeader nav ul {
		list-style:none; 
		margin:0 auto;
		padding-left:0;
	}
	
	.mainHeader nav li {
		margin:0 auto;
		width:100%;
	}
	
	.mainHeader nav a:link, .mainHeader nav a:visited {
		color:#fff;
		display:block;
		height:30px;
		padding:5px 0;
		text-decoration:none;
	}
	
	.mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
		background:rgba(38, 177, 255, 0.6);
		color:#fff;
		text-shadow:none !important;
	}
		
	.mainHeader nav li a {
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
	}
	
	.mainHeader img {
		width:100%;
		height:auto;
		margin-bottom:3%;
	}
	
	.mainContent {
		overflow:hidden;
		line-height:25px;
		margin-top:4%;
		margin-bottom:2%;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
	}
	
	.topcontent {
		padding:2% 5%;
		margin-bottom:4%;
		background-color:#fff;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;		
	}
	
	.middlecontent {
		padding:2% 5%;
		margin-bottom:4%;
		background-color:#fff;	
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;	
	}
	
	.bottomcontent {
		padding:2% 5%;
		background-color:#fff;	
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;	
	}
	
	.content {
		width:100%;
		float:left;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;	
	}	

	.post-info {
		display:none;
	}
	
	.top-sidebar {
		width:86%;
		float:left;
		margin-top:4%;
		margin-left:0;
		padding:0 7%;
		margin-bottom:0;
		background-color:#fff;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;		
	}
	
	.top-sidebar p {
		width:90%;
	}

	.middle-sidebar {
		width:86%;
		float:left;
		margin-top:4%;
		margin-left:0;
		padding:0 7%;
		margin-bottom:0;
		background-color:#fff;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;		
	}
	
	.middle-sidebar p {
		width:90%;
	}
	
	.bottom-sidebar {
		width:86%;
		float:left;
		margin-top:4%;
		margin-left:0%;
		padding:0 7%;
		margin-bottom:1%;
		background-color:#fff;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;	
		}
	
	.bottom-sidebar p {
		width:90%;
	}
		
	.mainFooter {
		width:100%;
		float:left;
		margin:2% 0;
		padding-left:0;
		color:#fff;
		background-color:#666;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;		
	}
	
	.mainFooter p {
		width:86%;
		margin:2% auto;
	}
}