/*################################## W3C #################################*/
body, div, 
h1, h2, h3, h4, 
h5, h6,ol, p, 
ul, hr   { display: block }
li              { display: list-item }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { padding: 8px; line-height: 1.33 }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .83em 0 }
h3              { font-size: 1.17em; margin: 1em 0 }
h4, p,
ul,
blockquote  { margin: 1.33em 0 }
h5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
h6              { font-size: .67em; margin: 2.33em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bold }
hr              { border: 1px inset }
ol, ul { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
a[href]         { text-decoration: underline }
:focus          { outline: dotted thin }
@media print {
@page         { margin: 10% }
h1, h2, h3,
h4, h5, h6    { page-break-after: avoid; page-break-inside: avoid }
blockquote, 
pre           { page-break-inside: avoid }
ul, ol, dl    { page-break-before: avoid }
}
@media aural {
h1, h2, h3, 
h4, h5, h6    { voice-family: paul, male; stress: 20; richness: 90 }
h1            { pitch: x-low; pitch-range: 90 }
h2            { pitch: x-low; pitch-range: 80 }
h3            { pitch: low; pitch-range: 70 }
h4            { pitch: medium; pitch-range: 60 }
h5            { pitch: medium; pitch-range: 50 }
h6            { pitch: medium; pitch-range: 40 }
li, dt, dd    { pitch: medium; richness: 60 }
dt            { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn           { pitch: high; pitch-range: 60; stress: 60 }
s, strike     { richness: 0 }
i             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u             { richness: 0 }
a:link        { voice-family: harry, male }
a:visited     { voice-family: betty, female }
a:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}
/*################################## /W3C #################################*//*################################## DEFAULT #################################*/
body
{
position:relative;
font-family: "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
line-height: 16px;
color:#333333;
padding: 0;
margin: 0;
text-align: center;
background-color: #ccc;
}
th,td,p,div,span,ul
{
font-family: "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
line-height: 16px;
color:#333333;
text-align: left;
}
img,div{behavior: url(/assets/javascript/iepngfix.htc)}
img {
border: 0;
}
.nodisplay { display: none; }
h1{
padding: 0px;
margin: 0px;
color:#262626;
}
h2{
padding: 0px;
margin: 0px;
color:#262626;
}
p{
padding: 0px;
margin: 0px;
padding-bottom:8px;
}
.clearALL
{
display:block;
clear: both;
margin: 0;
padding: 0;
width: 0;
height:0;
line-height:0;
}
a { 
font-family: "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
color: #333333
line-height: 16px;
}
.raquo
{
clear: both;
float: left;
width: 25px;
margin: 0;
text-align: center;
padding: 0;
}
.content
{
clear: both;
display: block;
position: relative;
margin: 0 auto 0 auto;
padding: 0;
text-align: left;
width: 750px;
background-color: #fff;
}
#footer
{
clear:both;
display: block;
position: relative;
margin: 0 auto 0 auto;
padding: 0px;
text-align: center;
}
.footer{
padding:10px;
text-align: center;
clear:both;
font-size:10px;
}
a.footerNav{
font-size:10px;
}
.enlarge{
display:block;
}
div#htmlMail{
/*
background-color: #fff;
color:#000;
*/
}
.horzLine{
padding: 1px 0 0 0;
background-image: url(/assets/images/dots_horizontal.gif);
background-repeat: repeat-x;
}
.vertLine{
background-image: url(/assets/images/dots_vertical.gif);
background-repeat: repeat-y;
}
/*################################## /DEFAULT #################################*//* global */
#cluetip-close img {
border: 0;
}
#cluetip-title #cluetip-close {
float: right;
position: relative;
}
#cluetip-waitimage {
width: 43px;
height: 11px;
position: absolute;
background-image: url(wait.gif);
}
/***************************************
=cluetipClass: 'default' 
-------------------------------------- */
.cluetip-default {
background-color: #d9d9c2;
}
.cluetip-default #cluetip-outer {
position: relative;
margin: 0;
background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
margin: 0 0 5px;
padding: 8px 10px 4px;
font-size: 1.1em;
font-weight: normal;
background-color: #87876a;
color: #fff;
}
.cluetip-default #cluetip-title a {
color: #d9d9c2;
font-size: 0.95em;
}  
.cluetip-default #cluetip-inner {
padding: 10px;
}
.cluetip-default div#cluetip-close { 
text-align: right;
margin: 0 5px 5px;
color: #900;
}
/***************************************
=cluetipClass: 'jtip'
-------------------------------------- */
.cluetip-jtip {
background-color: #fff;
}
.clue-right-jtip {
background-image: url(arrowleft.gif);
background-repeat: no-repeat;
padding-left: 10px;
}
.clue-left-jtip {
background-image: url(arrowright.gif);
background-repeat: no-repeat;
padding-right: 10px;
}
.cluetip-jtip #cluetip-outer {
border: 2px solid #ccc;
position: relative;
background-color: #fff;
}
.cluetip-jtip h3#cluetip-title {
margin: 0 0 5px;
padding: 2px 5px;
font-size: 16px;
font-weight: normal;
background-color: #ccc;
color: #333;
}
.cluetip-jtip #cluetip-inner {
padding: 0 5px 5px;
display: inline-block;
}
.cluetip-jtip div#cluetip-close { 
text-align: right;
margin: 0 5px 5px;
color: #900;
}
/***************************************
=cluetipClass: 'rounded'
-------------------------------------- */
.cluetip-rounded {
background: transparent url(bl.gif) no-repeat 0 100%;
margin-top: 10px;
}
.cluetip-rounded #cluetip-outer {
background: transparent url(tl.gif) no-repeat 0 0;
margin-top: -12px;
}
.cluetip-rounded #cluetip-title {
background: transparent url(tr.gif) no-repeat 100% 0;
padding: 12px 12px 0;
margin: 0 -12px 0 0;
position: relative;
}
.cluetip-rounded #cluetip-inner {
background: url(br.gif) no-repeat 100% 100%;
padding: 5px 12px 12px;
margin: 0 -12px 0 0;
position: relative;
}
.cluetip-rounded div#cluetip-close { 
text-align: right;
margin: 0 5px 5px;
color: #009;
background: transparent;
}
.cluetip-rounded div#cluetip-close a {
color: #777;
}
/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner {
zoom: 1;
}/*################################## CLIENT #################################*/
/* 
This is the css template client.css. 
Put css code in here that is specific to
this project.
*/
a {
color:#333333;
text-decoration: none;
}
a:link {
color:#333333;
text-decoration: none;
}
a:active {
color:#333333;
text-decoration: none;
}
a:visited {
color:#333333;
text-decoration: none;
}
a:hover {
color:#333333;
text-decoration: underline;
}
a.shortlink:link, a.shortlink:visited { 
color: #113080;
font-weight: bold;
}
.boldbrown {
color: #634024;
font-weight: bold;
}
.blue {
color: #113080;
}
.boldblue {
color: #113080;
font-weight: bold;
}
.grey {
font-size:13px;
/*background: #5b381a;*/
padding:5px;
font-weight: bold;
cursor:pointer;
color: #666;
}
.bordered
{
border-color: #634024;
border-width: 1px;
border-style: solid;
}
div.ws {
height: 4px;
}
div.ws8 {
height: 8px;
}
h2
{
padding: 0px;
margin: 0px 0px 10px 0px;
color: #262626;
}
td.left{
text-align: left;
}
td.center{
text-align: center;
}
td.right{
text-align: right;
}
body
{
background-color: #CCC;
background-image: url(/assets/images/bkgd/wood_pattern.jpg);
z-index: 20;
}
.content{
width: 666px;
background-color: transparent;
/*z-index: 50;*/
}
.header_nav
{
clear: both;
display: block;
position: relative;
margin: 0 auto 0 auto;
padding: 0;
text-align: left;
width: 666px;
z-index: 10000;
}
.shell
{
position: relative;
background-image: url(/assets/images/bkgd/paper_pattern.jpg);
background-repeat: repeat-y;
margin: 0 0 0 3px;
padding: 10px 45px 0 45px;
}
#footer_nav
{
position: relative;
height: 61px;
background-image: url(/assets/images/bkgd/paper_footer_cap.gif);
background-repeat: no-repeat;
margin: 0 0 0 3px;
text-align: center;
padding: 10px 22px 0 22px;
}
.footer{
color:#f8e7cd;
}
a.footerNav:link,a.footerNav:active,a.footerNav:visited,a.footerNav:hover{
color:#f8e7cd;
font-size:10px;
}
#header_nav
{
position: relative;
height: 108px;
background-image: url(/assets/images/bkgd/paper_top_cap.gif);
background-repeat: no-repeat;
margin: 92px 0 0 3px;
z-index:200;
}
#logo{
position: absolute;
left:227px;
top:-68px;
z-index:20000;
}
.blueHead{
font-size:18px;
color:#113080;
}
#nav_top_horses{
display:block;
position: absolute;
left:30px;
top:20px;
}
#nav_top_home {
display:block;
position: absolute;
left:148px;
top:20px;
}
#nav_top_contactus {
display:block;
position: absolute;
left:50px;
top:50px;
}
#nav_top_rides {
display:block;
position: absolute;
left:445px;
top:20px;
}
#nav_top_ranch {
display:block;
position: absolute;
left:545px;
top:20px;
}
#nav_top_reservations {
display:block;
position: absolute;
left:458px;
top:50px;
}
.photo_header
{
clear: both;
display: block;
position: relative;
margin: 0 auto 0 auto;
padding: 0;
text-align: left;
width: 666px;
z-index: 100;
}
#photo_header{
position: relative;
background-image: url(/assets/images/bkgd/paper_pattern.jpg);
background-repeat: repeat-y;
margin: 0 0 0 3px;
z-index: 100;
}
#photo_frame, #photo_frame_home
{
clear: both;
position: relative;
width: 552px;
height: 267px;
padding: 0;
margin: 0 0 0 45px;
border-color: #FFF;
border-width: 10px;
border-style: solid;
z-index: 100;
}
#photo_frame_home img {
/*margin-top:	-3px;*/
}
#home_column_left
{
position: relative;
z-index: 100;
float: left;
width: 184px;
text-align:center;
}
#home_column_center{
position: relative;
z-index: 100;
float:left;
width:184px;
margin: 0 10px 0 10px;
text-align:center;
}
#home_column_right{
position: relative;
z-index: 100;
float:left;
width:184px;
text-align:center;
}
#pets{
position: relative;
text-align:center;
}
.horsesClue{
position: relative;
z-index: 1000;
}
#ranch_column{
position: relative;
float:left;
width:359px;
margin:0;
margin-right:10px;
z-index: 20;
}
#ranch_rides{
position: relative;
text-align:center;
float:left;
width:184px;
margin:0;
z-index: 20;
}
.ride_overview{
position: relative;
display:block;
/*z-index: 100;*/
margin: 0 0 0 45px;
padding:0;
cursor:pointer;
}
.ride_image{
/*float:left;*/
width:184px;
display: inline;
position: relative;
z-index: 100;
}
.horse_image{
/*float:left;
width:184px;*/
display: inline;
position: relative;
z-index: 100;
}
.ride_info{
position: relative;
float:left;
width:339px;
margin-right:10px;
z-index: 100;
}
.ride_seperator
{
display: block;
clear:both;
text-align: center;
margin: 10px 0 10px 0;
position: relative;
z-index: 100;
}
.tour_info{
float:right;
margin-right:50px;
margin-top:8px;
position: relative;
z-index: 100;
}
.tour_detail{
float:left;
margin-left:90px;
position: relative;
z-index: 100;
}
.tour_button{
position: absolute;
right:-25px;
top:0;
z-index: 500;
}
.tour_button a div{
background-image:url(/assets/images/ridespage/reservation_button-off.png);
width:91px;
height:94px;
}
.rollover_reservations div{
background-image:url(/assets/images/lets_ride_button-off.png);
width:117px;
height:117px;
}
#header_image{
text-align: center;
}
#ride_details{
float:left;
width:369px;
margin-right:10px;
position: relative;
z-index: 100;
}
#contact_info{
float:left;
width:184px;
margin-right:10px;
position: relative;
z-index: 100;
}
#contact_form{
float:left;
width:379px;
position: relative;
z-index: 100;
}
.largeLeft{
float:left;
width:379px;
margin:0;
margin-right:10px;
position: relative;
z-index: 100;
}
.smallRight{
float:left;
width:184px;
margin:0;
position: relative;
z-index: 100;
}
/*
.googlemap {
border: 1px solid #333333;
}
*/
/*#### Drop Shadows ####*/
.ui-shadow { position:relative; }
.ui-shadow-color { background:#666; position:absolute; } /* Can be overidden via js */
.horse_info{
padding-left:10px;
}
html>body .outerpair1 {
/*background: url(/assets/images/shadow/upperrightfade.png) right top no-repeat;*/
} 
/* .outerpair1 must be given a width contraint, via either a width, 
or by floating or absolute positioning. In this demo these are 
applied from the second class name on the .outerpair1 DIV's.
This box also has one of the corner .png's. */
html>body .outerpair2 {
/*background: url(/assets/images/shadow/lowerleftfade.png) left bottom no-repeat;
padding-top: 8px;
padding-left: 8px;*/
}
/* .outerpair2 has padding equal to the shadow 
thickness, and also has one of the corner .png's */ 
html>body .shadowbox {
/*background: url(/assets/images/shadow/shadow.png) bottom right;*/
}
/* .shadowbox holds the main shadow .png */ 
/*
html>body .innerbox {
position: relative;
left: -8px;
top: -8px;
z-index: 10;
}
.innerbox is made "relative" and is "pulled" up and to 
the left, by a distance equal to the thickness of the shadow.
Because this is a relative-based shift, the box retains its
exact dimensions without change. */
.shadowbox img {
border: 2px solid #fff;
vertical-align: bottom;
/*margin: 0;*/
}
.floatimage {
float: left; /* Floating causes this box to shrinkwrap around sized content elements. */
padding: 0 20px 0 0;
display: inline; /* IE doubled margin bug is defeated via this fixer rule. */
position: relative;
z-index: 10;
}
.floatimagePets {
float: left; /* Floating causes this box to shrinkwrap around sized content elements. */
margin: 0 8px 0 0;
display: inline; /* IE doubled margin bug is defeated via this fixer rule. */
position: relative;
z-index: 10;
}
.pets_image{
position: relative;
z-index: 10;
}
#ride_calendars{
font-size:8px;
text-align:left;
float:left;
width:184px;
position: relative;
z-index: 100;
}
.cal_head{
font-size:13px;
/*background: #5b381a;*/
color:#113080;
padding:5px;
font-weight: bold;
cursor:pointer;
}
/*#### Calendars ####*/
#datepicker_div, .datepicker_inline {
position: relative;
z-index: 200;
background: #000;
width: 184px;
}
.datepicker_links {
background: #5b381a;
}
.datepicker_links label { /* disabled links */
color: #888;
}
.datepicker_control, .datepicker_links {
font-weight: normal;
}
.datepicker_header {
font-weight: normal;
background: #5b381a;
font-size: 90% !important;
}
.datepicker_header select {
background: #5b381a;
color: #fff;
}
.datepicker {
background: #f8e7cd;
}
.datepicker_titleRow {
background: #956e4f;
}
.datepicker_daysRow {
background: #e2c79d;
color: #666;
}
.datepicker_weekCol {
background: #e2c79d;
color: #fff;
}
.datepicker_daysCell {
color: #000;
border: 1px solid #f8e7cd;
}
.datepicker_weekEndCell {
background: #e2c79d;
}
.datepicker_daysCellOver {
background: #fff;
border: 1px solid #777;
}
.datepicker_unselectable {
color: #888;
}
.datepicker_today {
background: #e2c79d !important;
}
.datepicker_currentDay {
background: #917351 !important;
color: #f8e7cd;
}
.datepicker_status {
background: #f8e7cd;
}
* html .datepicker_prompt {
width: 184px;
}
.datepicker_daysCell a { 
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px; }
/* ________ Datepicker Links _______
** Reset link properties and then override them with !important */
#datepicker_div a, .datepicker_inline a {
color: #000;
}
.datepicker_control a, .datepicker_links a {
color: #f8e7cd !important;
font-size: 90% !important;
}
.datepicker_titleRow a {
color: #f8e7cd !important;
}
.datepicker_control a:hover {
background: #f8e7cd !important;
color: #333 !important;
}
.datepicker_links a:hover, .datepicker_titleRow a:hover {
background: #f8e7cd !important;
color: #333 !important;
}
.datepicker_oneMonth {
float: left;
width: 184px;
}
/*#### /Calendars ####*/
/*############ DIALOGS ############*/
/*
#chooseLang{
z-index:1000;
}
*/
.jqmWindow {
display: none;
position: absolute;
top: 15%;
left: 50%;
margin-left: -100px; /*1/2 of width*/
padding:0;
width: 200px;
/*	border: 1px solid #5b381a;*/
z-index: 200000;
}
/*
.jqmOverlay { background-color: #5b381a; 
position: relative;
z-index: 200;
/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
/* * iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
width: expression(this.parentNode.offsetWidth+'px');
height: expression(this.parentNode.offsetHeight+'px');
}
*/
.title{
display: block;
background-color: #5b381a;
padding:5px;
color:#fff;
font-weight:bold;
margin:0;
font-size:12px;
position: relative;
z-index: 200;
}
.modal{
background-color: #f8e7cd;
padding:16px;
text-align:center;
font-weight:bold;
position: relative;
z-index: 200;
border: 1px solid #5b381a;
}
.modal button
{
background-color: #5b381a;
color: #fff;
font-weight: bold;
border-color: #5b381a;
/*
border-color: #f5832a #f16323 #f16323 #f5832a;
*/
border-width: 2px;
border-style: outset;
position: relative;
z-index: 200;
}
/*############ /DIALOGS ############*/
/***************************************
=cluetipClass: 'default' 
-------------------------------------- */
#cluetip-waitimage {
background-image: none;
}
.cluetip-default {
background-color: transparent;
}
.cluetip-default #cluetip-outer {
position: relative;
margin: 0;
background-color: #fff;
}
/*############ /CLUETIPS ############*/
/*################################## /CLIENT #################################*/