@import url('reset.css');
@import url('clearfix.css');


	
body { background-image:url(../images/bg.jpg); background-position:top center; background-repeat:repeat; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#3b3b3b; font-size: 13px; line-height:19px; }
body a {text-decoration:none; color:#71b62c; }
body a:hover { text-decoration:underline; }


/* BODY TEXT STYLES */
p { font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#3b3b3b; font-size: 13px; line-height:19px; margin-bottom: 10px;}


h1 {position:absolute; top:21px;}
h2 {font-family:"Myriad Pro","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif; color:#FFF; font-size:46px; line-height:43px; text-shadow: #155b0c 2px 2px 1px; margin-bottom:14px;}
h3 {font-size:35px; line-height:43px; font-family:"Myriad Pro","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;}
h4 {font-size: 19px; line-height:23px; }
h5 {font-size:16px; line-height:23px; display:block; }
h5.hometag {color:#132308; float:right; width:320px; margin-bottom:19px; font-weight:100;}
h5.homesub {position:relative; display:block; }



div#container{ position:relative; width: 960px; margin: 0 auto; }



/* HEADER STYLES */
div#header { height:90px;}
body#index div#header { background-image:url(../images/white-dotted.gif); background-position:bottom; background-repeat:repeat-x; }


ul#navsprite {background-image:url(../images/nav-sprite.png); background-repeat:no-repeat; width: 486px; height: 43px; position:absolute; right:0; top:41px;}
ul#navsprite li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
ul#navsprite li, #navsprite a { height: 43px; display: block; }

li#panel1 {left: 0; width: 127px;}
li#panel2 {left: 128px; width: 187px;}
li#panel3 {left: 316px; width: 170px;}

li#panel1 a:hover { background: transparent url(../images/nav-sprite.png) 0 -43px no-repeat;}
li#panel2 a:hover { background: transparent url(../images/nav-sprite.png) -128px -43px no-repeat;}
li#panel3 a:hover { background: transparent url(../images/nav-sprite.png) -316px -43px no-repeat;}

li#panel1 a:active { background: transparent url(../images/nav-sprite.png) 0 -86px no-repeat;}
li#panel2 a:active { background: transparent url(../images/nav-sprite.png) -128px -86px no-repeat;}
li#panel3 a:active { background: transparent url(../images/nav-sprite.png) -316px -86px no-repeat;}

/*ACTIVE STATES */

body#index li#panel1 a { background: transparent url(../images/nav-sprite.png) 0 -86px no-repeat;}
body#howitworks li#panel2 a {background: transparent url(../images/nav-sprite.png) -128px -86px no-repeat;}
body#joinnow li#panel3 a { background: transparent url(../images/nav-sprite.png) -316px -86px no-repeat;}



p.login{position:absolute; right:15px; top:12px; display:block; font-size:12px;}
p.login a{color:#aefaa5;}


/* INDEX */

div#overlay{
/* must be initially hidden */ 
    display:none; 
    z-index:10000; background-color:#333; width:600px; min-height:338px; border:1px solid #666; position:relative;	
     
    /* CSS3 styling for latest browsers */ 
    -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000; } 
div#overlay .close { background-image:url(../images/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px; }

div#promoarea {height: 330px;}
a#videoimg {position:absolute; right:0;}
div#bodycontent {margin: 65px 0 20px 0;}
div#bodycontent div#promocontent {width: 430px; float:left; text-align:right;}

a#howbutton{ background-image:url(../images/howitworks-sprite.jpg); width:198px; height: 44px; display:block; margin:0; padding:0; float:right; clear:both; margin-bottom:5px;background-repeat:no-repeat;}
a#howbutton:hover { background: transparent url(../images/howitworks-sprite.jpg) 0 -44px no-repeat;}

a#joinbutton{background-image:url(../images/joinnow-sprite.jpg); width:238px; height: 44px; display:block; margin:0; padding:0; float:right; clear:both;background-repeat:no-repeat;}
a#joinbutton:hover { background: transparent url(../images/joinnow-sprite.jpg) 0 -44px no-repeat;}
div#joinreflect {background-image:url(../images/joinnow-reflection.png); height:22px; width: 237px; float:right; clear:both; background-repeat:no-repeat;}

/*Bottom Bar Content */
div#subcontentbar {background-image:url(../images/short-bar.jpg); background-repeat:no-repeat; width:900px; height:150px; padding: 18px 30px 15px 30px;}

ul#homefeatures {height:65px; position:relative; top:7px; background-image:url(../images/black-dotted.gif); background-position:top; background-repeat:repeat-x; width:900px; padding-top:22px; margin-bottom:7px;}
ul#homefeatures li {width:300px;}
ul#homefeatures li.stat, ul#homefeatures li.mobile {float:left;}
ul#homefeatures li.star {float:left;}
ul#homefeatures li img {float:left; clear:both;}
ul#homefeatures li.mobile img {position:relative; bottom:7px;}
ul#homefeatures li p{width:210px; display:block; float:left; position:relative; top:10px; margin-left:14px;}

a.moretextlink {float:right; display:block; font-size:12px;}

/* INSIDE PAGE STYLES */
div#bodytopper {background-image:url(../images/topper.jpg); background-repeat:no-repeat; width:960px; height:11px; margin-top:25px;}
body#howitworks div#bodycontent, body#joinnow div#bodycontent, body#confirm div#bodycontent, body#login div#bodycontent {background-image:url(../images/content-bgwhite.jpg); background-repeat:repeat-y; margin:0px; padding:30px; min-height:300px;}
div#bodybottomer {background-image:url(../images/bottomer.jpg); background-repeat:no-repeat; width:960px; height:11px; margin-bottom:0px;}




/* HOW IT WORKS STYLES */

p.btext {font-size:14px; line-height: 23px; color:#219115;}

div#workflowholder {background-image:url(../images/black-dotted.gif); background-position:top; background-repeat:repeat-x; margin: 20px 0 25px 0; padding: 20px 0 0 0; position:relative;}
div#workflowholder h4 {padding-bottom:20px;}

div.images { height:297px; width:901px; overflow:hidden; margin:auto 0; background-image:url(../images/tblank.jpg); background-repeat:no-repeat; clear:both;}

a.backward, a.forward { background-image:url(../images/prevnext-sprite.png); background-repeat:no-repeat; width:46px; height: 46px; text-indent:-99999px; display:block; cursor:pointer;}
a.forward {background-position:-46px 0; position:absolute; top:231px; right:37px;}
a.backward {position:absolute; top:231px; left:40px; z-index:1000;}
a.backward:hover {background-position:0 -46px;}
a.forward:hover {background-position:-46px -46px;}


div.tabs {margin:0;}
div.tabs a{background-image:url(../images/tab-sprites.png); background-repeat:no-repeat; height:44px; display:block; float:left; margin:0; padding:0; overflow:hidden;}

div.tabs a.t1{width:126px;}
div.tabs a.t2{background-position:-126px 0;width:136px;}
div.tabs a.t3{background-position:-262px 0;width:116px;}
div.tabs a.t4{background-position:-378px 0;width:116px;}
div.tabs a.t5{background-position:-494px 0;width:116px;}
div.tabs a.t6{background-position:-610px 0;width:116px;}
div.tabs a.t7{background-position:-800px 0;width:102px; margin-left:58px;}

div.tabs a.t1:hover{width:126px; background-position:0 -44px;}
div.tabs a.t2:hover{background-position:-126px -44px;width:136px;}
div.tabs a.t3:hover{background-position:-262px -44px;width:116px;}
div.tabs a.t4:hover{background-position:-378px -44px;width:116px;}
div.tabs a.t5:hover{background-position:-494px -44px;width:116px;}
div.tabs a.t6:hover{background-position:-610px -44px;width:116px;}
div.tabs a.t7:hover{background-position:-800px -44px;width:102px; margin-left:58px;}

div.tabs a.t1.current{width:126px; background-position:0 -88px;}
div.tabs a.t2.current{background-position:-126px -88px;width:136px;}
div.tabs a.t3.current{background-position:-262px -88px;width:116px;}
div.tabs a.t4.current{background-position:-378px -88px;width:116px;}
div.tabs a.t5.current{background-position:-494px -88px;width:116px;}
div.tabs a.t6.current{background-position:-610px -88px;width:116px;}
div.tabs a.t7.current{background-position:-800px -88px;width:102px; margin-left:58px;}


a.screensamples {display:block; float:right; text-align:right;}
a.screensamples:hover {text-decoration:none; color:#477d11;}

/* PHOTO CLASS OVERLAY STYLES */
.next, .prev { 
    /* absolute positioning relative to the overlay */ 
 	display:none;
    position:absolute; 
    top:40%; 
 
    /* upcoming CSS3 rounded border feature */ 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
	
} 
 
/* progress indicator (animated gif). should be initially hidden */ 
.progress { 
    position:absolute; 
    top:45%; 
    left:50%; 
    display:none; 
} 

/* the large image. we use a gray border around it */
#img {
	border:1px solid #666;
}

/* "next image" and "prev image" links */
.next, .prev {
	
	/* absolute positioning relative to the overlay */
	position:absolute;
	top:40%;	
	border:1px solid #666;	
	cursor:pointer;
	display:block;
	padding:10px 20px;
	color:#fff;
	font-size:11px;
	
	/* upcoming CSS3 features */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

.prev {
	left:0;
	border-left:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;
}

.next {
	right:0;
	border-right:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	-webkit-border-top-right-radius:0;	
}

.next:hover, .prev:hover {
	text-decoration:underline;
	background-color:#000;
}

/* when there is no next or previous link available this class is added */
.disabled {
	visibility:hidden;		
}

/* the "information box" */
.info {
	position:absolute;
	bottom:0;
	left:0;	
	padding:10px 15px;
	color:#fff;
	font-size:11px;
	border-top:1px solid #666;
}

.info strong {
	display:block;	
}

/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

/* everybody should know about RGBA colors. */
.next, .prev, .info {
	background:#333 !important;
	background:rgba(0, 0, 0, 0.9) url(../images/h80.png) repeat-x;		
}
/* the overlayed element */
.overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:100000;
	
	/* styling */
	background-color:#333;
	
	width:675px;	
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.overlay .close {
	background-image:url(../images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}



div#hiwpp {width:510px; padding: 10px 0 0 0;}
div#hiwpp h5{margin-bottom:10px;}
div#hiwpp p{margin-bottom:35px;}

div#lists {background-image:url(../images/black-dotted.gif); background-position:top; background-repeat:repeat-x;margin:20px 0 0 0; padding:25px 0 25px 0; width:900px;}
div#list1, div#list2 {width: 360px; position:relative; float:left;}
div#list1 ul, div#list2 ul {margin-left:20px;}
div#list1 li, div#list2 li {margin-top:20px; }
div#list1 img {float:left; margin-right:15px;}
div#list2 img {float:left; margin-right:18px;}
div#list1 p, div#list2 p{font-size:12px; line-height: 15px;}

div#list1 {}
li.l1 p {position:relative; left: 3px;}
li.l2 p {position:relative; left: 7px;}
li.l3 p {position:relative; left: 8px;}
li.l4 p {position:relative; left: 6px;}
div#list2 {margin-left:110px;}
li.r2 p {position:relative; left: 5px;}

div#hiwjoinbottom {width:960; background-image:url(../images/black-dotted.gif); background-position:top; background-repeat:repeat-x; text-align:right; padding: 20px 0 0 0;}



/* JOIN NOW PAGE STYLES */
body#joinnow p.btext {color:#d09417; font-size:15px;}

body#joinnow h4 {font-size:16px;}
div#contactform {float:right; margin-left:20px;}
div#contacttopper {background-image:url(../images/contact-topper.jpg); background-repeat:no-repeat; width:439px; height:11px;}
div#contactbottomer {background-image:url(../images/contact-bottomer.jpg); background-repeat:no-repeat; width:439px; height:11px;}
div#contactbox {width:379px; background-image:url(../images/contact-bg.jpg); background-repeat:repeat; padding: 5px 30px;}

p.nospam {font-size:11px; color:#73af6d; line-height:8px;}

/* NEW FORM */
form#oceanForm li.botinput {display:none;}
input.text {border: 2px solid #7fcd77; background-color:#fff; padding:5px;}
form#oceanForm input.text:focus{border: solid 2px #219115; }
ul.validate li{padding: 0 0 6px; font-size: 14px; }
li.botinput {display:block; display:none; }
li.nameinput {display:block;}
li.titleinput {display:block;  }
li.organizationinput {display:block;  }
li.employeesinput {display:block; margin-top:6px; }
li.emailinput {display:block; margin-top:11px;  }
li.telinput {display:block;  }
fieldset.submit { margin:20px 0 5px 0;}

form#oceanForm input.radio {margin-top:7px;}
form#oceanForm li {font-size:12px;}
form#oceanForm li.employeesinput label {font-size:13px;}

form#oceanForm li span{font-size:11px; color:#73af6d;}

div#alert1 {margin-bottom:10px;}

/* CONFIRM STYLES */
body#confirm div#bodycontent {min-height:400px;}
img.logoconfirm {margin:auto; display:block; position:relative; top:40px;}
body#confirm h4 {color:#d09417;}

/* LOGIN STYLES */
div#logincontent {position:relative; width:770px; margin:auto;}
div#loginform {float:left; margin-right:30px; margin-top:30px;}
div#logintopper {background-image:url(../images/login-topper.jpg); background-repeat:no-repeat; width:409px; height:10px;}
div#loginbottomer {background-image:url(../images/login-bottomer.jpg); background-repeat:no-repeat; width:409px; height:10px;}
div#loginbox {width:349px; background-image:url(../images/login-bg.jpg); background-repeat:repeat; padding: 5px 30px;}



div.links {margin:60px 0 0 20px; width:260px; float:left;}
body#login .links h4 {font-size:16px;}
p.logina a{font-size:13px; color:#d09417;}
p.loginb {font-size:13px;}

/* FOOTER STYLES */
div#footer { height:60px; padding-top:20px;}
body#index div#footer {background-image:url(../images/white-dotted.gif); background-position:top; background-repeat:repeat-x;}
a.footlogo {float:left;}
p.footertext {font-size:11px; color:#adf3a5; line-height:8px; text-align:right;}
p.footertext a{color:#6bf259;}

a.wd-tag {float:right;}