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

body { font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0;}

.clear { clear:both;}

/* supersizing the background image */

#supersize { position:fixed;}

#supersize img { height:100%;
width:100%;
position:absolute;
z-index: 0;}


/* container */

#container { margin:0px auto;
height:768px;
width:100%;
.width:99%;
top:0;
z-index: 3;
position:absolute;}

#contentframe { overflow: hidden;
width:1024px;
margin:0 auto;
height: 100%;
text-align:left;
z-index: 3;}


	
#container img.calypso-logo { margin:20px 0 0 20px;}

/* columns */

#container .column { width:200px;
float:left;
margin:15px 0 0 0;
position:relative;
z-index:4;}

#container .column ul { margin:0;
padding:0;
list-style:none;
float:right;}

#container .column ul li { color:#fff;}

#container .column ul li a { color:#fff;
text-decoration:none;
display:block;
font-size:72%;}
#container .column ul li a:hover { color:#2b438c;}

#container .column ul li span { visibility:hidden;}

/* setting the background images */
#container .column ul li a.about { background:url(/assets/images/nav/about-us.png) no-repeat;
width:181px;
height:57px;}
#container .column ul li a.about:hover, #container .column ul li a.about.on { background:url(/assets/images/nav/about-us-on.png) no-repeat;}
#container .column ul li a.products { background:url(/assets/images/nav/products.png) no-repeat;
width:179px;
height:54px;
margin:5px 0 0 0;
_margin:-5px 0 -5px 0;}
#container .column ul li a.products:hover, #container .column ul li a.products.on { background:url(/assets/images/nav/products-on.png) no-repeat;}
#container .column ul li a.downloads { background:url(/assets/images/nav/downloads.png) no-repeat;
width:181px;
height:54px;
margin:0 0 8px 0;
_margin:-10px 0 -5px 0;
position:relative;}
#container .column ul li a.downloads:hover, #container .column ul li a.downloads.on { background:url(/assets/images/nav/downloads-on.png) no-repeat;}
#container .column ul li a.fun { background:url(/assets/images/nav/fungames.png) no-repeat;
width:179px;
height:53px;}
#container .column ul li a.fun:hover, #container .column ul li a.fun.on { background:url(/assets/images/nav/fungames-on.png) no-repeat;}
#container .column ul li a.surf { background:url(/assets/images/nav/surfzone.png) no-repeat;
width:187px;
height:54px;
margin:5px 0 5px -8px;
_margin:-10px 0 0 -8px;}
#container .column ul li a.surf:hover, #container .column ul li a.surf.on { background:url(/assets/images/nav/surfzone-on.png) no-repeat;}
#container .column ul li a.news { background:url(/assets/images/nav/news.png) no-repeat;
width:179px;
height:53px;
margin:5px 0 5px 0;
_margin:-5px 0 -10px 0;}
#container .column ul li a.news:hover, #container .column ul li a.news.on { background:url(/assets/images/nav/news-on.png) no-repeat;}
#container .column ul li a.contact { background:url(/assets/images/nav/contact-us.png) no-repeat;
width:179px;
height:53px;
_margin:2px 0 0 0;}
#container .column ul li a.contact:hover, #container .column ul li a.contact.on { background:url(/assets/images/nav/contact-us-on.png) no-repeat;}


#container .column ul li a.shop { background:url(/assets/images/nav/shop.png) no-repeat;
width:179px;
height:53px;
_margin:2px 0 0 0;}
#container .column ul li a.shop:hover, #container .column ul li a.shop.on { background:url(/assets/images/nav/shop-on.png) no-repeat;}

#container .column img.logos { margin:15px 0 0 20px;}


/* sub navigation for the downloads page */

#container .column li.down ul { padding:12px;
margin: -62px 0px 0px 0px;
background:url(/assets/images/sub-nav.png) no-repeat;
height:250px;}

#container .column li.prod ul { padding:12px;
margin: -58px 0px 0px 0px;
background:url(/assets/images/sub-nav-products.png) no-repeat;}

#container .column li ul li { float: left;
font-weight: normal;
padding:5px 10px 5px 10px;
margin:0;
width:145px;}

#container .column li.down ul li a { background:url(/assets/images/pdf-icon.jpg) no-repeat center left;
padding:8px 0 8px 40px;}

#container .column li.prod ul li a { padding:7px 15px;}

#container .column li ul {  position: absolute;
width: 192px;
height:143px;
z-index:20000;
left: -999em;}

#container .column li:hover ul { left: 180px;}
#container .column lii:hover ul, #container .column li.sfhover ul { left: 180px;}



/* right column - frame */

#container .frame { background:url(/assets/images/surfer-frame.png) no-repeat;
width:799px;
height:577px;
float:left;
margin:-35px 0 0 -60px;
position:relative;
z-index:0;}

#container .frame img.logo { float:left;
margin:370px 0 0 100px;}

#container .frame img.prod { float:right;
margin:255px -50px 0 0;}

/* internal pages need a different frame */

#container .frame.internal { background:url(/assets/images/internal-frame.png) no-repeat;
_background:url(/assets/images/internal-frame.gif) no-repeat;
margin:15px 0 0 -20px;}

/* content pages need a different frame */

#container .frame.contact { background:url(/assets/images/content-frame.png) no-repeat;
margin:-35px 0 0 -60px;}

#container .frame.contact img.prod { float:right;
margin:-150px -100px 0 0;}

/* game need a different frame */

#container .frame.game { background:url(/assets/images/game-frame.png) no-repeat;
margin:-35px 0 0 -60px;}

#container .frame.game a { width:799px;
height:577px;
display:block;}

#container .frame .cms-content { padding:20px;
width:660px;
height:385px;
margin:24px 0 0 28px;
overflow:auto;}

#container .frame.contact .cms-content { overflow:visible;
height:auto;
width:auto;}

/* conatct specific styles */
#container .frame.contact .cms-content p { font-size:100%;
font-weight:bold;
line-height:20px;
margin:0;
padding:0;}
#container .frame.contact .cms-content p.registered { margin:0;
padding:0 0 20px 0;
font-size:90%;
font-weight:normal}

#container .frame.contact .cms-content { margin:110px 0 0 100px;
width:600px;}

#container .frame .cms-content img.img-left { margin:0px 10px 5px 0;}
#container .frame .cms-content img.img-right { margin:0px 0 5px 10px;}

#container .frame .cms-content h1 { color:#0a519e;
margin:0 0 20px 0;
padding:0;
font-size:120%;
font-weight:bold;}

#container .frame .cms-content h2 { color:#0a519e;
margin:20px 0;
padding:0;
font-size:110%;
font-weight:bold;}

#container .frame .cms-content h3 { color:#000;
margin:20px 0;
padding:0;
font-size:80%;
font-weight:bold;}

#container .frame .cms-content p { color:#000;
font-size:72%;
line-height:16px;}

#container .frame .cms-content ul { color:#000;
font-size:72%;
line-height:16px;
margin:10px 0 0 15px;
padding:0;}

#container .frame .cms-content p a { color:#000;
text-decoration:none;}
#container .frame .cms-content p a:hover { text-decoration:underline;}

#container .frame .cms-content p.p1 { font-weight:bold;}

#container .frame .cms-content p.map-download { margin:5px 0 0 0;
padding:0;}

#container .frame .cms-content p.map-download a { color:#f05a28;
font-weight:bold;}

#container .frame .cms-content img.map { float:right;
margin:5px;}

/* product cat page */

#container .frame.internal .cms-content img.aqua { margin:0 40px 0 50px;}
#container .frame.internal .cms-content img.juice { margin:0 10px;}
#container .frame.internal .cms-content img.organic { margin:0 15px;}
#container .frame.internal .cms-content img.clear { margin:0 10px;}

#container .frame.internal .cms-content img.jubly { margin:30px 10px 0 5px;}
#container .frame.internal .cms-content img.pure { margin:30px 5px 0 5px;}
#container .frame.internal .cms-content img.fair { margin:30px 0 0 5px;}
#container .frame.internal .cms-content img.smoothie { margin:30px 5px 0 10px;}
#container .frame.internal .cms-content img.ice { margin:30px 0px 0 5px;}



/* product detail page */

#container .frame .cms-content img.main-prod-img { float:right;
padding:5px;}


/* individaul products within specific range */

#container .frame .cms-content .range-description:after { 	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	
}

#container .frame .cms-content .range-description { .height:200px;}

#container .frame .cms-content .product-listing { margin:10px;
width:300px;
_margin:0;
float:left;}

#container .frame .cms-content #new-prod h2 { font-size:72%;
color:#000;
margin:0;
padding:0;}

#container .frame .cms-content .product-listing h2.product-title { border-bottom:1px solid #0a519e; 
color:#0a519e;
font-weight:bold;
font-size:104%;}

/*#container .frame .cms-content .product-listing p { margin:0 0 5px 0;
padding:0;}

#container .frame .cms-content .product-listing p.green { font-weight:bold;
margin:0;
padding:0;
color:#006C64;}

#container .frame .cms-content .product-listing p.red { font-weight:bold;
margin:0;
padding:0;
color:#666666;}


#container .frame .cms-content .product-listing .imagewrap-water { 
text-align:center;
clear:both;
padding:5px 5px 40px 5px;
float:center;
margin-left:auto;
margin-right:auto;
width:100%;
margin-bottom:15px;
border-bottom:1px dotted #3aa1c8;}

#container .frame .cms-content .product-listing .imagewrap-calypso { 
text-align:center;
clear:both;
padding:5px 5px 40px 5px;
float:center;
margin-left:auto;
margin-right:auto;
width:100%;
margin-bottom:15px;
border-bottom:1px dotted #513b7f;}

#container .frame .cms-content .product-listing .imagewrap-other { 
text-align:center;
clear:both;
padding:5px 5px 40px 5px;
float:center;
margin-left:auto;
margin-right:auto;
width:100%;
margin-bottom:15px;
border-bottom:1px dotted #16a25d;}*/

#container .frame .cms-content .product-listing table { padding:0;
font-size:72%;
background-color:#FFFFFF;
border-top:2px solid #666666;
margin:20px 0 10px;
width:100%;}
#container .frame .cms-content .product-listing table p { font-size:100%;
margin:0;
padding:0;}

/* new product layout */

#container .frame .cms-content #new-prod-img { width:150px;
/*height:200px;*/
overflow:hidden;
float:left;
margin:0 10px 0 0;}

#container .frame .cms-content #new-prod { float:right;
width:140px;}

/* paging */

a.pageslink { text-decoration: none;
text-align: center;
padding:2px 5px;
margin-left: 3px;
font-weight: normal;}

/* news page */

.article { border-bottom:1px dashed #d0d7db;
padding:0 0 10px 0;}

.article img { float:right;
margin:5px;}

ul.news-links { list-style:none;
margin:0;
padding:0;}
ul.news-links li { background:url(/assets/images/bullet.png) no-repeat center left;
padding:0 0 0 25px;
margin:5px 0;}
ul.news-links li a { color:#000;
text-decoration:none;}
ul.news-links li a:hover { text-decoration:underline;}




/* product listing pages - now going to change these to be cms driven */


.product { width:200px;
text-align:center;
float:left;
height:210px;
margin:0 10px 10px 0px;}

.product .prod-image { height:170px;
width:200px;
overflow:hidden;}

.product .prod-image .img { width:200px;
overflow:hidden;
height:170px;
display:table-cell;

vertical-align:bottom;
line-height:170px;
}

.product .prod-image .img img { display:inline-block;
vertical-align:bottom;}


#container .frame .cms-content .product h2 { font-size:80%;
margin:5px 0;
padding:0;}

#container .frame .cms-content .product h2 a { text-decoration:none;
color:#0a519e;}


#container #middle-content #cms table {
background-color:#FFFFFF;
border-top:2px solid #666666;
font-size:70%;
margin:20px 0 10px;
width:100%;}

#container #middle-content #cms table tr, td {
border-bottom:1px dotted #CCCCCC;
padding:2px 12px;}

#container #middle-content #cms table p {
font-size:100%;
margin:0;
padding:0;
line-height:0;}


/* homepage frame */

#container .pic-frame { float:left;}

#container .pic-frame img { position:absolute;}

#container .pic-frame .picture-frame { background:url(/assets/images/frame.png) no-repeat;
width:799px;
height:577px;
position:relative;
margin:-40px 0 0 -50px;
z-index:3;}