@charset "utf-8";
/* CSS Document for Rascals Theatre School */

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;	padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img,abbr,acronym {	border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal; font-weight:normal;}
ol,ul {list-style:none;}
dl,dd,dt {float:left; display:inline;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
q:before,q:after {content:'';}
a {outline: none;}
html, body {height:100%; width:100%;}


body {
	background:#fff url(../images/bg_body.jpg) 0 0 repeat-x;
	font:normal .8em/1.25em Verdana, Geneva, sans-serif;
	color:#000;
}

p {
	margin-bottom:15px;
}

p.small {
	font-size:.85em;
	text-align:center;
}

li {
	margin-bottom:10px;
}

a {
	font-size:.85em;
	font-weight:bold;
	color:#000;
	text-decoration:underline;
}

a:hover {
	text-decoration:none;
}

a.facebook, a.flickr {
	display:inline-block;
	width:56px;
	height:16px;
	background:url(../images/bg_facebook.png) 0 0 no-repeat;
	text-indent:-200000px;
}

a.flickr {
	background-image:url(../images/bg_flickr.png);
}


/* titles */
h1, h2 {
	font:bold 1.75em/1.25em Verdana, Geneva, sans-serif;
	margin:0 0 10px 0;
}

h1.locations {
	margin-left:291px;
}

h2 {
	font-size:1em;
	margin:10px 0 0;
}

span.content h2 {
	font-size:1.3em;
}

.short h2 {margin-top:0;}


/* form */
form, fieldset, input, textarea, label {
	float:left;
	display:inline;
}

form {
	width:258px;
	margin-top:20px;
	padding-top: 10px;
	background:#f1c30e url(../images/bg_form.png) 0 0 no-repeat;
}

fieldset {
	width:238px;
	padding:0 10px 10px;
	background: url(../images/bg_fieldset.png) 0 100% no-repeat;
}

fieldset p {
	margin-top:10px;
	font-weight:bold;
}

fieldset p.error {
	color:#f00;
}

input, textarea, label {
	width:226px;
	margin-bottom:10px;
	font:normal .85em/1.25em Verdana, Geneva, sans-serif;
}

label {
	font-weight:bold;
}

input, textarea {
	border:1px #ccc solid;
	padding:5px;
}

textarea {
	height:60px;
}

input.button {
	float:right;
	width:auto;
	height:auto;
	padding:0;
	border:none;
}

/* structure */
#outerContainer {
	width:976px;
	margin:0 auto;
	padding:0 48px;
	background:url(../images/bg_stars.png) 0 6px no-repeat;
	min-height:100%;
}

* html #outerContainer {
	height:100%;
}

#container, #container div {
	float:left;
	display:inline;
}

#container {
	width:844px;
	margin-top:46px;
	padding:0 18px 34px 18px;
	background: url(../images/bg_container.jpg) 0 100% no-repeat;

}

#container #topContainer {
	width:844px;
	height:8px;
	display:block;
	background:url(../images/bg_containerTop.png) 0 0 no-repeat;
	font-size:0;
	line-height:0;
}

#innerContainer {
	width:840px;
	min-height:560px;
	padding-bottom:4px;
	background:#fff;
	border-left:#000 solid 2px;
	border-right:#000 solid 2px;
}

* html #innerContainer {
	height:560px;
}

/* wrapper */
.wrapper, dl {
	width:840px;
}

.main.wrapper {
	margin-bottom:10px;
}

.wrapper div, dt {
	width:258px;
	margin:0 11px;
}

dd {
	width:538px;
}

dt, dd {
	margin:0 11px 10px;
}

.wrapper div.wide {
	width:297px;
}

.wrapper div.short {
	padding-top:38px;
	width:219px;
}

/* header */
#header {
	width:820px;
	margin:0 10px 20px;	
	background:url(../images/bg_header.png) 100% 100% no-repeat;
}

#header h1, #header a, #header li {
	float:left;
	margin:0;
}

#header ul {
	float:right;
}

#header li a {
	width:72px;
	height:22px;
	margin-left:5px;
	background:url(../images/bg_menu.png) 0 0 no-repeat;
	text-indent:-20000px;
}

#header li.classes a {background-position:-72px 0;}
#header li.locations a {background-position:-144px 0;}
#header li.teachers a {background-position:-216px 0;}
#header li.gallery a {background-position:-288px 0;}
#header li.contact a {background-position:-360px 0;}
#header li.parties a {background-position:100% 0;}

#header li a:hover,
#header li a.active {background-position:0 100%;}

#header li.classes a:hover,
#header li.classes a.active {background-position:-72px 100%;}
#header li.locations a:hover,
#header li.locations a.active {background-position:-144px 100%;}
#header li.teachers a:hover,
#header li.teachers a.active {background-position:-216px 100%;}
#header li.gallery a:hover,
#header li.gallery a.active {background-position:-288px 100%;}
#header li.contact a:hover,
#header li.contact a.active {background-position:-360px 100%;}
#header li.parties a:hover,
#header li.parties a.active {background-position:100% 100%;}

/* teachers */
ul.teachers a {
	color:#999;
	font-size:1em;
	text-decoration:none;
}

ul.teachers.home a,
ul.teachers a.active,
ul.teachers a:hover {
	color:#000;
}

/* gallery */
div#gallery h1 {
	margin-left:23px;
}

div#gallery ul,
div#gallery ul li {
	float:left;
	display:inline;
}

div#gallery ul {
	clear:both;
	width:810px;
	padding:15px;
}

div#gallery ul li {
	margin:0 8px 10px;
}

div#gallery p {
	text-align:center;
}

/* parties */
img.parties {
    position:absolute;
    margin-top:20px;
}

/* boxes */
span.curve {
	float:left;
	display:block;
	width:258px;
	height:8px;
	background:url(../images/bg_curve.png) 0 0 no-repeat;
	font-size:0;
	line-height:0;
}

span.curve.bottom {background-position:0 100%;}

span.content {
	float:left;
	width:234px;
	padding:0 10px;
	border-left:#000 solid 2px;
	border-right:#000 solid 2px;	
	min-height:130px;
}

* html span.content {height:130px;}

span.content p, span.content h2{
	margin:0 0 10px 0;
}

.orange {background-color:#ff8300;}
.yellow {background-color:#fc0;}

.mustard {background-color:#fdbc38;}
.pink, .pink a {background-color:#d02245; color:#fff;}
.red, .red p a {background-color:#c60e0e; color:#fff; font-size:1em;}
.red p {font-size:.85em;}
.grey, .grey a {background-color:#424242; color:#fff;}
.grey h2 {line-height:1em;}