/*----------------------------------------------------------*/
/* Rocky Mountain Soothies_dropdown MAIN Cascading Style Sheet - main.css  */
/* Author: Steve Pettee, Glacier Web Creative */
/* www.GlacierWebCreative.com */
/*----------------------------------------------------------*/



/* General
------------------------------------------------------------*/
* {
    padding: 0; margin: 0;
    font-family: "Times New Roman";
    }
    
@font-face {
    font-family: 'Always Forever';
    src: url('fonts/Always Forever Bold.ttf');
    }
    
@font-face {
    font-family: 'Segoe Print';
    src: url('fonts/segoepr.ttf');
    }
    
@font-face {
    font-family: 'CAC Moose';
    src: url('fonts/CAC Moose.ttf');
    }
    
@font-face {
    font-family: 'KGDropsofJupiter';
    src: url('fonts/KGDropsofJupiter.ttf');
    }
    
ul {
     list-style: none;
     }
     
p {
     width: 1100px;
     margin: 20px 0 20px 0px;
     font-family:  "Times New Roman";
     font-size: 20px;
     font-style: italic;
     font-weight: 500;
     text-indent: 30px;
     color: #fbfaf8;
     text-align: center;
     }
     
sup {
     font-size: 14px;
     }

div.spacer20 {
     width: 100%;
     height: 20px;
     clear: both;
     }
     
.underline {
     text-decoration: underline;
     }
     
#redFont {
     color: red;
     font-size: 28px;
     }
     
#yellowFont {
     color: yellow;
     }
     
#blueFont {
     color: blue;
     font-size: 28px;
     }
     
div#yellow-center {
     width: 100%;
     margin: 0 auto;
     color: yellow;
     text-align: center;
     }
     
body#main {
    position: relative;
    background: #b8b5b2;
    }
    
div#wrapper {
     position: relative;
     width: 1100px;
     background: #807d79;    /*--- site background ---*/
     margin: 0 auto;
     margin-top: 20px;
     margin-bottom: 0px;
     }
     
/* CSS for Back to top arrow -----------------------------------------*/
#back2Top {
    width: 30px;
    line-height: 30px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    position: fixed;
    bottom: 50px;
    right: 10%;       
    background-color: #d69c6c;
    color: #ffff00;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
}

#back2Top:hover {
    background-color: #a56c41;
    color: #ffff00;
}
     

/* Header ------------------------------------------------------------*/
div#header {
     position: relative;
     width: 1100px;
     margin: 0 auto;
     }
     
div#header img#main {
     display: block;
     padding: 0px 0px 0px 0px;
     margin: 0 auto;
     }
     
div#header img#cabin {
     position: absolute;
     top: 380px;
     left: 35px;
     }     
     

/* Navigation ------------------------------------------------------------*/     
div#navigation {
     position: relative;
     width: 1100px;
     height: 160px;
     margin: 0 auto;
     margin: 8px 0px 0px 0px;
     }
     
div#navigation div#whirlsFirstLine {
     position: relative;
     margin: -15px 0px 0px 5px;
     padding: 0px 0px 15px 0px;
     z-index: 30;
     }
     
div#navigation div#whirlsSecondLine {
     position: relative;
     margin: 10px 0px 0px 80px;
     padding: 220px 0px 0px 0px;
     z-index: 25; 
     }
     
div#navigation div#whirlsFirstLine div.whirls, div#navigation div#whirlsSecondLine div.whirls {
     width: 130PX;
     height: 50px;
     background: url("images/navimg.png") 0 0 no-repeat;
     margin: 0 0 0 23px;
     float: left;
     padding: 18px 0px 0px 0px;
     text-align: center;
     }
     
div#navigation div.whirls  a {
     display: block;
     font-size: 14px ;
     font-family: "comic sans ms";
     font-variant: small-caps;
     vertical-align: middle;
     text-decoration: none;
     font-weight: bold;
     line-height: 0.4cm;
     color: #0000ff;
     }
     
div#navigation div#whirlsFirstLine div.twolines, div#navigation div#whirlsSecondLine div.twolines {
     padding: 13px 0px 5px 0px;
     }
     
 div#navigation div.whirls ul.dropdowns {
     margin-top: 25px;
     margin-left: 0px;
     display: none;   /****  hide dropdowns on initial loading of navigation  ****/
    }
    
div#navigation div.twolines ul.dropdowns {
     margin-top: 15px;
     margin-left: 0px;
    } 
     
div#navigation div.whirls ul.dropdowns li {
     width: 130px;
     height: 25px;
     margin: 0 0 3px 0px;
     padding: 4px 0 0 0;
     background: url("images/dropdrown_background.jpg") 0 0 no-repeat;
     }
     
div#navigation div.whirls ul.dropdowns li a {
     font-size: 12px ;
     font-family: "comic sans ms";
     vertical-align: middle;
     text-align: center;
     text-decoration: none;
     font-weight: normal;
     font-variant: small-caps;
     color: yellow;
     }
     

/* Dropdowns -------------------------------------------------------------*/ 

div#content img#dropdowns {
     display: block;
     width: 600px;
     margin: 0 auto;
     margin-top: 0px;
     padding-top: 20px; 
     }


/* Content -------------------------------------------------------------*/     
div#content {
     position: relative;
     width: 1100px;
     margin: 0px 0 30px 0;
     padding: 235px 0 0 0;
     clear: both;
     }
     
div#content p {
     width: 900px;
     margin: 0px 50px 0px 100px;
     font-family:  "Times New Roman";
     font-size: 20px;
     font-style: italic;
     font-weight: 500;
     text-align: left;
     text-indent: 30px;
     color: #fbfaf8;
     }
     
div#content p#title {
     text-align: center;
     margin: 70px 0 0 100px;
     text-indent: 0px;
     }
     
div#content img#homePageSpecialsFullWidth {
     position: relative;
     display: block;
     margin: 0px 0px 0px 0px;
     }
     

/* Designs Pages ------------------------------------*/
/* Swatches -------------------------------------------------------------*/          
div#designs {
     position: relative;
     background-image: url("images/dropdowns/background.jpg");
     background-repeat: repeat-y;
     margin-top: 340px;
     }     
     
div#designs, div#designs p {
     position: relative;
     width: 970px;
     margin: 0px 0px 0px 65px;
     padding: 0px 0px 0px 15px;
     }
     
div#designs p {
     margin: 0px 0px 0px 20px;
     line-height: 150%;
     text-align: left;
     clear: none;
     }
     
div#designs h1, div#designs h2 {
     margin: 0px 0px 0px 0px;
     font-family:  "Segoe Print";
     font-size: 40px;
     font-style: normal;
     font-weight: 500;
     text-indent: 0px;
     color: yellow;
     text-align: center;
     }
     
div#designs h2#swatchesDisclaimer {
     color: black;
     font-weight: 700;
     }
     
div#designs h1#inswatches {
     clear: both;
     margin: 20px 0px 0px 0px;
     padding: 60px 0px 0px 0px;
     color: yellow;
     }
     
div#designs h2 {
     font-size: 18px;
     }
     
div#designs p#colorHeaders {
     clear: both !important;
     width: 100%;
     text-align: left;
     text-indent: 0px;
     font-family: "Segoe Print";
     font-style: normal;
     font-size: 40px;
     color: yellow;
     padding: 30px 0 0 30px;
     margin: 0px 0 0 -10px !important;
     }
     
div#designs div.designs {
     position: relative;
     width: 150px;
     float: left;
     margin: 10px 15px 20px 23px;
     }
     
div#designs div.designs div.swatch {
     position: relative;
     width: 150px;
     }
     
div#designs div.designs p.text {
     width: 170px;
     height: 40px;
     margin: 4px 0px 0px -25px;
     text-align: center;
     font-family: "Comic Sans MS";
     font-style: normal;
     color: black;
     font-size: 14px;
     font-weight: 700; 
     text-indent: 0px;
     line-height: 90%;
     }
     
     
/* Photo Sizes page
-------------------------------------------------------------*/
div#photos-sizes {
     width: 750px;
     margin: 20px 100px 30px 100px;
     padding: 50px 0 100px 50px;
     font-size: 17px;
     background-image: url("images/dropdowns/beige_background.jpg");
     }
     
div#photos-sizes ul {
     position: relative;
     list-style: none;
     margin: 0px;
     }
     
div#photos-sizes ul li {
     padding: 0 0 10px 50px;
     width: 700px;
     font-style: italic;
     }
     
div#photos-sizes h1#order-header,  div#photos-sizes h2#order-header-sub {
     width: 900px;
     clear: both;
     margin: 20px 0 20px -110px;
     font-family:  "Times New Roman";
     font-size: 28px;
     font-style: italic;
     font-weight: 500;
     color: #fbfaf8;
     text-align: center;
     }
     
div#photos-sizes h2#order-header-sub {
     font-size: 25px;
     color: black;
     }
     
div#photos-sizes h2#place-order, div#designs h2#place-order {
     font-family: "Always Forever";
     font-size: 60px;
     color: yellow;
     }
     
div#photos-sizes p#order-paragraph {
     width: 900px;
     margin: 0px 50px 0px 0px;
     font-family:  "Times New Roman";
     font-size: 20px;
     font-style: italic;
     font-weight: 500;
     text-align: left;
     text-indent: 0px;
     color: #fbfaf8;
     }     
     
div#photos-sizes img#order-wrap {
     display: block;
     margin: 0 0 0 260px;
     }
     
div#photos-sizes p#wrap-text {
     width: 120px;
     height: 50px;
     margin: 0 0 0 280px;
     color: black;
     }
     
div#photos-sizes ul#header-column-text {
     width: 900px;
     height: 30px;
     margin-left: -30px;
     color: black;
     font-weight: bold;
     }     
     
div#photos-sizes ul#header-column-labels {
     width: 900px;
     height: 30px;
     margin-left: -30px;
     color: black;
     }
     
div#photos-sizes ul#header-column-pics {
     width: 900px;
     height: 105px;
     margin-left: -40px;
     }          
     
div#photos-sizes ul#header-column-pics li img {
     text-align: center;
     }          
     
div#photos-sizes ul#header-column-labels li#style,
div#photos-sizes ul#header-column-text li#style,
div#photos-sizes ul#header-column-pics li#style {
     width: 18%;
     float: left;
     padding: 0 0 0 0;
     text-align: center;
     margin: 0 auto;
     }
     
div#photos-sizes ul#header-column-labels li#size,
div#photos-sizes ul#header-column-text li#size, 
div#photos-sizes ul#header-column-pics li#size {
     width: 20%;
     float: left;
     padding: 0 0 0 0;
     text-align: center;
     }     

div#photos-sizes ul#header-column-labels li#weight,
div#photos-sizes ul#header-column-text li#weight,
div#photos-sizes ul#header-column-pics li#weight {
     width: 22%;
     float: left;
     padding: 0 0 0 0;
     text-align: center;
     }     
     
div#photos-sizes ul#header-column-labels li#price,
div#photos-sizes ul#header-column-text li#price,
div#photos-sizes ul#header-column-pics li#price {
     width: 25%;
     float: left;
     padding: 0 0px 0 0;
     text-align: center;
     }
     
          
/* "CLICK HERE" and "Moose"
-------------------------------------------------------------*/ 
a#click-here {
     display: block;
     position: absolute;
     right: 300px;
     bottom: 140px;
     font-family:  "Comic Sans MS", "comic sans";
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
     text-align: left;
     color: white;
     }   
     

/* Footer
-------------------------------------------------------------*/
div#footer {
     position: relative;
     clear: both;
     width: 1100px;
     height: 200px;
     margin: 0 auto;
     margin-bottom: 20px;
     margin-top: 100px;
     background: #807d79;    /*--- site background ---*/
     }   
    
div#footer img#made-in {
     width: 600px;
     float: left;
     padding: 0 0 0 40px;
     }

div#footer div#BBBwrapper {
     position: absolute;
     width: 204px;
     height: 46px;
     top: 30px;
     left: 653px;
     background: white;
     }
     
div#footer div#memberSince {
     position: absolute;
     width: 204px;
     height: 20px;
     top: 60px;
     left: 653px;
     }
     
div#footer div#memberSince p {
     width: 204px;
     font-size: 16px;
     font-weight: bold;
     color: #035c87;
     padding: 0 30px 0 0;
     text-indent: 0px;
     }
     
div#footer div#reviewWrapper {
     position: absolute;
     width: 165px;
     height: 83px;
     top: 0px;
     left: 860px;
     }
               
div#footer img#BBB {
     margin: 0px 0 0 0px;
     padding: 3px 0 0 3px;
     }
          
div#footer p#copyright {
     width: 1100px;
     clear: both;
     margin: 0 auto;
     padding: 10px 0 20px 0px;
     font: 18px  "Georgia","Times New Roman";
     color: #2a1f19;
     font-weight: 700;
     text-align: center;
     }