/* CSS Document */

/* ----------------- GLOBAL LAYOUT & STYLING ------------------ */

body {
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #f9e4ae;
	color: #000; 
}

#wrapper {
	position: relative;
	top: 30px;
	width: 900px;
	height: auto;
	margin: 0 auto;	
}

#content {
	position: static;
	width: 900px;
	background-color: #fff;
	border-radius: 50px;
	-moz-border-radius: 50px;
	border-top-left-radius: 150px;
	-moz-border-radius-topleft: 150px;
	/*min-height: 500px;*/
	padding: 0 0 30px 0;
}

h1, h2, h3, p, ul, li  {
	margin: 0;
	padding: 0;	
}

#flower {
	float: left;
	position: absolute;
	z-index: -1;
	left: -35px;
	top: -20px;
	margin: 0px;
	padding: 0px;
	height: 140px;
	width: 140px;
	background-image: url(images/flower.png);
	background-repeat: no-repeat;
	
}

.spacer{
	height: 12px;
	display: block;
}

.hidden{
	display: none;
}

.clearer {
	clear: both;
}

hr {
	display: none;
}

#footer {
	padding: 35px 30px 30px 570px;
	width: 300px;
	min-height:100px;
	background-image: url(images/partnerlogos.png);
	background-repeat: no-repeat;
	background-position: left center;
	text-align: right;
	color: #775D1E;	
}

#footer p {
	margin: 0 0 1em 0;
}
	

/* ------------------------ HOMEPAGE SPECIFIC ------------------ */

#hometop{
	float: left;
	width: 840px;
	min-height: 250px;
	padding: 30px;
	padding-bottom: 10px; 
}

#homelogo {
	float: left;
	width: 250px;
	height: 245px;
	background-image: url(images/biglogo.png);
	background-repeat: no-repeat;
}

#homeabout { 
	float: left;
	width: 250px;
	margin-left: 40px;
	line-height: 1.4em;
	color: #000;
}

#homequote {
	float: right;
	width: 190px;
	margin: 0px;
	background-color: #1a1919;
	padding: 30px;
	border-radius: 30px;
	-moz-border-radius: 30px;
	min-height: 150px;
	color: #f3c81c;
	font-size: large;
}

#aboutarrow{
	float: right;
	width: 260px;
	height: 50px;
	padding: 0;
	margin: 5px 43px 0 0;
	background-image: url(images/arrow.png);
	background-repeat: no-repeat;
	font-size: small;
	color: #000;
	font-family: "Courier New", Courier, monospace;
	text-transform: lowercase;
}

#aboutarrow a{
	display: block;
	width: 235px;
	height: 23px;
	padding: 6px 0 0 10px;
	margin: 8px 0 0 4px;
	text-decoration: none;
	color: #000;
}

#aboutarrow a:hover{
	font-weight: bold;
}

#homebot {
	clear: both;	
	width: 840px;
	height: 235px;
	margin: 0 30px; 
	background-image: url(images/resourceshome.png);
	background-repeat: no-repeat;
}

#stuffwemade {
	float: left;
	width: 290px;
	height: 45px;
	padding: 0;
	margin: 0;
	color: #fff;
	
}

#stuffwemade a{
	display: block;
	text-align: center;
	width: 350px;
	height: 65px;
	padding: 85px 0 0 0;
	margin: 30px 0 0 247px;
	background-image: url(images/stuffwemade-off.png);
	background-repeat: no-repeat;
	background-position: center 45px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

#stuffwemade a:hover{
	background-image: url(images/stuffwemade-on.png);

}

#homelink{
	float:right;
}

#homelink a{
	display: block;
	width: 125px;
	height: 125px;
	margin: 25px 30px 0 0
}


/* ------------------------ ABOUT SPECIFIC --------------------- */

#about-banner {
	width: 900px;
	height: 200px;
	padding: 0;
	margin: 0;
	background-image: url(images/about-banner.png);
	background-repeat: no-repeat;
	background-position: right top;	
	border-top-left-radius: 150px;
	-moz-border-radius-topleft: 150px;
}

#about-title{
	float: left;
	margin: 65px 0 0 65px;
	color: #000;
	font-family: "Courier New", Courier, monospace;
	text-transform: lowercase;
	font-size: 300%;
}

#about-text{
	float: left;
	padding: 0 65px 0 65px;
	font-size: medium;
	color: #000;
	line-height: 1.5; 
}

#about-text p{
	margin: 1em;
}

#about-text h2{
	margin: 0 0 0.5em 0;
	padding: 10px 15px;
	background-color: #1a1919;
	text-align:center;
	border-radius: 15px;
	-moz-border-radius: 15px;
	color: #f3c81c;
	font-size: large;
	font-weight: normal;
}

#about-text li{
	margin: 0 0 1em 1em;
}

#about-main {
	float: left;
	width: 410px;
}

#about-extra {
	float: right;
	width: 300px;
}

#about-pic{
	float: right;
	width: 300px;
	height: 325px;
	margin: 10px 0 20px 0;
	background-image: url(images/spectrum.jpg);
	background-repeat: no-repeat;
	background-position: left top;	
	border-radius: 15px;
	-moz-border-radius: 15px;	
}

#about-contact {
	float: right;
	width: 300px;
}

/* ------------------------ RESOURCE SPECIFIC ----------------- */

#stuffwemade-banner {
	float: left;
	width: 900px;
	height: 200px;
	padding: 0;
	margin: 0;
	background-image: url(images/stuffwemade-banner.png);
	background-repeat: no-repeat;
	background-position: right top;	
	border-top-left-radius: 150px;
	-moz-border-radius-topleft: 150px;
}

#infospeech {
	float:left;
	text-align: center;
	margin: 58px 0 0 85px;
	width: 120px;	
	font-size: 85%;
	line-height: 1;
	color: #000;
	font-family: "Courier New", Courier, monospace;
	text-transform: lowercase;
}

#resource-list {
	float: left;	
	width: 430px;
	min-height: 300px;
	margin: 0 0 0 30px;
}

#resource-list ul{
	padding: 0;	
	margin: 0;
}

#resource-list li{
	list-style: none;
	text-align: center;
	padding: 0;	
	margin: 0;
}

#resource-list a{
	list-style: none;
	text-decoration: none;
	padding: 15px;
	margin: 0 15px 15px 0;
	display: block;
	float: left;
	height: 60px;
	width: 95px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	background-repeat: no-repeat;
	background-position: center 75px;
	font-weight: bold;
}

#resource-list a:hover, #resource-list a:active{
	background-position: center 50px;
}

.theresource {
	display: none;
	float: right;	
	width: 400px;
	min-height: 300px;
	margin: 0 30px 0 0;
	border-radius: 20px;
	-moz-border-radius: 20px;
	background-position: bottom right;
	background-repeat: no-repeat;
}

.theresource h3 {
	padding: 18px 22px;
	min-height: 20px;
	color: #444;
	background-repeat: no-repeat;
	background-position: right bottom ;
	border-radius: 20px 20px 0 0;
	-moz-border-radius: 20px 20px 0 0;
}

.resource-details {
	float: left;
	width: 200px;
	margin: 22px;
	line-height: 1.3;
}

.resource-details p{
	margin-bottom: 0.5em;
}

.resource-links {
	float: right;
	width: 130px;
	margin: 22px 22px 0 0;
}

.resource-download {
	width: 130px;
	margin-bottom: 10px
}

.resource-download a{
	display: block;
	width: 100px;
	background-color: #7C9F28;
	background-image:url(images/download.png);
	padding: 5px 15px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	color: #fff;
	background-repeat: no-repeat;
	background-position: 100px center;
	margin: 0;
	text-decoration: none;
	font-weight: bold;	
}

.resource-download a:hover{
	background-color: #89AE2E;
}

.resource-video {
	width: 130px;
}

.resource-video a{
	display: block;
	width: 100px;
	background-color: #3892fd;
	background-image:url(images/playvideo.png);
	padding: 5px 15px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	color: #fff;
	background-repeat: no-repeat;
	background-position: 100px center;
	margin: 0;
	text-decoration: none;
	font-weight: bold;	
}

.resource-video a:hover{
	background-color: #5CA1F1;
}

#vidplayer {
	margin: 0 auto;
	width: 720px;
	height: 405px;
	border: 10px solid #000;	
}

.vidclose {
	background-color: #000;
	color: #FFF;
	width: 710px;
	text-align: right;
	margin: 0 auto;
	padding: 0 30px 10px 0;	
}

.vidclose a{
	color: #FFF;
	text-decoration: none;
}

.vidclose a:hover{
	color: #09F;
}

.dim
{
	display: none;
	text-align:center;
	padding-top: 100px;
	height:100%;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:1 !important;
	background-image: url(images/dim.png);
	color: #444;
}

/* --------- RESOURCES COLOURS ------------ */

#resource01 {
	background-color: #FADDFF;
	background-image: url(images/resource01-big.png);
}
#button01 {
	color: #813D81;
	background-image: url(images/resource01.png);
	background-color: #ff79fe;
	
}
#resource01 h3{
	color: #813D81;
	background-color: #ff79fe;
}


#resource02 {
	background-color: #D2FAD8;
	background-image: url(images/resource02-big.png);
}
#button02 {
	background-color: #73fa79;
	background-image: url(images/resource02.png);
	color: #387B3B;
}
#resource02 h3{
	background-color: #73fa79;
	color: #387B3B;
}


#resource03 {
	background-color: #C8FFFD;
	background-image: url(images/resource03-big.png);
}
#button03 {
	background-color: #00fdff;
	background-image: url(images/resource03.png);
	color: #008D90;
}
#resource03 h3{
	background-color: #00fdff;
	color: #008D90;
}


#resource04 {
	background-color: #DEE3FF;
	background-image: url(images/resource04-big.png);
}
#button04 {
	background-color: #8d93ff;
	background-image: url(images/resource04.png);
	color: #4C4F8A;
}
#resource04 h3{
	background-color: #8d93ff;
	color: #4C4F8A;
}



#resource05 {
	background-color: #CDEEFE;
	background-image: url(images/resource05-big.png);
}

#button05 {
	background-color: #76d6ff;
	background-image: url(images/resource05.png);
	color: #335F8F;
}
#resource05 h3{
	background-color: #76d6ff;	
	color: #335F8F;
}


#resource06 {
	background-color: #FFEDE8;
	background-image: url(images/resource06-big.png);
}
#button06 {
	background-color: #ffb8ab;
	background-image: url(images/resource06.png);
	color: #906862;
}
#resource06 h3{
	background-color: #ffb8ab;
	color: #906862;
}



#resource07 {
	display: block;
	background-color: #F2FBDE;
	background-image: url(images/resource07-big.png);
}
#button07 {
	background-color: #d4fb79;
	background-image: url(images/resource07.png);
	color: #729335;
}
#resource07 h3{
	background-color: #d4fb79;
	color: #729335;
}


#resource08 {
	background-color: #FFF1BE;
	background-image: url(images/resource08-big.png);
}
#button08 {
	background-color: #F9DC75;
	background-image: url(images/resource08.png);
	color: #C97801;
}
#resource08 h3{
	background-color: #F9DC75;
	color: #C97801;
}


#resource09 {
	background-color: #FCFFB2;
	background-image: url(images/resource09-big.png);
}
#button09{
	background-color: #FFF144;
	background-image: url(images/resource09.png);
	color: #8E940F;
}
#resource09 h3{
	background-color: #FFF144;
	color: #8E940F;
}