/*-------------------------------------------------
		    - GLOBAL -						
-------------------------------------------------*/

body {
    font-size: 12px;
    line-height: 1.5;
    font-weight: normal;
    font-family: arial, verdana, serif;
    background: #EAE8DC;
    color: #666;
    text-align: left;
}
    
body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd, input, form, fieldset, label {padding: 0;margin: 0}
		
#container { 
    width: 808px; 
    margin: 0 auto; 
    background: #fff url('../images/container_back.gif') repeat-y; /* add image to replicate on y axes */
}
	
a {color: #c03000; text-decoration: underline;}
a:hover { text-decoration: none;}

a img { border: none; }
p { margin: 0 0 1.5em 0; }
span { color: #677c99; font-weight: bold; }

i { font-weight: bold; color: #044F6C;}

.ghost { display : none; }

/*-------------------------------------------------
		- IMAGES -					
-------------------------------------------------*/


a:hover img.raam {
	border: 3px solid #c03000;
        padding: 4px
	}
        
        a img.raam { 
	background: #fff;
	border: 3px solid #EAE8DC;
	padding: 4px;
	}

div.gallery {
    margin: 10px 0;
}
    div.gallery img {
        margin: 0 2px 20px 0;
    }
	

/*-------------------------------------------------
		- H-TAGS -				
-------------------------------------------------*/



h2 {
    font-size: 150%;
    font-weight: normal;
    color: #32331d;
    margin: 30px 50px 5px 0; padding: 0 0 5px 0;        
    border-bottom: 4px solid #EAE8DC;
    text-transform: uppercase;
    height: 20px;
}

h4 {
    font-size: 150%;
    font-weight: normal;
    color: #677C99;
    margin: 30px 50px 5px 0; padding: 0 0 3px 0;        
    border-bottom: 1px solid #bad7e7;
    text-transform: uppercase;
    height: 20px;
}
    


h2 span {display: none; }


h2.welcome { background: url('../images/heading_welcome.gif') no-repeat; }
h2.attractions1 { background: url('../images/heading_attractions.gif') no-repeat; }
h2.contact { background: url('../images/heading_contact.gif') no-repeat; }
h2.african { background: url('../images/headers/africanroom.gif') no-repeat; }
h2.whale { background: url('../images/headers/whaleroom.gif') no-repeat ; }
h2.whalebeta { background: url('../images/headers/whaleroom.gif') no-repeat right; }
h2.leopard { background: url('../images/headers/leopardroom.gif') no-repeat; }
h2.lavender { background: url('../images/headers/lavenderroom.gif') no-repeat; }
h2.lavenderbeta { background: url('../images/headers/lavenderroom.gif') no-repeat right; }
h2.lilac { background: url('../images/headers/lilacroom.gif') no-repeat; }
h2.whales { background: url('../images/headers/whales.gif') no-repeat; }
h2.sharks { background: url('../images/headers/sharks.gif') no-repeat; }
h2.interest { background: url('../images/headers/interest.gif') no-repeat; }
h2.shipwrecks { background: url('../images/headers/shipwrecks.gif') no-repeat; }
h2.beaches { background: url('../images/headers/beaches.gif') no-repeat; }
h2.directions { background: url('../images/headers/directions.gif') no-repeat; }
h2.useful { background: url('../images/headers/useful.gif') no-repeat; }


/*-------------------------------------------------
		- HEADERS -					
-------------------------------------------------*/

#header_01 { 
	clear: both;
        background: url('../images/header_01.jpg') no-repeat center; 
	height: 295px;
	}
        #header_01 p {
            position: relative;
            top: 130px; left: 550px;
            width: 200px;
            font-size: 90%;
        }
	
#header_02 { 
	clear: both;
        background: url('../images/menu_back.gif') no-repeat; 
	height: 44px;
        color: #333;
	}
    #header_02 ul {
        list-style: none;
        padding: 0 0 0 4px; margin: 0;
    }
        #header_02 ul li {
            float: left;
        }
        #header_02 ul li a {
            float: left;
            text-decoration: none;
            padding: 10px 20px;
            font-weight: bold;
            color: #677c99;
        }
        #header_02 ul li a:hover {
            background: #bdd8e7;
        }



/*-------------------------------------------------
		- MAIN -				
-------------------------------------------------*/

#main {
    margin: 10px 40px 0 40px;
    padding: 0 0 30px 0;
    }
    
    div.img {
        padding: 4px;
        border: 3px solid #EAE8DC;
	margin-right: 8px;
        background: #F4F3F6;
    }
    
    div ul {
        padding: 0 0 0 16px;
    }
    
    div td {
        width: 252px;
    }
    
        
    #menu ul li {
        display: block;
        text-decoration: none;
        list-style: none;
        background: url('../images/arrow.gif') no-repeat;
        padding: 0 0 0 20px;
        margin: 0;
        }
        
/*-------------------------------------------------
		- FOOTER -					
-------------------------------------------------*/

#footer {
    clear: both;
    background: url('../images/footer_back.gif') no-repeat top;
    color: #333;
    width: 808px; 
    margin: 0 auto;
    padding: 40px 0;
    }
	
#footer p { 
	text-align: center; 
	margin: 0; padding: 0; 
	font-size : 90%;
        line-height: 2em;        
	}
    #footer p a {
        color: #677c99;
        text-decoration: none;
        font-weight: bold;
    }
    #footer p a:hover {
        text-decoration: underline;
    }

#footer p.bottom_menu {
    font-size: 100%;
    color: #677c99;
    font-weight: bold;
}

/*-------------------------------------------------
                - FORMS -					
-------------------------------------------------*/

form {
    padding: 10px;
    border: 1px solid #ccc;
    width: 500px;
    margin: 20px auto;
    background: #fff;
    line-height: 150%;
}

input, textarea, select {
    border: 1px solid #ccc;
    padding: 3px 5px;
}
select { padding: 2px; }

input[type='radio'], input[type='checkbox'] {
    vertical-align: middle;
    border: 0;
    margin: 0 5px 2px 0;
}
    
form input.btn {
    font-size: 12px;
    padding: 3px 6px; margin: 4px 5px 2px;
    cursor: pointer;
    border: 2px solid #999;
    color: #666;
    text-transform: uppercase;
    background: #f9f9f9;
}

table.input {
    border-collapse: collapse;
    width: 100%;
}
    
    table.input td {
        padding: 6px 15px;
        text-align: left;
    }
    table.input td.lefttd {
        text-align: right;
        vertical-align: top;
        width: 35%;
    }