/************ DiamondHeadResort.us CSS ************/

/*---------------------------- Default Styles -------------------------------- */
table td {vertical-align:top;text-align:left;}
strong,b {color:#111111; margin:0px;}
.small {font-size:11px;}
.small b {font-size:11px;}
img {border:0px;}
.clear {clear:both;margin:0px;padding:0px;}
.float-left {float:left;padding:0px 0px 0px 45px;margin:0;text-align:left;}
.float-right {float:right;padding:12px 0px 0px 0px;margin:0;text-align:right;}
ol {color:#444;}



/* Layout
-------------------------------------------------------------- */

/* Outside Layout */
html{background: #fff; }
html,body {font-family:Arial,Verdana,sans-serif;font-size:12px;color:#333;margin:0;padding:0;width:100%;height:100%;}
body {min-height:200px;text-align:center;text-align: -moz-center;}

#container {width:900px;height:100%;position:relative;text-align:center;text-align: -moz-center;margin: auto;}
#container-site {width:900px;height:auto;padding:0;margin:0;text-align:left;}
#topbar {width:900px;height:39px;padding:0;margin:0;background:url('../img/head-bg.jpg') no-repeat;padding-top:7px;text-align:right;}
#banner {width:900px;height:81px;background:#fff;padding:0;margin:0;text-align:left;}

/* Topbar*/
#topbar .phone {margin-right:16px;}
#topbar .diamond {margin-right:16px;}
#topbar .directions {margin-right:16px;}

/* Logo & Nav Container */
#logo-nav-container {width:900px;height:75px;position:relative;} /*Holds Logo & Nav, use position:relative so its possible to absolute position logo & nav */
#logo {position:absolute;top:-35px;left:0;width:274px;height:92px;padding:0;margin:0;background:url('../img/Diamondhead-Resort-Logo.jpg') no-repeat;}
#topnav {position:absolute;top:18px;right:7px;padding:0;margin:0;}

/* Body */
#body {width:900px;height:100%;background:#fff;vertical-align:top;padding:0px 0px 0px 0px;margin:0;text-align:left;position:relative;}  /* Body with 2 Column Layout */
#body div, #body td {text-align:left;}

/* Body - Headings */
h1,h2,h3,h4 {font-size:23px;color:#333;font-weight:normal;margin:0;padding:0;margin-top:0px;margin-bottom:8px;line-height:23px;}
h1 {font-size:23px;}
h2 {font-size:18px;color:#0061ab;font-weight:normal;margin-top:22px;margin-bottom:8px;} /* blue */
h2.magenta {font-size:18px;color:#a706a7;font-weight:normal;margin-top:22px;margin-bottom:8px;} /* magenta */
h3 {font-size:18px;color:#00936b;font-weight:normal;margin-top:22px;margin-bottom:8px;} /* teal */
h4 {font-size:18px;color:#333;font-weight:normal;margin-top:22px;margin-bottom:8px;} /* dark-grey */

/*H1 Bars with white text */
h1.bar-blue {background:#0061ab; padding: 10px 15px;color:#fff; width:870px;}
h1.bar-teal {background:#00936b; padding: 10px 15px;color:#fff; width:870px;}
h1.bar-magenta {background:#a706a7; padding: 10px 15px;color:#fff; width:870px;}
h1.bar-grey {background:#222; padding: 10px 15px;color:#fff; width:870px;}
h1.bar-lightgrey {background:#777; padding: 10px 15px;color:#fff; width:870px;}

/*H1 Bars with Colored bars & Colored text*/
h1.head {border-bottom: 10px solid #ddd;padding-bottom:3px;color:#00936b;}
h1.head span {border-bottom: 10px solid #0061ab;padding-left:10px;padding-right:100px;padding-bottom:3px;}
h1.head span.teal {border-color: #00936b;}
h1.head span.magenta {border-color: #a706a7;}
h1.head span.grey {border-color: #222;}
h1.head span.lightgrey {border-color: #777;}




/* Links  
-------------------------------------------------------------- */
/* Global Site */
a:link {text-decoration: underline; color: #0061ab;}
a:visited {text-decoration: underline; color: #0061ab;}
a:active {text-decoration: underline; color: #0061ab;}
a:hover {text-decoration: underline; color: #001724;}

/* Nav */
#nav-bar a:link {text-decoration: none; color: #fff;font-family:Hevetica, Arial; font-size:13px;font-weight:normal;position:relative;bottom:21px;}
#nav-bar a:visited {text-decoration: none; color: #fff;font-family:Hevetica, Arial; font-size:13px;font-weight:normal;position:relative;bottom:21px;}
#nav-bar a:active {text-decoration: none; color: #fff;font-family:Hevetica, Arial; font-size:13px;font-weight:normal;position:relative;bottom:21px;}
#nav-bar a:hover {text-decoration: underline; color: #ffe11e;}

/* Footer - Column Section */
#footer .foot-top a:link {text-decoration: none; color: #bbb;font-family:Arial; font-size:11px;}
#footer .foot-top a:visited {text-decoration: none; color: #bbb;}
#footer .foot-top a:active {text-decoration: none; color: #bbb;}
#footer .foot-top a:hover {text-decoration: underline; color: #fff;}

/* Colored Links - example:   class="blue"  */

/* BLUE */
A.blue:link {text-decoration: underline; color: #0061ab;} 
A.blue:visited {text-decoration: underline; color: #0061ab;}
A.blue:active {text-decoration: underline; color: #0061ab;}
A.blue:hover {text-decoration: underline;  color: #001724;} /*hover=darkblue*/

/* TEAL */
A.teal:link {text-decoration: underline; color: #00936b;} 
A.teal:visited {text-decoration: underline; color: #00936b;}
A.teal:active {text-decoration: underline; color: #00936b;}
A.teal:hover {text-decoration: underline;  color: #02392a;} /*hover=darkteal*/

/* MAGENTA */
A.magenta:link {text-decoration: underline; color: #a706a7;} 
A.magenta:visited {text-decoration: underline; color: #a706a7;}
A.magenta:active {text-decoration: underline; color: #a706a7;}
A.magenta:hover {text-decoration: underline;  color: #390139;} /*hover=darkmagenta*/

/* GREY */
A.grey:link {text-decoration: underline; color: #222;} 
A.grey:visited {text-decoration: underline; color: #222;}
A.grey:active {text-decoration: underline; color: #222;}
A.grey:hover {text-decoration: underline;  color: #000;} /*hover=black*/

/* LIGHTGREY */
A.lightgrey:link {text-decoration: underline; color: #666;} 
A.lightgrey:visited {text-decoration: underline; color: #666;}
A.lightgrey:active {text-decoration: underline; color: #666;}
A.lightgrey:hover {text-decoration: underline;  color: #222;} /*hover=darkgrey*/

/* Links with Circle Icons - LinkColor + Circle example:   class="blue circle-blue"     */
A.circle-blue:link, A.circle-blue:visited, A.circle-blue:active {text-decoration: none; background: url(../img/circle-blue.png) 0px 0px no-repeat;background-position:0px 2px;padding-left: 16px;}
A.circle-blue:hover {background: url(../img/circle-grey.png) center left no-repeat;} /*hover*/

A.circle-teal:link, A.circle-teal:visited, A.circle-teal:active {text-decoration: none; background: url(../img/circle-teal.png) center left no-repeat;background-position:0px 2px;padding-left: 16px;}
A.circle-teal:hover {background: url(../img/circle-grey.png) center left no-repeat;} /*hover*/

A.circle-magenta:link, A.circle-magenta:visited, A.circle-magenta:active {text-decoration: none; background: url(../img/circle-magenta.png) center left no-repeat;background-position:0px 2px;padding-left: 16px;}
A.circle-magenta:hover {background: url(../img/circle-grey.png) center left no-repeat;} /*hover*/

A.circle-grey:link, A.circle-grey:visited, A.circle-grey:active {text-decoration: none; background: url(../img/circle-grey.png) center left no-repeat;background-position:0px 2px;padding-left: 16px;}
A.circle-grey:hover {background: url(../img/circle-magenta.png) center left no-repeat;} /*hover*/
 
A.circle-lightgrey:link, A.circle-lightgrey:visited, A.circle-lightgrey:active {text-decoration: none; background: url(../img/circle-lightgrey.png) center left no-repeat;background-position:0px 2px;padding-left: 16px;}
A.circle-lightgrey:hover {background: url(../img/circle-grey.png) center left no-repeat;} /*hover*/




/* Inner Layout  
-------------------------------------------------------------- */

/* Homepage Section - Banner & Info Box */
.homepage_rotator {float:left;width:632px;height:273px;position:relative;}
.homepage_infobox {float:right;width:258px;height:273px;background:#e1b6e1;text-align:center;}
/*.homepage_infobox {float:right;width:258px;height:273px;background:#a706a7;text-align:center;}*/

#body .heading {background: #cdc000; padding: 10px 0 10px 25px;} /* Block - Heading */
#body .heading h1 {color:#fff;font-family:Hevetica, Arial;padding:0;margin:0; font-size:19px;font-weight:bold;} /* Block - Heading Text */
#body .content_block {background:#fff;padding:0px;} /* Block - Content Area */

/*Subpage Sections */
.section-menu {position:absolute;right:12px;top:10px;color:#999;font-size:13px;}
.section-menu a:link,.section-menu a:visited,.section-menu a:active  {margin-left:10px;margin-right:12px;text-decoration:none;}
.section-menu a:hover {text-decoration:underline;}

.section-image {margin-bottom:10px;}

a.waiver:link, a.waiver:visited, a.waiver:active {text-decoration: underline;display:inline-block;line-height:42px;background:transparent url(../img/clipboard32.png) center left no-repeat; background-position:0px 10px; padding-left:42px;font-size:18px; }
a.waiver:hover {text-decoration:underline;}


/* Subpage - 2 Columns */
#subpage-col1 {float:left;width:572px;height:100%;margin:auto;border-right:solid 0px #b0b0b0;padding:20px 0px 20px 20px;margin-top:0px;}  /* Subpage - Left Column */
#subpage-col2 {float:right;width:280px;height:100%;margin:auto;padding:9px 0px 20px 0px;margin-top:0px;}  /* Subpage - Right Column */
#subpage-col2 .infobox {width:280px;margin-bottom:0px;}

/* Body - 2 Columns */
#body .homepage-col-left {float:left;width:508px;height:100%;margin:auto;padding:0px;margin-top:0px;margin-right:23px;}  /* Left Column */
#body .homepage-col-right {float:left;width:369px;height:100%;margin:auto;padding:0px;margin-top:0px;}  /* Right Column */
#body .one-col {float:left;width:900px;height:100%;margin:auto;padding:0px;margin-top:0px;}  /* One Column */
#body .one-col-teal {float:left;width:900px;height:100%;margin:auto;padding:0px;margin-top:0px;padding-left:10px;padding-right:10px;background:#a6d9cb}  /* One Column */

#body .col-left {float:left;width:448px;height:100%;margin:auto;padding:0px;margin-top:0px;margin-right:23px;}  /* Left Column */
#body .col-right {float:left;width:429px;height:100%;margin:auto;padding:0px;margin-top:0px;padding-top:10px;}  /* Right Column */

/* Body - Colored Boxes */
.box {padding: 17px 18px 23px 18px;background:#d8d8d8;line-height:15px;}
.bg-teal {background:#a6d9cb;color:#003224;}
.bg-blue {background:#a6c8e2;color:#001d33;}
.bg-magenta {background:#e1b6e1;color:#300031;}

.box a:link,.box a:visited,.box a:active {color:#004d88;} /* Default Grey Box Links */
.box a:hover {color:#001d33;}
.bg-blue a:link,.bg-blue a:visited,.bg-blue a:active {color:#004d88;} /* Blue Box Links */
.bg-blue a:hover {color:#001d33;}
.bg-teal a:link,.bg-teal a:visited,.bg-teal a:active {color:#007152;} /* Teal Box Links */
.bg-teal a:hover {color:#02392a;}
.bg-magenta a:link,.bg-magenta a:visited,.bg-magenta a:active {color:#a706a7;} /* Magenta Box  Links */
.bg-magenta a:hover {color:#390139;}

/*Subpage Table Classes */
table td.center {text-align:center !important;}

/* Homepage Section - Activities = Image (left) | Link & Content (right) */
.activity {margin-top:23px;}
.activity .container-img {float:left;width:89px;margin-right:17px;} /* Left Column (img) */
.activity .container-text {float:left;width:226px;} /* Right Column (heading + text) */
.activity .container-text span {font-size:17px;line-height:12px;} /* Heading (link) */
.activity .container-text p {margin-top:4px;margin-bottom:0px;line-height:14px;} /* Text */
 
 
 
/* Footer 
-------------------------------------------------------------- */
#footer {width:900px;padding:0px;margin:0px;padding-bottom:10px;text-align:left;font-size:12px;padding-top:60px;}

#footer .foot-top {background:#fff;color:#aaa;line-height:18px;padding-left:0px;margin:0px;margin-top:20px;text-align:center;}
#footer .foot-top strong {display:block;font-weight:normal;border-bottom:solid 3px #0061ab;padding-bottom:0px;margin-bottom:7px;width:133px;font-size:14px;} /*use "padding-right" to adjust gap */
#footer .foot-top strong.blue {display:block;color:#0061ab;font-weight:normal;border-bottom:solid 3px #0061ab;}
#footer .foot-top strong.teal {display:block;color:#00936b;font-weight:normal;border-bottom:solid 3px #00936b;}
#footer .foot-top strong.magenta {display:block;color:#a706a7;font-weight:normal;border-bottom:solid 3px #a706a7;}
#footer .foot-top strong.grey {display:block;color:#222;font-weight:normal;border-bottom:solid 3px #222;}
#footer .foot-top strong.lightgrey {display:block;color:#777;font-weight:normal;border-bottom:solid 3px #777;}

/*Footer - Links */
#footer .foot-top a:link  {text-decoration: none; color: #444;font-size:12px;background: url(../img/arrow_small.gif) center left no-repeat;background-position:0px 3px;padding-left: 14px;} 
#footer .foot-top a:visited {text-decoration: none; color: #444;font-size:12px;background: url(../img/arrow_small.gif) center left no-repeat;background-position:0px 3px;padding-left: 14px;}
#footer .foot-top a:active {text-decoration: none; color: #444;font-size:12px;background: url(../img/arrow_small.gif) center left no-repeat;background-position:0px 3px;padding-left: 14px;}
#footer .foot-top a:hover{text-decoration: underline;  color: #000;font-size:12px;background: url(../img/arrow_small.gif) center left no-repeat;background-position:2px 3px;padding-left: 14px;} /*hover=magenta*/

#footer .foot-bottom {background:#fff;padding:0px;margin-top:12px;margin-bottom:8px;padding:0px;text-align:left;color:#777;}

/*Footer - Columns */
#footer .col {float:left;text-align:left;padding-right:20px;}



/* Subpages 
-------------------------------------------------------------- */

/* Video */
.grid-video {text-align:center;text-align: -moz-center;}
.grid-video td {text-align:center;text-align: -moz-center;padding-bottom:10px;}
.grid-video td.left {padding-right:15px;}
.grid-video td img {margin-bottom:4px;}
.grid-video td a {font-size:12px;}

/* Commercials */
.grid-commercials {text-align:center;text-align: -moz-center;}
.grid-commercials td {text-align:center;text-align: -moz-center;padding-bottom:10px;}
.grid-commercials td.left {padding-right:9px;}
.grid-commercials td.mid {padding-right:8px;}
.grid-commercials td img {margin-bottom:4px;}
.grid-commercials td a {font-size:12px;}

/* Photos */
.grid-photos {text-align:center;text-align: -moz-center;}
.grid-photos td {text-align:center;text-align: -moz-center;padding-bottom:10px;}
.grid-photos td.left {padding-right:15px;}
.grid-photos td img {margin-bottom:4px;}
.grid-photos td a {font-size:12px;}


/* Form Elements   
-------------------------------------------------------------- */
input,textarea,select{width:60%;font-size:1.1em;color:#666;padding:5px;font-family:"Lucida Grande","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;z-index:100 !important;position:relative;}
input{border:2px solid #ccc;background-color:#fff;}
input[type="radio"],input[type="checkbox"]{background:transparent !important;border:0 !important;width:16px !important;}
textarea{height:150px;padding:5px;border:2px solid #ccc;font-size:1.1em;color:#666;background-color:#fff;}
select{border:2px solid #ccc;background:#fff;width:62%;padding:2px;}
select:focus{border:1px solid #999;background:#fff;}

/* Spacing 
-------------------------------------------------------------- */
.space { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:8px;}
.space2 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:2px;}
.space4 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:4px;}
.space6 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:6px;}
.space8 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:8px;}
.space10 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:10px;}
.space12 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:12px;}
.space14 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:14px;}
.space16 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:16px;}
.space18 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:18px;}
.space20 { font-family: tahoma; font-size: 11px; margin-left: 0px; margin-right:0px; margin-top:20px;}

/* Indents  
-------------------------------------------------------------- */
.indent2 { font-family: tahoma; font-size: 11px; margin-left: 2px; margin-right:0px; margin-top:0px;}
.indent4 { font-family: tahoma; font-size: 11px; margin-left: 4px; margin-right:0px; margin-top:0px;}
.indent6 { font-family: tahoma; font-size: 11px; margin-left: 6px; margin-right:0px; margin-top:0px;}
.indent8 { font-family: tahoma; font-size: 11px; margin-left: 8px; margin-right:0px; margin-top:0px;}
.indent10 { font-family: tahoma; font-size: 11px; margin-left: 10px; margin-right:0px; margin-top:0px;}
.indent25 { font-family: tahoma; font-size: 11px; margin-left: 25px; margin-right:0px; margin-top:0px;}