/* 

Mocal
Matthew James / OK CREATIVE / www.designbyok.com

*/



/* layout */

body {
margin: 0px;
padding: 0px;
width: 100%;
font: normal 75%/125% Verdana, arial, sans-serif;
background: #333333  url(../i/bg.gif) center top no-repeat;
color: #333;
}
    
#wrapper {
padding: 0 50px;
margin: 10px auto;
width: 960px;
text-align:left;
background: white url('../i/wrapper_bg.jpg') bottom left no-repeat;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}


#main_greybg, #main_whitebg, #main_lightgrey, #grey_panel {
float: left;
width: 600px;
padding: 10px;
margin: 0 0 20px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

#main_greybg {
color: #ddd;
background: #333 url(../i/main_bg.gif) center no-repeat;
}

#main_whitebg {
color: #333;
background: transparent;
}

#main_lightgrey {
color: #333;
background: #ddd;
}


#grey_panel {
color: #333;
background: #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

/*
#grey_panel {
background: #ddd;
width: 600px;
padding: 20px;
margin: 0 0 20px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
*/

#sidebar {
background: transparent;
float: right;
width: 300px;
margin: 0 0 250px 0;
padding: 0;
}

#banner {
margin: 0px 0px 0px 0px;
padding-top: 20px;
background: transparent  url(../i/banner_bg.gif) top right no-repeat;
width: 960px;
height: 120px;
}

#social_icons {
background: transparent;
width: 185px;
height: 40px;
float: right;
margin: 35px 0px 0px 0px;
}




/* main navigation */

#navcontainer {
margin-bottom: 30px;
padding: 0px;
text-align:center;
width: 960px;
height: 44px;
display:block;
background: #333 url(../i/mainnav_bg.jpg) 0px -4px repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}


#navcontainer ul {
padding: 0px;
margin: 0px auto;
color: #ddd;
width: 670px;
font: 24px "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: 200;
background: transparent;
}

#navcontainer ul li {display: inline;}

#navcontainer ul li a {
padding: 12px 20px 8px 20px;
background-color: transparent;
color: #ccc;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover {
background: #05bfdd url(../i/mainnav_bg_hover.jpg) 0px -4px repeat-x;
color: #fff;
}

#home a.home,
#tour a.tour, 
#pricing a.pricing, 
#faq a.faq, 
#get a.get {
background: #05bfdd url(../i/mainnav_bg_hover.jpg) 0px -4px repeat-x;
color: #fff;
}

a.home {
border-left: 1px solid #fff; /* adds left white border to home list item */
}




/* footer */
#footer {
clear: both;
background: transparent url('../i/footer_logo.png') top left no-repeat; 
margin: 0px;
padding: 10px 0 20px 0px;
font-size: 90%;
color: #666;
border-top: 1px solid #999;
width: 620px;
}

#footer p {
margin: 0px;
}

#footer a:link, #footer a:visited {
color: #666;
text-decoration: underline;
}

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




/* contact form */

.contact_panel {
color: #333;
font-weight: normal;
padding: 10px;
margin-top: 20px;
}

#contact-area {
width: 595px;
margin-top: 25px;
background: transparent;
padding: 0px 0px 0px 10px;
}

#contact-area input, #contact-area textarea, #contact-area select {
padding: 5px;
width: 315px;
margin: 0px 0px 10px 0px;
border: 1px solid #999;
background: #fff;
color: #333;
font-size: 100%;
font-family: Verdana, arial, sans-serif;
}

#contact-area textarea {
height: 90px;
}

#contact-area select {
height: 30px;
color: #333;
}

#contact-area textarea:focus, 
#contact-area input:focus {
border: 1px solid #05bfdd;
background: #fff;
}

#contact-area input.submit-button {
width: 120px;
background: #05bfdd url(../i/mainnav_bg_hover.jpg) 0px -12px repeat-x;
color: #fff;
border: 0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

label {
text-align: left;
margin-right: 15px;
width: 170px;
padding-top: 5px;
font-weight: normal;
}




/* global links */

a:link {
color: #333;
text-decoration: underline;
}
	
a:hover {
color: #05bfdd;
text-decoration: underline;
}

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




/* imgs */

.logo_img {
width: 310px;
height: 100px;
border: 0px;
float: left;
}

.icon_social_img {
width: 35px;
height: 35px;
margin: 0px;
border: 0px;
}

.app_store_img {
width: 150px;
height: 50px;
margin: 10px 0px;
border: 0px;
}

.video {
width: 600px;
height: 350px;
margin: 0px;
}

.tagline {
margin: 8px 0;
height: 20px;
width: 237px;
}



/* typography */


p.large_type {
font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
font-size: 30px;
line-height: 130%;
font-weight: 200; 
color: #333;
padding: 0px;
margin: 0px;
}

p.medium_type_white {
font-family: 'Helvetica Neue', Helvetica, arial, sans-serif;
font-size: 24px;
font-weight: 200;
line-height: 130%;
color: #fff;
padding: 10px;
margin: 0px;
}

#main_greybg, #main_whitebg, #main_lightgrey p {
line-height: 150%;
}

#main_greybg, #main_whitebg, #main_lightgrey p {
line-height: 150%;
margin: 0px 0px 10px 0px;
}

#main_greybg, #main_whitebg, #main_lightgrey h2 {
margin: 20px 0px 0px 0px;
}

h1 {
color: #666;
font: 250% "Helvetica Neue", helvetica, arial, sans-serif;
font-weight: 200;
line-height: 120%;
margin: 10px 0px 0px 0px;
}

h2 {
color: #333;
font: bold 120% "Helvetica Neue", helvetica, arial, sans-serif;
line-height: 120%;
}


.smallprint {
font-size: 90%;
color: #666;
}

.smallprint p, .smallprint ol {
margin-top: 0;
margin-bottom: 0;
}


/* colours */

.blue {
color: #05bfdd;
}




/* FAQ */

.faq_panel {
background: #ddd;
width: 580px;
padding: 15px;
line-height: 150%;
margin: 0 0 20px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

.faq_panel a:link, .faq_panel a:visited {
font-weight: bold;
color: #05b0c1;
text-decoration: none;
margin: 5px 0px;
}

.faq_panel a:hover {
font-weight: bold;
color: #05b0c1;
text-decoration: underline;
}

.faq_question {
font-weight: bold;
margin: 0px;
}


.faq_answer {
color: #555;
margin: 0px 0px 15px 0px;
}

.pagetop_link {
color: #666;
margin-top: 0px;
}


#extra_questions {
margin: 0px;
display: none;
}
 
#extra_questions_links {
margin: 0px;
background: transparent;
padding: 0px;
width: 180px;
text-decoration: none;
}

#extra_questions_links a:link {
color: #666;
text-decoration: none;
font-weight: normal;
}

#extra_questions_links a:hover {
color: #666;
text-decoration: none;
}

#extra_questions_links a:visited {
color: #666;
text-decoration: none;
font-weight: normal;
}

.faq_arrow {
height: 15px;
width: 15px;
border: 0px;
margin: 0px 5px 0px 0px;
}


/* buttons grey */

.buttons a {
display:block;
width: 540px;
height: 38px;
padding: 27px 0px 10px 40px;
font: normal 18px "Helvetica Neue", helvetica, arial, sans-serif;
color: #fff;
background: transparent url("../i/pricing_buttons.png") 0px 0px no-repeat;
text-decoration: none;
border-bottom: 1px solid #666;
margin: 5px 0px;
}

.buttons a:hover { 
background-position: 0px -70px;
color: #333;
}

.buttons a:active {
background-position: 0px -140px;
color: #fff;
}

/* buttons blue */

.buttons_blue a {
display:block;
width: 540px;
height: 38px;
padding: 27px 0px 10px 40px;
font: normal 18px "Helvetica Neue", helvetica, arial, sans-serif;
color: #fff;
background: transparent url("../i/pricing_buttons.png") 0px -140px no-repeat;
text-decoration: none;
border-bottom: 1px solid #666;
margin: 5px 0px;
}

.buttons_blue a:hover { 
background-position: 0px -70px;
color: #333;
}

.buttons_blue a:active {
background-position: 0px -140px;
color: #fff;
}



/* pricing page */

.grey_panel {
background: #ddd;
width: 590px;
padding: 5px;
line-height: 150%;
margin: 0 0 20px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}


.pricing_description {
font: 12px Verdana, arial, sans-serif;
color: #ddd;
margin: -18px 0px 0px 180px;
float: right;
width: 220px;
}

#promo {
background-position: 0px -140px;
color: #fff;
}

#promo a:hover {
background-position: 0px -70px;
color: #333;
}

.phone_number_field {
height: 40px;
width: 295px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin: 0px 0px 0px 10px;
padding: 8px 3px 5px 30px;
font: normal 18px "Helvetica Neue", helvetica, arial, sans-serif;
color: #666;
border: 0px;
}




/* tool tips */

#tooltip {
position: absolute;
width: 200px;
border: 1px solid #ccc;
background: #ddd;
padding: 10px;
color: #333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
display: none;
}