/*
Theme Name: Scherer HP
Description: Layout & Design der Homepage von Fa. Scherer
Version: Version 0.1
Author: Christian Schweizer
*/


* {
    margin: 0px;
    padding: 0px;
}

html {
    background: #004b6d;
}

body {
    font-family: 'Arial', sans-serif;
    color: #c3cfe6;
    font-size: 16px;
}

h1 {
    color: #f47922;
    font-size: 20px;
    margin-bottom: 20px;
    background: url(../images/hr.png) no-repeat scroll center bottom transparent
}

h2 {
    color: #f47922;
    font-size: 18px;
    margin-bottom: 20px;
    background: url(../images/hr2.png) no-repeat scroll left bottom transparent
}

p {
    margin-bottom: 20px;
}

.smallDis {
    margin-bottom: 6px;
}

.transparent {
    color: #BECCE3;
}

a {
    text-decoration: none;
    color: #5D6971
}

#content .readmore {
    color: #f47922;
}

#content a {
    text-decoration: underline;
    color: #c3cfe6;
}

#content .product a {
    text-decoration: none;
}

#content #sitemap a {
    text-decoration: none;
    color: #c3cfe6;
}

#wrap {
    margin: 0 auto;
    width: 900px;
    padding: 0;
}

#wrapHeader {
    height: 133px;
    margin: 20px 0 20px 0;
    position: relative;
}

#logo {
    margin: 0;
    float: left;
    height: 125px;
    width: 400px;
    background: url(../images/logo.png) no-repeat;
}

#contactImage {
    background: url(../images/head/kontakt.png) no-repeat;
    width: 890px;
    height: 240px;
}

#energyImage {
    background: url(../images/head/energie.png) no-repeat;
    width: 890px;
    height: 240px;
}

#carportImage {
    background: url(../images/head/carport.png) no-repeat;
    width: 890px;
    height: 240px;
}

#motorisierungImage {
    background: url(../images/head/motorisierung.png) no-repeat;
    width: 890px;
    height: 240px;
}

#markise {
    background: url(../images/head/markise.png) no-repeat;
    width: 890px;
    height: 240px;
}

#garagentore {
    background: url(../images/head/garagentore.png) no-repeat;
    width: 890px;
    height: 240px;
}

#ausenjalousie {
    background: url(../images/head/ausenjalousie.png) no-repeat;
    width: 890px;
    height: 240px;    
}

#haustur {
    background: url(../images/head/haustur.png) no-repeat;
    width: 890px;
    height: 240px;    
}

#terassendach {
    background: url(../images/head/terassendach.png) no-repeat;
    width: 890px;
    height: 240px;    
}

#fenster {
    background: url(../images/head/fenster.png) no-repeat;
    width: 890px;
    height: 240px;    
}

#klappladen {
    background: url(../images/head/klappladen.png) no-repeat;
    width: 890px;
    height: 240px;    
}

#schiebeladen {
    background: url(../images/head/schiebeladen.png) no-repeat;
    width: 890px;
    height: 240px;    
}

#innenjalousie {
    background: url(../images/head/innenjalousie.png) no-repeat;
    width: 890px;
    height: 240px;    
}

#searchImage {
    background: url(../images/head/suche.png) no-repeat;
    width: 890px;
    height: 240px;    
}

#appesneues {
    background: url(../images/head/appesneues.png) no-repeat;
    width: 890px;
    height: 240px;    
}

#sicherheitsrollladen {
    background: url(../images/head/sicherheitsrollladen.png) no-repeat;
    width: 890px;
    height: 240px;    
}

.clear_float {
    clear: both;
}

#search {
    position: absolute;
    top: 0px;
    right: 0px;
}

#searchShadow {
    background: url(../images/shadow.png) no-repeat;
    height: 520px;
    width: 20px;

}

.hilite {
    color: #fff;
    background-color: #F47922;
    padding: 0px 4px 0px 4px;
}

#menu {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

#menu ul {
    margin: 0;
    list-style: none;
    
}

#menu ul li {
    padding: 0 7px 0 7px;
    text-align: center;
    float: left;
    line-height: 30px;
    margin: 0;
}

#menu ul li a {
    text-decoration: none;
    color: #c3cfe6;
}

#menu ul li a:hover {
    color: #ed7203;
}

#menu ul li a.ahover {
    color: #ed7203 ;
}

.current_page_item {
    border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    background-color: #003e5a;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.6)), color-stop(0.2, rgba(255, 255, 255, 0.3)), color-stop(0.51, rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.2))); /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Chrome10+,Safari5.1+ */
    
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* FF3.6+ */
    
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* Opera11.10+ */
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.0) 51%, rgba(255, 255, 255, 0.2) 100%); /* W3C */

    
}

#galleryFrontpage {
    margin: 20px 0 0 0;
    height: 380px;
    width: 900px;
    background-color: #c3cfe6;
}

#galleryProduct {
    margin: 20px 0 0 0;
    height: 250px;
    width: 900px;
    background-color: #c3cfe6;
}

#galleryProductpage {
    margin: 20px 0 0 0;
    height: 250px;
    width: 900px;
    background-color: #c3cfe6;
}

#galleryPage {
    margin: 20px 0 0 0;
    height: 250px;
    width: 900px;
    background-color: #c3cfe6;
    /* background: url(../images/gallerybg.png) no-repeat; */
}

#slider-outer{
	padding: 5px;
}

#innerGallery {
    left: 5px;
    top: 5px;
    position: relative;
}

#content {
    line-height: 1.4;
    margin: 20px 0 0 0;
    width: 900px;
    padding: 0;
}

#content #left {
    width: 520px;
    margin: 0 100px 0 0;
    padding: 0;
    float: left;
}

#content #right {
    width: 272px;
    float: right;
    font-size: 14px;
    margin-top: 3px;
}

#content ul {
    margin: 0px 0 20px 0;
    padding: 0 0 0 35px;
}

#content ul li {
    list-style-image: url(../images/li.png);
}

#topFooter {
    margin: 20px 0 0 0;
    width: 100%;
    height: 5px;
    background-color: #f47922;
}

#wrapFooter {
    background-color: #becce3;
    color: #004b6d;
}

#innerFooter {
    margin: 0 auto;
    width: 900px;
    padding: 20px 0 10px 0;
    font-size: 14px;
}

#contentFooterFirst {
    width: 270px;
    float: left;
}

#contentFooterSecond {
    width: 140px;
    float: left;
    padding: 0 0 0 70px;
}

#contentFooterThird {
    width: 140px;
    float: left;
    padding: 0 0 0 70px;
}

#contentFooterFourth {
    width: 180px;
    float: left;
    padding: 0 0 0 30px;
}

#innerFooter ul li {
    list-style-image: url(../images/li.png);
    margin: 0 0 23px 0;
}

#contactMail {
    margin: 0 0 20px 0;
}

#contactPhone{
    margin: 0 0 20px 0;
}

#contactPhoneIcon, #contactMailIcon {
    height: 40px;
    width: 40px;
    float: left;
}

#contactPhoneIcon {
    background: url(../images/phone.png) no-repeat;
}

#contactMailIcon {
    background: url(../images/mail.png) no-repeat;
}

#contactPhoneText, #contactMailText {
    height: 40px;
    display: table-cell;
    vertical-align: middle;
    padding: 0 0 0 20px;
}

.wpcf7-form p textarea, .wpcf7-form p .your-name input {
    width: 506px;
    font-family: Arial;
    background-color: #c3cfe6;
    color: #004b6d;
    padding: 5px;
    font-size: 14px;
    border: 2px solid #c3cfe6;
    resize: none;
    margin-top: 3px;
}

.wpcf7-text {
    width: 306px;
    font-family: Arial;
    background-color: #c3cfe6;
    color: #004b6d;
    padding: 5px;
    font-size: 14px;
    border: 2px solid #c3cfe6;
    resize: none;
}

.wpcf7-text:focus,  .wpcf7-form p textarea:focus, .captchar:focus, .wpcf7-form p input .wpcf7-text:focus {
    border: 2px solid #f47922;
}

.wpcf7-submit:hover {
    border: 2px solid #f47922;
}

.wpcf7-submit {
    background: #004b6d;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(130,179,90)), color-stop(0.15, rgb(115,174,67)), color-stop(0.88, rgb(109,170,59)), color-stop(1, rgb(49,114,21)));
    background: -moz-linear-gradient( center top, rgb(195,195,195) 0%, rgb(79,112,117) 15%, rgb(0,75,109) 88%, rgb(0,60,87) 100%);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    height: 30px;
    width: 84px;
    font-family: Arial;
    font-size: 15px;
}

.contactFormDistance {
    margin-bottom: 20px;
}

.contactForm {
    line-height: 30px;
    margin: 5px 0 0 0;
    border-bottom: 1px solid #c3cfe6;
}

.contactName {
    float: left;
    width: 200px;
    height: 30px;
}

.product {
    float: left;
    margin: 0 20px 20px 0;
    width: 150px;
}

.productImage {
    width: 150px;
    height: 150px;
    background-color: white;
}

.productCaption {
    text-align: center;
}

.cf:before, .cf:after{
    content:"";
    display:table;
}
 
.cf:after{
    clear:both;
}
 
.cf{
    zoom:1;
}    

/* Form wrapper styling */
.form-wrapper {
    top: 0px;
    right: 0px;
    position: relative;
    width: 225px;
    padding: 5px;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
 
/* Form text input */
 
.form-wrapper input {
    width: 155px;
    height: 20px;
    padding: 2px 5px;
    float: left;   
    border: 0;
    background: #c3cfe6;
    border-radius: 3px 0 0 3px;     
}
 
.form-wrapper input:focus {
    outline: 0;
    background: #c3cfe6;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
 
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
 
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
 
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}   
 
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 24px;
    width: 60px;
    color: #fff;
    background: #F47922;
    border-radius: 0 3px 3px 0;     
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}  
   
.form-wrapper button:hover{    
    background: #e07428;
}  
   
.form-wrapper button:active,
.form-wrapper button:focus{  
    background: #e06814;
    outline: 0;  
}
 
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #F47922 transparent;
    top: 5px;
    left: -6px;
}
 
.form-wrapper button:hover:before{
    border-right-color: #e07428;
}
 
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #e06814;
}     
 
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
} 

.image_product {
    float: left; 
    margin-right: 10px; 
    margin-bottom: 5px
}