/* PRIMENTO PREMIUM PORTFOLIO STYLESHEET 
    Document   : layout.css
    Created on : April, 2012
    Author     : Kobus Swartz
    Description: Main Stylesheet for Primento

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 contaibs classes to hie 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;
}

/* ===== Default Wordpress Styles ===== */

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter, div.aligncenter {
    display:block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}


 @font-face {
 	font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;
 	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: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;
	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: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;
}

#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("http://silverwings.de/wp-content/uploads/2014/01/Silverwings_back_neu.jpg") #000000 no-repeat;
	padding-top: 200px; height: 800px;
}

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

/* ===== Single Page Styling ===== */

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

#single-page a {
	color: #333;
	text-decoration: none;
}

#single-page .inner {
	position: relative;
	margin: 0 auto;
	width: 1000px;
	height: 1100px;
	display: block;
	margin-top: 90px;
}

#single-page h1 {
	margin-top: 20px;
}

/* ===== 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 .new {
	position: relative;
	margin: 0 auto;
	width: 1000px;
	height: 950px;
	display: block;
}

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

#about-me .inner .intro p {
	float: left;
	width: 859px;
	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: 320px;
}

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

#about-me .inner #skills ul li {
	padding: 5px;
	margin-bottom: 5px;
	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 - Skills ===== */

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

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

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

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

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

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

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

/* 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: 700px;
	display: block;
}

#my-work .inner .new {
 	position: : relative;
	margin: 0 auto;
	width: 1000px;
	height: 1000px;
	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: 720px;
	display: block;
}

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

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

#method .inner .workflow ul li.last {
	height: 280px;
	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;
}

/* ===== Blog Section ===== */

#blog {
	background: url("../img/texture1.png") #231d1e repeat;
	color: #fff;
}

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

#blog .inner a {
	color: #fff;
}

#blog .inner h1 {
	margin-bottom: 0;
}

#blog .inner .back {
	margin-top: 100px;
}

#blog .inner .posts {
	width: 600px;
	float: left;
}

#blog .inner .post {
	float: left;
	margin: 0 0 40px 0;
	border-bottom: 2px dashed #fff;
	padding: 0 0 40px 0;
}

#blog .inner .posts img {
	float: left;
	border: 5px solid #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 4px 25px 0 0 ;

}

#blog .inner .posts h2 a {
	float: left;
	margin: 0;
	width: 580px;
	color: #fff;
	text-decoration: none;
}

#blog .inner .posts p.post-info {
	font-size: 12px;
	float: left;
	margin: 0 0 20px 0;
	width: 580px;
	padding-bottom: 5px;
	border-bottom: 1px dashed #999;
}

#blog .inner .posts p.post-info em a {
	color: #cf2a2a;
	text-decoration: none;
}

#blog .inner .posts p.post-info strong a {
	color: #a9a9a9;
	font-weight: bold;
	text-decoration: none;
}

#blog .inner .posts p.date {
	float: left;
	margin: 4px 10px 0 0;
	background: #a21313;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px dashed #730b0b;
	font-size: 20px;
	font-weight: bold;
	width: 35px;
	line-height: 20px;
	padding: 5px;

}

#blog .inner .posts p.post-intro {
	float: left;

	width: 270px;

}

#blog .inner .posts p.post-intro-single {
	float: left;
	margin: 0 0 45px 0;
	width: 270px;
	padding: 0;

}

#blog .inner .posts p a.more-link {
	float: left;
	margin: 0;
	color:red;
	width: 270px;
	display: inline;
	text-decoration: none;
	font-style: italic;

}



/* ===== Sidebar ===== */

#blog .inner .sidebar {
	width: 300px;
	float: right;
	margin-top: 90px;
}

#blog .inner .posts .single-post a {
	color: #fff;
	text-decoration: none;
}

#blog .inner .posts .single-post a.text-link {
	color: #d12828;
	text-decoration: none;
	font-style: italic;
	margin-left: 55px;
}

#blog .inner .sidebar h4 {
	border-bottom: 2px dashed #666;
	padding-bottom: 5px;
}

/* ===== Sidebar section ===== */

/* ===== Sidebar section - Searchbar ===== */

#blog .inner #searchform {

}

#blog .inner .sidebar input {
	background: #e3e3e3;
	padding-top: 12px;
	padding-bottom: 9px;
	border: none;
	width: 228px;
	color: #aaa;
	font-size: 16px;
	margin-right: 10px;
	padding-left: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-top: -5px;
}


#blog .inner .sidebar input:focus {
	background: #fff;
	padding-top: 12px;
	padding-bottom: 9px;
	border: none;
	width: 228px;
	color: #222;
	font-size: 16px;
	margin-right: 10px;
	padding-left: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-top: -5px;
}


#blog .inner .sidebar #searchsubmit {
	background: #a21313;
	height: 37px;
	width: 35px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #730b0b;
	-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;
	font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;
	font-weight: normal;
	color: #fff;
	font-size: 20px;
	padding: 4px;
}

#blog .inner .sidebar button.btn-alt2:hover {
	background: #880f0f;
	height: 37px;
	width: 35px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #730b0b;
	-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;
	font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;
	font-weight: normal;
	color: #fff;
	font-size: 20px;
}



#blog.blog-single .single-comment {
	margin-top: 40px;
}

#blog.blog-single .replies h2 {
	border-bottom: 2px dashed #fff;
	padding-top: 30px;
	font-weight: normal;
	width: 600px;
	overflow: hidden;
	padding-bottom: 5px;
}


/* ===== Sidebar section - Categories ===== */

#blog .inner .sidebar .categories ul {
	list-style-type: none;
	padding-left: 0;
}

#blog .inner .sidebar .categories ul li {
	float: left;
	padding-right: 5px;
	margin: 10px;
}

#blog .inner .sidebar .categories ul li {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #a21313;
	border: 1px dashed #730b0b;
	padding: 5px;
	-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;
}

#blog .inner .sidebar .categories ul li:hover {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #6c0a0a;
	border: 1px dashed #a21313;
	padding: 5px;
}

/* ===== Sidebar section - Recent News ===== */

#blog .inner .sidebar .recent-news a {
	color: #fff;
	text-decoration: none;
}

#blog .inner .sidebar .categories a {
	color: #fff;
	text-decoration: none;
}

#blog .inner .sidebar .recent-news ul {
	list-style-type: none;
	padding-left: 0;
}

#blog .inner .sidebar .recent-news ul li {
	margin-left: 0;
	padding-bottom: 5px;
		width: 100%;
}

#blog .inner .sidebar .recent-news ul li strong {
	padding-right: 5px;
	color: #ba2f3a;
}

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

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

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

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

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

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

#contact .inner .contact-form fieldset.text-fields {
	float: left;
	width: 480px;
	margin-right: 10px;
}

#contact .inner .contact-form fieldset.text-block {
	float: right;
	width: 480px;
}

#contact .inner .contact-form fieldset input {
	width: 480px;
	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: 370px;
	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: right;
	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;
}
/* Styles for Google Map using iFrames */

#contact .inner .map {
	margin-top: 78px;
	float: left;
	border: 3px solid #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#contact .inner .map iframe{
	height: 210px; 
	border: 0; 
	width: 473px;
	overflow: hidden;
}
/* 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;
}

/* =====  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 */