﻿/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #CCCECE;
    font-size: .80em;
    font-family: Arial, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #2D4144;
}

xxxxa:link, a:visited
{
    color: #034af3;
}

xxxxa:hover
{
    color: #1d60ff;
    text-decoration: none;
}

xxxxa:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

/* HEADINGS   
----------------------------------------------------------*/

h1, h2
{
    display: inline;
    font-size: 1.5em;
    color: #E9EBE8;
    xfont-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
    font-variant: small-caps;
}

h2
{
    color: #F6F6F6;
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    color: #0D1314;
    font-size: 1.3em;
    font-weight: 600;
    text-shadow: 1px 1px 1px #C17D00;
}

h4
{
    color: #0D1314;
    font-size: 1.0em;
    font-weight: normal;
}

h2.subHeading
{
    color: #0D1314;
}
/* LAYOUT
----------------------------------------------------------*/

div.page
{
    height: 700px;
    background-color: #FFE2AC;
    background-image: url(../images/YellowGradient.png);
    background-position:top;
    background-repeat: repeat-x;
    border: 1px solid #000000;
}

div.debug
{
    padding: 30px 10px 10px 10px;
    border: solid 1px #CCC; 
    height:660px; 
    width:400px; 
    overflow:auto; 
    float:right;
}
div.debug p
{
    line-height: 1em;
    margin: 0;
    padding: 0;
}


.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #961E22;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}


/* MENU   
----------------------------------------------------------*/

div#mainMenu
{
    clear: both;
    background-color: #FFFFFF; /* #0D1314;*/
    border-top: 1px solid #000000;
    border-bottom: 1px solid #4A666B;
}

div#mainMenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-image: url(../images/menuBackg.png);
    height: 30px;
    width: 100%;
    xmargin: auto;
}

div#mainMenu ul li {
    float: left;
    height: 28px;
    margin: 1px 0px 1px 0px;
    background-image: url(../images/menuItem.png);
}

div#mainMenu ul li:first-child 
{
    margin-left: 1px;
}

div#mainMenu ul li a {
    background-image: url(../images/MenuDivider.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 32px;
    padding-left: 32px;
    display: block;
    line-height: 28px;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    font-weight: bold;
    color: #000000;
}

div#mainMenu ul li a:hover
{
    color: #FFE2AC;
}

div#mainMenu ul li.selectedMenu
{
    background-image: url(../images/menuItemSelected.png);
}

div#mainMenu ul li.selectedMenu a
{
    font-weight: bold;
    cursor: default;
}
div#mainMenu ul li.selectedMenu:hover a
{
    color: #000000;
}


/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

div.title
{
    display: block;
    float: left;
    background-image: url(../images/RedGradient.png);
    background-position:top;
    background-repeat: repeat-x;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    text-align: left;
    width: 100%;
}

div.largeImg
{
    position: relative;
    top: 0px;
    left: 58px;
    width:802px;
    height: 535px;
    border: 1px solid #0D1314;
    z-index: 1;
}

div.largeImg img
{
    border: 1px solid #961E22;
    width: 800px;
    height: 532px;
}

div#mainPic
{
    padding: 0px;
    border: 1px solid #961E22;
    border-collapse: collapse;
    height:533px;
    background-image: url('../Images/BonnevilleSideSm.jpg');
    background-position:top;
    background-repeat: no-repeat;
}

img#helpIcon
{
    position:relative; 
    width:32px; 
    height:32px; 
    top:3px; 
    left: 765px; 
    border:none;
    cursor: pointer;
}

div#helpBox
{
    width: 150px;
    top: 37px;
    left: 635px;
    height: 173px;    
}

/* Accessory Bing-style rectangles
----------------------------------------------------------*/

div.outerMarker
{
    position: absolute;
    border: none;
}

div.hoverMarker
{
    position: relative;
    display: none;
    width: 50px;
    height: 50px;
    border: 1px solid #FFE2AC;
}

div.hoverMarker > div
{
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #BBBBBB;
	
    filter: alpha(opacity=30);          /* internet explorer < 8 */
    -ms-filter: "alpha(opacity=30)";    /* internet explorer >= 8 */
    -khtml-opacity: 0.3;                /* khtml, old safari */
    -moz-opacity: 0.3;                  /* mozilla, netscape */
    opacity: 0.3;                       /* fx, safari, opera */
	/* background: rgba(187, 187, 187, 0.3);    Future */
}

div#outerTank
{
    width: 280px;
    height: 85px;
    top: 130px;
    left: 355px;
}
div#innerTank
{
    top: 20px;
    left: 65px;
}

div#outerBars
{
    width: 170px;
    height: 115px;
    top: 10px;
    left: 360px;
}
div#innerBars
{
    top: 60px;
    left: 115px;
}

div#outerSpeedo
{
    width: 200px;
    height: 115px;
    top: 10px;
    left: 535px;
}
div#innerSpeedo
{
    top: 50px;
    left: 9px;
}

div#outerSaddle
{
    width: 170px;
    height: 115px;
    top: 100px;
    left: 180px;
}
div#innerSaddle
{
    top: 50px;
    left: 75px;
}

div#outerGrab
{
    width: 167px;
    height: 115px;
    top: 100px;
    left: 10px;
}
div#innerGrab
{
    top: 55px;
    left: 75px;
}

div#outerBags
{
    width: 180px;
    height: 110px;
    top: 220px;
    left: 10px;
}
div#innerBags
{
    top: 40px;
    left: 65px;
}

div#outerHelmetLock
{
    width: 170px;
    height: 115px;
    top: 220px;
    left: 191px;
}
div#innerHelmetLock
{
    top: 25px;
    left: 35px;
}

div#outerRocker
{
    width: 170px;
    height: 115px;
    top: 220px;
    left: 365px;
}
div#innerRocker
{
    top: 25px;
    left: 35px;
}

div#outerExhaust
{
    top: 335px;
    left: 20px;
    width: 280px;
    height: 125px;
}
div#innerExhaust
{
    top: 10px;
    left: 125px;
}

div.tipBox
{
    position: absolute;
    width: 274px;
    display: none;
    border: 1px solid #FFE2AC;
    background-color: #961e22;
    -moz-box-shadow: 4px 4px 4px #616161;
    -webkit-box-shadow: 4px 4px 4px #616161;
    box-shadow: 4px 4px 4px #616161;
    z-index: 5000;
}
div.tipBox a
{
    cursor: pointer;
}
div.tipBox img
{
    border: 1px solid #0D1314;
    margin: 10px 10px 0px 10px;
    width: 250px;
}

div.tipBox img#tipSaddleOpen
{
    width: 130px;
    height: 195px;
    margin-top: 8px;
}

div.tipBox img#tipSaddleTwin
{
    width: 250px;
    height: 129px;
    xmargin-top: 8px;
}

div.tipBox div.desc
{
    text-align: left;
    font-weight: normal;
    color: #FFE2AC; /* #0D1314;*/
    margin: 10px 10px 0px 10px;
}

div.tipBox div.desc p
{
    margin: 0px;
}

div#tipSaddle div.descSm
{
    position: absolute;
    left: 145px;
    top: 140px;
    width: 110px;
    text-align: left;
    font-weight: normal;
    color: #FFE2AC; /* #0D1314;*/
    margin: 10px 0px 0px 10px;
}

div#tipGrab
{
    top: 50px;
    left: 137px;
    height: 247px;
}
div#tipGrab img
{
    height: 166px;
}

div#tipSaddle
{
    top: 10px;
    left: 307px;
    height: 500px;        
}

div#tipSaddle img
{
    height: 129px;        
}

div#tipBars
{
    top: 10px;
    left: 201px;
    height: 254px;
}

div#tipBars img
{
    height: 126px;
}


div#tipSpeedo
{
    top: 112px;
    left: 491px;
    height: 278px;
}

div#tipSpeedo img
{
    height: 182px;
}

div#tipTank
{
    top: 46px;
    left: 472px;
    height: 255px;
}

div#tipTank img
{
    height: 166px;
}

div#tipBags
{
    top: 180px;
    left: 127px;
    height: 261px;
}
div#tipBags img
{
    height: 166px;
}

div#tipHelmetLock
{
    top: 160px;
    left: 278px;
    height: 260px;    
}

div#tipHelmetLock img
{
    height: 164px;    
}

div#tipRocker
{
    top: 160px;
    left: 452px;
    height: 258px;
}
div#tipRocker img
{
    height: 144px;
}

div#tipExhaust
{
    top: 230px;
    left: 197px;
    height: 273px;    
}

div#tipExhaust img
{
    height: 162px;
}

/* Contact Page - Mail Input
----------------------------------------------------------*/

#contactPane fieldset
{
    margin-top:20px;
    width: 600px;
    border: solid 1px #0D1314;
}
#contactPane legend
{
    margin-left: 10px;
    font-size: 1.2em;
}

#contactPane label
{
    width: 80px;
    margin-right: 8px;
    text-align: right;
    float: left;
}

#contactPane fieldset p
{
    clear: both;
}


#contactPane input#emailAddr
{
    float: left;
    width: 480px;
    border: 1px solid #626262;
    margin-bottom: 20px;
    font-family: Arial;
    font-size: 1.0em;
}

#contactPane textArea#mailInput
{
    display: block;
    float: left;
    height: 200px;
    width: 480px;
    overflow: hidden;
    overflow: auto;
    border: 1px solid #626262;
    margin-bottom: 20px;
    font-family: Arial;
    font-size: 1.0em;
}

#contactPane textArea#mailInput.watermark,
#contactPane input#emailAddr.watermark
{
    color: #A6C1C6;
}

a#btnSend:link, a#btnSend:visited 
{
    display: block;
    text-decoration: none;
    color: #0D1314;
    font-weight: bold;
    text-align: center;
    line-height: 20px;  /* will center text */
    width: 50px;
    border: 1px solid #0D1314;
    border-bottom: 1px solid #4B6D74;
    border-right: 1px solid #4B6D74;
    background-color: #82AEC1;
    background-image: url('../Images/silver.png');
    background-position:top;
    background-repeat: repeat-x;
}

a#btnSend:hover
{
    font-weight: bold;
}

a#btnSend:active 
{
    background-position:top;
    background-repeat: repeat-x;
    background-image: url('../Images/silverDown.png');
    border: 1px solid #D9E3E6;
    border-bottom: 1px solid #4B6D74;
    border-right: 1px solid #4B6D74;
}

a#btnSend.disabled, a#btnSend.disabled:active
{
    cursor: default;
    background-image: url('../Images/silver.png');
    border: 1px solid #D9E3E6;
    border-bottom: 1px solid #D9E3E6;
    border-right: 1px solid #D9E3E6;
}

div#preLoad
{
    background-image: url(../Images/silverDown.png); 
    position: absolute; 
    left: -9999px;
}

xxxxp#top
{
    margin-top: 30px;
    font-weight: bold;
}

div#btnWrap
{
    position: relative;
    float: left;
    margin-bottom: 30px;
}
div#spinWrap
{
    float: left;
    margin-left: 20px;
}
div#spinWrap > img
{
    padding-top: 3px;
}

div#msgSent
{
    position: absolute;
    left: 60px;
    top: 0px;
    width: 400px;
    color: #0D1314;
}

div#msgSent.error
{
    color: Red;
}

.hide
{
    display: none;
}
span.bold
{
    font-weight: bold;
}

.notCurrent
{
    text-decoration: line-through;
}
/* 
red #961E22
ltRed #D3443C
black #0D1314
grey #DDBABB
pale #BCE6FF
gold #FFE2AC

silverLt #E9EBE8
silverMd #B9BBB6
silverDk #5C5E5D

*/
