/* --------------------------------------------------------------
    Contents:
    01 Reset
    02 Base styles
    03 Helper styles
    04 Page structure
    05 Page components
    06 Overrides
---------------------------------------------------------------*/

/*---------------------------------------------------------------
01 Reset (see http://meyerweb.com/eric/tools/css/reset/)
---------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}

img
{ vertical-align: middle; }

body
{ line-height: 1; }

ol, ul
{ list-style: none; }

blockquote, q
{ quotes: none;  }

blockquote:before, blockquote:after,
q:before, q:after
{
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus
{ outline: 0; }

/* remember to highlight inserts somehow! */
ins
{ text-decoration: none; }

del
{ text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table
{
	border-collapse: collapse;
	border-spacing: 0;
}

/*---------------------------------------------------------------
02 Base styles
---------------------------------------------------------------*/
body
{
    font: 62.5%/1.4 Georgia, Serif;
    color: #111;
}

h1
{
    margin-bottom: 0.277em;
    padding-bottom: 0.277em;
    border-bottom: 1px solid #111;
    font-size: 3.6em;
    line-height: 1.111;
    font-weight: normal;
}

h2
{
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #111;
    font-size: 2em;
    line-height: 1.1;
    font-weight: normal;
}

a
{
    color: #00305a;
    text-decoration: underline;
    cursor: pointer;
}

a:hover,
a:focus
{ text-decoration: none; }

em
{ font-style: italic; }

strong
{ font-weight: bold; }

small
{ font-size: 0.714em; }

p
{
    margin-bottom: 0.714em;
    font-size: 1.4em;
    line-height: 1.285;
}

address
{
    margin-bottom: 0.714em;
    font-size: 1.4em;
    line-height: 1.285;
    font-style: normal;
}

ul,
ol
{
    margin-bottom: 0.714em;
    font-size: 1.4em;
    line-height: 1.285;
}

ul.circle
{
    list-style: circle outside;
    margin-left: 16px;
}

ul.disc
{
    list-style: disc outside;
    margin-left: 16px;
}

ul.horizontal
{ overflow: hidden; }

    ul.horizontal li
    {
        float: left;
        padding: 0 5px;
    }

    ul.horizontal li.first
    { padding-left: 0; }
    
ol
{
    list-style: decimal outside;
    margin-left: 16px;
}

fieldset
{ margin: 20px 0; }

legend
{
    padding-bottom: 10px;
    font-size: 2em;
    line-height: 1;
}

input.text,
textarea,
select
{
    width: 160px;
    padding: 2px;
    border: 1px solid #ccc;
    font-family: Georgia, Serif;
    font-size: 1.4em;
}

textarea
{ width: auto; }

input.submit
{ overflow: visible; }

div.formInput
{
    position: relative;
    margin-bottom: 1em;
    overflow: hidden;
}

    div.formInput label
    {
        float: left;
        width: 120px;
        padding-right: 5px;
        font-size: 1.4em;
        line-height: 1.6;
    }

    div.formInput span.validation
    {
        position: absolute;
        left: 116px;
        font-size: 1.4em;
        line-height: 1.8;
    }

    div.formInput span.instruction
    {
        display: block;
        font-size: 1em;
        font-style: italic;
    }
    
div.formInputGroup
{
    padding-top: 10px;
    border-top: 1px solid #111;
}

div.formOptions
{ overflow: hidden; }

    div.formOptions input.submit
    {
        float: right;
        padding: 2px 8px;
    }

div.message
{
    padding: 10px;
    margin-bottom: 1em;
    color: #fff;
    background-color: #635236;
    overflow: hidden;
}

    div.message p,
    div.message ul
    {
        margin: 0;
    }
    
    div.message.confirmation
    {
        padding-left: 34px;
        background: #635236 url('../images/layout/site/message_confirmation.png') 10px 50% no-repeat;
    }
    
fieldset p.disclaimer
{ padding-top: 10px; }

/*---------------------------------------------------------------
03 Helper styles
---------------------------------------------------------------*/
/* any element with this class will be hidden off screen, but should still be seen by screen readers */
.nonVisual
{
    position: absolute !important;
    left: -9000px !important;
    top: 0 !important;
}

/* unfortunately, legends don't play well with the above rules */
legend.nonVisual
{
    display: none !important;
    visibility: hidden !important;
}

.leader
{ margin-bottom: 0; }

/*---------------------------------------------------------------
04 Page structure
---------------------------------------------------------------*/
body
{
    background: #64a6e0 url('../images/layout/site/body.jpg') 0 0 repeat-x;
}

div#page
{
    width: 990px;
    margin: 0 auto;
    padding-bottom: 20px;
}

div#header
{
    position: relative;
    z-index: 20;
    width: 920px;
    padding: 0 35px;
}

p#cosbLogo,
p#bookUsNow
{ margin: 0; }

p#bookUsNow
{
    position: absolute;
    z-index: 30;
    right: 35px;
    top: 15px;
    width: 183px;
    height: 173px;
}

div#navigation
{
    position: relative;
    z-index: 10;
    width: 920px;
    padding: 0 35px;
}

    div#navigation ul
    {
        margin: 0;
        font-size: 1.6em;
        line-height: 1;
    }

    div#navigation li
    { padding: 0; }

    div#navigation li.selected
    { background-color: #4192d9; }

    div#navigation li a
    {
        display: block;
        padding: 10px;
        text-transform: uppercase;
        color: #fff;
    }

div#body
{
    position: relative;
    z-index: 10;
    width: 960px;
    min-height: 560px;
    padding: 30px 15px 0;
    background: transparent url('../images/layout/site/body.png') 0 0 no-repeat;
}

div#content
{
    width: 920px;
    padding: 0 20px;
    background-color: #fff;
    overflow: hidden;
}

div#hero
{
    width: 926px;
    height: 274px;
    padding-bottom: 20px;
    margin: 0 -3px;
}

div#primaryContent
{
    float: left;
    width: 540px;
    margin-right: 40px;
}

div#secondaryContent
{
    float: right;
    width: 340px;
}

div#footer
{
    width: 920px;
    margin: 0 15px;
    padding: 20px;
    background-color: #00305a;
}

    div#footer p
    {
        margin: 0;
        font-size: 1.1em;
        color: #fff;
        text-align: right;
    }

    div#footer a
    { color: #fff; }

/*---------------------------------------------------------------
05 Page components
---------------------------------------------------------------*/
div#bookingForm
{
    width: 300px;
    padding: 20px;
    margin-bottom: 1.5em;
    background-color: #d1dbbd;
}

    div#bookingForm fieldset
    { margin: 0; }
    
    div#bookingForm div.formInputGroup
    { border-top-color: #ba9b65; }

    div#bookingForm div.formInput
    { width: 300px; }

        div#bookingForm div.formInput input.text
        { width: 164px; }

        div#bookingForm div.formInput span.validation
        { right: 176px; }

        div#bookingForm div.formInput label,
        div#bookingForm div.formInput span.instruction,
        div#bookingForm fieldset p.disclaimer
        { color: #635236; }
        
div#contactDetails
{
    width: 300px;
    padding: 20px;
    margin-bottom: 1.5em;
    background-color: #d1dbbd;
}
    
    div#contactDetails h2
    { border-bottom-color: #ba9b65; }