/*
** layout.css 
** CSS - handles the layout grid
** Author: Steve TANGUE
** Date: 22.08.08
** Last edited: 
*/

/* screen size 1024x768 */
body
{
	text-align:left;
	background-color: #ffffff;
	margin-top: 0px;

}

#container{width: 100%; height: auto;}

/* page header */
div#page_header
{
	width: 100%;
	height: 84px;
	margin: 0 auto;
	/*background-position:top;
	background-repeat: repeat-x;
	background-image: url('../img/header.jpg');*/
	background-color:#000000;
	
}


/* page header content */
div#page_header_content
{
	width: 980px;
	height: 84px;
	background-color:#000000;
	margin: 0 auto;
	padding-right: 10px;
}

.earlylearning_logo
{
	float: left;
}
.text_logo
{
	color: #ffffff; 
	font-size: 1em;
	float: right; 
	margin: 20px 2px 0 0;
}
.mediasphere_logo
{
	float: right;
}


/* page content */
div#page_content
{
	width: 100%;
	height:auto;
	margin: 0 auto;
/*background-image:url(../img/page_content_bg.jpg);*/
	background-repeat:repeat-x;
	background-position:top;
	padding: 0px;

}

div#home_banner
{
	width: 990px;
	margin: 0 auto;
	float: left;
}

div#home_banner img
{
	border: 0px solid red;
}
/* page content */
div#content
{
	width: 990px;
	height: auto;
	margin: 0 auto;
/*	background-image:url(../img/content_bg.jpg);*/
	background-repeat:repeat-x;
	background-position:bottom;
}

/* page content title */
div#page_title_bg
{
	width: 1004px; 
	height:auto; 
	margin:10px auto;
	float: left;	
}

#icons_menu
{
	float: right;
	margin: 0px;
}




/* left content */
div#left_content
{
	width: 210px;
	height: 180px;
	float: left;
	text-align: left;
	margin-left: 15px;
}
/* end left content */

/* box left and right */
span.box_title
{
	width: 200px;
	font-weight: bold;
	font-size: 1.1em;
	color: #6287BE;
	text-align: center;
	margin-top: 8px;
	float: left;
}

div.box_top
{
	width: 206px;
	height: 30px;
	float: left;
	background-image:url(../img/box_bg_top.jpg);
	background-repeat:no-repeat;
	background-position:top;
}

div.box_middle
{
	width: 176px;
	height: 115px;
	float: left;
	background-image:url(../img/box_bg_middle.jpg);
	background-repeat:repeat-y;
	background-position:center;
	padding: 10px 15px;
}

div.box_middle img, div.box_middle p
{
	float: left;
	font-size: 0.9em;
}

div.testimonial_text
{
	font-size: 0.9em;
	margin-left: 10px;
	line-height: 1.1em;
	width: 100px;
	height: 110px;
	float: left;
}

.schoolbox_text
{
	float:left; 
	width: 126px; 
	font-size: 0.9em; 
	height: 110px;
	line-height: 1.1em; 
	margin-left: 6px;
}

.readmore
{
	float: right;
	font-size: 0.9em;
}

div.box_middle b
{
	font-weight: bold;
	font-size: 0.9em;
	float: left;
}

div.box_bottom
{
	width: 206px;
	height: 21px;
	float: left;
	background-image:url(../img/box_bg_bottom.jpg);
	background-repeat:no-repeat;
	background-position:top;
}




.features
{
	border: 0px solid blue; 
	width: 100px; 
	float: left; 
	margin: 0 150px 0 80px;
}

.benefits
{
	border: 0px solid purple; 
	width: 100px; 
	float: left;
}

.call_action
{
	float:left;
	width: 548px;
	text-align: center;
	margin-top: 90px;
	font-size: 2em;
	color: #ffffff;
	
}


/* center content home  */
div#center_content_home
{
	width: 500px;
	height: 180px;
	float: left;
	margin: 5px 0 0 15px;
	background-image:url(../img/center_content_bg.jpg);
	background-repeat:no-repeat;
	background-position:center;
}
/* center content otherpage | no left content */
div#center_content
{
	width: 600px;	
	height: 508px;
	float: left;
	padding:20px 20px 20px 22px;
	border: 0px solid red;
}

div#center_content_products
{
	width: 640px;	
	height: auto;
	float: left;
	padding:20px 20px 20px 22px;
}

div#center_content_long
{
	width: 1000px;	
	height: auto;
	float: left;
	padding:20px 20px 20px 22px;
}


div#bottom_content
{
	width: 990px;
	height: 180px;
	float: left;
	margin: 0 auto;
}

/* homepage product boxes */
div.product_box_standard, div.product_box_premium, div.product_box_platinum
{
	float: left;
	width: 290px;
	height: 110px;
	padding-top: 40px;
	margin: 10px 0 10px 30px;
}	

div.product_box_standard
{
	background-image:url(../img/standard.jpg);
	background-repeat:no-repeat;
	background-position:inherit;
}

div.product_box_premium
{
	background-image:url(../img/premium.jpg);
	background-repeat:no-repeat;
	background-position:center;
}

div.product_box_platinum
{
	background-image:url(../img/platinum.jpg);
	background-repeat:no-repeat;
	background-position:center;
}

span.product_text /* homepage product text */
{
	float: right;
	width: 150px;
	color: white;
	text-align: right;
	margin: 10px 10px 0 0;
}
 
/* right content */
div#right_content_home
{
	width: 210px;
	height: 180px;
	float: right;
	margin-right: 15px;
}

div#right_content
{
	width: 310px;
	height: auto;
	float: right;
	margin-top: 10px;
	
}



div#center_content p
{
	margin-left: 10px;
}



div.feedback_form_bg
{
	width: 728px; 
	background-image:url(../img/feedback_bg.png);  
	background-position: top; 
	background-repeat:no-repeat;
} 



/* tell a friend button */
a.tellafriend_button
{
	background-image:url(../img/tellafriend_button.jpg);
	background-repeat: no-repeat;
	font-size: 1.2em;
	font-weight: bold;
	width:188px;
	height:40px;
	float: left;
	margin-left: 5px;
	text-decoration:none;
	margin-top: 20px;
	cursor: pointer;
}

a:hover.tellafriend_button span
{
	text-decoration:underline;
}

a.tellafriend_button span
{
	margin: 10px 0 0 60px;
	float: left;
}




/* error message style */
div.error
{
	border: 1px solid red;
	width: 650px;
	float: left;
	padding: 15px 20px;
	font-size: 1em;
	color: red;
	margin: 15px 0 10px 0px;
	background-color:#FFECEC;	
}

/* success message style */
div.success
{
	border: 1px solid green;
	width: 550px;
	float: left;
	padding: 15px 20px;
	font-size: 1em;
	color: green;
	margin: 15px 0 10px 0px;
	background-color:#DFFFDF;		
}



/* login */
div.login_box_wrapper
{
	width: 260px;
	height: 140px;
	background-image: url(../img/login_bg.png);
	/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/login_bg.png',sizingMethod='crop');*/
	background-repeat: no-repeat;
	float: left;
	margin: 10px 10px 0 0;
	padding: 20px 40px 40px 30px;
}

* html div.login_box_wrapper
{

	/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/login_bg.png',sizingMethod='scale');*/
}


div.login_box_wrapper form
{
	padding-top: 20px;
	width: 280px;
	height: 100px;
}

div.login_box_wrapper form label
{
	width: 80px;
	padding-top: 4px;
}




/* footer menu */
div#page_footer
{
	width: 100%;
	float: left;
}
div#page_footer_content
{
	width: 970px;
	height: 40px;
	margin: 0 auto;
	border-top: 1px solid #f4f4f4;
	padding: 0px 10px 0 10px;
}
div#footer_menu
{
	width: 550px;
	margin: 0 auto;
	float: left;
}

div#footer_menu ul li
{
	float: left;
	margin: 0 2px; 
}

div#footer_menu ul li a
{
	display: block;
	color: #666666;
	padding: 2px 0;
	margin-right:2px;
	text-decoration:none;
	font-size: 0.9em;
}

div#footer_menu ul li a:hover
{
	text-decoration:underline;
}

div#footer_menu ul li a.selected
{
	text-decoration:underline;
	font-weight: bold;
	cursor:default;
}

#copyright
{
	line-height: 1.4em;
	color: #666666;
	text-align: right;
	float: right;
	width: 400px;
	height: 30px;
	font-size: 0.9em;
}

#file_updated
{
	display:none;
}



.buy_button
{
	background-image: url(../img/red_button.jpg);
	background-repeat:no-repeat;
	width: 97px;
	height: 23px;
	float: left;
	text-align: center;
	color: white;
	padding: 10px 0 0 0;
	margin-right: 4px;
}


/* form */
form
{
	float:left;
	width: 400px;
}

input, select
{
	float: left;
	position: relative;
}

label
{
	color:#666666;
	float: left;
	width: 150px;
}

div.field_wrapper
{
	float: left;
	margin-bottom: 5px;
}


.right
{
	float: right;
}

.left
{
	float: left;
}


/* table styles */
table
{
}




/* reset div */
div.reset 
{
	border:medium none;
	clear:both;
	display:block;
	font-size:1px;
	height:1px;
	line-height:1px;
	margin:0;
	padding:0;
}

/* end of file */
