@charset "utf-8";
/* The Shark CSS Document */

/* Global properties ======================================================== */
* { margin:0; padding:0;}     /* turns off extra spacing around paragraphs*/

html{
	height:100%;				/* Force vertical scrollbars in VTz + Opera to prevent 'jumping' */
	margin-bottom:1px;
	overflow-y:scroll;			/* this line is for IE */
}

body {	background-color: #fff;}


/* BANNER *******************************************/
.Banner {padding: 5px 5px 5px 5px; text-align: center;}
.Banner img {width: 325px; }

/* NAVIGATION *******************************************/
.NavStripe { 
	width: 100%; 
	padding-top: 5px;
	padding-bottom: 0px;
	margin-bottom: 10px;
	/*background-color: #ccc;*/
	background:url(../images/CloudTileBlue268.jpg) top repeat-x;
	text-align: center; vertical-align: top; position: relative}

.Menu {display: block; }
.Menu li {
	display: inline;
	float: left;
    padding: 5px 0 5px 0; 
}

/* LINKS AND BUTTONS ******************************/
a:link, a:visited, a:active {
	color: #FFCC00;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #ff9900;
	font-weight: bold;
	text-decoration: none;
}

a.buttonInline {
	border-radius: 5px;
	display:inline-block;
	font-size:17px;
	padding: 10px 20px 10px 20px!important;
    margin-top: 10px!important;
    margin-right: 20px!important;
	 text-decoration:none!important;
	 font-weight:300!important;
	 text-align:center!important;
	 transition: all 0.2s!important;
	margin-bottom: 5px;
}

a.buttonInlineOrange {
	background-color:#ff9900; 
	border: 1px solid #ff9900;
	color:#000000!important;
}
a.buttonInlineOrange:hover {
	background-color:#ffcc00!important;
	border: 1px solid #ffcc00;
	color: black!important;			
}
a.buttonInlineBlue {
    background-color:#0050EE; 
	border: 1px solid #0050EE;
	color: #ffcc00;
}
a.buttonInlineBlack {
    background-color:#000000; 
	border: 1px solid #000000;
	color: #ffcc00;
}
a.buttonInlineBlack:hover,
a.buttonInlineBlue:hover {
    background-color:#ff9900; 
	border: 1px solid #ff9900;
	color: #000000;
}
a.Link_Copyright {
	color: #4c4c4c;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
}
.Link_Copyright:hover {
	color:#FFCC00;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
}

a.Link_Nav {
	color: #FFCC00;		/* gold */
	font-family: 'euphorigenics', Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
}
a.Link_Nav:hover {
	color: #ff9900;		/* orange */
	font-family: 'euphorigenics', Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
}
a.Link_Blue {
	color: #0050EE;		/* blue */
}
a.Link_Blue:hover {
	color: #ff9900;		/* oranGe */
}

/* MOBILE OPTIMIZATION *************************************** */
img { max-width: 100%; height: auto; }
.MobileOpt img {height: auto;}

/* Font downloaded from FontsForWeb.com */
@font-face {
	font-family: 'euphorigenics';
	src: url('euphorigenics.eot');
	src: local('euphorigenics'), url('euphorigenics.woff') format('woff'), url('euphorigenics.ttf') format('truetype');
}



.Clouds {	background:url(../images/CloudTileBlue268.jpg) top repeat-x;}

.ColorGold 		{color: #ffcc00;}
.ColorOrange 	{color: #ff9900;};
.ColorBlue 		{color: #0050EE!important;}


h1{	
	text-align: left;
	vertical-align: top;
	color: #ff9900;		/* orange */
	font-family: 'euphorigenics', Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom:20px;
	margin-left: 0px;
	letter-spacing: 1px;
}

h2, .ConditionsHeading {	
	color: #ff9900;		/* orange */
	font-family: 'euphorigenics', Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	vertical-align: top;
	display: inline;
	letter-spacing: 1px;
}

h3{	
	text-align: center;
	vertical-align: top;
	color: #FFCC00;		/* gold */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	display: inline;
}
h4{	
	color: #ff9900;		/* orange */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	display: inline;
}

img {border:0px; padding:0px;}
img.framed {border:1px; padding:0px; border-color:#000;}

img.center {					/* This is to center an image for all browsers */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.BoxTop {
	background:url(images/menuactiveitem7.png) top repeat-x;
	font-family: Arial, Helvetica, sans-serif;
 	color: #2A2035;
	text-align: center;
	font-weight: bold;
}


.Fifty {width: 50%; height: auto;}
	
.Centered {margin: auto; }

.ClearL {clear: left;}

.ContentsCentered {text-align: center;}
.ContentsLeft {text-align: left;}
.ContentsRight {text-align: right;}

.Copyright{ color: #4c4c4c; font-family: Georgia, "Times New Roman", Times, serif; vertical-align:middle; 	font-weight:normal;}

.Euphoria {	font-family: 'euphorigenics', Georgia, "Times New Roman", Times, serif;}

.FloatR {float: right; padding-left: 10px;}
.FloatL {float: left; padding-right: 10px;}

.FrameBlue {
	background-color: #2c434d;
	padding: 6px;
	-webkit-box-shadow: 0 0 6px rgba(50, 50, 50, .75);
	-moz-box-shadow: 0 0 6px rgba(50, 50, 50, .75);
	box-shadow: 0 0 6px rgba(50, 50, 50, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.FrameGold {
	background-color: #ffcc00;
	padding: 6px;
	-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.FrameOrange {
	background-color: #ff9900;
	padding: 6px;
	-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.iframe560 {width: 560px; height: 345px;}
.iframe420 {width: 420px; height: 315px;}

.KeepTogether {display: inline-block;}

.MobileCenter {display: inline;}

/*
.OrderNowButton {
	display: block;
	background-color: #3A505B;
	width: 100%;
	text-align: center;
	padding: 20px;
	-webkit-box-shadow: 0 0 6px rgba(50, 50, 50, .75);
	-moz-box-shadow: 0 0 6px rgba(50, 50, 50, .75);
	box-shadow: 0 0 6px rgba(50, 50, 50, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.OrderNowButton a {
	font-family: 'euphorigenics', Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	vertical-align: middle; font-size: 250%; 

}
*/


/*
.PaypalFormWhite {background-color: white; color: black;}

.PaypalFormWhite td {padding: 10px;}

.RDproduct {
	width: 300px;
	min-height: 500px;
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
	vertical-align: top; 
}
*/


.PadTop5 { padding-top: 5px;}

.sidebar {	width: 180px;	float: right; 	margin-left: 30px;}
.sidebar a:link, .sidebar a:visited, .sidebar a:active 	{ 	color: #ffcc00;	font-weight: bold;	text-decoration: none;}
.sidebar a:hover 										{	color: #ff9900;	font-weight: bold;	text-decoration: none;}

.TextBody {	color: #4f4f4f; color: #222222;	font-family: Georgia, "Times New Roman", Times, serif;	text-align: left;}
.TextProduct {font-size: 12px; font-family: Arial, sans-serif; line-height: 14px;}

.VertBottom {vertical-align: bottom;}
.VertMid {vertical-align: middle;}
.VertTop {vertical-align: top;}

.Water {	background:url(images/Water3x35.jpg) top repeat-x; position: relative;}
.WaterDarkShadow {position: relative; left:-50px;} /* This is to offset the dark water from the fin */


/* CSS Hack for hiding the Facebook LIKE count */
div.fb-like span {   display:inline !important;  width:48px !important;  }
div.fb-like iframe {  width:48px !important;}
div.fb-like iframe.fb_iframe_widget_lift {  width:48px !important;}
div.fb_iframe_widget iframe { position: relative !important;}
div.fb_iframe_widget { top: -10px;}

/*#menu-icon {display: none; width: 40px; height: 40px; background: url(images/menu40.jpg) right;}*/
#Instructions ul {	list-style: none; margin: 0px;}
#Instructions li {	display: block;	}

.fadeshowWrap {float: left; margin-bottom: 5px; padding-right: 20px;}
	
	

	
/* FOR SPECIFIED VIEWPORT ============================================================================================= */ 

@media all and (min-width: 1000px) {				/* LARGE DEVICES */
	.MobileHide {display: inline-block;}
	.MobileShow {display: none;}
	.BodyBoxed {width: 1000px; margin: auto; display: block; text-align: center; position: relative}
	.BodyFull {padding-left: 20px; padding-right: 30px; margin: auto; }
	h1 { font-size: 40px;}
	h2 { font-size: 34px; line-height: 36px;}
	.ConditionsHeading { font-size: 28px; line-height: 32px;}	
	h3 { font-size: 16px;}
	h4 { font-size: 16px;}
	.BoxTop {font-size: 16px;}
	.Copyright		{font-size: 14px; line-height: 30px;}
	.Link_Copyright {font-size: 14px; line-height: 30px;}
	.Link_Nav {	font-size: 45px; padding-right: 40px;}	
	.OrderNow { font-size: 32px;}
	.sidebar { font-size: 16px;}
	.TextBody {	font-size: 16px; line-height: 22px; text-align: left;}
	.table1000 {   width: 1000px; margin: auto; }
}

@media (min-width: 769px) and (max-width: 999px) {	/* medium devices */ 
	.Banner img {width: 250px}
	.BodyBoxed {width: 100%; }
	.BodyFull {padding-left: 0px; padding-right: 0px; margin: auto; }
	.MobileHide {display: inline-block;}
	.MobileShow {display: none;}
	.fb-like{	margin-left: 10px; margin-right: 10px;}
	h1 { font-size: 40px;}
	h2, .ConditionsHeading { font-size: 34px; line-height: 36px;}
	h3 { font-size: 16px;}
	h4 { font-size: 16px;}
	.BoxTop {font-size: 16px;}
	.Copyright		{font-size: 14px; line-height: 30px;}
	.Link_Copyright {font-size: 14px; line-height: 30px;}
	.Link_Nav {	font-size: 35px; padding-right: 20px;}	
	.mainmenu {	margin-left: 20px;}
	.OrderNow { font-size: 32px;}
	.sidebar { font-size: 16px;}
	.TextBody {	font-size: 18px; line-height: 24px; margin-left: 10px; margin-right: 10px;text-align: left;}
	.table1000 {   width: 100%;   }

}

/* small devices */ 
@media all and (max-width: 768px) {
	.MobileHide {display: none;}
	.MobileShow {display: inline-block;}
	.Banner img {width: 200px; }
	.BodyBoxed {width: unset; }
	.BodyFull {padding-left: 0px; padding-right: 0px; margin: auto; }
	.fb-like {	margin-left: 20px;}
	h1 { font-size: 28px;}
	h2, .ConditionsHeading { font-size: 26px; line-height: 28px;}
	h3 { font-size: 14px;}
	h4 { font-size: 14px;}
	.BoxTop {font-size: 14px;}
	.Copyright		{font-size: 14px; line-height: 20px;}
	.Link_Copyright {font-size: 14px; line-height: 20px;}
	.Link_Nav {	font-size: 30px; padding-right: 15px;}	
	#Menu li {	margin-left: 15px;}
	.OrderNow { font-size: 30px;}
	.sidebar { font-size: 14px;}
	.TextBody {	font-size: 14px; line-height: 24px; margin-left: 10px; margin-right: 10px; text-align: left;}
	.table1000 {   width: 100%; }
	.iframe420 {width: 294px; height: 221px;}	
	.iframe560 {width: 294px; height: 182px;}

}

/* very small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 480px) {
	.WaterDarkShadow {left:0px;} 
	.Banner img {width: 200px; margin-bottom: 5px; }
	.Banner img.Brand {display: none; }
	.sidebar {float: unset; margin-top: 10px;}
	.fb-like {	margin-left: 20px;}
	.Link_Nav {	font-size: 30px; padding-right: 20px;}	
	.sidebar {	width: 100%; float: left; margin-left: 5px; margin-right: 5px; margin-bottom: 15px;}
	.ConditionsHeading  { font-size: 20px; line-height: 20px; margin-left: 15px;}
	.Menu li {float: none}/* so that it will center */
	#menu-icon { display: inline-block;}
	#Instructions li {	font-size: 14px; line-height: 18px; margin-left: 45px;}
	.OrderNow { font-size: 34px;}
	.OrderNowButton { width: 60%;}
	.fadeshowWrap {display: block; margin: auto; float: right;}
	.MobileMarginBottom {margin-bottom: 10px;}
	.RDproduct {	min-height: 300px;}
	.iframe420 {width: 250px; height: 188px;}	
	.iframe560 {width: 250px; height: 155px;}	
}
/* VERY small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 320px) {
	.Link_Nav {	font-size: 25px; padding-right: 10px;}		
}