﻿/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
    background-color: black;
    background-image: url('images/diveflag.gif');
    background-repeat: no-repeat;
    background-size: cover 300PX;
    background-attachment: scroll;
    background-origin: border-box;
    background-position: left 250px;
    font-size: 75%;
    font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

a:link
{
    color: #034af3;
    text-decoration: underline;
}
a:visited
{
    color: #505abc;
}
a:hover
{
    color: #1d60ff;
    text-decoration: none;
}
a:active
{
    color: #12eb87;
}

p, ul
{
    margin-bottom: 20px;
    line-height: 1.6em;
}

hr {
	background-color: #14285f;
	border: 1px #14285f solid;
	border-bottom: 1px #254BAF solid;
	border-top: 1px #14285f solid
}

img {
	
	vertical-align:middle;
	padding: 1em;
}
img.left
{
	text-align: left;
	float: left;
}
img.right
{
	text-align: right;
	float: right;
}
img.middle
{
	text-align: center;
}
img.logo
{
	max-height: 5em;
	width: 5em;
}

a.logo
{
	font-size: 1.2em;
	font-weight: bold
}


/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
    font-size: 2.2em;
	font-family: 'Crimson Text', Verdana, Tahoma, Arial, serif;
    color: #14285f;
	text-shadow: 1px 1px 4px #000;
}

h1
{
    font-size: 2.8em;
    padding-bottom: 0;
    margin-bottom: 0;
}
h2
{
    padding: 0 0 10px 0;
    color: #6D0019;
}
h3
{
    font-size: 1.8em;
    color: #CFB53B;
}
h4
{
    font-size: 1.5em;
    color: #008B8B;
	text-shadow: 0px 0px 1px #222;
}
h5, h6
{
    font-size: 1.3em;
	text-shadow: 1px 1px 2px #000;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
#background
{
	background: rgb(0,25,102); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(0,25,102,1) 0%, rgba(0,12,51,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,25,102,1)), color-stop(100%,rgba(0,12,51,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,25,102,1) 0%,rgba(0,12,51,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,25,102,1) 0%,rgba(0,12,51,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(0,25,102,1) 0%,rgba(0,12,51,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001966', endColorstr='#000c33',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(0,25,102,1) 0%,rgba(0,12,51,1) 100%); /* W3C */    
    
    -webkit-box-shadow: inset 0px -5px 15px 2px #000000;
	-moz-box-shadow: inset 0px -5px 15px 2px #000000;
	box-shadow: inset 0px -5px 15px 2px #000000; 
    
    -moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px; 
    
    width: 70%;
    min-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

.page
{
    background-image: url('images/underwater_background.jpg');
    background-attachment: scroll;
    background-position: center top;
    background-repeat:no-repeat;
    background-size: contain;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

#header
{
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
    clear: left;
    /*height: 200px;*/
}

#header h1
{
    padding: .2em 1em;
	font-family: 'Yellowtail', 'Calligraffitti',"Times New Roman", Times, serif;
    font-weight: bold;
    margin: 0;
    color: #6D0019;
    border: none;
    font-size: 3em;
}

#header h2
{
    padding: .25em 1em;;
    margin: 0;
    text-align:right;
    bottom: 2em;
}

#HeadTitle
{
	clear: right;
}

#main
{
	color: #14285f;
	padding: 30px 30px 15px 30px;
	/*background-color: #c8d7eb;*/
	margin-bottom: 30px;
	min-height: 800px;
	_height: 1px; /* only IE6 applies CSS properties starting with an underscore */;
	
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-topright: 2px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-radius: 2px 2px 15px 15px;
	border-radius: 2px 2px 15px 15px;	
	
	background: rgb(200,215,235); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(200,215,235,1) 0%, rgba(140,175,216,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(200,215,235,1)), color-stop(100%,rgba(140,175,216,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(200,215,235,1) 0%,rgba(140,175,216,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(200,215,235,1) 0%,rgba(140,175,216,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(200,215,235,1) 0%,rgba(140,175,216,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8d7eb', endColorstr='#8cafd8',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(200,215,235,1) 0%,rgba(140,175,216,1) 100%); /* W3C */
	
	-webkit-box-shadow: inset 0px -5px 10px 2px #14285f;
	-moz-box-shadow: inset 0px -5px 10px 2px #14285f;
	box-shadow: inset 0px -5px 10px 2px #14285f;
	
}

#footer
{
    color: #999;
    padding: 5em 0 0;
    text-align: center;
    line-height: normal;
    margin: 0;
    font-size: .9em;
}
#footer li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}
#footer a
{
	text-decoration: none;
	float: right;
	font: 12px Geneva, Arial, Helvetica, sans-serif;
	color: #99ccff;
	line-height: 12px;
	padding: 1px 5px 1px 5px;
	margin: 0;
	border-left: 1px outset #99ccff;
}
#footer li:last-child a
{
	border: none;
}
#footer a:visited {
}

#footer a:hover {
	color: #008B8B;
	text-decoration: none;
	}

#footer address
{
	text-align: right;
	clear:right;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    border-bottom: 0px #5C87B2 solid;
    padding: 0 0 6px;
    position: relative;
    margin: 0;
    text-align: center;
}

ul#menu li
{
    display: inline;
    list-style: none;
    margin: 0 .75em;
}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    padding: 20px 20px;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    /*background-color: #e8eef4;*/
	color: #14285f;
    
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;	
	
	background: rgb(210,223,237); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(210,223,237,1) 0%, rgba(200,215,235,1) 26%, rgba(190,208,234,1) 51%, rgba(166,192,227,1) 51%, rgba(175,199,232,1) 62%, rgba(186,208,239,1) 75%, rgba(153,181,219,1) 88%, rgba(121,155,200,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,223,237,1)), color-stop(26%,rgba(200,215,235,1)), color-stop(51%,rgba(190,208,234,1)), color-stop(51%,rgba(166,192,227,1)), color-stop(62%,rgba(175,199,232,1)), color-stop(75%,rgba(186,208,239,1)), color-stop(88%,rgba(153,181,219,1)), color-stop(100%,rgba(121,155,200,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(210,223,237,1) 0%,rgba(200,215,235,1) 26%,rgba(190,208,234,1) 51%,rgba(166,192,227,1) 51%,rgba(175,199,232,1) 62%,rgba(186,208,239,1) 75%,rgba(153,181,219,1) 88%,rgba(121,155,200,1) 100%); /* W3C */
	
	background: rgb(200,215,235); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(224,235,249,1) 0%, rgba(204,217,234,1) 50%, rgba(169,188,211,1) 51%, rgba(145,165,193,1) 85%, rgba(107,128,153,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,235,249,1)), color-stop(50%,rgba(204,217,234,1)), color-stop(51%,rgba(169,188,211,1)), color-stop(85%,rgba(145,165,193,1)), color-stop(100%,rgba(107,128,153,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(224,235,249,1) 0%,rgba(204,217,234,1) 50%,rgba(169,188,211,1) 51%,rgba(145,165,193,1) 85%,rgba(107,128,153,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(224,235,249,1) 0%,rgba(204,217,234,1) 50%,rgba(169,188,211,1) 51%,rgba(145,165,193,1) 85%,rgba(107,128,153,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(224,235,249,1) 0%,rgba(204,217,234,1) 50%,rgba(169,188,211,1) 51%,rgba(145,165,193,1) 85%,rgba(107,128,153,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ebf9', endColorstr='#6b8099',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(224,235,249,1) 0%,rgba(204,217,234,1) 50%,rgba(169,188,211,1) 51%,rgba(145,165,193,1) 85%,rgba(107,128,153,1) 100%); /* W3C */	
}

ul#menu li a:hover
{
    /*background-color: #fff;*/
    text-decoration: none;
    
	background: rgb(206,219,233); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,219,233,1)), color-stop(17%,rgba(170,197,222,1)), color-stop(50%,rgba(97,153,199,1)), color-stop(51%,rgba(58,132,195,1)), color-stop(59%,rgba(65,154,214,1)), color-stop(71%,rgba(75,184,240,1)), color-stop(84%,rgba(58,139,194,1)), color-stop(100%,rgba(38,85,139,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C */

	background: rgb(252,229,126); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(252,229,126,1) 0%, rgba(207,181,59,1) 50%, rgba(178,153,51,1) 51%, rgba(153,131,44,1) 85%, rgba(76,66,22,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,229,126,1)), color-stop(50%,rgba(207,181,59,1)), color-stop(51%,rgba(178,153,51,1)), color-stop(85%,rgba(153,131,44,1)), color-stop(100%,rgba(76,66,22,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(252,229,126,1) 0%,rgba(207,181,59,1) 50%,rgba(178,153,51,1) 51%,rgba(153,131,44,1) 85%,rgba(76,66,22,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(252,229,126,1) 0%,rgba(207,181,59,1) 50%,rgba(178,153,51,1) 51%,rgba(153,131,44,1) 85%,rgba(76,66,22,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(252,229,126,1) 0%,rgba(207,181,59,1) 50%,rgba(178,153,51,1) 51%,rgba(153,131,44,1) 85%,rgba(76,66,22,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce57e', endColorstr='#4c4216',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(252,229,126,1) 0%,rgba(207,181,59,1) 50%,rgba(178,153,51,1) 51%,rgba(153,131,44,1) 85%,rgba(76,66,22,1) 100%); /* W3C */

	-webkit-box-shadow: 0px -5px 12px 0px #CFB53B;
	-moz-box-shadow: 0px -5px 12px 0px #CFB53B;
	box-shadow: 0px -5px 12px 0px #CFB53B; 

}

ul#menu li a:active
{
    /*background-color: #008B8B;*/
    color: #6D0019;
    text-decoration: none;
}

ul#menu li.selected a
{
    background-color: #fff;
    color: #c8d7eb;

	background: rgb(74,117,247); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(74,117,247,1) 0%, rgba(0,47,191,1) 50%, rgba(0,25,102,1) 51%, rgba(0,12,51,1) 85%, rgba(0,0,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(74,117,247,1)), color-stop(50%,rgba(0,47,191,1)), color-stop(51%,rgba(0,25,102,1)), color-stop(85%,rgba(0,12,51,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(74,117,247,1) 0%,rgba(0,47,191,1) 50%,rgba(0,25,102,1) 51%,rgba(0,12,51,1) 85%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(74,117,247,1) 0%,rgba(0,47,191,1) 50%,rgba(0,25,102,1) 51%,rgba(0,12,51,1) 85%,rgba(0,0,0,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(74,117,247,1) 0%,rgba(0,47,191,1) 50%,rgba(0,25,102,1) 51%,rgba(0,12,51,1) 85%,rgba(0,0,0,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a75f7', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(74,117,247,1) 0%,rgba(0,47,191,1) 50%,rgba(0,25,102,1) 51%,rgba(0,12,51,1) 85%,rgba(0,0,0,1) 100%); /* W3C */
}

#menu li a 
{
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset 
{
    border:1px solid #ddd;
    padding:0 1.4em 1.4em 1.4em;
    margin:0 0 1.5em 0;
}

legend 
{
    font-size:1.2em;
    font-weight: bold;
}

textarea 
{
    min-height: 75px;
}

input[type=text] 
{
    width: 200px;
    border: 1px solid #CCC;
}

input[type=password] 
{
    width: 200px;
    border: 1px solid #CCC;
}

/* TABLE
----------------------------------------------------------*/

table 
{
  border: solid 1px #e8eef4;
  border-collapse: collapse;
}

table td 
{
  padding: 5px;   
  border: solid 1px #e8eef4;
}

table th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #e8eef4; 
  border: solid 1px #e8eef4;   
}

table#travel_list {
	border: none;
	font-weight:bold;
}
table#travel_list td 
{
  border: none;
}

table#travel_list li, .contactmain li {
	list-style: none;
}

/* MISC  
----------------------------------------------------------*/
.clear
{
    clear: both;
}

.error
{
    color:Red;
}

#menucontainer
{
    /*margin-top:125px;*/
}

#JimiCV dd
{
	font-weight: bold;
}

div#title
{
    display:block;
    float:left;
    text-align:left;
}

.introduction li
{
	list-style: none;
	padding-bottom: 1em;
}

.galleryContainer
{
	text-align:center;
	padding: 1em;
	
	background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%); /* W3C */
	
	-webkit-box-shadow: 0px 1px 10px 2px #14285f;
	-moz-box-shadow: 0px 1px 10px 2px #14285f;
	box-shadow: 0px 1px 10px 2px #14285f;
	
}
#logindisplay
{
    font-size:1.1em;
    display:block;
    text-align:right;
    margin:10px;
    color:White;
}

#logindisplay a:link
{
    color: white;
    text-decoration: underline;
}

#logindisplay a:visited
{
    color: white;
    text-decoration: underline;
}

#logindisplay a:hover
{
    color: white;
    text-decoration: none;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label
{
    margin: 1em 0 0 0;
}

.display-field,
.editor-field
{
    margin:0.5em 0 0 0;
}

.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}
