/**
 * stylesheet for general content of Algoma Country Site
 *
 * @author      Greg Tammi <greg@pictographics.com>
 * @copyright   Copyright (c) 2008+ Pictographics Ltd
 */

* {
    margin: 0 ;
    padding: 0 ;
}

a {
    text-decoration: none ;
    color: #AD3A17 ;    
}

a:hover {
    text-decoration: underline ;
}

/* generic element styling */
body {
    font: .76em arial, verdana, sans-serif ;
    color: #333 ;
    background: #D3D7DE url(/img/backgrounds/beach.jpg) top center repeat-y;
}

ul, ol {
    list-style: none ;
    margin-left: 1em ;
}

.clear {
    clear: both ;
}
#wrapper {
    width: 778px ;
    border: 2px solid #ccc ;
    margin: 10px auto ;
    padding: 9px; 
    background: #fff ;
}

#head {
    clear: right ;
    position: relative ;
    width: 776px ;
    /*float: left ;*/
    /*height: 255px; */
    height: 230px ;
    padding-bottom: 4px ;
    border-bottom: 2px solid #666 ;
    z-index: 100 ;
    /*overflow: hidden ;*/
}

#site_search {
    float: right ;
    position: relative ;
    z-index: 9999 ;
    width: 366px ;
    text-align: right ;
    height: 20px ;
    padding: 0; 
    margin: 0 ;
}

#weather_feed {
    float: left ;
    width: 300px ;
}

#translate {
    float: left; 
    width: 100px ;
    margin-left: 10px ;
}

#site_search form {
    float: right; 
}

#head #baseImg { 
    position: relative ;
    clear: right ;
    float: left ;
    z-index: 1 ;
    margin-top: 0px ;
    height: 190px ;
    width: 776px ;
}

/* =================== STYLE FOR NEW HEADER IMG SLIDESHOW =================== */
#baseImg img {
    position:absolute;
    top: 0;
    left:0;
    z-index:8;
    opacity:0.0;
    margin: 0 ;
    padding: 0 ;
}

#baseImg img.active {
    z-index:10;
    opacity:1.0;
}

#head #font-size-changing {
    position: absolute ;
    top: 12px ;
    left: 15px ;*/
}

/* this will be an image in conforming browsers, and a span in IE 6.0 and less
   as this is a png image. */
#logo {
    display: none ;
    float: left; 
    margin-left: 10px ;
    margin-top: -10px ;
    z-index: 100 ;
    position: relative ;
}
     
ul#topnav {
    float: right ;
    width: 676px; 
    /* width: 550px ;*/
    height: 38px ;
    border: 1px solid #ccc ;
    border-width: 1px 0 0 1px ;
    z-index: 200 ;
    margin-top: 6px ;
    position: relative; 
    z-index: 100 ;
}

#topnav li {
    float: left ;
    border-right: 1px solid #ccc ;
    position: relative ;
}

li#play {
    border-left: 0 ;
}

#topnav li a {
    display: block ;
    padding: 12px 0 6px 0;
    font-weight: bold ;
    font-size: 140% ;
    text-transform: uppercase ;
    background: url(/img/menu/bg.png) top left repeat ;
    text-align: center ;
    text-decoration: none ; 
}

#topnav li a:hover {
    color: #fff ;
}

li#home a {
    width: 125px ;
}

li#play a {
    width: 125px ;
    color: #1fa21f ;
}


li#rest a {
    width: 125px ;
    color: #00216e ;
}

li#explore a {
    width: 171px ;
    color: #8c6a60 ;
}

li#learn a {
    width: 125px ;
    color: #e36a00 ;
}

li#home a:hover {
    color: #000 ;
}

#topnav li#play a:hover {  
    background: url(/img/menu/play_overlay.png) top left repeat;
}

#topnav li#rest a:hover {  
    background: url(/img/menu/rest_overlay.png) top left repeat;
}

#topnav li#explore a:hover {  
    background: url(/img/menu/explore_overlay.png) top left repeat;
}

#topnav li#learn a:hover {  
    background: url(/img/menu/learn_overlay.png) top left repeat;
}

#topnav ul {
    position: absolute ;
    top: 38px ;
    left: -11px ;
    display: none ;
}

#topnav ul li a {
    background: url(/img/menu/submenu_bg.png) top left repeat ;
    font-size: 90% ;
}
        
.play, .play span       {      color: #1fa21f ;    }
.rest, .rest span       {      color: #00216e ;    }
.explore, .explore span {      color: #8c6a60 ;    }
.learn, .learn span     {      color: #e36a00 ;    }
 
#footer {
    clear: left ;
    float: left; 
    width: 100% ;
    margin-top: 22px ;
    text-align: center ;
    color: #333 ;
}

#footer ul {
    padding: 5px 0 ;
}

#footer li {
    display: inline ;
    padding: 0 9px ;
}
#footer a {
    font-weight: bold ;
    font-size: 90% ;
    text-decoration: none ;
}

#footer a:hover {
    text-decoration: underline ;
}

#footer p#copyright {
    font-size: 90% ;
    padding-top: 20px ;
}

#footer ul#footnav {
    border: 1px solid #666 ;
    border-width: 1px 0 ;
}

#footer #sponsors ul li#supportedby {
    padding-bottom: 10px ;
    display: block ;
}
/* ============================= TABLES STYLING ============================= */
/* generic table layout and striping */
table.zebra, table.data_display {
	border-collapse: collapse;
	font-size: 100% ;
	color: #555;
	text-align: left;
	border-left: 1px solid #ccc;
}

table.zebra td, table.data_display td {
	padding: 6px 9px ;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: #fff;
} 

table tr.stripe td {
	color: #c76400;
	background: #e6e6e6;
}

table th {
	padding: 6px 9px ;
	background: #555;
	color: #fff;
	border: 1px solid #444;
	font-weight: normal;
}
/* ===================== STYLES FOR PACKAGE INFORMATION ===================== */
div.single, div.multiple {
    float: left ;
    width: 100% ;
    border-bottom: 1px solid #ccc ;
    margin-bottom: 10px ;
}

div.multiple img, div.multiple p.content {
    display: none ;
}

div.multiple div, div.single div {
    float: left;
    width: 100% ;
    margin-bottom: 10px ;
}

div.single p.package_link {
    display: none ;
}

div.single img {
    float: left ;
    width: 100px ;
}

div.single h4, div.single h5 {
    margin-left: 120px ;
}

div.single h4 {
    margin-bottom: 10px ;
}

div.single h5
    margin-bottom: 5px ;
}
 
p.content {
    clear: left ;
    float: left ;
    width: 100% ;
    margin-top: 10px ;
}  
/* ===================== STYLES FOR GOOGLE MAPS BUBBLES ===================== */
div.container {
    width: 250px ;
    max-height: 150px ;
    overflow: auto ;
    padding-bottom: 20px ;
}

div.container p {
    margin: auto ;
    padding: auto ;
    font-size: 12px ;
}