/*
/* CSS STYLES MTRAEL.COM.AU
------------------------------------------------------------------ */

html  {
  margin: 0;
  padding: 0;
}

body  {
  margin: 0;
  padding: 0;
  font: 12px Arial, helvetica, sans-serif;
  background-color: #CCC89B;
}

h1,h2,h3,h4,h5,h6,p {
   margin: 0;
   padding: 0;
}

h1 {
  font: bold 22px 'Century Gothic', Arial, Helvetica, sans-serif;
  color: #663300;
  margin-bottom: 13px;
  letter-spacing: -1px;
}

h2  {
  font: bold 16px Arial;
  letter-spacing: -0.5px;
  color: #666600;
  margin-bottom: 15px;
}
  
h3  {
  font: Bold 12px Arial, sans-serif;
  margin-bottom: 15px;
}

h4 {
  font: Bold 11px Arial;
}

li {
  margin: 0;
}

p {
  margin-bottom: 15px;
}  


/* CLASSES 
------------------------------------------------------------------ */
.raelRoom p {
  font: 12px Arial;
}
.accommcopy {
  color: #000000;
  padding-bottom: 5px;
  padding-top: 5px;
  font-family: Verdana;
  font-size: 11px;
  font-weight: Bold;
}
  
.raelRoom {
  font: 11px Arial;
} 

.last,
.raelRoom img.last {
  margin-right: 0;
}

.raelRoom img {
  border: none;
}

.raelRoom a {
  padding: 1px;
  border: 1px solid #663300;
  display: block;
  float: left;
  margin: 0 10px 10px 0;
  height: 80px;
}

.raelRoom a:hover {
  border: 1px solid #CCCCCC;
}

.raelRoom p {
  display: block;
  clear: left;
}

#AccommSelect {
  font: Bold 10px Verdana;
  width: 210px; 
  margin-top:10px;  
}

#bodyRight .FormInput {
  font: Bold 11px Arial;
  width: 205px;
  margin: 13px 0;
}

#bannerImage {
  padding: 0px;
  background-color: #ffffff;
  width: 750px;
  height: 230px;
  clear: both;
  margin-left: 10px;
}

.bgContainer1 {
  background: url('/images/bg/bg_backgroundPiece.jpg') repeat-y center;
}

.bgContainer2 {
  background: url('/images/bg/bg_backgroundTile.jpg') repeat-x top;
}

.bgContainer3 {
  background: url('/images/bg/bg_backgroundTop.jpg') no-repeat center top;
}

#bodyContainer {
  width: 760px;
  background: url('/images/bg/bg_content.gif') repeat-y top;
  margin: 10px 0 0 0;
}

/* These two must be swapped to remove background */
#bodyContent {
  background: url('/images/bg/bg_body.jpg') no-repeat top;
}
/* Swap with this one 
.bodyContent {
}
*/

#bodyLeft {
  width:          515px;
  margin-left:      10px;
  text-align: justify;  
}
#bodyLeft a { color: #996600; }
#bodyLeft a:hover { color:#66CC00; text-decoration:none; }      

#bodyLeft table tr td { text-align: left; }

#bodyRight {
  float:right;
  width: 205px;
  padding: 10px 5px 5px;
  margin: 0 0 5px 5px;
  font: 11px Arial, sans-serif;
  text-align: left;
}
#bodyRight h1,
#bodyRight h2 { 
  font: 20px 'Century Gothic', Arial, sans-serif; 
  font-weight: normal;
	color: #787B1B; 
  margin: 0 0 14px 0;
  letter-spacing: -1px; 
}
            
#bodyRight h3 { margin-bottom: 0; color:#003300; }
#bodyRight form h3 { margin-bottom: 12px; }
#bodyRight a { color: #993300; }
#bodyRight a:hover { text-decoration: none; }  

#container {
  width:           775px;  
  clear:           both;
  margin:         0px;
  padding:         0;
  margin: 0 auto;
}

#content {
  text-align: justify;
  width: 760px;
}

.contactNormal { font: Bold 12px Arial, sans-serif; }
.contactField { background-color:#FF0000; }
#bodyLeft #contactus .contactNormal { font-weight:bold; width: 140px; float: left; }
#bodyLeft #contactus .contactAlert { font-weight:bold; width: 140px; float: left; color: #FF0000; } 
#bodyLeft #contactus .contactFieldAlert { background-color: #FFFF99; border: 1px solid #FF0000; } 
#bodyLeft #contactus .contactBox { height: 30px; }
 
#bodyLeft #contactus #inputsWrapper input { font: 11px Arial, sans-serif; border: 1px solid #000000; width: 200px; padding: 2px; }
#bodyLeft #contactus textarea { font: 11px Arial, sans-serif; border: 1px solid #000000; width: 350px; padding: 2px; }
#bodyLeft #contactus select { font: 11px Arial, sans-serif; border: 1px solid #000000; }  

.formSubmit { padding: 5px 16px; }

#mapWrapper {
  padding: 5px;
  border: 1px dotted #EEE;
  margin-top: 15px;
}

#mapWrapper #map {
  width: 500px;
  height: 400px;
}

#footer {
  height:          75px;
  background-color:     #d9c285;
  font:           10px Arial, sans-serif;
  line-height:      16px;
  color:           #663300;
  text-align:        left;
  padding:         7px 0 0 10px;
  background: url(/images/bg/footer_logo.jpg) no-repeat bottom;
  border-top:        5px solid #FFFFFF;
  clear: both;
}

#footer a {  text-decoration: underline;  color: #000000;  }
#footer a:hover {  text-decoration: none;  color: #FFFFFF;  }
    
#footerLinks {
  background: url('/images/bg/footer_image.jpg') no-repeat center top;
  height: 50px;
  clear: both;
  padding-top: 26px;
  text-align: center;
  font: 11px Arial, sans-serif;
}

#footerLinks a { font-weight: normal; color: #663300; }
#footerLinks a:hover { text-decoration: none; color: #666666; }

.footerBreak {
  clear: both;
  height: 1px;
}

#menuContainer {
  padding-top: 5px;
  margin-left: 10px;
  height: 45px;
}

#mainNav {
  padding: 10px 0 5px 0;
  text-align: right;
	color: #999999;
}

#mainNav a { font: 11px Arial, sans-serif; color: #663300; font-variant: small-caps; }
#mainNav a:hover { text-decoration: none; color: #333300; }
#mainNav .active { text-decoration: none; color: #333300; }
.MainNavActive { text-decoration: none; color: #000000; }

.menuLeft {
  width: 460px;
}

.menuPrices {
  float: right;
  width: 50px;
}  

.marginTop {
  height: 20px;
}

.menuLeft p {
  font: 12px Arial;
  text-align: left;
  margin: 0 0 10px 0;
  padding: 0;
}

.menuPrices p {
  font: 12px Arial;
  text-align: right;
  margin: 0 0 10px 0;
  padding: 0;
}

#homeButton { float: left; padding-top: 5px; border: none;}

.red {
  font-weight: bold;
  color: #FF0000;
}

#rightLinks h3 { font: Bold 11px Arial; color:#003300; margin: 15px 0 2px 0; }

.SplashLinks {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #666666;
  letter-spacing: 3px;
  font-weight: bold;
  text-decoration: none;
}

.splashImage {
  margin-left: 15px;
}

.topBuffer {
  height: 20px;
}

.wine {
  width: 100%;
  font: 12px Arial, sans-serif;
  border: 0;
  padding: 5px;
}

.break {
  background: none;
  border: 0;
  clear: both;
  display: block;
  float: none;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.specialsLinks li {
  list-style-type: circle;
  padding: 3px 0;
  font-weight: bold;
}

#wineList h3 {
  margin: 15px 0;
}

#wineList td {
  border-bottom: 1px solid #EEEEEE;
}

/* JQUERY LIGHTBOX
----------------------------------------------------------------- */

#lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  line-height: 0;
}

#lightbox a img { border: none; }

#outerImageContainer {
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

#imageContainer {
  padding: 10px;
}

#loading {
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

#hoverNav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
  width: 49%;
  height: 100%;
  background: transparent url(/im/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */
  display: block;
}

#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/im/lightbox/prev.gif) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/im/lightbox/next.gif) right 50% no-repeat; }

/*** START : next / previous text links ***/
#nextLinkText, #prevLinkText{
  color: #FF9834;
  font-weight:bold;
  text-decoration: none;
}

#nextLinkText{
  padding-left: 20px;
}

#prevLinkText{
  padding-right: 20px;
}

/*** END : next / previous text links ***/
/*** START : added padding when navbar is on top ***/

.ontop #imageData {
    padding-top: 5px;
}

/*** END : added padding when navbar is on top ***/

#imageDataContainer {
  font: 10px Verdana, Helvetica, sans-serif;
  background-color: #fff;
  margin: 0 auto;
  line-height: 1.4em;
  height: 40px;
}

#imageData{
  padding:0 10px;
}

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }  
#imageData #caption{ font-weight: bold;  }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;  }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;  }
#imageData #helpDisplay {clear: left; float: left; display: block; }

#overlay{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #000;
/*  filter:alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6; */
  display: none;
}


/* JQUERY SLIDESHOW
----------------------------------------------------------------- */

#slider {
  width: 750px; /* important to be same as image width */
  height: 230px; /* important to be same as image height */
  position: relative; /* important */
  overflow: hidden; /* important */
}
#sliderContent {
  width: 750px; /* important to be same as image width or wider */
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#sliderContent li {
  margin-left: 0;
  padding-left: 0;
}

.sliderImage {
  float: left;
  position: relative;
  display: none;
}

.sliderImage span {
  position: absolute;
  font: 10px/15px Arial, Helvetica, sans-serif;
  padding: 10px 13px;
  width: 724px;
  background-color: #000;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  color: #fff;
  display: none;
  bottom: 0;
}
.clear {
  clear: both;
}
.sliderImage span strong {
  font-size: 14px;
}
.top {
  top: 0;
  left: 0;
}
.bottom {
  bottom: 0;
  left: 0;
}