/* Z-INDEX STUFF 
 *
 * HEADER: 1000-1999
 * DRAPE: 900-999
 * LANDSCAPE: 0-99
 * FOOTER: 100-199
 */

/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
/*table, tbody, tfoot, thead, tr, th, td */
fieldset, form, label, legend, caption
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 14;
	font-family: Arial, "MS Trebuchet", sans-serif;
	vertical-align: baseline;       
	text-decoration: none;
}
    
.page_block
{
	/* border: 1px dashed red; */
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
}

span
{
	font-family: Arial, "MS Trebuchet", sans-serif;
}                                                  
                    
a, a:hover
{
	font-size: 14;
	font-family: Arial, "MS Trebuchet", sans-serif;
	color: #77b63e;
}   

:focus 
{
	outline: 0;
}

/* Styling */     

#header_block
{
	/* border: 1px dashed orange; */
	background: url(../images/natural/header/headerbar_P.png) repeat-x;
	width: 100%;           
	z-index: 1999;
	height: 87px;
	position: absolute;
}              

#header_left
{
	padding-left: 30px;
}              

#header_right
{
	/* border: 1px solid blue; */
	float: right;
	text-align: right;
	padding-right: 30px;
	/* z-index: 100; */
}    

#header_right .button
{
	float: right;
	margin-top: -2px;
	margin-left: 10px;
}

#header_contents
{
	/* border: 1px dashed blue; */
	height: 52px;
}

.header_button_block
{
	position: relative;
	float: right;
	cursor: pointer;
}

.header_button_divider
{
	background: url(../images/natural/header/header_divider.gif) repeat-y;
	width: 2px;
	height: 52px;
	margin-left: 20px;
	margin-right: 20px;
}

.header_button_contents
{
	float: right;
}

.header_button_table
{
	height: 52px;
}

#header_button_feedback
{
	background: url(../images/natural/header/feedback.png) no-repeat;
	width: 76px;
	height: 15px;
}

#header_button_subscribe
{
	background: url(../images/natural/header/subscribe.png) no-repeat;
	width: 136px;
	height: 15px;
}

#tagline
{
	background: url(../images/natural/header/tagline.png) no-repeat 4px;
	width: 211px;
	height: 19px;
	padding-left: 15px;
	margin-left: 15px;
}

/* ------------------------------------------------------------------------------ */
.join 
{
/*	border: 1px solid #999;*/
	position: fixed;
	top: 52px;
	right: 30px;
	z-index: 2000;     
	width: 400px;
	height: 240px;    
}        

#join_background
{                          
/*	border: 1px solid #999;*/
	opacity: 0.85;      
	z-index: 2000;
	background-color: black;   
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
}             

#join_contents
{                  
/*	border: 1px solid blue;*/
	color: white;   
	padding: 20px;
	padding-top: 20px;
	width: 360px;  
	text-align: left;
/*	line-height: 29px;     */
	z-index: 1000;
}   
                    
#join_contents a
{
	color: white;
	text-decoration: none;
	font-size: 17px;
}   

#join_contents a:hover
{
	color: #77b63e;
}                     

/* ------------------------------------------------------------------------------ */
.feedback 
{
/*	border: 1px solid #999;*/
	position: fixed;
	top: 52px;
	right: 30px;
	z-index: 2000;     
	width: 400px;
	/* height: 476px;     */
	background-image: url(../images/natural/opacity/black90.png);
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
}        

.feedback_alt
{
	font-size: 12px;
	color: #eee;
}

#feedback_background
{                          
/*	border: 1px solid #999;*/
	opacity: 0.85;      
	z-index: 2000;
	background-color: black;   
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
}             

#feedback_contents
{                  
/*	border: 1px solid blue;*/
	color: white;   
	padding: 20px;
	padding-top: 20px;
	width: 360px;  
	text-align: left;
/*	line-height: 29px;     */
	z-index: 1000;
}   
                    
TEXTAREA:focus
{
    outline: 0 none;
	border: 2px solid #94ED1F;
	color: #54712A;
}

.feedback_textarea
{
	border: 2px solid white;
	font-size: 19px;
	width: 360px;
	height: 120px;
	padding: 10px;      
	-moz-border-radius: 8x;
	-webkit-border-radius: 8px;
	color: black;
	margin-top: 4px;
}
                        
#feedback_contents a
{
	color: white;
	text-decoration: none;
	font-size: 17px;
}   

#feedback_contents a:hover
{
	color: #77b63e;
}                     

/* ---------------------------------------------------------------------------------------- */

#contents_block
{
	/* border: 1px dashed blue; */
	padding-top: 160px;
	text-align: center;
	margin-bottom: 50px; /* controls the push of footer in natural_sub.erb */
}

#contents
{
	/* border: 1px dashed yellow; */
	color: white;
	font-size: 18px;	 
	width: 800px;
	margin-left: auto;
	margin-right: auto;   
	text-align: left;
}
      
/*****************************************************************************************************/
/* FOOTER */
/*****************************************************************************************************/

#footer_block
{                
	background-image: url(../images/natural/opacity/black20.png);
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 0px;         
	height: 35px;
}                           
         
.icon_button
{
	padding: 0px 8px 0px 8px;
}

.footer_icon
{
	padding-top: 0px;
}

.footer_button
{
	padding: 0px 12px 0px 12px;
}                        

.footer_button a
{
	text-decoration: none;	
	font-size: 11px;
}   

/* Use daylight (ie: natural_day.css, natural_night.css to edit styles) */
/*
.footer_button
{
	border-right: 1px solid #3a7718;
	border-left: 1px solid #508a2d;
}

.footer_button a
{
	color: #ddd; 
}   

.footer_button a:hover
{
	color: #fff;	
}
*/

#footer_bubble_block
{
	position: relative;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#footer_bubble
{
	border: 2px solid white;
	background-color: #ddd;
	position: absolute;
	left: -20px;
	bottom: 20px;
	margin-left: auto;
	margin-right: auto;    
	text-align: left;
	width: 700px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: black;
	padding: 20px;
	z-index: 1;
}   

/*
.footer_down_arrow
{
	display: none;
	border: 1px dashed yellow;
	width: 30px;
	height: 20px;
	background-image: url(http://www.convorelay.com/convo/images/natural/down_arrow.png);
	opacity:.75;
	filter:alpha(opacity=75);
	position: relative;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
*/

/*****************************************************************************************************/

#logo
{
	/* border: 1px dashed blue; */
	width: 142px;
	height: 30px;
	background: url(../images/natural/logo.png) no-repeat left center;
	position: relative;
	top: 0px;
	cursor: pointer;
}   
      
#drape_block
{                     
/*	border: 1px solid blue;*/
	position: absolute;    
	width: 100%;
	min-height: 100%;
	z-index: 9999;         
	top: 0px;
	left: 0px;
}   

#drape_background
{
	position: absolute;    
	width: 100%;
	height: 100%;
	background-color: black;
	filter: alpha(opacity = 90);
	opacity: .90;
	z-index: 998;         
}

#drape_contents
{
	/* border: 1px dashed red; */
	text-align: center;
	position: relative;    
	width: 100%;
	height: 100%;
	/* padding-top: 100px; */
	color: white;
	z-index: 999;         
}
          
.default_button     
{
	/* Change background and color in application_helper.rb under 'def button' */
	/* background-color: #77b63e; */
	/* color: white; */
	cursor: pointer;
	font-size: 19px;
	padding: 7px 15px 5px 15px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;     
	text-align: center;
}   
        
.button a, .button a:hover
{
	text-decoration: none;
}   

/* Critters and Landscapes Stuff */
             
.landscape
{   
/*	border: 1px solid yellow;*/
	position: absolute;     
	top: 52px;
	width: 100%;
	height: 400px;
	background-position: bottom center;
	background-repeat: repeat-x;
}

#landscape_block
{                               
	text-align: center;
	position: relative; 
	margin-bottom: 110px; /* controls the push of the footer in natural_front.erb */
}   

#landscape_contents
{                
/*	border: 1px solid red;*/
	position: relative;
	width: 1022px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;	
}          

#sky
{
	position: absolute;
	height: 0px;
	width: 100%;
	top: 0px;   
	left: 0px;
}              

#tree_block
{
/*	border-bottom: 1px solid blue;*/
	position: absolute;
	bottom: -20px;
	left: 120px;
	width: 264px;
	height: 363px;     
	z-index: 100;
}

#tree
{
/*    border: 1px solid blue;*/
	width: 264px;
	height: 363px;     
}            

#tree_bubble
{
/*	border: 1px solid red;*/
	position: absolute;
	background-image: url(../images/natural/tree/bubble.png);
	width: 107px;
	height: 66px;
	top: 40px;
	left: 170px;       
	z-index: 100;
}


#birdnest_block
{
	/* border: 1px dashed red; */
	position: absolute;
	top: 239px;
	left: 136px;
}

#nest
{
	/* border: 1px dashed yellow; */
	background-image: url(../images/natural/birdnest/nest.png);
	width: 38px;
	height: 27px;
	position: absolute;
	cursor: pointer;
	z-index: 1;
}

#bird_block
{
	/* border: 1px dashed purple; */
	position: absolute;
	left: 8px;
	bottom: -7px;
	width: 23px;
	height: 30px;
	z-index: 0;
}

#bird
{
	/* border: 1px dashed red; */
	background-image: url(../images/natural/birdnest/bird.png);
	width: 23px;
	height: 30px;
	/* position: absolute; */
}

#bird_bubble
{
	/* border: 1px dashed green; */
	background-image: url(../images/natural/birdnest/bubble.png);
	width: 102px;
	height: 63px;
	position: absolute;
	/* bottom: -58px; */
	bottom: 25px;
	left: -8px;
}


.ladybug
{
	position: absolute;
	top: 331px;
	left: 424px;                                     
	z-index: 10;
}   

.ladybug .body
{                      
	position: relative;
	background-image: url(../images/natural/ladybug/ladybug.png);
	width: 11px;
	height: 16px;     
	cursor: pointer;
	text-align: left;
}

.ladybug .bubble
{                
	position: absolute;
	background-image: url(../images/natural/ladybug/bubble_thattickles.png);
	width: 102px;
	height: 63px;
	top: -55px;
	left: -75px;
}
              
.grasshopper
{
	position: absolute; 
	top: 300px;
	left: 650px;
	text-align: left;    
	border: 0px solid green;     
	width: 71px;      
	z-index: 100;
}   

.grasshopper .body
{   
	width: 47px;
	height: 41px;     
	background-image: url(../images/natural/grasshopper/grasshopper.png);
	cursor: pointer;         
	z-index: 1000;
}

.grasshopper .bubble
{   
	background-image: url(../images/natural/grasshopper/bubble.png);
	position: absolute;
	width: 102px;
	height: 63px;
	top: -40px;
	left: 35px;          
}

.bee
{
	position: absolute; 
	top: 270px;
	left: 525px;
	text-align: left;    
	border: 0px solid green;     
	width: 71px;      
	z-index: 100;
}   

.bee .body
{   
	width: 25px;
	height: 25px;     
	background-image: url(../images/natural/bee/bee.png);
	cursor: pointer;         
	z-index: 1000;
}

.bee .bubble
{   
	background-image: url(../images/natural/bee/bubble.png);
	position: absolute;
	width: 102px;
	height: 63px;
	top: -60px;
	left: -75px;          
}

.dandelion
{
	position: absolute; 
	top: 305px;
	left: 830px;
	text-align: left;    
	border: 0px solid green;     
	width: 71px; 
	z-index: 100;
}   

.dandelion .body
{   
	width: 36px;
	height: 64px;     
	background-image: url(../images/natural/dandelion/dandelion.png);
	cursor: pointer;               
	z-index: 100;
}

.dandelion .bubble
{   
	background-image: url(../images/natural/dandelion/bubble.png);
	position: absolute;
	width: 102px;
	height: 63px;
	top: -40px;
	left: -80px;          
}


/* HTML Styles */
body
{
	height: 100%;
}   

a,input,textarea,select
{
	outline:0 none;
}
      
.guide
{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 500px;    
	top: 0px; 
	text-align: center;
}   

.guide .fixed            
{
	border: 1px dashed blue;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	height: 500px;
}

/* INPUT */
INPUT.textfield
{
	border: 2px solid white;
	font-size: 19px;
	width: 360px;
	padding: 10px;      
	-moz-border-radius: 8x;
	-webkit-border-radius: 8px;
	color: black;
}

INPUT[type=text]:focus
{
    outline: 0 none;
	border: 2px solid #94ED1F;
	color: #54712A;
}

/* BOX STUFF FOR CONTENTS */
.box_opacity
{
	opacity: 0.25;
	filter: alpha(opacity = 25);
}    

.box_block
{                
	/* border: 1px solid blue; */
	position: relative;
	width: 780px;   
}

.box_contents
{               
/*	border: 1px solid red;*/
	background-image: url(../images/natural/opacity/white25.png);
	border: 0px;
	width: 100%;
	padding: 10px;   
	z-index: 1001;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}                  

.box_contents_convo_who
{
	height: 262px;     
}   

.box_contents_video
{
	height: 360px;  	
}

/* CONVO WHO ? */
.who
{
	border: 3px solid white;
	cursor: pointer;
	opacity: 0.75;          
	filter: alpha(opacity = 50);
}      

.who_out
{
	opacity: 0.75;          
	filter: alpha(opacity = 50);
}               

.who_over
{
	opacity: 1;          
	filter: alpha(opacity = 100);  		
}
    		           
#who_ed
{            
	background-image: url(../images/natural/convo_who/ed.jpg);
	width: 172px;
	height: 153px;
}

#who_chad
{
	background-image: url(../images/natural/convo_who/chad.jpg);
	width: 172px;
	height: 153px;
}
#who_robin
{
	background-image: url(../images/natural/convo_who/robin.jpg);
	width: 172px;
	height: 153px;
}

#who_wayne
{
	background-image: url(../images/natural/convo_who/wayne.jpg);
	width: 172px;
	height: 153px;
}                  
		
#box_arrow_block
{
/*	border: 1px solid red;*/
	width: 100%;       
	position: relative; 
	padding-top: 10px;
}              

#box_arrow
{
/*	border: 1px solid red;*/
	background-image: url(../images/natural/convo_who/arrow.png);
	width: 30px;
	height: 20px;
	position: relative;
	left: 76px;
}
              
.who_table
{
	width: 780px;
}                                                             

.who_self_image
{
	width: 428px;
	height: 241px;
}
             
.who_name
{
	font-size: 32px;
	color: white;  
	font-weight: bold;
}                

.who_position
{
	font-size: 14px;
	color: #DADADA;
	font-style: italic;         
}                

.who_bio
{
	font-size: 14px;
	color: #202020;        
	padding-top: 10px;
}

.who_facts
{
	width: 314px;
	background-color: white;
	opacity: .5;
	filter: alpha(opacity=50);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	color: black;           
	padding: 8px;    
	font-size: 12px;
	line-height: 16px;        
}    


/* FLASH LINK */
.flash_video
{          
	text-align: right;
	font-size: 13px;        
	padding-top: 4px;
	color: #464646;    
	padding-right: 18px;
}                  

.flash_link, .flash_link:hover
{
	color: #464646; 
	font-size: 13px;  
	text-decoration: underline;	
}

/* ---------------------------------------------------------------------------------------- */
/* SUB PAGE */

.sub_content
{
	font-size: 22px;
	opacity: .5;
	filter: alpha(opacity = 50);
}

.sub_content a
{
	font-size: 22px;
	color: white;
	font-weight: bold;
}

.sub_title
{
	font-size: 42px;
	padding-bottom: 4px;
}

/* ---------------------------------------------------------------------------------------- */
/* NATURAL MENU and SUBMENU */

.menu_tabbed
{
	text-transform: uppercase;
	padding: 8 20 7 20;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	margin-right: 20px;
	color: white;
}

.menu_untabbed
{
	padding-right: 20px;
	color: white;
}

/* .header_menu_text a, .header_menu_text a:hover */
.header_menu_text a
{
	color: white;
	font-weight: bold;
	font-size: 15px;
}

.header_menu_text a:hover
{
	opacity: 1;
	filter: alpha(opacity = 100);
}

.header_menu_link
{
	opacity: .75;
	filter: alpha(opacity = 75);
}

#header_submenu_divider
{
	width: 100%;
	height: 0px;
	border-top: 1px solid black;
	border-bottom: 1px solid white;
	margin-top: 4px;
	opacity: .20;
	filter: alpha(opacity = 20);
}

#header_submenu
{
	padding: 5 0 8 20;
	color: black;
	opacity: .75;
	filter: alpha(opacity = 75);
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	position: relative;
	top: -4px;
	font-weight: bold;
	/* for border-left and border-bottom, see each daylight css (ie: natural_day.css) */
}

#header_submenu a
{
	color: black;
	opacity: .80;
	filter: alpha(opacity = 80);
}

#header_submenu a:hover
{
	color: white;
	opacity: 1;
	filter: alpha(opacity = 100);
}

.header_submenu_about_us
{
	margin-left: -2px;
}

.header_submenu_our_services
{
	margin-left: 97px;
}

.header_submenu_help
{
	margin-left: 231px;
}

.submenu_untabbed
{
	color: white;
	opacity: .80;
	filter: alpha(opacity = 80);
}

/* ---------------------------------------------------------------------------------------- */
/* GENERAL SERVICE FEATURE PAGE */

.services_features_section_block
{
	background-image: url(../images/natural/opacity/white25.png);
	padding: 15px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.services_features_title
{
	font-size: 30px;
	font-weight: bold;
}

.services_features_description
{
	opacity: .50;
	filter: alpha(opacity = 50);
	font-size: 18px;
}

.services_features_block
{
	margin-top: 25px;
	height: 350px;
}

.services_features_video
{
	float: left;
}

.services_features_contents
{
	float: right;
	width: 310px;
}

/* ---------------------------------------------------------------------------------------- */
/* CONVOIM PAGE */

#convoim_header_block
{
	width: 100%;
	position: relative;
	height: 277px;
}

#convoim_header_laptop
{
	background: url(../images/natural/services/maclaptop.png) no-repeat;
	width: 503px;
	height: 277px;
	position: absolute;
}

#convoim_header_contents
{
	position: absolute;
	right: 2px;
	top: 60px;
	text-align: right;
}

#convoim_header_title
{
	font-size: 56px;
	font-weight: bold;
}

#convoim_header_description
{
	color: white;
	opacity: .60;
	filter: alpha(opacity = 60);
	font-size: 21px;
	padding-left: 5px;
}

#convoim_devices
{
	margin-top: 40px;
	background: url(../images/natural/services/allmacs.png) no-repeat top center;
	width: 100%;
	height: 72px;
	text-align: center;
}

#convoim_devices_contents
{
	margin-top: 20px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}

.convoim_features_section_padding
{
	margin-top: 26px;
}

/* ---------------------------------------------------------------------------------------- */
/* VIDEOPHONE PAGE */

#vp_header_block
{
	width: 100%;
	position: relative;
	height: 277px;
}

#vp_header_tv
{
	background: url(../images/natural/services/vp_TV.png) no-repeat;
	width: 311px;
	height: 280px;
	position: absolute;
}

#vp_header_contents
{
	position: absolute;
	right: 2px;
	top: 100px;
}

#vp_header_title
{
	font-size: 44px;
	font-weight: bold;
}

#vp_header_description
{
	color: white;
	opacity: .60;
	filter: alpha(opacity = 60);
	font-size: 22px;
	padding-left: 2px;
}

.vp_features_section_padding
{
	margin-top: 16px;
}

#vp_devices
{
	margin-top: 40px;
	background: url(../images/natural/services/vps.png) no-repeat top center;
	width: 100%;
	height: 97px;
	text-align: center;
}

#vp_devices_contents
{
	margin-top: 20px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}

/* ---------------------------------------------------------------------------------------- */
/* BUTTON CONTENTS */

.button_block
{
	/* border: 1px dashed red; */
	height: 34px;
	cursor: pointer;
}

.button_L
{
	display: inline;
	float: left;
	/* background: url(http://www.convorelay.com/convo/images/natural/button/btn_blue_L.png) no-repeat; */
	width: 7px;
	height: 34px;
}

.button_contents
{
	display: inline;
	float: left;
	/* background: url(http://www.convorelay.com/convo/images/natural/button/btn_blue_M.png) repeat-x; */
	height: 26px;
	color: white;
	text-shadow: 0px 1px 2px rgba(0,0,0,.5);
	padding: 8px 12px 0px 12px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	font-family: 'Lucida Sans', Arial;
}

.button_R
{
	/* background: url(http://www.convorelay.com/convo/images/natural/button/btn_blue_R.png) no-repeat; */
	width: 7px;
	height: 34px;
	float: right;
	display: inline;
	float: left;
}

.button_clear
{
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
}