@charset "utf-8";

/* ------------------------------------------------
Website Design & Maintenance by: JPG Design
http://www.jpgdesign.co.za
------------------------------------------------ */

/* ------------------------------------------------------------- Global Reset --------------------------------------------------------------- */

body { 
	margin:0; 
	padding:0; 
	background-image: url(../images/bg1.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-color: #1c2f74;
	height: 100%;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #333;
}

a{
	outline: none;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

html { 
	padding:0; 
	margin:0;
	height: 100%;
}

/* -------------------------------------------------------------- Universal ------------------------------------------------------------------ */

a { 
	text-decoration:none;
}

a:hover { 
	text-decoration:underline;
}

.clr {
	clear: both;
	margin: 0;
	padding: 0;
}

.spacer {
	height: 5px;
}

p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #333;
}

h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #3D4296;
	background: url(../images/h1_img.gif) left no-repeat;
	padding-left: 25px;
	margin: 0;
}

img {
	border: 0;
}

.bg {
	width: 100%;
	border-bottom: #CCC 1px solid;
}

/* ----------------------------------------------------------- Quote Styling ----------------------------------------------------------------- */

#blockquote_wrapper { 
	width: 650px;
	text-align:left;  
	background-color: #FFFFFF;
}


.blockquote p {
	padding: 0px 15px 0px 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #666;
	font-size: 16px;
	line-height: 24px;	
	float: left;
	background: url(../images/quote_down.png) bottom right no-repeat;
}

.blockquote {
	padding: 20px;
	font-size: 14px;	
	background: url(../images/quote_up.png) top left no-repeat;
}

.cite {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	margin-top: 10px;
	color: #CCC;
	float: right;	
}


/* ------------------------------------------------------------- Structure ------------------------------------------------------------------- */

#outter_container {
	width: 920px;
	background-color: #FFF;
	margin: auto;
	height: auto;
	min-height: 100%;
	padding-bottom: 10px;
}

#body_container {
	width: 900px;
	margin: auto;
	background-color: #FFF;
}

#body {
}

#left_column {
	width: 280px;
	float:left;
	padding: 10px;
}

.members {
	width: 280px;
	clear: both;
	text-align: center;
}

#left_column_wide {
	width: 730px;
	float:left;
	padding: 10px;
}

#contact_column_left {
	width: 550px;
	float:left;
	padding: 10px;
}

#contact_column_right {
	width: 310px;
	float: left;
	padding: 10px;
}

#left_column_wide h1 .headerlink {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #3D4296;
}

.name {
	font-size: 12px;
	color: #3D4296;
	text-decoration: none;
	font-weight: bold;
	font-style: italic;
}

#right_column {
	width: 420px;
	float: left;
	padding: 10px;
}

#right_column_icons {
	width: 140px;
	float: left;
	text-align: right;
	padding: 10px 0 10px 10px;
}

#right_column h1 .headerlink {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #3D4296;
}

#full_column {
	width: 900px;
	float: left;
	padding: 10px 0 10px 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	background-color: #FFF;
	color: #333;
}

.icons_hor {
	padding: 0 40px;
}

.icons_ver {
	padding: 20px 0 20px 20px;
}

#full_column h1 .headerlink {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	color: #3D4296;
}

/* --------------------------------------------------------------------- Header ------------------------------------------------------------- */

#header {
	height: 109px;
}

.logo {
	width: 365px;
	height: 109px;
	float: left;
}

.banner {
	width: 515px;
	height: 88px;
	float: left;
	padding: 10px;
}

.quote {
	margin: 15px 25px 0 25px;
	float: right;
	text-align: center;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	color: #999;
}

.quote span {
	display:block;
	float: right;
	text-align: right;
	margin-right: 50px;
	font-size: 12px;
	font-style: italic;
	color: #CCC;
}

.framed {
	padding: 5px;
	background-color: #f8f8f8;
	border: 1px #e9e9e9 solid;
}

/* --------------------------------------------------------------------- Flash ------------------------------------------------------------- */

#flash {
	height: 261px;
}

.flash-left {
	width: 500px;
	height: 261px;
	float: left;
}

.flash-spacer {
	width:  10px;
	height: 261px;
	float: left;
}

.flash-right {
	width: 390px;
	height: 261px;
	float: left;
}

.right-one {
	height: 125px;
	margin-bottom: 11px;
}

.right-two {
	height: 125px;
}

/* --------------------------------------------------------------------- Menu ------------------------------------------------------------- */

#navigation {
	font-family: Verdana, Geneva, sans-serif;
}


.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
}

.menu ul{
	background:#3D4296;
	height:30px;
	list-style:none;
	margin:0;
	padding:0;
}

.menu li{
	float:left;
	padding:0px;
}

.menu li a{
	background:#3D4296 url("../images/menu/seperator.gif") bottom right no-repeat;
	color: #FFF;
	display:block;
	font-size: 12px;
	line-height:30px;
	margin:0px;
	padding:0px 20px;
	text-align:center;
	text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a{
	background: #0387B7 url("../images/menu/hover.gif") bottom center no-repeat;
	color:#FFFFFF;
	text-decoration:none;
}

.menu li ul{
	background:#3D4296;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:120px;
	z-index:200;
	/*top:1em;
	/*left:0;*/
}

.menu li:hover ul{
	display:block;
}

.menu li li {
	background:url('../images/menu/sub_sep.gif') bottom left no-repeat;
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:120px;
}

.menu li:hover li a{
	background:none;
}

.menu li ul a{
	display:block;
	height:30px;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a{
	background:#0387B7 url('../images/menu/hover_sub.gif') center left no-repeat;
	border:0px;
	color:#ffffff;
	text-decoration:none;
}

.menu p{
	clear:left;
}

.menu .active {
	background-color: #F00;
	color: #FFF;
	font-weight: bold;	
}

/* ---------------------------------------------------------------- Image Gallery --------------------------------------------------------- */

#gallery {
	width: 850px;
	padding: 10px;
	margin: auto;
}

.thumb {
	margin: 6px 45px 6px 6px;
	border: 1px solid #A0ACC0;
	height: auto;
	float: left;
	text-align: center;
} 

.thumb img{
	display: inline;
	margin: 5px;
	border: 1px solid #A0ACC0;
}

.thumb a:hover img {
	border: 1px solid black;
}

.photocattitle {
	text-align: center; 
	font-weight: bold;
}

.phototitle {
	text-align: center;
	font-weight: normal;
	width: 200px;
	margin: 0 3px 3px 3px;
}

/* ------------------------------------------------------------------- Footer ------------------------------------------------------------- */

.footer {
	height: 30px;
	background-color: #3D4296;
}

.footer p {
	font-family:Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
	padding: 7px;
	margin: 0 auto;
	text-align: center;
}

.footer a:link {
	font-size: 12px;
	color: #FFF;
}

.footer a:hover {
	color: #0CF;
	text-decoration: underline;
}

#footer-design {
	height: 15px;
	background-color: #CCC;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	color: #999;
	text-align: center;
	padding: 4px;
	clear: both;
	position: relative;
	z-index: 10;
	margin-top: -10px;
}

#footer-design p, a {
	margin: 0;
	padding: 0;
	color: #999;
	font-size: 10px;
}

/* ------------------------------------------------------------------- Ads --------------------------------------------------------------- */

#ads {
	text-align: center;
}

/* -------------------------------------------------------------- Package Booking Form -------------------------------------------------- */

#columnarForm fieldset {
	float: left;
	display: block;
	width: 230px;
	margin: 0 5px 3px 0;
	padding: 0 3px 3px 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#666;
}

#columnarForm fieldset.radio {
	width: 210px;
	margin: 10px 0 10px 0;
}

#columnarForm fieldset.radio input {
	clear: both;
	float: left;
	width: auto;
}

#columnarForm fieldset.radio label {
	font-weight: normal;
	margin: 5px 0 5px 0;
}

#columnarForm input {
	display: block;
	width: 200px;
	border: 1px solid #CCC;
	background: url(../images/label_bg.png) repeat-x #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12px;
	color: #454743;
}

#columnarForm label {
	display: block;
	margin-bottom: 1em;
	font-family: tahoma, helvetica, sans-serif;
	font-style: bold;
	font-size: 13px;
	color: #0e7ef6;
}

#columnarForm label.first {
	padding-top: 1em;
}

#columnarForm select {
	display: block;
	border: 1px solid #ffffff;
	background: url(../images/label_bg.png) repeat-x #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12px;
	color: #454743;
}

/* -------------------------------------------------------------- Contact Form ----------------------------------------------------------- */

#contactform { 
	margin:0; 
	padding:5px 0;
}

#contactform * {
	color:#7a7a7a;
}

#contactform ol { 
	margin:0;
	padding:0;
	list-style:none;
}

#contactform li {
	margin:0; 
	padding:0; 
	background:none; 
	border:none; 
	display:block;
}

#contactform li.buttons {
	margin:5px 0 5px 0;
}

#contactform label {
	float:left;
	margin:0;
	width:150px;
	padding:5px 0;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#1d2024;
	text-transform: capitalize;
}

#contactform label span { 
	font:normal 10px Arial, Helvetica, sans-serif;
}

#contactform input.text {
	width:380px;
	border:1px solid #e9e9e9;
	margin:5px 0;
	padding:5px 2px;
	height:15px;
	background:#f8f8f8;
	float:left;
}

#contactform textarea {
	width:380px;
	border:1px solid #e9e9e9;
	margin:10px 0;
	padding:2px;
	background:#f8f8f8;
	height:150px;
	float:left;
}

#contactform li.buttons input {
	padding:3px 0;
	margin:0 0 0 457px;
	border:0;
	color:#FFF;
}

p.response {
	text-align:center;
	color:#2c2c2c;
	font:bold 11px Arial, Helvetica, sans-serif;
	line-height:1.5em;
	width:auto;
}

.phone {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #666;
	background: url(../images/ico-phone.png) left no-repeat;
	padding-left: 25px;
	margin: 3px 0 0 0;
}

.fax {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #666;
	background: url(../images/ico-fax.png) left no-repeat;
	padding-left: 25px;
	margin: 3px 0 0 0;
}

.email {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #666;
	background: url(../images/ico-email.png) left no-repeat;
	padding-left: 25px;
	margin: 3px 0 0 0;
}

.website {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #666;
	background: url(../images/ico-website.png) left no-repeat;
	padding-left: 25px;
	margin: 3px 0 0 0;
}

.address {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #666;
	background: url(../images/ico-address.png) left top no-repeat;
	padding-left: 25px;
	margin: 3px 0 16px 0;
}

/* ---------------------------------------------------------------------- Table Styling ----------------------------------------------------- */

#gradient-style
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 10px 10px 10px 0;
	width: 720px;
	text-align: left;
	border-collapse: collapse;
}
#gradient-style th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe url(../images/table-images/gradhead.png) repeat-x;
	border-top: 2px solid #d3ddff;
	border-bottom: 1px solid #fff;
	color: #039;
}
#gradient-style td
{
	padding: 8px; 
	border: 1px solid #b9c9fe;
	color: #669;
	border-top: 1px solid #fff;
	background: #e8edff url(../images/table-images/gradback.png) repeat-x;
}
#gradient-style tfoot tr td
{
	background: #e8edff;
	font-size: 12px;
	color: #99c;
}
#gradient-style tbody tr:hover td
{
	background: #d0dafd url(../images/table-images/gradhover.png) repeat-x;
	color: #339;
}

/* ------------------------------------------------------------------------ Blue Buttons --------------------------------------------------------------- */

#contents a.bluebutton , a.bluebutton {
    background: transparent url('../images/blue_button_a.png') no-repeat scroll top right;
    color: #fff;
    display:inline-block;
    height: 34px;
	font-size:13px;
    margin-right: 6px;
	margin-top:0;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
	text-shadow: 1px 1px #464646;
}

#contents a.bluebutton span , a.bluebutton span {
	background: transparent url('../images/blue_button_span.png') no-repeat top left;
	display: block;
	line-height: 14px;
	padding: 10px 0 10px 18px;
}

#contents a.bluebutton:hover , a.bluebutton:hover {
	color:#fff;background-position: bottom right;
	cursor:pointer;
}

#contents a.bluebutton:hover span, a.bluebutton:hover span{
	color:#fff;background-position: bottom left;
	cursor:pointer;
}

/* Blue Icon Buttons  */

#contents a.bluebuttonicon , a.bluebuttonicon {
    background: transparent url('../images/blue_button_a.png') no-repeat scroll top right;
    color: #fff;
    display:inline-block;
    height: 34px;
	font-size:13px;
    margin-right: 6px;
	margin-top:0;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
	text-shadow: 1px 1px #464646;
}

#contents a.bluebuttonicon span , a.bluebuttonicon span {
	background: transparent url('../images/blue_button_span.png') no-repeat top left;
	display: block;
	line-height: 14px;
	padding: 10px 0 10px 18px;
}

#contents a.bluebuttonicon:hover , a.bluebuttonicon:hover {
	color:#fff;background-position: bottom right;
	cursor:pointer;
}

#contents a.bluebuttonicon:hover span, a.bluebuttonicon:hover span{
	color:#fff;background-position: bottom left;
	cursor:pointer;
}

.contactinfo {
	width:350px; 
	float:right; 
	padding: 0 0 50px 0;
}

.contactmap {
	color:#111; 
	font-size:11px; 
	background:#E8E8E8; 
	padding:10px;
}

.contactmap a {
	color:#111;
	font-size:11px;
}

#contactForm { 
	width:550px; 
	float:left; 
	margin:0;
	padding:0;
}

.screenReader {
	left: -9999px;
	position: absolute;
	top: -9999px;
}

.thanks {
	border: 1px dotted #FFECDA; 
	margin:50px 50px 50px 0;
	padding:10px;
	background:#FFFFE3;
	width:365px;
	float:left;
}

/*****Forms*****/

ol.forms {
	float: right;
	list-style: none;
	margin: 0; 
	width: 545px; 
	padding:25px 0 40px 0; 
	list-style-position:inside;
}

ol.forms li { 
	clear: both; 
	float: left; 
	position: relative;
}

ol.forms li.inputbar { 
	margin-bottom:20px;
}

ol.forms label {
	cursor: pointer;
	display: block;
	float: left;
	width: 100px;
}

ol.forms input, ol.forms textarea {
	font-family:'Lucida Grande','Lucida Sans Unicode','Lucida Sans','DejaVu Sans Condensed', Tahoma, Arial,sans-serif;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	border-top: 1px solid #EAEAEA;
	border-left: 1px solid #EAEAEA;
	color:#7d7d7d;
	font: inherit;
	padding: 5px;
	width: 414px;
	font-size: 13px;
	-moz-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border: 5px;
	-webkit-border: 5px;
}

ol.forms textarea {
	height: 200px;
}

ol.forms input:focus, ol.forms textarea:focus {
	border: 1px solid #D1D1D1;
}

.error { 
	color: #f00;
}

ol.forms li .error { 
	font-family:Verdana, Tahoma, Arial;
	font-size: 10px;  
	position:relative; 
	bottom:-22px;  
	left:-50px; 
}

ol.forms li.textarea .error {
	}

ol.forms li.screenReader {
	margin-bottom: 0;
}

ol.forms li.buttons button {
	background: #2c88be;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size:13px;
	font-weight:bold;
	overflow: hidden;
	padding: 6px 3px 6px 3px;
	width: 100px;
	-moz-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border: 10px;
	-webkit-border: 10px;
	text-shadow: 1px 1px #000;
	font-family:'Lucida Grande','Lucida Sans Unicode','Lucida Sans','DejaVu Sans Condensed', Tahoma, Arial,sans-serif;
}

ol.forms li.buttons button:hover {
	color: #fff; 
	background: #111;
}

ol.forms li.buttons button:active {
	color: #fff;
}

ol.forms li.buttons, ol.forms li.inline {
	width: 460px; 
}

ol.forms li.inline input {
	width: auto; 
}

ol.forms li.inline label {
	display: inline; 
	float: none;
}