/* Site Layout Styles
 * Updated:  13 Jun 2008 @ 11.20am
 * Author: Matthew Holmes <www.ivt.com.au>
 ---------------------------------------------*/

/* -- reset css [http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/] */
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, 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: inherit; 
	font-family: inherit; 
	vertical-align: baseline;
	list-style: none;
	}


	/* using clearfix solution to reduce any html markup just apply class="clearfix" to any div you want. */
	.clearfix:after {
		display: block;
		clear: both;
		height: 0;
		content: ".";
		visibility: hidden;
		}
	* html .clearfix { /* ie hack it needs to use height: 1%, does not support the :after pseudoclass */ height: 1%; }
	*+ html .clearfix { height: 1%; }

		body {
			margin: 25px 0;
			background: #000;
			color: #555;
 			font: normal 62.5%/1.6 "Trebuchet MS", Arial, Helvetica, sans-serif inherit;
			}

			/* -- links */
			a { color: #c30004; }
			a:hover { text-decoration: none; }

			/* -- structure
			---------------------------------------------*/
			#container {
				width: 1020px;
				margin: 0 auto;
				background: #fff;
				}

				/* -- header[phone, map, sub nav] */
				#header {
					position: relative;
					padding: 0 40px;
					height: 120px;
					background: #000 url(../webimage/bg.jpg) 0 0 no-repeat;
					}
					
					/* logo */
					#header h1 { padding: 17px 0 0; }
					
					/* phone */
					p#phone {
						position: absolute;
						bottom: 36px;
						left: 290px;
						color: #fff;
						font-size: 1.1em;
						font-style: italic;
						}
					p#phone span { font-size: 1.6em; font-weight: bold; }
						
					/* map */
					p#map {
						position: absolute;
						bottom: 39px;
						left: 472px;
						}
					p#map a {
						display: block;
						padding: 2px 8px;
						background: #2e3236;
						color: #fff;
						font-size: 1.1em;
						text-decoration: none;
						}
					p#map a:hover { background: #fff; color: #2e3236; }
					
					/* sub nav */
					div#sub_nav {
						position: absolute;
						top: 10px;
						right: 40px;
						color: #fff;
						font-size: 1.1em;
						}
					div#sub_nav a { color: #fff; font-style: italic; }

				/* -- main navigation */
				#nav {
					padding: 0 40px;
					height: 45px;
					background: #4d565d url(../webimage/bg.jpg) 0 -120px no-repeat;
					}
					
					/* nav */
					#nav ul li { float: left; display: block; }
					#nav ul li a {
						float: left;
						display: block;
						padding: 14px 20px 6px;
						color: #000;
						font-size: 1.2em;
						font-weight: bold;
						font-style: italic;
						text-decoration: none;
						}
					#nav ul li a:hover { color: #fff; }
					#nav ul li.on a {
						background: #1c7800 url(../webimage/bg-nav.gif) 0 0 repeat-x;
						color: #fff;
						text-transform: uppercase;
						}
						 
					/* search */
					div#search {
						float: right;
						width: 166px;
						padding: 10px 5px 0;
						}
					div#search input {
						width: 160px;
						padding: 3px;
						border: 2px solid #4d565d;
						color: #c30004;
						font-style: italic;
						}
							
				/* -- banner[flash, booking] */
				#banner {
					position: relative;
					padding: 0 40px;
					height: 72px;
					background: url(../webimage/bg.jpg) 0 -165px no-repeat;
					}
					
					#banner h2 {
						padding: 10px 0 0;
						color: #fff;
						font-size: 2em;
						font-style: italic;
						}

				/* main body[welcome, events, signup] */
				#main_body {
					padding: 15px 40px;
					min-height: 350px;
					font-size: 1.2em;
					}
					
					p.more { text-align: right; font-size: 10px; }
					
					/* welcome */
					div#welcome {
						float: right;
						width: 670px;
						padding: 0 15px;
						}
					div#welcome h3#main_title {
						margin: 0 0 5px;
						font-size: 1.6em;
						font-style: italic;
						}
					div#welcome p { padding: 3px 0; }
						
					div#side { float: left; width: 220px; }
					div#clan-random { width: 220px; height: 165px; overflow: hidden; margin: 30px 0 0; } 
						
						/* side navigation */
						#side li { border-bottom: 1px solid #ddd; }
						#side li a { display: block; padding: 5px 5px 5px 22px; background: url(../webimage/icon-arrow.gif) 8px 10px no-repeat; }
						#side li.on a { font-weight: bold; text-decoration: none; }
						#side li li { border: 0; }
						#side li li.off a { padding: 3px 3px 3px 22px; background: none; font-size: .9em; font-weight: normal; }
						#side li li.on a { padding: 3px 3px 3px 22px; background: none; font-size: .9em; font-weight: bold; }

						/* site map */
						ul.sitemap_level1 li { padding-left: 5px; list-style: disc; }
						ul.sitemap_level2 { padding-left: 10px; }
						ul.sitemap_level2 li { padding-left: 5px; list-style: square; }
						ul.sitemap_level3 { padding-left: 10px; }
						ul.sitemap_level3 li { padding-left: 5px; list-style: circle; }

						/* search */
						div.search_form { padding: 0 0 15px; }
						div.search_form legend,
						div.search_form label { display: none; }

						/* files */
						ul.files_list { margin: 5px 0; }
						ul.files_list li { padding: 0 0 5px; }
						ul.files_list li img { vertical-align: middle; margin-right: 5px; }
	
						/* listings */
						table.knowledge_list_table td { padding: 5px 0; border-bottom: 1px solid #ddd; }
						
						ul.gallery_cat_list, ul.gallery_item_list {
							overflow: hidden;
							width: 660px;
							text-align: center;
							}
						ul.gallery_cat_list li, ul.gallery_item_list li {
							float: left;
							display: block;
							width: 220px;
							padding: 10px 0;
							}
						ul.gallery_item_list li h4 { font-size: .9em; }
						div#display_public_media, p.path, div.path { display: none; }
						
						table.knowledge_category_table td { text-align: center; padding: 10px 0; }
						div.events_list { border-bottom: 1px solid #ddd; padding: 5px; }
						

				/* -- gallery */
				#gallery {
					position: relative;
					height: 80px;
					margin: 15px 0;
					background: url(../webimage/bg.jpg) 0 -524px no-repeat;
					}
					
					/* carousel */
					.jcarousel-container {
						position: absolute;
						top: 14px;
						left: 40px;
						}
					.jcarousel-clip {
						z-index: 2;
						padding: 0;
						margin: 0;
						overflow: hidden;
						position: relative;
						}
					.jcarousel-list {
						z-index: 1;
						overflow: hidden;
						position: relative;
						top: 0;
						left: 0;
						width: 882px;
						height: 38px;
						margin: 0;
						padding: 0;
						}
					.jcarousel-list li,
					.jcarousel-item {
						float: left;
						list-style: none;
						/* We set the width/height explicitly. No width/height causes infinite loops. */
						width: 50px;
						height: 38px;
						margin: 0;
						padding: 0;
						overflow: hidden;
						}
					.jcarousel-next { z-index: 3; display: none; }
					.jcarousel-prev { z-index: 3; display: none; }
					.jcarousel-skin-tango .jcarousel-container-horizontal { width: 884px; padding: 8px 30px 7px; }
					.jcarousel-skin-tango .jcarousel-container-vertical {
						width: 850px;
						height: 38px;
						padding: 0;
						}
					.jcarousel-skin-tango .jcarousel-clip-horizontal { width:  882px; height: 38px; margin: 0; padding: 0; overflow: hidden; }
					.jcarousel-skin-tango .jcarousel-clip-vertical { width:  850px; height: 38px; }
					.jcarousel-skin-tango .jcarousel-item { width: 50px; height: 38px; margin: 0; padding: 0; overflow: hidden; }
					.jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: 2px; padding: 0; overflow: hidden; } 
					.jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: 1px; }
					.jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; }
					
					/**
					 *  Horizontal Buttons
					 */
					.jcarousel-skin-tango .jcarousel-next-horizontal {
						position: absolute;
						top: 0;
						right: 0;
						width: 23px;
						height: 49px;
						cursor: pointer;
						background-image: url(../webimage/bg.jpg);
						background-repeat: no-repeat;
						background-position: -961px -538px;
						}
					.jcarousel-skin-tango .jcarousel-next-horizontal:hover { background-position: -961px -538px; }
					.jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position: -961px -538px; } 
					.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
					.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
					.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -961px -538px; }
					.jcarousel-skin-tango .jcarousel-prev-horizontal {
						position: absolute;
						top: 0;
						left: 0;
						width: 23px;
						height: 49px;
						cursor: pointer;
						background-image: url(../webimage/bg.jpg);
						background-repeat: no-repeat;
						background-position: -40px -538px;
						}
					.jcarousel-skin-tango .jcarousel-prev-horizontal:hover { background-position: -40px -538px; }
					.jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position: -40px -538px; } 
					.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
					.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
					.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -40px -538px; }
					
						
				/* -- extra[news, faqs, contact details] */
				#extra {
					height: 180px;
					padding: 0 40px;
					background: url(../webimage/bg.jpg) 0 -600px no-repeat;
					}
					
					div.col {
						float: left;
						width: 270px;
						margin: 0 20px 0 0;
						padding: 25px 15px 0;
						}
						
					/* news / faqs */
					div.news { position: relative; }
					div.news h3, div.faqs h3 {
						padding-left: 20px;
						font-size: 1.3em;
						font-style: italic;
						}
					div.faqs h3 { padding: 0; }
					div.news ul,
					div.faqs ul { float: left; padding: 5px 0 5px; }
					div.news li,
					div.faqs li {
						float: left;
						width: 258px;
						display: block;
						padding: 4px 6px;
						border-bottom: 1px solid #b6b5b5;
						font-size: 1.1em;
						}
					div.news li a,
					div.faqs li a {
						color: #135200;
						font-weight: bold;
						text-decoration: none;
						}
					div.news li span.news_title { float: left; }
					div.news li span.news_date { float: right; }
					div.news p#rss a {
						position: absolute;
						top: 28px;
						left: 15px;
						}
						
					/* contact */
					div.contact {
						margin: 0;
						font-size: 1.1em;
						font-style: italic;
						}
					div.contact h3 {
						margin: 0 0 5px;
						padding: 15px 0 1px;
						font-size: 1.3em;
						border-bottom: 1px solid #b0afaf;
						}
					div.contact span { font-size: 1.6em; font-weight: bold; font: bold 1.6em; }
					div.contact a { font-size: 1.2em; font-weight: bold; }

				/* -- footer[copyright, developed] */
				#footer {
					height: 56px;
					padding: 0 55px;
					background: url(../webimage/bg.jpg) 0 -780px no-repeat;
					color: #fff;
					font-size: 1.1em;
					}
				#footer a {
					color: #fff;
					}
					
					/* developed */
					p#developed {
						float: right;
						padding: 22px 0 0;
						}
						
					/* copyright */
					p#copyright {
						float: left;
						padding: 22px 0 0;
						}
					
					/** thickbox */
					#TB_overlay {
					  position: fixed;
					  z-index:100;
					  top: 0px;
					  left: 0px;
					  height:100%;
					  width:100%;
						}
					.TB_overlayMacFFBGHack {background: url(../webimage/macFFBgHack.png) repeat;}
					.TB_overlayBG {
					  background-color:#000;
					  filter:alpha(opacity=75);
					  -moz-opacity: 0.75;
					  opacity: 0.75;
						}
					#TB_window {
					  position: fixed;
					  background: #ffffff;
					  z-index: 102;
					  color:#000000;
					  display:none;
					  border: 4px solid #525252;
					  text-align:left;
					  top:50%;
					  left:50%;
						}
					#TB_window img#TB_Image { display:block; margin: 15px 15px 0; }
					#TB_caption {
					  height:25px;
					  padding:7px 30px 10px 25px;
					  float:left;
						}
					#TB_closeWindow {
					  height:25px;
					  padding:11px 25px 10px 0;
					  float:right;
						}
					#TB_closeAjaxWindow {
					  padding:7px 10px 5px 0;
					  margin-bottom:1px;
					  text-align:right;
					  float:right;
						}
					#TB_ajaxWindowTitle {
					  float:left;
					  padding:7px 0 5px 10px;
					  margin-bottom:1px;
						}
					#TB_title { background-color:#e8e8e8; height:27px; }
					#TB_ajaxContent {
					  clear:both;
					  padding:2px 15px 15px 15px;
					  overflow:auto;
					  text-align:left;
					  line-height:1.4em;
						}
					#TB_ajaxContent.TB_modal { padding:15px; }
					#TB_ajaxContent p { padding:5px 0px 5px 0px; }
					#TB_load{
					  position: fixed;
					  display:none;
					  height:13px;
					  width:208px;
					  z-index:103;
					  top: 50%;
					  left: 50%;
					  margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
						}
					#TB_HideSelect{
					  z-index:99;
					  position:fixed;
					  top: 0;
					  left: 0;
					  background-color:#fff;
					  border:none;
					  filter:alpha(opacity=0);
					  -moz-opacity: 0;
					  opacity: 0;
					  height:100%;
					  width:100%;
						}
					#TB_iframeContent{
					  clear:both;
					  border:none;
					  display:block;
					  margin: 15px;
						}
						
						
					/* pricing styles */
					table.pricing {
						width: 100%;
						margin: 0 0 15px;
						border-collapse: collapse;
						}
					table.pricing td {
						padding: 8px 5px;
						background: #666666;
						border-bottom: 1px solid #fff;
						color: #fff;
						}
					table.pricing td.header {
						background: #000;
						color: #fff;
						}
					table.pricing td.header h4 {
						margin: 0;
						font-size: 1.5em;
						}
					table.pricing tr.type td {
						background: #1c7800;
						color: #fff;
						font-size: 1.2em;
						font-weight: bold;
						}
					p.alert {
						color: #f00;
						font-size: 1.2em;
						}
					span.phone {
						font-size: 1.2em;
						font-weight: bold;
						}