@charset "UTF-8";



@font-face {
    font-family: 'Ampersand';
    src: url('fonts/Ampersand/ampersand.eot');
    src: url('fonts/Ampersand/ampersand.eot?#iefix') format('embedded-opentype'),
         url('fonts/Ampersand/ampersand.woff') format('woff'),
         url('fonts/Ampersand/ampersand.ttf') format('truetype'),
         url('fonts/Ampersand/ampersand.svg#Ampersand') format('svg');
    font-weight: normal;
    font-style: normal;
}


html {
	}


body {
	font: 100%/1.4 "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 0px auto;
	padding: 0;
	color: #333;
	background: #FFF;
	background: #FFF url(images/background/background_body.jpg) repeat;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; font-weight: normal; }

.mainContentHeading {
	text-shadow: #666;
	font-size: 120%;
	font-family: Ampersand, "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	border-bottom-width: 1px;
	background-image: url(images/logoSmall.png);
	background-repeat: no-repeat;
	background-position: left 30%;
	padding-left: 65px;
	padding-bottom: 0px;
	padding-top: 5px;
	border-bottom-style: dotted;
	border-bottom-color: #8E0019;
	color: #000;
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

a:link {
	color: #42413C;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}

a:visited {
	color: #6E6C64;
	text-decoration: underline;
}

a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}
/* ~~ This fixed width container surrounds all other blocks ~~ */

.container {
	width: 960px;
	background-color: #FFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-image: url(images/background/background_container.png);
	background-repeat: repeat;
	-webkit-box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .5);
	-moz-box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .5);
	box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .5);
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
 }


header { }

#sidebar1 {
	font-family: Geneva, Tahoma, sans-serif;
	font-size: 100%;
	color: #333;
	width: 330px;
	margin: 0px 5px 40px;
	padding: 0px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	line-height: 27px;
	display: inline-block;
	background: transparant;
	float: right;
	
}

.bubble {
	clear: both;
	margin: 0px auto;
	width: 280px;
	background: #fff url(images/background/quotationMarks.png) no-repeat 90% 92%;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	position: relative;
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	background: #B3001F;
	height: 37px;
	width: 310px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
	padding-top: 13px;
}



.rectangle h2 {
	font-size: 30px;
	color: #fff;

	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
	font-style: italic;

}

.triangle-l {
	border-color: transparent #B3001F transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; /* displayed under bubble */
}

.triangle-r {
	border-color: transparent transparent transparent #B3001F;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 280px;
	top: 35px;
	z-index: -1; /* displayed under bubble */
}

.info {
	padding: 30px 20px 15px;
	font-size: 90%;
}

.info h2 {
	font-size: 20px;
	font-style: italic;
	font-weight: normal;


}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #F60;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
	color: #B3001F;
}
.fltlft { float: left; }
.footerColumns {
	padding: 10px 15px;
	text-align: center;
}






#content {
	margin-top: 12px;
	margin-bottom: 0px;
	padding: 5px;
}

#mainContent {
	margin-right: 330px;
	margin-bottom: 25px;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 25px;
	padding-left: 15px;
}
#mainContent2 {
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
}

#mainContent_aside { width: 20%; padding: 10px; -moz-border-radius: 10px; border-radius: 10px; }

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { }


#menuBar {
	text-align: center;
	border-bottom: 1px dotted #3D6799;
	height: 40px;
	padding-bottom: 10px;
}

#nav { 
padding: 15px; 
float: left; 
width: 100%; 
}

#nav li { 
float: left; margin-right: 5px; list-style-type: none; }

#nav li a { 
padding-top: 5px; 
padding-right: 15px; 
padding-bottom: 5px; 
padding-left: 15px; 
text-decoration: none; 
color: #333; 

-webkit-border-radius: 7px; 
-moz-border-radius: 7px; 
border-radius: 7px; 

-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; 
-o-transition: all 0.3s ease-in-out; 
transition: all 0.3s ease-in-out; 
font-size: 85%; }


#nav li a:hover {
	text-decoration: none;
	color: #FFF;
	background-color: #416484;
}

/* ~~ The footer ~~ */
footer { }
#footer {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 1000px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	-webkit-box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .5);
	-moz-box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .5);
	box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .5);
	background-color: #9DBFEF;
	font-size: 80%;
	line-height: 20px;
	text-align: center;
	background-position: left top;
	padding: 10px;
}

#footer table {
	
background-image:url(images/background/backgroundTransparent.png);
background-repeat: repeat;
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 

}

#footer a { text-decoration: none; }

#footer a:hover { 
text-decoration: underline; }

header, section, footer, aside , nav , article    , figure{ display: block; }
aside { }

#topHeader { 
height: 320px; 
background-image: url(images/header_sail_snorkel_st_thomas.jpg) ; 
background-repeat: no-repeat; 
background-position: center center ;  
background-color: #7DBDFE;

-webkit-border-radius: 10px;
-moz-border-radius: 10px; 
border-radius: 10px; 


-webkit-box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .7);
-moz-box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .7);
box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .7); 

text-align: center; 
}

#socialNetwork {
	padding-bottom: 10px;
	padding-left: 15px;
	letter-spacing: 1px;
	font-size: 90%;
	width: 945px;
	background-image: url(images/animation/animationText_sail_St_Thomas.gif);
	background-repeat: no-repeat;
	background-position: right center;
	height: 20px;
	padding-top: 0px;
}

#top {
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 960px;
	padding: 0px 30px 10px;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	text-shadow: 2px 2px 2px rgba(0,0,0,.3);
	-webkit-box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .5);
-moz-box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .5);
box-shadow: 0px 0px 3px 3px rgba(3, 3, 3, .5); 

	background-image: url(images/background/background_container.png);
	background-repeat: repeat-x;
	background-position: center top;
	background-color: #FFF;
	margin-top: 0px;
 }


#topSection {  }
#topSection a { text-decoration: none; }
#topSection a:hover { text-decoration: underline; }

.firstFewLetters { 
color: #B3001F; 
font-weight: bold; 
font-size: 110%; 
}

.buttons {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 90%;
	padding: 7px;
	text-align: center;
}

.buttons a {
	font-weight: bold;
	text-transform: uppercase;
	color: #FFF;
	background-color: #B3001F;
	-webkit-border-radius: 17px;
	-moz-border-radius: 17px;
	border-radius: 17px;
	border: 3px solid #CCC;
	-webkit-box-shadow: 3px 3px 3px #999;
	-moz-box-shadow: 3px 3px 3px #999;
	box-shadow: 3px 3px 3px #999;
	padding: 10px;
	color: #CCC;
	text-decoration: none;
	background: #ed0427;
	/* Old browsers */
background: -moz-linear-gradient(top, #ed0427 0%, #8f0222 52%, #6d0019 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed0427), color-stop(52%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ed0427 0%,#8f0222 52%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ed0427 0%,#8f0222 52%,#6d0019 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ed0427 0%,#8f0222 52%,#6d0019 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ED0427', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ed0427 0%,#8f0222 52%,#6d0019 100%); /* W3C */
	text-align: center;


}
.buttons a:hover { 
color: #FFF; 
border: 3px solid #FFF; 
-webkit-box-shadow: 1px 1px 1px #999; -moz-box-shadow: 1px 1px 1px #999; 
box-shadow: 1px 1px 1px #999;
background: #a50316;
 }
#content_wrapper { display: table; margin-top: 40px; width: 100%; }

#content2 { display: table-row; }

.column {
	margin: 5px 11px 20px 2px;
	border: 2px solid #000;
	background-color: #FFF;
	padding: 5px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width: 30%;
	float: right;
}

#column1 { }

#column2 { }

#column3 { }

.column_heading {
	border: 1px solid #000;
	color: #FFF;
	background-color: #000;
	padding: 3px;
	text-align: center;
	-webkit-border-top-right-radius:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
	position: relative;
}

.column_heading img {
	position: absolute;
	top: -38px;
	left: -5px;
	z-index: 100;
}


.column_content {
	padding: 10px 5px 5px;
	position: relative;
	font-size: 90%;
	line-height: 20px;
}

.column_content a {
	color:#F60;
	text-decoration:none;
}

.column_content a:hover {
	color:#b3001f;
	text-decoration:underline;
}
	

.mainContent_content {
	width: 100%;
	color: #3B3B3B;
	line-height: 28px;
	margin: 0px;
}

.mainContent_subHeading {
	font-family: Ampersand, Verdana, Geneva, sans-serif;
	padding-top: 7px;
	margin: 3px 0px 20px;
	font-size: 120%;
	padding-bottom: 7px;
}

h2 { margin: 0px; }

h1 { margin-top: 0px; margin-right: 0px; margin-bottom: 13px; margin-left: 0px; }

.clear { display: block; clear: right; visibility: hidden; width: 100%; }
.clearLeft {
	display: block;
	clear: left;
	visibility: hidden;
	width: 100%;
}

.buttonColumns { padding: 24px 24px 30px; list-style-type: circle; font-size: 80%; text-align: center; }

.weatherColumn {
	padding: 7px 4px;
	text-align:center;
	font-size: 110%;
	letter-spacing: 2px;
}

#box_shadow {
			background-color: #fff; 
			border: 1px solid #eee;
			border-radius: 10px; 
			-moz-border-radius: 10px; 
			-webkit-border-radius: 10px; 
			-moz-box-shadow: 0 0 5px rgba(173, 173, 173, 0.55);
			-webkit-box-shadow: 0 0 5px rgba(173, 173, 173, 0.55);
}

#fadeshow1 { 
height: 100px; width: 300px; }
table { }
td { padding: 3px; }

.blockText { padding: 5px; background-color: transparent;  font-size: 90%; }
.socialNetwork_facebook { padding: 3px; }

#socialNetwork a img { margin-bottom: -5px; }

.textFrameBox {
	padding: 20px 10px 10px 30px;
	margin: 1px 1px 1px 250px;
	width: 590px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #3C6693;
}


.mainContent_content table tr td ul li {
	list-style-position: inside;
	list-style-type: circle;
}
.textFrameBox ul li {
	list-style-position: inside;
	list-style-type: circle;
}
TabbedPanelsContent ul li{
	list-style-position: inside;
	list-style-type: circle;
}
.TabbedPanelsContent.TabbedPanelsContentVisible ul li {
	list-style-position: inside;
	list-style-type: circle;
}

.photoFrame { padding: 5px; border: 1px dashed #AC4300; }

.photoFrameBox {
	padding: 0px 10px 10px 0px;
	margin: 0px 10px 10px 0px;
	float: left;
}
.photoFrameBox2 {
	padding: 0px 10px 10px 0px;
	margin: 10px 10px 10px 100px;
	float: left;
}
.photoFrameBox2 img { }
.photoFrameBox2 a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.quote {
	background-color: #93C8F9;
	margin: 20px;
	padding: 15px;
	color: #B3001F;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-image: url(images/background/background_body.jpg);
	background-repeat: repeat-x;
	background-position: center -200px;

}

.blockQuote {
	padding: 25px 25px 25px 35px;
	border: 1px dashed #B30021;
	margin: 25px;
}
#TabHeading {
	color: #406BA2;
	padding: 6px 8px 15px 2px;
	margin-bottom: 20px;
	font-size: 120%;
	margin-left: -10px;
	border-bottom: 4px solid #3C6AA3;
}
.tabHeading_firstLine {
	color: #406BA2;
	font-size: 130%;
	font-weight: bold;
}


.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.textFields {
	background-color: #D5F6F8;
	height: 30px;
	width: 400px;
	border-top-width: 2px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0070B5;
	border-right-color: #3C628E;
	border-bottom-color: #3C628E;
	border-left-color: #3C628E;
	padding: 4px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-khtml-border-radius: 7px;
	border-radius: 7px;
	font-size: 110%;
}
.textFieldsArea {
	background-color: #C9F7F9;
	width: 400px;
	border-top-width: 2px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0070B5;
	border-right-color: #0070B5;
	border-bottom-color: #0070B5;
	border-left-color: #0070B5;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-khtml-border-radius: 7px;
	border-radius: 7px;
	font-size: 110%;
	padding: 4px;


}
.highlight {
	color: #FFF;
	background-color: #000;
	margin: 3px;
	padding: 3px;
}
#metaText {
	color: #4270AB;
	font-size: 70%;
	margin: 0px;
	padding: 0px;
	text-shadow: 2px 2px 2px rgba(212,234,253,.3);
.comments {
	padding: 2px;
	margin-bottom: 5px;
	margin-top: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #416893;
	text-align: center;
	text-align: center;
	text-align: center;
	text-align: center;
	text-align: center;
	text-align: center;
}

.storeTextHeading {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom-width: 4px;
	border-bottom-style: dotted;
	border-bottom-color: #5084BD;
	height: 30px;
}
.storeText {
	padding-left: 25px;
}
.testbox {
	background-color: #F00;
	padding: 10px;
	border: 2px dotted #FF0;
}