/* 
----------------------------------------------------------------------------
Title: The Screen Layout
Author: 
E-mail:
URL: 

Created: 
Modified: 

Description: This stylesheet controls ONLY the elements that make
up the layout! For the layout typography and non structural 
elements please refer to the Design Embellishment sheet.


Gotcha Keyword Definitions pg. 22 of CSS Mastery
:TODO: Reminder of something that needs to be changed, fixed, 
or revised.
:KLUDGE: use this to explain a nasty work around.
:BUG: to document a problem with the code or a particular browser; 
include website where hack or fix can be found.
:TRICKY: Pieces of code that are particularily complicated.

---------------------------------------------------------------------------- */

/* Global
------------------------------------------------------------------*/
ul,li {
list-style-type:none;
}
	
a:link,
a:visited {
text-decoration:none;
}	

img {
border:0;
}

p {
font:1.3em "Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
}



p a {
	color: #4B4B4A;
	text-decoration: none;
	background:url(../images/dotted.gif) repeat-x bottom;
}

p a:hover {
	color: #4B4B4A;
	text-decoration: underline;
}

h1{
color:#003366;
}

h2{
color:#003366;
margin-bottom: -18px;
padding:0;
}

.desc {
font-style: italic;
margin-top: -5px;
}

.divider {
	margin: 5px auto; 
	width: 100%;
	height: 50px; 
	background: url(../images/seperator.gif) no-repeat center;
	}

.divider2 {
	margin: 5px auto; 
	width: 100%;
	height: 2px; 
	background:url(../images/dotted.gif) repeat-x bottom;
	}

/* The Basic Page Structure
----------------------------------------------------------------------------*/
body {
margin:0;
padding:0;
font:76%/1.5 "Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
text-align:center;
min-width:810px;
background: #fefefe url(../images/mainbg.jpg) repeat-x top;
}

#wrapper {
margin: 0 auto;
text-align: left;
width:810px;
}

#col1 {
width: 300px;
float: left;
clear:right;
}

#col2 {
width: 500px;
float: right;
padding-right:0;
}

#col2 * {
  padding-right: 0;
}

#col2 * * {
  padding-right: 0;
}


/* Header
----------------------------------------------------------------------------*/
#header {
float:left;
width: 300px;
height:518px;
background:url(../images/logobanner.jpg) no-repeat top left;
margin: 0;
padding: 0;
} 

#header h1 {
text-indent:-9999px;
height:1px;
display:block;
}


/* Navigation 
----------------------------------------------------------------------------*/

/*:TODO: Add more Pizzaz! */
#nav{
float: left;
width: 500px;
list-style: none;
margin: 4em 0 2em 0;
padding:0;
font-size:1.4em;
font-weight:bold;
}

#nav li {
float:left;
margin: 0 0 0 .3em;
padding:0;
}

#nav a {
float:left;
display: block;
margin: 0;
padding:4px 40px 2px 0px;
color: #385475;
}

#nav a:hover {
color: #EAB52F;
display:block;
margin: 0;
text-decoration: underline;
}

#active a{
text-decoration:none;
margin: 0;
padding:4px 40px 2px 0px;
color: #666;
}

#active a:hover{
text-decoration:none;
margin: 0;
padding:4px 40px 2px 0px;
color: #666;

}


/* Col2 Content
----------------------------------------------------------------------------*/
#welcome {
margin: 0;
}


/* Events List
------------------------------------------------------------------*/
#events {
margin:0;
padding:0;
}

#events  h2 {
text-indent:-9999px;
height:39px;
width: 254px;
display:block;
background:url(../images/titles/events.gif) no-repeat;
margin-bottom: 0;
padding-bottom:0;
}

#events ul {
float:left;
background:transparent url(../images/dotted.gif) repeat-x bottom right;
padding:15px 0 1px 0;
margin: 0 0 10px 8px;
width:230px;
}		
	
#events ul li {
background:transparent url(../images/dotted.gif) repeat-x top right;
font: bold 130% "Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
color: #34445B;
}

#events ul li a {
display:block;
padding:9px 5px 9px 15px;
color: #34445B;
}

#events ul li a:hover {
background:transparent url(../images/hovbg.gif) repeat-x top right;
}
				
#events a em {
display:block;
font: italic 95%/125% "Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
color: #333;
}


/* Adventures
------------------------------------------------------------------*/
#adventures {
margin:0;
padding:0;
float:left;
width: 500px;
text-align:left;
}

#adventures  h2 {
text-indent:-9999px;
height:39px;
width: 255px;
display:block;
background:url(../images/titles/latestadv.gif) no-repeat;
margin-bottom: 0;
padding-bottom:0;
}

#adventures .rss {
float: right;
padding: 2px 30px 0px 0;
margin: 2px 60px 0 0;
font: 115%/125% "Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
background:url(../images/rss.gif) no-repeat right center;
}

#adventures .rss a {
color: #4B4B4A;
padding:0;
margin: 0;
text-decoration: none;
background:url(../images/dotted.gif) repeat-x bottom;
}

#adventures .rss a:hover {
color: #34445B;
padding:0;
margin: 0;
text-decoration: underline;
}


/* :TODO: Fix the problem in Opera and IE (stupid pop up security bar) */
#advpics_l ul {
float:left;
padding:0;
}

#advpics_l li{
width:240px;
border-top: 1px solid #edecec;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #edecec;
background:#FFF;
padding:10px;
text-align:center;
position:relative;
float:left;
display:inline;
margin:5px;
}

#advpics_l a:hover { 
text-decoration:none;
}

#advpics_l a span{
/*\*/
position:absolute;
left:-9999px;
background-color: #fff;
filter: alpha(opacity=100);
-moz-opacity:.8;
opacity:.80;
	}

#advpics_l a:hover span{	
bottom:10px;
left:10px;
width:241px;
background:#FFF;
color:#333;
padding:5px 0 5px 0;
font-size:100%;
border:1px solid #EEE;
border-width:1px 0 0 0;
} 

.new {
position:absolute;
top:-15px;
left:-15px;
width: 101px;
height: 101px;
}

#advpics_sm ul{
float:right;
margin:0 0 0 10px;
padding:0;
}

#advpics_sm li{
width:100px;
height:80px;
border-top: 1px solid #edecec;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #edecec;
background:#FFF;
padding:10px;
text-align:center;
position:relative;
float:left;
display:inline;
margin:5px 5px 8px 5px;
}

#advpics_sm a:hover { 
text-decoration:none;
}

#advpics_sm a span{
/*\*/
position:absolute;
left:-9999px;
background-color: #fff;
filter: alpha(opacity=100);
-moz-opacity:.8;
opacity:.80;
}

#advpics_sm a:hover span{	
bottom:10px;
left:10px;
width:101px;
background:#FFF;
color:#333;
padding:5px 0 5px 0;
font-size:100%;
border:1px solid #EEE;
border-width:1px 0 0 0;
}

/* Footer
----------------------------------------------------------------------------*/
#footer {
float: right;
width: 500px;
text-align: center;
padding:.5em .5em .5em .5em;
margin:0;
clear:both;
}

#footer p {
	font-size:1em;
	color:#676767;
	}

#footer a {
	color: #4B4B4A;
	text-decoration: none;
	background:url(../images/dotted.gif) repeat-x bottom;
}

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