/* PRIMENTO PREMIUM PORTFOLIO STYLESHEET 
    Document   : layout.css
    Created on : April, 2012
    Author     : Kobus Swartz
    Description: Stylesheet for index.html and blog-post.html.

All sections are marked to make it easier to navigate and change the css.
The first section of the css file contains the basic styles for the theme, followed by the user styles for the specific content.
At the bottom you will find the 'helper' section, which contains classes to hide and mark certain elements across the Primento Theme
*/

/* Basic HTML Elements for Primento */

body {
	color: #312b2b;
	font-family: Arial, Helvetica, sans-serif;
	background: url("../img/bg-spine.png") #312b2b fixed repeat;
	font-size: 14px;
}

* {
	outline: none;
}

.custom div.entry-content ul li{list-style: none; !important}

/*
 @font-face {
 	font-family: 'Lobster';
 	src: url('Lobster.otf');
 	font-style: normal;
}
*/
#welcome .inner, #about-me .inner, #my-work .inner, #method .inner, #blog .inner, #contact .inner #footer .inner {
	padding: 0 10px 10px 10px;
	margin: 0;
}
/* ===== Font colors for  dark and light boxes ===== */
.dark {
	color: #312b2b;
	margin: 0;
	padding: 0;
	font-weight: normal;
}
.light {
	color: #fff;
	margin: 0;
	padding: 0;
	font-weight: normal;
}

/* ===== Heading Sizes ===== */

h1 {
	font-size: 50px;
}
h2 {
	font-size: 35px;
}
h3 {
	font-size: 25px;
}
h4 {
	font-size: 20px;
}
h5 {
	font-size: 18px;
}
h6 {
	font-size: 16px;
}

/* ===== Heading Styles ===== */

h1, h2, h3, h4, h5, h6 {
	font-family: "Lobster";
	font-weight: normal;
}

/* =====  Bottom Spacing for all H1 Headings ===== */

.inner h1 {
	margin-bottom: 20px;
}

/* ===== Header Styles ===== */

#header {
	position: fixed;
	background: url("../img/header-background.png") #fff repeat-x;
	height: 143px;
	width: 100%;
	z-index: 1001;
	border-bottom: 1px solid #aeaeae;
	font-family: "Lobster";
}

#header .inner {
	position: relative;
	margin: 0 auto;
	width: 1000px;
}

#header .logo {
	position: absolute;
	left: 444px;
	top: 5px;
	height: 175px;
	width: 112px;
	display: block;
}

/* ===== Navigation Styles ===== */

#navigation {
	font-size: 24px;
	width: 1000px;
	margin: auto;
	position: relative;
	padding-top: 55px;
}

ul.main-menu {
	padding-left: 75px;
}

ul.main-menu li {
	display: inline;
	float: left;
	padding-left: 0px;
	padding-right: 40px;
}

ul.main-menu li.gap {
	padding-right: 160px;
}

#navigation a {
	color: #312b2b;
	text-decoration: none;
}

#navigation li a:active {
	color: #312b2b;
	text-decoration: none;
}

#navigation li a:hover {
	color: #4d4242;
	text-decoration: none;
}

#navigation a:visited {
	color: #312b2b;
	text-decoration: none;
}

/* ===== Nivo Slider Positioning ===== */  

#feature .inner {
	position: relative;
	margin: 0 auto;
	width: 970px;
	height: 300px;
	padding: 0;
}

/* ===== Styles For Main Sections ===== */

/* ===== Welcome Section at the top of the page ===== */

#welcome {
	background: url("../img/texture1.png") #231d1e repeat;
	padding-top: 40px;
}

#welcome .inner {
 	position: relative;
	margin: 0 auto;
	width: 980px;
	height: 800px;
}

/* ===== About Me Section ===== */

#about-me {
	background: url("../img/texture2.png") #d6d6d6 repeat ;
}

#about-me .inner {
	position: relative;
	margin: 0 auto;
	width: 1000px;
	height: 650px;
	display: block;
}

#about-me .inner .intro {
	overflow: hidden;
}

#about-me .inner .intro p {
	float: left;
	width: 600px;
	text-align: justify;
	margin: 0;
}

#about-me .inner .intro img {
	float: left;
	border-right: 3px solid #4b4545;
	margin-right: 20px;
	padding-right: 20px;
}

/* My Skills Graph */

#about-me .inner #skills ul {
	color: #fff;
	list-style-type: none;
	margin: 0;
	padding: 0 10px 0 0;
	float: left;
	/*border-right: 8px solid #505650;*/
	font-size: 12px;
	font-weight:  bold;
	width: 350px;
}

#about-me .inner #skills ul li span {
	float: right;
	font-weight: normal;
}

#about-me .inner #skills ul li {
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 25px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	-moz-transition: all 0.50s ease-in-out;
	-webkit-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
}

#about-me .inner #skills ul li:hover {
	opacity: 0.5;
}

/* ===== About Me Section - Mountain Bikes ===== */

#skills ul li.mountain {
	background: url('../img/45-degree-lines.png') repeat-x #a21313;
	width: 300px;
}

#skills ul li.tandem {
	background: url('../img/45-degree-lines.png') repeat-x #251f1f;
	width: 80px;
}

#skills ul li.trailer {
	background: url('../img/45-degree-lines.png') repeat-x #a21313;
	width: 80px;
}

#skills ul li.babysit {
	background: url('../img/45-degree-lines.png') repeat-x #251f1f;
	width: 80px;
}

#skills ul li.helmets {
	background: url('../img/45-degree-lines.png') repeat-x #a21313;
	width: 300px;
}

#skills ul li.nothing {
	background: url('../img/45-degree-lines.png') repeat-x #251f1f;
	width: 0px;
}

#skills ul li.nothing {
	background: url('../img/45-degree-lines.png') repeat-x #a21313;
	width: 0px;
}
#skills ul li.nothing {
	background: url('../img/45-degree-lines.png') repeat-x #251f1f;
	width: 0px;
}

/* End My Skills Graph */


/* ===== About Me Section - Infographic ===== */

#about-me .inner .infographic {
	width: 265px;
	height: 270px;
	float: left;
	/*margin-left: 65px;*/
}

/* ===== About Me Section - Resume/Feature ===== */

#about-me .inner .resume {
	background: url("../img/feature-box.png") repeat;
	width: 264px;
	height: 270px;
	float: left;
	margin-left: 65px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding-bottom: 20px;
	text-align: center;
}

#about-me .inner .resume h2 {
	padding-top: 40px;
	margin: 0;
	line-height: 35px;
}

#about-me .inner .resume h4 {
	padding-top: 5px;
}

#about-me .inner .resume p {
	margin-top: 35px;
}

/* Red Button used across site */

.red-btn {
	background: #a21313;
	border: 1px solid #730b0b;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 7px 25px;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
	color: #fff;
}

.red-btn:hover {
	background: #880f0f;
	border: 1px solid #a21313;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 7px 25px;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
	color: #fff;
}

a.red-btn {
	color: #fff;
	text-decoration: none;
}

/* ===== My Work Section ===== */

#my-work {
	background: url("../img/texture1.png") #231d1e repeat;
}

#my-work .inner {
 	position: : relative;
	margin: 0 auto;
	width: 1000px;
	height: 500px;
	display: block;
}

#my-work .gallery ul {
	list-style-type: none;
	padding: 0;
	margin-top: 20px;
}

#my-work .gallery ul li {
	background: #fff;
	float: left;
	border: 3px solid #fff;
	margin: 7px;
	-webkit-transition: ima 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#my-work .gallery ul li:hover {
	background: url("../img/view.png") no-repeat #fff;
	float: left;
	border: 3px solid #fff;
	margin: 7px;
	opacity: 1;
}

#my-work .gallery ul li span {
	opacity: 1;
	-moz-transition: all 0.50s ease-in-out;
	-webkit-transition: all 0.50s ease-in-out;
	transition: all 0.50s ease-in-out;
}

#my-work .gallery ul li span:hover {
	opacity: 0.2;
}

#my-work .gallery ul li p {
	background: url("../img/camera.png") right no-repeat;
	padding: 5px;
	margin: 0;
	color: #999;
}

/* ===== Method Section ===== */

#method {
	background: url("../img/texture2.png") #d6d6d6 repeat;
	color: #312b2b;
}

#method .inner {
	position: relative;
	margin: 0 auto;
	width: 980px;
	height: 650px;
	display: block;
}

#method .inner .workflow ul {
	list-style-type: none;
	padding-left: 0;
	margin-top: 30px;
}

#method .inner .workflow ul li {
	height: 320px;
	float: left;
	margin-right: 47px;
}

#method .inner .workflow ul li.last {
	height: 320px;
	float: left;
	margin-right: 0;
}

#method .inner .workflow h2 {
	color: #312b2b;
	text-align: center;
	border-bottom: 4px dashed #980e0c;
	padding-bottom: 7px;
	margin-top: 5px;
	margin-bottom: 15px;
	width: 200px;
}

#method .inner .workflow p {
	width: 200px;
	text-align: justify;
	padding: 0;
	margin: 0;
}


/* ===== Contact Section ===== */

#contact, .contact {
	background: url("../img/texture2.png") repeat;
	/*color: #fff;*/
}

#contact .inner, .contact .inner {
	position: relative;
	margin: 0 auto;
	width: 980px;
	height: 750px;
	display: block;
}

/* ===== Contact Section - Contact Form ===== */

#contact .inner .contact-form {
	margin-top: 30px;
}

#contact .inner .contact-form p {
	color: #312b2b;
	width: 450px;
}

#contact .inner .contact-form fieldset.text-fields {
	float: left;
	width: 450px;
	margin-right: 10px;
}
/*
#contact .inner .contact-form fieldset.text-block {
	float: left;
	width: 480px;
}
*/
#contact .inner .contact-form fieldset input {
	width: 450px;
	padding: 15px 0 15px 10px;
	border: none;
	margin-bottom: 10px;
	color: #999;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#contact .inner .contact-form fieldset input:focus {
	color: #333;
}

/* laber.error is the class used to style the error messages on validation */

label.error {
	color: #f00;
	top: 350px;
	display: block;
	position: absolute;
	font-size: 12px;
	color: #f00;
}

#contact .inner .contact-form fieldset textarea {
	width: 450px;
	height: 130px;
	border: none;
	padding: 15px;
	color: #999;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#contact .inner .contact-form fieldset textarea:focus {
	color: #333;
}

#contact .inner .contact-form .red-btn {
	color: #fff;
	/*float: left;*/ 
	margin-top: 10px;
}

#contact .inner .details {
	margin-top: 60px;
	float: left;
	width: 500px;
}

#contact .inner .details ul {
	list-style-type: none;
	padding-left: 0;
	color: #7c7c7c;
}

#contact .inner .details ul li {
	line-height: 20px;
}

#contact .inner .details ul li span {
	color: #312b2b;
}

#contact .inner .social {
	margin-top: 40px;
}

#contact .inner .social ul {
	list-style-type: none;
	padding-left: none;
}

#contact .inner .social ul li {
	float: left;
	padding-right: 10px;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all 0.8s ease;
}

#contact .inner .social ul li:hover {
	float: left;
	padding-right: 10px;
	padding-top:5px;
}

/* Go Up button at the bottom of the page */

#contact .inner .go-up {
	width: 110px;
	position: relative;
	margin: 0 auto;
}

#contact .inner .go-up img {
	margin-top: 40px;
}

/* ===== Map Section ===== */

#map .inner {
 	position: relative;
	margin: 0 auto;
	width: 980px;
	height: 800px;
}



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

#footer {
	background: url("../img/footer-bg.png") #d6d6d6 repeat-x;
	height: 112px;
	color: #fff;
}

#footer .inner
 {
 	height: 112px;
	position: relative;
	margin: 0 auto;
	width: 980px;
	padding-top: 10px;
}

#footer .inner .footer-logo {
	float: left;
	width: 320px;
}

#footer .inner .footer-links {
	float: left;
	width: 320px;
	text-align: center;
}

#footer .inner .rss {
	float: right;	
	width: 320px;
}

#footer .inner .rss p {
	background: url("../img/rss.png") top right no-repeat;
	height: 32px;
	float: right;
	padding-right: 37px;
}


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

#footer .inner a {
	color: #a21313;
	text-decoration: none;
}

#footer .inner .rss a {
	text-decoration: none;
	color: #fff;
}


/* ===== Page Splitter Stiching - Dividing the content boxes ===== */

/* .splitter is used for the top black bottom grey sections */

.splitter {
	background: url("../img/splitter.png") #333 repeat-x;
	position: relative;
	margin: 0 auto;
	height:50px;
}

/* .splitter-up is used for the top grey bottom black sections */

.splitter-up {
	background: url("../img/splitter2.png") #333 repeat-x;
	height:50px;
}

/* .splitter-black is used to link the top black and bottom black sections, this is only used in the footer */

.splitter-black {
	background: url("../img/splitter-black.png") #333 repeat-x;
	height:50px;
}

/* ===== Top padding for each box section ===== */

span.about-me {
	padding-top: 162px;
}

span.my-work {
	padding-top: 162px;
}

span.method {
	padding-top: 162px;
}

span.blog {
	padding-top: 162px;
}

span.contact {
	padding-top: 162px;
}


/* ===== Helpers ===== */

/* .todo is used to apply a red border around sections you are working on and would like to return to at a later stage. */ 

.todo {
	border: 1px dashed #f00;
}

/* .hide is used to hide certain elements in the theme which you dont want to display, for example the resume section, search bars or any other class or id. */

.hide {
	display: none;
}


/* END OF LAYOUT.CSS */