/* 
    Created on : May 1, 2015, 8:22:59 PM
    Author     : debolske
*/

body{
    background-color: rgb(225,225,225);
}

header{
    max-width: 100%;
    display: inline-block;
}


main{
    padding-left: 100px;
    padding-right: 100px;
    font-family: Arial;
    width: 90%;
    display: inline-block;
}

@media screen and (min-width: 500px){
    header img{
        padding-left: 100px;
    }
    header div{
        margin-left: 100px;
    }
}


img{
    max-width: 100%;
}
ol.a {
    list-style-type: upper-latin;
}
ul.a {
    list-style-type: circle;
}

.natural{
    max-width: 100%;
    width:300px;
    height:75px;
    background: url(../img/headers.gif) 0 0px;
    display: inline-block;
    vertical-align: 50px;
}
.process{
    width:600px;
    height:75px;
    background: url(../img/headers.gif) 0px -225px;
    display: inline-block;
    vertical-align: 50px;
}
.directions{
    width:300px;
    height:75px;
    background: url(../img/headers.gif) 300px 0;
    display: inline-block;
    vertical-align: 50px;
}
.estimates{
    width:300px;
    height:75px;
    background: url(../img/headers.gif) 300px -75px;
    display: inline-block;
    vertical-align: 50px;
}
.edges{
    width:300px;
    height:75px;
    background: url(../img/headers.gif) 0 -75px;
    display: inline-block;
    vertical-align: 50px;
}
.faq{
    width:300px;
    height:75px;
    background: url(../img/headers.gif) 0 -150px;
    display: inline-block;
    vertical-align: 50px;
}
.gallery{
    width:300px;
    height:75px;
    background: url(../img/headers.gif) 300px -150px;
    display: inline-block;
    vertical-align: 50px;
}
.tx1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
}


#verbage{
    font-family: Arial;
    padding: 20px;
    width: 300px;
    float:left;
}

#inputs{
    padding: 20px;
    max-width: 100%;
    float:left;
}


#slideshow{
    margin: 20px auto;
    position: relative;
    left: 20px;
    width: 1000px;
    height: 625px;
    max-width: 100%;
    float: left;

}

#slideshow > div {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#hbuttons{
    clear: left;
}

.hbuttons a{
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.2),
        inset 0px -5px 0px 0px rgba(0,0,0,0.3),
        inset 0px 2px 0px 0px rgba(255,255,255,0.5);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    margin: 10px;
    margin-left: 25px;
    text-align: center;
    width:200px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    color: black;
    display: block;
    text-decoration: none;
    font: bold 23px Arial;
    float: left;
    display: inline;
}

a.b1 {
    background: url(../img/buttons.gif) 0 0;
    color: rgb(0,0,192);
}
a.b2 {
    background: url(../img/buttons.gif) -300px 0;
    color: rgb(0,0,192);
}
a.b3 {
    background: url(../img/buttons.gif) -600px 0;
    color: rgb(0,0,192);
}
a.b4 {
    background: url(../img/buttons.gif) 0 -60px;
    color: rgb(0,0,192);
}
a.b5 {
    background: url(../img/buttons.gif) -300px -60px;
    color: rgb(0,0,192);
}
a.b6 {
    background: url(../img/buttons.gif) -600px -60px;
    color: rgb(0,0,192);
}
a.b7 {
    background: url(../img/buttons.gif)0 -120px;
    color: rgb(0,0,192);
}
a.b8 {
    background: url(../img/buttons.gif)-300px -120px;
    color: rgb(0,0,192);
}
a.b9 {
    background: url(../img/buttons.gif)-600px -120px;
    color: rgb(0,0,192);
}
a.b10 {
    background: url(../img/buttons.gif)0 -180px;
    color: rgb(0,0,192);
}
a.b11 {
    background: url(../img/buttons.gif)-300px -180px;
    color: rgb(0,0,192);
}
a.b12 {
    background: url(../img/buttons.gif)-600px -180px;
    color: rgb(0,0,192);
}

#edges{
    max-width: 100%;
}

#faq{
    display: inline-block;
}


#estimator{

    display: inline-block;
    max-width: 100%;
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}
#myBtn:hover {
    background-color: #555;
}