/* Sanjeev Rajput: JellyTriangle Graphics & Webdesign 2007 - www.jellytriangle.com -  main cascading style sheet for Superior Education - www.superioreducation.ca */

/* The body element affects all items in the page. This sets the background color for the website and centers the webpage in the browser */

body 
{
    margin: 10px 0px;
    padding: 0px;
    text-align: center;
    background-color: #5d5d5d; /* Dark Gray background color */
}

/* The elements in this section set the standard for the entire website */

p
{
font-family: verdana;
font-size: 11px;
color: black;
}

img 
{
border:none;
padding:0px;
}

/* Globalbar: Area at TOP of website in the gray background area usually used for search bar and navigation links  */
div#globalbar
{
height: 10px;
width: 870px;
color: white;
}

div#globalbar p
{
float:left;
margin-left: 25px;
margin-top: 7px;
}

div#globalbar a
{
	color: white;
}

div#search
{
border: none;
}

input.submitbutton
{
float:right;
margin-top:5px;
margin-right: 15px;
}

input.submit
{
float:right;
margin-top:5px;
margin-right:10px;
}


/* ========================================================================================= */
/* Section 1: Setup the main containers for the website (structure) in this section. The items in this section are entered in the order they appear working from top of the site towards the bottom and working from the outside towards the center */

/* Webpage: container holding all of the elements of the WebPAGE within the website */
div#webpage 
{
width: 950px;
margin: 0px auto;
margin-top: 0px;
text-align: left;
padding: 0px;
}

/* Navbar: horizontal navigation bar located just below the banner. */
div#navbar
{
position: absolute;
top: 170px;
width: 879px;
margin-top: 11px;
margin-left: 28px;
height: 22px; /* If you change this, change the margin-top on the mainadsection */
background-color: #8a8a8a; /* Gray background color */
}

div#navbar a
{
	color: white;
	text-decoration: none;
	margin-left: 10px;
	margin-right: 10px;
	font-family: Tahoma;
	font-size: .8em; 
}

/* Mainarea: whitespace section containing content, runs from the bottom of the navbar to the top of the footer. This section should have a set height, and that height should be consistent across the website. */
div#mainarea
{
padding:0px;
height: 480px;
margin-top:-4px;
margin-left: 0px;
background-image: url('../images/mainareabackground.gif');
}

/* Mainadsection: On HOMEPAGE only. This section starts directly below below the navbar and is above the start of the columns for content */
div#mainadsection
{
position: relative;
width: 704px;
margin-left: 28px;
margin-top: 22px; /* This margin matches the navbar height property */
}

/* Leftcolumn: the main area is divided into 2 columns. The left column takes a majority of the space and is used for the main site content. */
div#leftcolumn 
{
width: 690px;
margin: 0px;
margin-top:5px;
margin-left: 28px;
margin-bottom: 15px;
background-color: white;
}

div#leftcolumn p
{
	margin-left: 15px;
	font-family: tahoma;
	font-size: .95em;
	color: black;
	text-align: justify;
}

div#leftcolumn h2
{
	margin-left: 15px;
	margin-top: 10px;
	color: #666666;
}

table.services
{
	width: 550px;
	margin-left: 15px;
	border: 1px solid navy;
}

table.services td
{
	padding: 10px;
	vertical-align: top;
}

table.services h3
{
	background-color: #494d70;
	border: 1px solid #0c1030;
	padding-left: 5px;
	color: white;
}

table.packages
{
	width: 550px;
	margin-left: 15px;
	margin-top: 10px;
	border: 1px solid navy;
}

table.packages td
{
	padding: 10px;
	vertical-align: top;
}

tr.header
{
	background-color: #dadcec;
	border: 1px solid navy;
	color: #494d70;
}

table.contactdetails
{
	margin-left: 50px;
	margin-top: 40px;
	width: 350px;
	font-size: 22px;
}

td.column2
{
	margin-left: 20px;
}

img.floatright
{
	float: right;
}

/* Rightcolumn: the main are is divided into 2 columns. The right column takes the remainder of the mainarea (mainarea width - leftcolumn width = rightcolumn width) */
div#rightcolumn
{
float: right;
margin-right: 25px;
margin-top: 5px;
padding: 0px;
}

div#rightcolumn img
{
	border: 1px solid gray;
}

/* Footer: container holding the footer image. Located at the bottom of the webpage */
div#footer
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

/* Legal: copyright and site design information. Located within the footer section of the webpage */
div#legal
{
margin-top: -100px;
margin-left: 50px;
}

div#legal p
{
font-family: Arial;
font-size: .70em;
font-weight: none;
}

div#legal a
{
	color: white;	
}