/*********************/
/* BASIC */
/*********************/

body {
	font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;
	font-size: 62.75%;
	margin: 0;
	padding: 0;
	background-color: #cccccc;
    background-repeat: repeat;
}

#wrapper {
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
margin-top: 30px;
width: 960px;
background-image: url(WaterColourPaperClip.png);
background-repeat: repeat;
}

p,h1,h2,h3,h4,h5,h6,h7,ol,ul {
	margin: 0px;
	padding: 0px;
	font-size: 1.8em;
}


/*********************/
/* BANNER STYLES */
/*********************/
#banner {
float: left;
width: 960px;
height: 100px;
padding-top: 20px;
padding-bottom: 5px;
}

#logo {
	float: left;
	margin-left: 25px;
	margin-right: 15px;
	height: 100px;
	width: 140px;
	background: url(frog.png) no-repeat 0px 0px;
}

#title {
	float: left;
	height: 100px;
	width: 550px;
	background: url(phonicsPlayTitle.png) no-repeat 0px 0px;

}

#logout {
display: none;
}

#login {
height: 100px;
font-size: 0.7em;
float: right;
padding-right: 30px;
padding-top: 0px;
text-align: right;
}


#username, #password {
background-color: #FFFF99;

}


/*********************/
/* MAIN */
/*********************/

#main {
float: left;
	margin-left: 42px;
	margin-right: 0px;
	padding-top: 0px;
	width: 600px;
}

#postIt {
float: right;
height: 98px;
width: 160px;
background: url(postIt.png) no-repeat 0px 0px;

}

#adBanner {
float: left;
height: 70px;
width: 468px;
margin-right: 100px;
padding-bottom: 20px;
}

}
#adLeaderboard {
width: 728px;
height: 90px;
float: right;
}

h1 {
	color: #cc0099;
	font-size: 2.4em;
	font-weight: bold;
}
.section {
	display: inline;
  color: #999999;
 font-weight: normal;
}

.floatRight {
	float: right;
	margin: 5px 10px 2px 15px;
}

p {
	color: #666666;
	font-size: 1.4em;
	margin-top: 5px;
}
h2 {
	color: #F60;
	margin-top: 10px;
	overflow: hidden;
	padding-top: 0px;
}
h3 {
	color: #0C3;
	margin-top: 10px;
	overflow: hidden;
	padding-top: 0px;
}
h4 {
	color: #9900CC;
	margin-top: 10px;
	overflow: hidden;
	padding-top: 0px;
}

h5{
	color: #666666;
	font-size: 3.6em;
}

h6{
	color: #666666;
	font-size: 1.1em;
	margin-top: 30px;
	}

/*********************/
/* LEFT NAV */
/*********************/

ul#leftnav {
clear: both;
margin-top: 10px;
list-style:none;
float: left;
width: 120px;
padding-left: 10px;
    }

	ul#leftnav li a {
	height:50px;
	float:right;
	margin-top: 5px;
	text-indent:-9999px;
	width:100px;
	outline-style: none;
	
	
	}
	
		ul#leftnav li#leftnavhome a {
	background:url(navbar.png)	no-repeat -900px 0px; /* X and Y position set*/
	}
	
	ul#leftnav li#leftnavhome a:hover {
	background-position:-900px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnavhome a.current {
	background-position:-900px -100px; /* Y position -100 for Current instance image */
	}
	
	
	ul#leftnav li#leftnav1 a {
	background:url(navbar.png) no-repeat 0px 0px; /* X and Y position at 0*/
	}
	
	ul#leftnav li#leftnav1 a:hover {
	background-position: 0px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnav1 a.current {
	background-position: 0px -100px; /* Y position -100 for Current instance image */
	}
	
	ul#leftnav li#leftnav2 a {
	background:url(navbar.png) no-repeat -100px 0px; /* X and Y position at 0*/
	}
	
	ul#leftnav li#leftnav2 a:hover {
	background-position:-100px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnav2 a.current {
	background-position:-100px -100px; /* Y position -100 for Current instance image */
	}
	
		ul#leftnav li#leftnav3 a {
	background:url(navbar.png)	no-repeat -200px 0px; /* X and Y position set*/
	}
	
	ul#leftnav li#leftnav3 a:hover {
	background-position:-200px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnav3 a.current {
	background-position:-200px -200px; /* Y position -100 for Current instance image */
	}
	
		ul#leftnav li#leftnav4 a {
	background:url(navbar.png)	no-repeat -300px 0px; /* X and Y position set*/
	}
	
	ul#leftnav li#leftnav4 a:hover {
	background-position:-300px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnav4 a.current {
	background-position:-300px -100px; /* Y position -100 for Current instance image */
	}
	
		ul#leftnav li#leftnav5 a {
	background:url(navbar.png)	no-repeat -400px 0px; /* X and Y position set*/
	}
	
	ul#leftnav li#leftnav5 a:hover {
	background-position:-400px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnav5 a.current {
	background-position:-400px -100px; /* Y position -100 for Current instance image */
	}
	
		ul#leftnav li#leftnav6 a {
	background:url(navbar.png)	no-repeat -500px 0px; /* X and Y position set*/
	}
	
	ul#leftnav li#leftnav6 a:hover {
	background-position:-500px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnav6 a.current {
	background-position:-500px -100px; /* Y position -100 for Current instance image */
	}
	
		ul#leftnav li#leftnav7 a {
	background:url(navbar.png)	no-repeat -600px 0px; /* X and Y position set*/
	}
	
	ul#leftnav li#leftnav7 a:hover {
	background-position:-600px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnav7 a.current {
	background-position:-600px -100px; /* Y position -100 for Current instance image */
	}
	
		ul#leftnav li#leftnav8 a {
	background:url(navbar.png)	no-repeat -700px 0px; /* X and Y position set*/
	}
	
	ul#leftnav li#leftnav8 a:hover {
	background-position:-700px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnav8 a.current {
	background-position:-700px -100px; /* Y position -100 for Current instance image */
	}
	
		ul#leftnav li#leftnav9 a {
	background:url(navbar.png)	no-repeat -800px 0px; /* X and Y position set*/
	}
	
	ul#leftnav li#leftnav9 a:hover {
	background-position:-800px -50px; /* Y position -50 for Over instance image */
	}
	
	ul#leftnav li#leftnav9 a.current {
	background-position:-800px -100px; /* Y position -100 for Current instance image */
	}
	

/*********************/
/* PRINTABLES */
/*********************/
	#printableSpace {
	clear: both;
	width: 120px;
	height: 60px;
	padding-top: 20px;
	margin-right: 480px;
	}
	
	
a.printablesButton { 
    float: left;
	width: 120px;
    height: 60px;
background:URL(PrintableResources.png) no-repeat 0px 0px;
}

a.printablesButton:hover {
background-position: 0px -60px;
}
	
/*********************/
/* POLAROID - interactive resources */
/*********************/

.polaroid { 
float: left;
height: 280px;
width: 250px;
margin-top: 10px;
margin-right: 50px;
}


.polaroidImage {
height: 250px;
width: 250px;
background: URL(polaroidBG.png) no-repeat 0px 0px;
}

.polaroidImage:hover {
background-position: 0px -250px;
}

img {border: none}

.ideasButton {
float: left;
width: 30px;
height: 30px;
margin-left: 5px;
}
a.ideasButton { 

background: url(teachingIdeasButton.png) no-repeat 0px 0px;
}

a.ideasButton:hover {
background-position: 0px -30px;
}

.ideasText{
color: #666666;
font-size: 1.2em;
margin-top: 8px;
margin-left: 40px;	
}

.ideasTextPrintable{
color: #666666;
font-size: 1.2em;
margin-top: 8px;
height: 30px;
margin-left: 40px;
width: 300px;
margin-right: 400px;	
}


.polaroidGreyed {
float: left;
height: 280px;
width: 250px;
margin-top: 10px;
margin-right: 50px;
}

.polaroidGreyedImage {
position: relative;
height: 250px;
width: 250px;
background: URL(polaroidGreyedBG.png) no-repeat 0px 0px;
}

.polaroidGreyedImage .polaroidStar {
position: absolute;
left: -10px;
top: -10px;
background: URL(StarSubscribe.png) no-repeat 0px 0px;
width: 100px;
height: 100px;
}

/*********************/
/* DOCUMENTS VERTICAL - printable resources */
/*********************/


.document { 
float: left;
height: 200px;
width: 140px;
margin-top: 10px;
margin-right: 10px;
}


.documentImage {
height: 200px;
width: 140px;
background: URL(documentBG.png) no-repeat 0px 0px;
}

.documentImage:hover {
background-position: 0px -200px;
}

.documentGreyed{
float: right;
height: 200px;
width: 140px;
margin-top: 10px;
margin-left: 10px;
}

.documentGreyedImage {
position: relative;
height: 200px;
width: 140px;
background: URL(documentGreyedBG.png) no-repeat 0px 0px;
}

.documentGreyedImage .StarPrintSubscribe {
position: absolute;
left: -5px;
top: -5px;
background: URL(StarPrintSubscribe.png) no-repeat 0px 0px;
width: 75px;
height: 75px;
}

/*********************/
/*DIVIDING LINES */
/*********************/
#line1 {
clear: left;
width: 480px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 50px;
border-bottom: 3px solid #ff0000;
}

#line2 {
clear: both;
width: 480px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 50px;
border-bottom: 3px solid #ff6600;
}

#line3 {
clear: both;
width: 480px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 50px;
border-bottom: 3px solid #ffff00;
}

#line4 {
clear: both;
width: 480px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 50px;
border-bottom: 3px solid #00ff00;
}

#line5 {
clear: both;
width: 480px;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 50px;
border-bottom: 3px solid #3399ff;
}

/*********************/
/* SECONDARY RIGHT */
/*********************/

#secondary {
float: right;
width: 180px;

}

/*********************/
/* SEARCH */
/*********************/

#search {
float: left;
width: 375px;
padding-left: 0px;
padding-right: 200px;
margin-left: 180px;
}



/*********************/
/* POSITION SUBSCRIBE BUTTON AT TOP OF SECONDARY COLUMN */
/*********************/
#subscribeSpace {
float: right;
padding-right: 0px;
padding-left: 30px;
}
/*********************/
/* POSITION SUBSCRIBE BUTTON WHERE THERE IS NO SECONDARY BAR */
/*********************/
#subscribeOnly {
float: right;
padding-right: 30px;
}

/*********************/
/* POSITION SUBSCRIBE BUTTON ABOVE POST IT */
/*********************/
#subscribeSpaceAbovePostIt{
height: 60px;
float: right;
padding-right: 20px;
padding-left: 50px;
}

#adSkyscraper {
float: right;
padding-right: 20px;
padding-top: 10px;
padding-left: 40px;

}
/*********************/
/* SUBSCRIBE NOW BUTTON */
/*********************/
a.subscribeNowButton {
float: right;
width: 120px;
height: 60px;
background: url(subscribeNowButton.png) no-repeat 0px 0px;
margin-bottom: 20px;
}


a.subscribeNowButton:hover{
background-position: 0px -60px;
}

/*********************/
/* SUBSCRIBE NOW BUTTON */
/*********************/
a.subscribeNowInteractive {
float: right;
width: 120px;
height: 60px;
background: url(subscribeNowButton.png) no-repeat 0px 0px;
}


a.subscribeNowInteractive:hover{
background-position: 0px -60px;
}

/*********************/
/* SUBSCRIBE GAME BUTTON */
/*********************/
a.subscribeGameButton {
float: right;
width: 300px;
height: 150px;
background: url(subscribeGameSticker.png) no-repeat 0px 0px;
}


a.subscribeGameButton:hover{
background-position: 0px -150px;
}


/*********************/
/* ADVERT RECTANGLE IN TEXT */
/*********************/

#adRect300x250 {
margin-left: 150px;
margin-top: 10px;
margin-bottom: 10px;
height: 250px;
width: 300px;
}

#adRect336x280 {
margin-left: 132px;
margin-top: 10px;
margin-bottom: 10px;
height: 280px;
width: 336px;
}

/*********************/
/* ADVERT RECTANGLE IN IDEAS */
/*********************/

#adRectIdeas {
float: right;
padding-top: 30px;
padding-left: 10px;
padding-bottom: 10px;
}


/*********************/
/* AMAZON CAROUSEL */
/*********************/
#amazonCarousel {
float: left;
padding-left: 60px;
padding-bottom: 20px;

}

#amazonFerrisWheel {
float: left;
margin-left: 40px;
padding-right: 0px;
padding-top: 10px;
}

#amazonFerrisWheelWide {
float: right;
padding-right: 0px;
padding-top: 10px;
}


/*********************/
/* AMAZON PRODUCTS */
/*********************/
#amazonProducts {
float: left;
padding-top: 20px;
padding-left: 60px;
padding-bottom: 20px;

}

#amazonProductsVertical {
float: right;
width: 120px;
padding-top: 10px;
padding-right: 20px;
padding-left: 40px;
}

/*********************/
/* TEXT BELOW */
/*********************/
#textBelow {
clear: both;
float: left;
padding-left: 120pc;
width: 600px;
}

/********************/
/* FOOTER */
/*********************/
#footer {
    clear: both;
	width: 960px;
	height: 60px;
	background: url(copyright.png) no-repeat 0px 0px;
}