/* CSS Document */
*{
	margin:0;
	padding:0;
}
html, body {
	width: 100%;
	height: 100%;
	text-align: center;
        font-family: Arial;
	color: #111;
}

#bodyoverall {
	margin: 0px auto;
	width: 877px;
	text-align: left;
}
p {
        font-size: 12px;

}
a {
	color: #307874;
	text-decoration: underline;
}

img {
	border: 0;
}

div.banner {
	width: 877px;
	height: 132px;
	background: url(../_images/SN-top-header.jpg) no-repeat;
	text-align: right;
}
p.green {
	color:#4a7929;
}
p.white {
        color:#ffffff;
	font-size: 14px;
}
select {
	font-size: 12px;
}
input {
        font-size: 12px;
}

div.title {
	float: right;
	padding: 70px 53px 0 0;
	color: #111;
}
#bodyinner {
	margin-left: 50px;
	width: 774px;
	background-color: #ccc;
}

/* head */
.overmenu {
	clear: both;
	background: url(../_images/over_menu.JPG) no-repeat ; 
	height: 4px; 
	width:754px;
	margin-left: 11px;
	overflow: hidden;
}
.sideofmenu {
        background: #3a3c3b;
        height: 30px;
        width:14px;
        margin-left: 12px;
}

.menu {
	margin-top: -30px;
	margin-left: 17px; 
	width:745px; 
	height:30px; 
	font-size:14px;  
	position:relative; 
	z-index:100;  
	background: #3a3c3b}
/* hack to correct IE5.5 faulty box model */
* html .menu {
	width:746px; w\idth:745px}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
	padding:0;margin:0;list-style-type:none;}
.menu ul ul {
	width:116px;list-style-type:none;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
	float:left;width:124px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {
	display:block; 
	text-align: center; 
	font-size:16px;
	text-decoration:none; 
	color:#fff; width:115px; 
	height:30px; 
	background:#3a3c3b; 
	padding-left:0px; 
	line-height:29px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:116px; w\idth:115px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
.menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#b2ab9b;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:30px;left:0; width:116px;}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:30px;}

/* position the third level flyout menu */
.menu ul ul ul{left:149px; top:-1px; width:116px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-116px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#3a3c3b; font-size: 12px; color:#fff; opacity: 0.8; height:auto; line-height:1em; padding:5px 0px; width:115px;border-width:0 1px 1px 1px;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:115px;w\idth:115px; margin-left: -8px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#fff; background:#c7c8ca;}
.menu :hover > a, .menu ul ul :hover > a {color:#fff;background:#c7c8ca;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}


/* home page */
div.mainpic {
	width: 877px;
	height: 306px;
	background: url(../_images/SN-Middle-section.jpg);
}
div.mainpic_words_left {
	float: left;
	margin: 195px 0 0 70px;
	width: 300px;
	height: 100px;
	overflow: hidden;
}
div.mainpic_words_right {
	float: right;
	margin-right:70px;
	margin-top:195px;
	color: #eeeeee;
        font-size: 11px;
}
div.mainpic_words_right ul {
        margin-left: 25px;
	line-height: 1.2em;
}

div.doorway1 {
	float: left;
	padding: 0 0 0 12px;
}
div.doorway1_top {
	height: 160px;
	width: 234px;
	background: url(../_images/SN-Bestinclass-top.jpg) no-repeat;
}
div.doorway1_mid {
        height: 110px;
        width: 234px;
        background: url(../_images/SN-Bestinclass-middle.jpg) repeat;
}
div.doorway1_bot {
        height: 8px;
        width: 234px;
        background: url(../_images/SN-Bestinclass-bottom.jpg) repeat;
}

div.doorway2 {
        float: left;
        margin: 0 0 0 24px;
}
div.doorway2_top {
        height: 160px;
        width: 234px;
        background: url(../_images/SN-Teacherssay-top.jpg) no-repeat;
}
div.doorway3 {
        float: left;
        margin: 0 0 0 24px;
}
div.doorway3_top {
        height: 160px;
        width: 234px;
        background: url(../_images/SN-Unbeatable-top.jpg) no-repeat;
}

/* other pages */
div.contactpic {
        width: 877px;
        height: 145px;
        background: url(../_images/SN-Contactus-header.jpg);
}
div.parbenpic {
        width: 877px;
        height: 145px;
        background: url(../_images/SN-ForParents-header.jpg);
}
div.schbenpic {
        width: 877px;
        height: 145px;
        background: url(../_images/SN-ForSchools-header.jpg);
}
div.pricepic {
        width: 877px;
        height: 145px;
        background: url(../_images/SN-Pricing-header.jpg);
}
div.demopic {
        width: 877px;
        height: 145px;
        background: url(../_images/SN-Demo-header.jpg);
}
div.buttons {
	text-align: right;
	margin-right: 30px;
}

/* boxes in all but home page */
div.boxtop {
	height: 173px;
	width:  238px;
	background: url(../_images/Doorway-box.jpg) no-repeat;
        font-size: 11px;
	padding-top: 6px;	
	margin: 25px 0 0 70px;
}
div.boxtop ul{
        margin: 0 10px 0 25px;
}

div.boxbot {
        height: 173px;
        width:  238px;
        background: url(../_images/Doorway-box.jpg) no-repeat;
        padding-top: 6px;
        font-size: 11px;
        margin: 0px 0 0 70px;
}
div.contact_us {
	width: 500px;
	margin: -365px 0 10px 320px;
	min-height: 360px;
}
div.contact_us ul {
	font-size: 14px;
	color: #188;
        margin: 0 0 0 40px;
}

div.contact_us_box-top {
        width: 480px;
        height: 6px;
	background: url(../_images/SN-Contactus-greybox-top.jpg) no-repeat;
        margin: 0 0 0 0px;
	overflow: hidden;
}

div.contact_us_box-bot {
        width: 480px;
        height: 6px;
        background: url(../_images/SN-Contactus-greybox-bottom.jpg) no-repeat;
        margin: 0 0 0 0px;
        overflow: hidden;
}
div.contact_us_box {
	width: 480px;
        background-color: #c7c8ca;
        margin: 0 0 0 0px;
}
div.set_homework {
	font-size: 12px;
	margin: 0 10px 0 20px;
}
div.homework_box {
	margin: 0 20px 20px 20px; 
	font-size: 12px;
	height: 120px;
	overflow: auto;
}
div.guard_box {
        margin: 0 20px 20px 20px;
        font-size: 12px;
}
div.indent {
        margin: 0 20px 10px 20px;
        font-size: 12px;
}
/* para styles */
p.door_title {
	float: left;
	margin: 5px 5px 3px 10px;
        font-size: 12px;
}	

p.door {
	margin: 0 5px 3px 5px;
	font-size: 10px;
	line-height: 100%;
}
p.door_foot {
	text-align: right;
        margin: 0 5px 0px 5px;
        font-size: 7px;
        line-height: 100%;
}
p.contact_us {
	margin: 0 30px 5px 20px;
        font-size: 12px;
	color: #333;
}
p.contact_us_res {
        margin: 0 0 5px 20px;
        font-size: 12px;
        color: #3c3;
}
p.box {
	margin: 0 10px 0 10px;
	font-size: 11px;
}

input.medium {
	width: 200px;
}
textarea.medium {
        width: 202px;
	height: 100px;
}

/* the footer */
#footer {
	width:774px;
	margin: 0px 0 0 50px;
}
div.foot-left, div.foot-right {
	font: 9px/1 Arial, sans-serif;
	color:#000;
}
div.foot-left a, div.foot-right a {
	color: #000;
        text-decoration: none;
}

div.foot-left a:hover, div.foot-right a:hover {
        color: #000;
        text-decoration: none;
}

div.foot-left {
	float: left;
        margin: 0 0 0 0;
}

div.foot-right {
	float: right;
        margin: 0 0 0 0;
}

#body_bot {
        height: 26px;
        width: 877px;
        background: url(../_images/SN-bottom.jpg);
}
#body_bot_left {
	margin: -67px 0 0 0;
        height: 67px;
        width: 62px;
        background: url(../_images/Bottom-left.jpg);
}
#body_bot_right {
        margin: -67px 0 0 812px;
        height: 67px;
        width: 65px;
        background: url(../_images/Bottom-right.jpg);
}