/* -- Start Reset CSS -- */

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%;
	vertical-align: baseline;
	background: transparent;
}
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;
}

/* -- End Reset CSS -- */




body {
	margin:auto;
	width:955px;
	background-image:url(background.gif);
	font-family:verdana;
	font-size:14px;
}

/* Header */

#header {
	width:100%;
	height:345px;
	margin:0;
	padding:0;
}

#menuContainer {
	background:url(menu_bottom.gif) left bottom no-repeat;
	height:345px;
	margin:0;
	float:left;
}

#menu {
	background:#0089b7;
	padding-bottom:5px;
	width:276px;
	height:329px;
	margin:0;
}

#menu_list {
	margin:0;
	margin-top:10px;
	padding:0;
}

.menu_element {
	list-style-type: none;
	width:200px;
	margin-left:30px;
	padding-top:5px;
	color:#FFFFFF;
	height:20px;
	font-weight:bold;
	font-size: 16px;
	border-top:dashed 1px #3fb3d8;
}

.menu_element:first-child {
	border:none;
}

.menu_element a {
	color:#FFFFFF;
	text-decoration:none;
}

#slideshow {
	width:651px;
	height:100%;
	float:left;
	background-color:#FFFFFF;
}

#headerRight {
	float:right;
	height:100%;
}

/* Page */

#page {
	width:930px;
	margin-left:12px;
	background-image:url(bg.png);
	overflow:hidden;
}

#sidebar {
	width:259px;
	float:left;
	padding-left:5px;
	padding-bottom:60px;
}

#photos {
	margin-left:7px;
	margin-bottom:20px;
}

.contact {
	margin-left:7px;
}

.contactTextContainer {
	margin-left:20px;
}

.contact span {
	color:#777777;
}

.contact a {
	color:#777777;
}

#leftlink {
	margin-left:50px;
	float:left;
	text-align:center;
	line-height:20px;
	font-size:9px;
}

.leftlink a {
	color:#777777;
}

#content {
	width:630px;	
	float:left;
}

#content p {
	margin-left:20px;
	margin-right:20px;
}

#title {
	padding-top:10px;
	margin-left:30px;
	color:#0089b7;
	font-size:22px;
}

#linkContent {
	border-top: dashed 1px #BBBBBB;
	margin-top:20px;
	padding-top:20px;
	margin-left:20px;
	height:150px;
}

.linkDiv {
	width:27%;
	margin-left:30px;
	float:left;
	text-align:center;
	line-height:20px;
	font-size:9px;
}

.linkDiv a {
	color:#777777;
}


#gamesContent {
	margin-left:20px;
	margin-top:20px;
	height:310px;
}

.gamesDiv {
	width:27%;
	margin-left:30px;
	float:left;
	text-align:center;
}



/* Footer */

#footer {
	margin: auto;
	padding: 20px 40px;
	text-align: center;
}

#footer p {
	font-size: 12px;
}

/* S3Slider */

#s3slider {
   width: 633px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   float:right;
   margin-top:34px;
}

#s3sliderContent {
   width: 633px; /* important to be same as image width or wider */
   position: relative; /* important */
   top: 0; /* important */	
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
   vertical-align:top;
   list-style-type: none;
}

.s3sliderImage span {
   overflow:none;
   position: absolute; /* important */
   right: 0;
   font: 20px Arial, Helvetica, sans-serif;
   font-weight:bold;
   margin: 7px;
   margin-right:-10px;
   padding: 5px;
   height:21px;
   width: 0px;
   border-bottom: #003267 solid 1px; 
   background: #0089b7;
   filter: alpha(opacity=100); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 1; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}