/* CSS Document */

/************************************************************************
*   
*   G L O B A L  C S S
*   
*   Author:  Daniel Stondin
*   Date:    11 August 2010
*   Web:     http://example.com
*   Version: 1.0
* 
*************************************************************************/

/*-----------------------------------------------------------------------
Control Panel
------------------------------------------------------------------------*/

/*
	L. TAN 		::	FBEFD5
	D. Tan		::	BAB29A
	L. Blue		::	5884BD
	D. Blue		::	00457E
	ORANGE 1	::	F5822B
*/	

/* -------------------- Sizes */

/* basic font sizes */
p, ul, ol, dl, table, address, blockquote, fieldset, pre, form div {
  font-size: 1em;  /* 13px */
}

/* deal with likely (but certainly not all) inherited shrinkage */

ul p, ol p, table p, dl p, ul ul, ol ol, ul ol, ol ul, address p, blockquote p, form div div, form div p, fieldset div, table form div {
  font-size: 1em;
}

/* -------------------- Styles */

.bold, b {
  font-weight: bold;
}

.capitalize {
  text-transform: capitalize;
}

.uppercase {
  text-transform: uppercase;
}

.italic, em {
  font-style: italic;
}

.underline, u {
  text-decoration: underline;
}

strong
{
  font-weight: bold;
}

small { font-size: 0.85em; }
pre { font-family: monospace; }

sup {
  font-size: 0.5em;
  line-height: 0.4;
  padding-left: 1px;
}

/* -------------------- Links */
  
a:link,
button.link span {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover,
a:focus,
button.link:hover,
button.link:focus span {
  text-decoration: none;
}

a:active,
button.link:active span {
  text-decoration: none;
}

/* Remove dotted lines */
a, 
button, 
input[type="button"],
input[type="submit"]
{
  outline:none; /*	Mozilla	*/
}


/* -------------------- Headers (based on the body font-size 13px) */

h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	font-weight: normal;
}

h1 {
  font-size: 1.231em;   /* 16px */
  line-height: 1;       /* 16px */
	letter-spacing: 1px;
}

h2 {
	font-size: 1.083em;   /* 14px */
	line-height: 1;       /* 14px */
	letter-spacing: 1px;
}

h3 {
	font-size: 1.083em;
	line-height: 1;
}

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

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

body, html{
  font-family: Georgia, Times, serif;
  font-size: 13px;
  color:#111111;  
}
div#wrapper {
	width: 965px;
	margin: 10px auto 50px auto;
	background: url(/public/images/layout/_nautical_star_white.png) no-repeat 123px 300px;
}

	/************************************************************************
******************************************************************************************
	TABLES
******************************************************************************************
	************************************************************************/

.tableWrapper {
	background: url(/public/images/layout/_table_background.jpg) bottom left;
	float: left;
	margin-top: 25px;
}
table {
}
thead {
	height: 45px;
	vertical-align: middle;
	color: #FFFFFF;
	font-size: 1.5em;
	text-align: center;
	text-transform: uppercase;
	background-color: rgba(88, 132, 189, .3);
	background: url(/public/images/layout/_transparent_blue_80per.png) bottom left repeat;
}
thead td {
	padding: 30px inherit;
	border-right: 1px solid #FFFFFF;
}
tbody {
}
tbody td {
	padding: 5px 15px;
	color: #000000;
	border-right: 1px solid #FFFFFF;
	vertical-align:	top;
}
tbody td h3 {
	color: #00457E;
	margin: 10px 0 0 0;
	text-transform: none;
	font-size: 1.25em;
	font-weight: bold;
}

	/************************************************************************
******************************************************************************************
	LISTS
******************************************************************************************
	************************************************************************/

ul { list-style: none; }
ul.list2 {
	margin: 0 0 20px 15px;
}
ul.list2 li {
	font-size: 1.1em;
	padding: 5px 0;
	#padding: 0 0 10px 0;
	list-style: disc;
	list-style-image: url(/public/images/layout/_list_arrow.png);
}
ul.list3 {
	margin: 0 0 20px 20px;
}
ul.list3 li {
	padding: 5px 0 0 0;
	list-style: disc;
}

li.jscroll {
	cursor: pointer;
}

ul.bulleted {
	margin: 0 0 20px 20px;
}

ul.bulleted li {
	line-height: 1.5;
	padding: 5px 0 0 0;
	list-style: disc;
}

	/************************************************************************
******************************************************************************************
	SUB NAVIGATION
******************************************************************************************
	************************************************************************/

#subNav {
	height: 57px;
	width: 100%;
	display: block;
	float: left;
	background-color: rgba(239, 177, 17, .2);
	background-color: #FBEFD6;
}
#subNav ul.subNavigation{
	position: relative;
}
#subNav ul.subNavigation,
#subNav ul.subNavigation2 {
	margin: 10px 20px 0 20px;
	padding: 0;
	text-transform: uppercase;
	float: left;
	width: 800px;
}

#subNav ul.subNavigation li {
	float: left;
}
#subNav ul.subNavigation li a,
#subNav ul.subNavigation li a:visited,
#subNav ul.subNavigation li a:hover,
#subNav ul.subNavigation li a:active {
	color: #00457E;
	padding: 0 10px;
	border-right: 1px solid #00457E;
}
#subNav ul.subNavigation li a:hover,
#subNav ul.subNavigation li a:active,
#subNav ul.subNavigation li.current ul li a:hover {
	color: #F5822B;
}
#subNav ul.subNavigation li:last-child a {
	border-right: none;
}
#subNav ul.subNavigation li a.current {
	color: #F5822B;
}

#subNav ul.subNavigation li ul {
	position: absolute;
	bottom: -20px;
	left: 0;
	text-transform: none;
	font-weight: bold;
	display: none;
}

#subNav ul.subNavigation li.current a {
	color: #F5822B;
}

#subNav ul.subNavigation li.current ul {
	display: block;
}

#subNav ul.subNavigation li.current ul li a {
	color: #00457E;
}
#subNav ul.subNavigation li ul li a.current {
	color: #F5822B;
}


	/************************************************************************
******************************************************************************************
	BUTTONS
******************************************************************************************
	************************************************************************/

	/************************************************************************
******************************************************************************************
	FORMS
******************************************************************************************
	************************************************************************/

form#contact {
	width: 310px;
	float: right;
}
form#contact input {
	border: none;
	width: 100%;
	border-bottom: 2px dotted #5884BD;
	margin: 5px 0 1px 0;
	padding: 2px 0px;
	color: #00467F;
}
form#contact label {
	color: #5884BD;
	font-size: .8em;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	display: block;
}
form#contact textarea {
	width: 290px;
	min-height: 150px;
	padding: 10px;
	background-color: #F7FAFC;
	border: none;
	margin: 20px 0 10px;
	color: #00467F;
	
	/* CSS DROPSHADOWS */
	box-shadow: 5px 5px 5px #CCCCCC;
}
.blueButton {
	background: url(/public/images/layout/_button.png) bottom left no-repeat;
	display: inline-block;
	color: #FFFFFF;
	border: none;
	width: 71px;
	height: 23px;
	line-height: 23px;
	float: left;
	margin: 10px 0 0 0;
	text-transform: uppercase;
	cursor: pointer;
}

/*-----------------------------------------------------------------------
	COLUMNS & LAYOUT
------------------------------------------------------------------------*/

.colThirds {
	width: 310px;
	background: url(/public/images/layout/_sidebar_image.jpg) bottom no-repeat;
	background-color: #E4E7E9;
}
.colTwoThirds {
	width: 570px;
}
.colTwoThirds h1 {
	font-size: 2em;
	color: #518BBc;
	margin: 0 0 15px 0;
	line-height: 125%;
}
.colTwoThirds h2 {
	font-size: 1.077em;
	line-height: 1.3em;
	color: #5884BD;
	margin: 10px 0 0px 0;
}
.colTwoThirds h3 {
	font-size: 1em;
	color: #F5822B;
	margin: 10px 0 0 0;
}
.colTwoThirds p {
	font-size: 1em;
	line-height: 1.4em;
	padding: 5px 0 5px;
}
.colTwoThirds span {
	display: inline-block;
	color: #5884BD;
	text-transform:uppercase;
}
.colTwoThirds span.label {
	width: 75px;
}
.colTwoThirds p em {
	color: #5884BD;
	text-transform: uppercase;
	font-weight: bold;
	font-style: normal;
}
.colTwoThirds a {
	color: #00457E;
}
.colTwoThirds ul {
	margin: 0 0 20px 20px;
}
.colTwoThirds ul li {
	padding: 5px 0 0 0;
	list-style: disc;
}
.sidebar {
}
.sidebar h2 {
	padding: 15px 10px 20px 10px;
	vertical-align: middle;
	text-align: center;
	color: #FFFFFF;
	line-height:140%;
	background-color: rgba(88, 132, 189, .5);
	background: url(/public/images/layout/_triangle_border_bottom.jpg) bottom repeat-x #5884BD;
	font-size: 1.5em;
	overflow: hidden;
}
.sidebar h3 {
	padding: 15px 10px 15px 40px;
	vertical-align: middle;
	text-transform: none;
	font-size: 1.2em;
	font-weight: bold;
	background: url(/public/images/layout/_transparent_blue.png) bottom left repeat;
}
.sidebar h4 {
	color: #00457E;
	padding: 15px 10px 10px 30px;
	text-transform: none;
	font-size: 1.2em;
	font-weight: bold;
}
.sidebar h5 {
	font-size: 0.923em;
	padding: 10px 20px;
	text-transform: none;
	background: url(/public/images/layout/_transparent_blue.png) bottom left repeat;
}
.sidebar h5 a {
	color: #00457E;
	text-decoration: underline;
}
.sidebar h5 a:hover, 
.sidebar h5 a:active {
	color: #F5822B;
}
.sidebar p {
	font-size: 1em;
	line-height: 1.4em;
	padding: 0 0 10px 0;
}

.padded {
	padding: 23px;
}
.list {
	background-color: #DFE1E6;
}
.list h2 {
	padding: 15px 10px;
	vertical-align: middle;
	text-align: center;
	color: #FFFFFF;
	line-height:140%;
	background-color: #5884BD;
	font-size: 1.5em;
}
ul.numbered {
	list-style-position: inside;
	padding: 0 25px 25px 15px;
	background: url(/public/images/layout/_nautical_star_orange.png) center 38px no-repeat;
	overflow: visible;
}
ul.numbered li {
	overflow: visible;
	list-style: inherit;
	padding: 10px 0;
	color: #FFFFFF;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	#font-size: 0.9em;
}
ul.numbered li span {
	font-weight: normal;
	padding-left: 5px;
	color: #000000;
	font-family: Georgia, Times, serif;
}
.dot {
	float: left;
	width: 25px;
	height: 25px;
	margin: -10px -5px 0 0;
	background: url(/public/images/layout/_ol_dot.png) center no-repeat;
	padding: 10px 0 0 18px;
}

	/************************************************************************
******************************************************************************************
	HEADER
******************************************************************************************
	************************************************************************/

#header {
	position: relative;
	width: 100%;
	background-color: #FFFFFF;
	overflow: hidden;
	zoom: 1;
}
#header div#logo {
	position: absolute;
	top: 0;
	left: 0;
}
#header div#logo a {
	display: block;
}
div#header ul#primaryNavigation {
	float: right;
	height: 20px;
	text-transform: uppercase;
	font-size: 0.95em;
	letter-spacing: .11em;
	margin: 60px 6px 0 auto;
	overflow: hidden;
	zoom: 1;
}
#header ul#primaryNavigation li {
	float: left;
	border-right: 1px solid black;
}
#header ul#primaryNavigation li:last-child {
	border-right: none;
	padding-right: 0;
}
#header ul#primaryNavigation li a {
	padding: 5px 15px 0;
	color: #00457E;
}
#header ul#primaryNavigation li a.current,
#header ul#primaryNavigation li a.current:visited,
#header ul#primaryNavigation li a.current:hover,
#header ul#primaryNavigation li a.current:active {
	padding: 5px 15px 0;
	color: #F5822B;
}
#header ul#primaryNavigation li a:hover,
#header ul#primaryNavigation li a:active {
	color: #F5822B;
}

	/************************************************************************
******************************************************************************************
	PRIMARY CONTENT
******************************************************************************************
	************************************************************************/

#content {
	padding: 25px;
	overflow: hidden;
	zoom: 1;
}
#content.homePage {
	background: #4E8ABE url(/public/images/layout/nautical_star.png) 40px -60px no-repeat;
	height: auto;
}
#content.homePage h2 {
	font-size: 1.5em;
	line-height: 1.4em;
	text-align: center;
	padding: 5px;
}
#content.homePage p {
	font-size: 1.077em;
	line-height: 1.65;
	color: #FFFFFF;
	width: 568px;
	float: right;
	margin-bottom: 65px;
	padding: 0 50px 0 0;
}

	/************************************************************************
******************************************************************************************
	FEATURED
******************************************************************************************
	************************************************************************/

#featured {
	height: 245px;
	color: #00467f;
	background: url(/public/images/layout/_featured_map.jpg) no-repeat;
	text-align: center;
	position: relative;
}
#featured h1 {
	font-size: 4em;
	font-variant: small-caps;
	text-align: center;
	padding: 65px 25px 5px 25px;	
	/* CSS3 SPECIFIC EFFECTS */
	text-shadow: 2px 2px 2px #777777;
}
#featured h2 {
	font-size: 1.5em;
	line-height: 1.2em;
	text-transform: none;
}
#imageNav {
	position: relative;
	width: 100%;
	height: 93px;
	background: url(/public/images/layout/_image_bar.jpg) top left no-repeat;
}
#imageNav #homeImage {
	background: url(/public/images/layout/_featuredImage_home.png) top left no-repeat;
	height: 93px;
	left: 160px;
	position: absolute;
	width: 250px;
}
#imageNav #homeImage span {
	font-size: 2em;
	font-style: italic;
	line-height:1em;
	text-align: center;
	color:#00457E;
	margin:-25px 5px;
	width: 240px;
	position:absolute;
	text-align:center;
	top:50%;
}
	/************************************************************************
******************************************************************************************
	IMAGE BAR
******************************************************************************************
	************************************************************************/

#imageBar {
	height: 129px;
	background: url(/public/images/layout/_image_bar_2.jpg) bottom left no-repeat;
}
#imageBar #highlight {
	background:url(/public/images/layout/_featuredImageBg.png) no-repeat scroll top left transparent;
	float:left;
	height:122px;
	margin: -1px 0 0 378px;
	width:264px;
	display: table; 
	#position: relative; 
	overflow: hidden;
}
#imageBar #highlight div {
	#position: absolute;  
	#top: 50%;
	#left: 20px;
	display: table-cell; 
	vertical-align: middle;
}
#imageBar #highlight span {
	padding: 20px;
	display: block;
	color: #00457E;
	font-size: 1.2em;
	line-height: 1.4em;
	text-align: center;
	margin-left: -15px;
	#position: relative;  
	#top: -50%
}
#imageBar #featuredImage {
	margin-left: -12px;
	width: 165px;
	float: left;
}

	/************************************************************************
******************************************************************************************
	NOTIFICATIONS
******************************************************************************************
	************************************************************************/
.notification {
  position: relative;
  margin: 0 0 15px 0;
  padding: 0;
  border: 1px solid;
  background: url(/public/images/layout/_transparent_blue.png) repeat top left;
  font-size: 13px;
  width: 99.8%;
  border-color: #ffffff;
  color: #5884BD;
}
.notification .inner {
  background-position: 10px 11px;
  background-repeat: no-repeat;
  display: block;
  font-style: normal;
  padding: 10px 10px 10px 36px;
  line-height: 1.5em;
}
.notification p {
  text-shadow: 0 1px 0 white;
  padding: 0;
}
.notification .close {
  background: url(/public/images/admin/icons/cross_grey_small.png) no-repeat top left;
  display: block;
  width: 7px;
  height: 7px;
  color: #990000;
  font-size: 9px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.notification.cms {
  margin-bottom: 25px;
  border-color: #CCC;
  background: #e5e5e5 url(/public/images/admin/bg-content-box.gif) repeat-x scroll left top;
}
.notification.cms p {
  text-shadow: 0 1px 0 white;
  color: #E57D00;
}
.attention {
  background-image: url('/public/images/admin/icons/exclamation.png');
}
.information {
  background-image: url('/public/images/admin/icons/information.png');
}
.success {
  background-image: url('/public/images/admin/icons/tick_circle.png');
}
.error {
  background-image: url('/public/images/admin/icons/cross_circle.png');
}
/* Notification for form inputs */
.input-notification {
  background-position: left 2px;
  background-repeat: no-repeat;
  padding: 2px 0 2px 22px;
  background-color: transparent;
  margin: 0 0 0 5px;
}
/* Notification for login page */
#login-wrapper #login-content .notification {
  border: 0;
  background-color: #0090A8;
  color: #fff !important;
  margin-bottom: 20px;
}

	/************************************************************************
******************************************************************************************
	FOOTER
******************************************************************************************
	************************************************************************/

#footer {
	width: 100%;
	text-align: right;
	height: 50px;
	line-height: 50px;
	color: #00457E;
	background-color: #FFFFFF;
	text-transform: uppercase;
	font-size: .8em;
	letter-spacing: 1.1px;
}
#footer ul {
	float: left;
	text-align: center;
	padding: 0 0 0 10px;
}
#footer ul li {
	float: left;
}
#footer ul li a {
	padding: 3px 15px;
}
#footer ul li a, 
#footer ul li a:visited,
#footer ul li a:hover,
#footer ul li a:active {
	color: #00457E;
}
#footer ul li a:hover,
#footer ul li a:active {
	color: #F5822B;
}
#footer span {
	padding: 0 25px 0 0;
}

#footer span#branding {
 display: block;
 margin-top: -30px;
}

	/************************************************************************
******************************************************************************************
	POP-UP WINDOWS
******************************************************************************************
	************************************************************************/

#popUp {
	padding: 25px;
}
#popUp h1,
#popUp h2,
#popUp h3 {
	font-weight:normal;
	text-transform:uppercase;
}
#popUp h1 {
	color:#5884BD;
	font-size:2.4em;
	line-height:125%;
	margin:0 0 20px;
}
#popUp h2 {
	color:#5884BD;
	font-size:1.2em;
	line-height:1.3em;
	margin:15px 0;
}
#popUp h2 {
	font-size:1.083em;
	line-height:1;
}
#popUp p {
	line-height:1.5em;
	padding:5px 0 10px;
}

	/************************************************************************
******************************************************************************************
	VISUAL MARVEL
******************************************************************************************
	************************************************************************/

.cleaner {
	width: 100%;
	clear: both;
}
.clear{
  clear:both;
}
.left{
  float:left;
}
.right{
  float:right;
}
.none{
  display:none;
}
.bordered {
	background: url(/public/images/layout/_triangle_border.jpg) repeat-x;
	height: 7px;
}
.bordered.bottom {
	background-position: bottom;
}
.indented {
	margin: 12px 0 12px 35px;
}