/*
soundsteps_main.css
Main style sheet for the
Soundsteps Music School website
Designed and built by Tellura Information Services Ltd
March 2006 - February 2008
http://www.tellura.co.uk
*/

/*
***************************************************************
Setup styles
***************************************************************
*/

* {
	margin: 0;
	padding: 0;
}

body {
/*	background-image: url(../images/body_background.gif);
			background-repeat: repeat-y;
			background-position: center;*/
}

p {
	font-family: Arial, Helvetica, san-serif;
	/* font-size: 10px; */
}


/*
***************************************************************
Utility styles
***************************************************************
*/
.clearboth {
	clear: both;
}

/*
***************************************************************
Page structure styles
***************************************************************
*/

#wrapper {
width: 760px;
position: relative;
left: 50%;
margin-left: -380px;
margin-top: 2px;
border: 1px solid black;
}

#banner {
	background-image: url(../images/soundsteps_banner.jpg);
	background-repeat: no-repeat;
	background-color: #ffffff;
	height: 120px;
	width: 760px;
}


#contentWrapper {
	/* display: block; hack for IE to remove 3-pixel bug */
	background-image: url(../images/content_bg.gif);
	background-repeat: repeat-y;
	background-position: center;
	width: 760px;
	border-bottom: 1px solid #ffffcc;
	border-top: 1px solid #ffffcc;
}


/*
***************************************************************
Main Content
***************************************************************
*/

.with_backdrop {
background: url(../images/page_backdrop.jpg) top right no-repeat;

}

#mainContent {
	width: 500px;
	display: inline;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
	padding: 5px 10px 100px 0;
	float: right;
	background-color: #FBFBE0;
	border: #000000 1px solid;
	z-index: 2;
}

#mainContent h1 {
	font-family: Arial, Helvetica, san-serif;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 5px;
	margin-left: 30px;
}

#mainContent h2 {
	font-family: Arial, Helvetica, san-serif;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 5px;
	margin-left: 30px;
}

#mainContent h3 {
	font-family: Arial, Helvetica, san-serif;
	font-size: 14px;
	color: #1C1F78;
	padding-bottom: 5px;
	margin-left: 30px;
}

#mainContent p {
	padding-top: 5px;
	font-size: 14px;
	text-align: justify;
	margin-left: 30px;
}


#mainContent p a,
#mainContent p a:visited {
	text-decoration: none;
	/* color: #3B4F96; */
	color: #1C1F78;
}

#mainContent p a:hover, 
#mainContent p a:active {
	color: #ff0000;
	text-decoration: none;
}

#mainContent .indented_text {
	margin-left: 160px;
	color: green;
}

#mainContent .indented_body {
	margin-left: 100px;
}

#mainContent .image_decoration {
	border: 1px solid #333333;
}

#mainContent .kids {
	font-weight: bold;
	font-size: 18px;
	color: #FF0000;
}

#mainContent .kids0 {
	font-weight: bold;
	font-size: 16px;
	/* black */
	color: #000000;
}

#mainContent .kids1 {
	font-weight: bold;
	font-size: 16px;
	/* blue-turquoise */
	color: #208fc7;
}

#mainContent .kids2 {
	font-weight: bold;
	font-size: 16px;
	/* dark green */
	color: #008040;
}
#mainContent .kids3 {
	font-weight: bold;
	font-size: 16px;
	/* orange */
	color: #ff8040;
}
#mainContent .kids4 {
	font-weight: bold;
	font-size: 16px;
	/* pale purple */
	color: #b56cff;
}
#mainContent .kids5 {
	font-weight: bold;
	font-size: 16px;
	/* dark blue */
	color: #3636b4;
}
#mainContent .kids6 {
	font-weight: bold;
	font-size: 16px;
	/* red */
	color: #ff2b2b;
}


/*
***************************************************************
Top navigation
***************************************************************
*/

ul.minNav {
	margin: 0;
	padding-top: 30px;
}

ul.minNav a {
	display: block;
	padding-left: 15px;
	margin: 2px 5px 2px 5px;
	font-family: Arial, Helvetica, san-serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	color: #1C1F78;
	background: url(../images/bullet_blue.gif) no-repeat 0 50%;
}

ul.minNav a:hover {
	background: url(../images/bullet_yellow.gif) no-repeat 0 50%;
}

/* kludge to remove large gaps in IE on Windows */
ul.minNav li {
	display: inline;
}

ul.minNav .current a {
	background: url(../images/bullet_yellow.gif) no-repeat 0 50%;
}



/*
***************************************************************
Main navigation
***************************************************************
*/

#mainNavigation {
	background-color: #ffffcc;
	border-top: 2px solid #1C1F78;
	border-bottom: 2px solid #1C1F78;
	height: 34px;
	padding: 1px 1px 1px 1px;
}

 ul#mainNav {
	/* margin: 1px; */
	padding: 0;	
	list-style: none;
	display: inline;
	float: left;
	width: 760px;
}

ul#mainNav a {
	display: block;
	width: 189px;
	height: 34px;
	line-height: 34px;
	margin-right: 1px;
	font-family: Arial, Helvetica, san-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	color: #ffffcc;
	/* background-color: #333366; */
}

ul#mainNav .dkblue a {
	background-color: #3a3c77;
}

ul#mainNav .gold a {
	background-color: #D5A718;
}

ul#mainNav .ltblue a {
	background-color: #A5BDE2;
	width: 188px;
}

ul#mainNav .green a {
	background-color: #69789b;
}

ul#mainNav a:hover {
	background-color: #ffffcc;
	color: #3a3c77;
}

ul#mainNav li {
	float: left;
}

/* hack for IE */
* html ul#mainNav {
	margin-right: -5px;
}


/*
***************************************************************
Sub Navigation
***************************************************************
*/

#subNavigation {
	width: 220px;
	/* display: inline; */
	/* margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 20px; */
	float: left;
	/* background-color: #A5BDE2; */
	/* border: #000000 1px solid; */
	z-index: 0;
}

#subNavigation h2 {
	font-family: Arial, Helvetica, san-serif;
	font-size: 18px;
	font-weight: bold;
	padding-top: 15px;
	color: #1C1F78;
	width: 220px;
	height: 25px;
	margin-left: 5px;
}

#subNavigation p {
	font-size: 13px;
	/* color: red; */
	margin: 5px;
}

 ul#subNav {
	margin: 0;
	padding: 0;	
}

ul#subNav a {
	display: block;
	padding-left: 15px;
	margin: 2px 5px 2px 5px;
	font-family: Arial, Helvetica, san-serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	color: #1C1F78;
	/* list-style-image: url(../images/bullet_blue.gif); */
	background: url(../images/bullet_blue.gif) no-repeat 0 50%;
}

ul#subNav a:hover {
	background: url(../images/bullet_yellow.gif) no-repeat 0 50%;
}

/* kludge to remove large gaps in IE on Windows */
ul#subNav li {
	display: inline;
}

ul#subNav .current a {
	background: url(../images/bullet_yellow.gif) no-repeat 0 50%;
}

/* class for badges table */
.badge_table {
	margin-left: 30px;
	width: 450px;
}
.badges {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	line-height: 20px;
}

/* 
***************************************************************
buttons for kids zone menu
***************************************************************
*/

 ul#picNav {
	margin: 0;
	padding: 0;	
	list-style: none;
}

ul#picNav a {
	display: block;
	width: 74px;
	height: 100px;
	margin-left: 60px;
	text-decoration: none;
	text-align: center;
}

ul#picNav .quiz a {
	background: url(../images/btn_quiz.gif) no-repeat 0 50%;
}

ul#picNav .funstuff a {
	background: url(../images/btn_funstuff.gif) no-repeat 0 50%;
}

ul#picNav .findouthow a {
	background: url(../images/btn_findouthow.gif) no-repeat 0 50%;
}

ul#picNav .quiz a:hover {
	background: url(../images/btn_quiz_hover.gif) no-repeat 0 50%;
}

ul#picNav .funstuff a:hover {
	background: url(../images/btn_funstuff_hover.gif) no-repeat 0 50%;
}

ul#picNav .findouthow a:hover {
	background: url(../images/btn_findouthow_hover.gif) no-repeat 0 50%;
}

/* 
end of kids zone menu buttons
*/


/* 
***************************************************************
Sidebar content styles for franchise pages 
***************************************************************
*/

p.sidebarimg {
	text-align: center;
	margin: 20px 0 0 0;
	padding: 10px;
}

p.sidebartext {
	text-align: center;
	font-family: Arial, Helvetica, san-serif;
	font-size: 12px;
	color: #1c1f78;
	margin: 5px 10px;
}

/* end of sidebar content styles */


/*
styles for testimonials

*/

.testimonial_head {
	margin-top: 10px;
	font-size: 14px;
	font-weight: bold;
	color: #1C1F78;
	margin-left: 30px;
}

.testimonial_p {
	font-style: italic;
	margin-left: 30px;
}

/* 
end of styles for testimonials

*/



ul#centres {
	margin: 0;
	padding: 0;	
}

ul#centres li {
	display: inline;
}

ul#centres a {
	display: block;
	padding-left: 25px;
	margin: 2px 5px 2px 30px;
	font-family: Arial, Helvetica, san-serif;
	font-size: 14px;
	text-decoration: none;
	text-align: left;
	background: url(../images/bullet_note.gif) no-repeat 0 50%;
	color: #1C1F78;

}

ul#centres a:hover {
	font-weight: bold;
}

p.address {
	font-family: Arial, Helvetica, san-serif;
	font-weight: bold;
	color: #1C1F78;
	padding-left: 35px;	
}

ul#bulletnote {
	font-family: Arial, Helvetica, san-serif;
	font-size: 14px;	
	list-style-type: disc;
	list-style-image: url(../images/bullet_note.gif);
	margin-left: 30px;
	padding-left: 20px;
}

.image_caption {
	font-family: Arial, Helvetica, san-serif;
	font-size: 12px;
	font-style: italic;
	color: #000000;
}

p#alphabetbrowser {
	font-size: 12px;
	font-weight: bold;
	line-height: 12px;
	color: #1C1F78;
	border-top: 1px solid #1C1F78;
	border-bottom: 1px solid #1C1F78;
	margin: 10px 0 10px 30px;
	padding: 2px 0 2px 0;
		
}
p#alphabetbrowser a, a:visited {
	text-decoration: none;
	margin-right: 4px;
}

p#alphabetbrowser a:hover, a:active {
	color: #ff0000;
	text-decoration: none;
	margin-right: 4px;
}



#picture_main {
	display: inline; /* to fix IE bug */
	position: relative;
	float: left;
	margin-top: -280px; /* this value will be overriden on each page */
	margin-left: 40px; /* this value will be overriden on each page */
	margin-bottom: 20px; /* this value will be overriden on each page */
	background-color: #ffffcc;
	border: 1px solid #000000;
	padding: 3px;
	z-index: 10;
}

#picture_main img {
	display: block;
}

.picture_framed {
	background-color: #ffffcc;
	border: 1px solid #000000;
	padding: 3px;
}

/*
Footer
*/

#footer{
	clear: both;	
	font-family: Arial, Helvetica, san-serif;
	font-size: 9px;
	height: 20px;
	line-height: 20px;
/*	border-top: 2px solid #CEA421;
	border-bottom: 2px solid #CEA421;*/
	border-top: 1px solid black;
	padding: 5px 0;
	margin: 0;
	background-image: url(../images/footer_bg.gif);
	background-repeat: repeat-y;
}

#footer .left {
	float: left;
	margin-left: 5px;
	display: inline;
}

#footer .right {
	float: right;
	margin-right: 5px;
	display: inline;
}

/* no underline for footer links */
#footer .right a,
#footer .right a:visited {
	color: #000000;
	text-decoration: none;
}

/* hover highlight for footer links */
#footer .right a:hover {
	color: #ff0000;
}

/*
Form styles - used on contact pages
*/

form {
	width: 425px;	
}

fieldset {
	font-family: Arial, Helvetica, san-serif;	
	font-size: 12px;
	font-weight: bold;
	border: 1px solid #000000;
	margin: 10px 0 0 30px;
	padding: 10px;
	color: #1C1F78;
}

legend {
	font-size: 14px;
}

label {
width: 9em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both;
}

.input-box {
	float: left;
	width: 220px;
	margin-bottom: 10px;
	color: #1C1F78;
	border: 1px solid #000000;
	background: #ffffdd;
}

.input-box:focus {
background: #ffff99;
}

.sel-box {
	/* float: left; */
	margin-bottom: 10px;
	color: #1C1F78;
}

.submit-button {
	color: #1C1F78;
	margin: 20px 0 0 30px;
	width: 120px;
	clear: both;
}

.postcode-box {
	width: 80px;
	margin: 10px;
	color: #1C1F78;
	border: 1px solid #000000;
	background: #ffffdd;	
}

.postcode-box:focus {
	background: #ffff99;
}

.search-button {
	color: #1C1F78;
	margin: 10px 5px 5px 5px;
	width: 60px;
}

.radio_caption {
	display: block;
	color: #000000;
	font-weight: normal;
	clear: both;
}

.radio_button {
	margin: 5px 0 5px 15px;
}

.radio_label {
	color: #1C1F78;
	text-align: right;
	width: 100px;
	margin: 5px 0 5px 5px;
}

/* radio buttons used on quiz page */
input.rb {
	color: green;
	margin-right: 10px;
}

p.deepindent {
	font-family: Arial, Helvetica, san-serif;	
	font-size: 14px;
	padding-left: 100px;
}

.picture_left {
	/* background-color: #F5F7F9; */
	position: relative;
	display: inline;
	padding: 0;
	float: left;
	margin-top: 10px;
	margin-left: 28px;
	margin-right: 15px;
	/* border: 4px red; */
	
	/* border: 1px solid #000000;
	width: 400px;
	height: 200px; */
}


/*
	End of style sheet
*/