/*------------------------------------------------------------------------
Style sheet for Pointe Rocks http://www.pointerocks.co.uk
Author: Clive Walker
Website: http://www.cvwdesign.co.uk
--------------------------------------------------------------------------*/

/* Reset 
------------------------------------------------- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
}

fieldset, img {
	border: 0;
}

/* Base rules for html, body 
------------------------------------------------ */

html { overflow: -moz-scrollbars-vertical;
       overflow-y: scroll; 
} /* fix scrollbar jump for IE8 and Firefox */

body {
	font: 62.5%/1.6 "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	background: /*#EF3624*/ #EE2E23;
	text-align: center;
	color: #EFEFEF;
}

/* Main layout elements, you know who you are
------------------------------------------------ */

#outerWrapper {
	margin: 0px auto 0;
	max-width: 97em;
} 

#wrapper {
	min-width: 600px;
	margin: 0 auto;
	text-align: left;
}

#header {
	height: 288px;
	background: #EE2E23;
	position: relative;
}
#strapline {
	position: absolute;
	top: 80px;
	right: 30px;
	width: 400px;
}

#content {
	float: right;
	width: 100%;
	-moz-border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	padding-bottom: 10px;
	behavior: url(css/PIE.htc);
	background: #EE2E23;
}

#mainContent {
	width: 63%;
	margin: 0;
	float: left;
	padding-top: 25px;
	padding-left: 20px;
	background: #EE2E23;
}

#secondaryContent {
	width: 33%;
	display: inline; /* :IE double margin float bug */
	float: right;
	background: #EE2E23;
} 

#footer {
	clear: both;
	padding: 10px 20px 20px 15px;
	border-top: 0px solid #F05525;
	background: #EE2E23;
	text-align: right;
	color: #666;
	font-size: 1.1em;
} 

/* Link styles 
------------------------------------------------ */

a:link, a:visited {
	color: #FEF102;
	text-decoration: underline;
}

a:hover, a:focus {
	color: #FFF;
	text-decoration: none;
}

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

#footer a:link, #footer a:visited {
	color: #CCC;
	text-decoration: none;
}

.extra-info a:link, .extra-info a:visited {
	color: #EE2E23;
}

/* Navigation 
------------------------------------------------ */

#navigation {
	float:left;
	width:100%;
	background:#EE2E23;
	font-size:100%;
	line-height:normal;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	behavior: url(css/PIE.htc);
	border: 0px solid #D61A10;
}

/* Tablist navigation with funky CSS3 rounded corners
-----------------------------------------------------*/

#tablist {
    list-style:none; 
    height:2em;
	padding:10px 10px 0;
}

#tablist li {
    float:left; 
    margin-right:0.3em; 
}

#tablist li a {
	display:block;
	padding:0.4em 1em;
	text-decoration:none;
	color:#000;
	background-color:#ccc;
	-webkit-border-radius: 0.50em 0.5em 0 0;
	-moz-border-radius:0.50 0.5em 0 0 em;
	border-radius:0.50em 0.5em 0 0;
	behavior: url(css/PIE.htc);
	border: 0px solid #D61A10;
}

#tablist li a:hover {
    background: #FEF200;
	color:#777;
    text-decoration:none;
}

#tablist li.about a {
	color: #FFF;
	background: #F25E22;
}

#tablist li.home a {
	color: #333;
	background: #FC0;
}

#tablist li.teacher a {
	background-color: #36F;
	color: #FFF;
}

#tablist li.timetable a {
	background-color: #C39;
	color: #fff;
}

#tablist li.fees a {
	background-color: #69ac3b;
	color: #fff;
}

#tablist li.venue a {
	color: #fff;
	background: #F6F;
}

#tablist li.news a {
	color: #fff;
	background: #00C;
}

#tablist li.contact a {
	background-color: #1c94f3;
	color: #fff;
}

#tablist li.home a:hover, #tablist li.about a:hover, #tablist li.teacher a:hover, #tablist li.timetable a:hover, #tablist li.fees a:hover, #tablist li.venue a:hover, #tablist li.contact a:hover, #tablist li.news a:hover {
	background: #FEF200;
	color:#777;
}

/*Paddings
------------------------------------------------ */

#secondaryContent {
  padding-top: 25px;
}

#column1 *, #secondaryContent * {
  padding-left: 15px;
  padding-right: 20px;
}

#column1 * {
  padding-left: 0;
  padding-top: 5px;
  padding-right: 0;
}

#column1 * *, #secondaryContent * * {
  	padding-left: 0;
  	padding-right: 0;
}

/* Headings 
------------------------------------------------ */

h1, h2, h3, #mainContent .contact {
	font-weight: normal;
	border-bottom: 1px solid #D61A10;
	padding-bottom: 5px;
	color: #EFEFEF;
}

h1, h2, h3, p {
  	margin: 1em 0;
}

h1 {
	font-size: 1.7em;
	margin-top: 0;
}

h2 {
	font-size: 1.5em;
	border-bottom: 1px solid #F25E22;
}

h3, #mainContent .contact {
	font-size: 1.4em;
}

h2.timetable-heading {
	border: 0;
	border-top: 1px solid #F25E22;
	padding-top: 5px;
}

h2.noborder {
	border: 0;
}

/* Text 
------------------------------------------------ */

p, li {
  	font-size: 1.3em;
}

blockquote {
	border: 1px solid #EFEFEF;
	background: #FF0;
	color: #666;
	margin-left: 20px;
	padding-right: 10px;
	padding-left: 10px;
	position: relative;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(css/PIE.htc);
	margin-bottom: 20px;
	text-align: right;
}

.callout {
	position: absolute;
	height: 30px;
	margin-left: -20px;
	left: 0px;
	top: 10px;
	width: 20px;
	background: #EE2E23 url(../images/left-arrow-callout.gif) no-repeat right center;
}

#footer {
	color: #EFEFEF;
}

#header h1 {
  	margin: 0;
}

#secondaryContent h2 {
	font-size: 1.5em;
	margin: 0;
}

#column1 h2 {
	color: #808080;
	font-size: 120%;
	margin-top: 0px;
	line-height: 1.1em;
	border-bottom: 1px solid #EDEDE5;
	padding-bottom: 5px;
}

#column1 strong {
	color: #000;
}

#mainContent p, #secondaryContent p {
	line-height: 1.4em;
	font-size: 1.3em;
}

#mainContent ul, #secondaryContent ul {
	font-size: .75em}

#content li {
	margin-left: 20px;
	list-style: disc;
	margin-bottom: 5px;
}

#mainContent ul > li > p, #secondaryContent ul > li >p {
	margin: .5em
}

#address {
	margin-left: 0px;
	margin-right: 0px;
	border-top: 4px solid #EDEDE5;
	border-right: 1px solid #EDEDE5;
	border-bottom: 4px solid #EDEDE5;
	border-left: 1px solid #EDEDE5;
	padding-top: 10px;
	margin-bottom: 25px;
}

#secondaryContent .extra-info {
	background: url(../images/star-bg.jpg) no-repeat left top;
	color: #666;
	min-height: 150px;
	padding: 80px 105px 50px 70px;
	font-weight: bold;
	text-align: center;
}

#secondaryContent .top {
	padding-top: 100px;
}

/* Text 
------------------------------------------------ */

small {
	font-size: 1.1em;
}

/* Images 
------------------------------------------------ */

.max, img {
	max-width: 100%;
}

#dcmsmap12-0 img { max-width:none; } /*fix for non display of google maps streetview icon*/

#secondaryContent .featured, #mainContent .featured, #secondaryContent .featured-text {
	padding: 5px;
	background: #FF0;
	/*border: solid 1px #DDD;*/
	/*behavior: url(css/PIE.htc);*/ /*removed because causes image disappearance in IE8*/
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#secondaryContent .featured-text {
	color: #F25E22;
	font-size: 200%;
	text-transform: capitalize;
	padding: 20px 40px;
}

#secondaryContent .featured-text span {
	text-transform: capitalize;
	color: #EE2E23;
	font-weight: bold;
}

/* Buttons
-----------------------------------------------------*/

/* -- from Web Designer Wall -- */

#secondaryContent .button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 5px 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: 0.5em 3em 0.55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.button:link, .button:visited {
	color: #FFF;
}

.button:hover {
	text-decoration: none;
}

.button:active {
	position: relative;
	top: 1px;
}

.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
}

.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}

/* color styles 
---------------------------------------------- */

/* green */
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
	background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
	/*filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');*/
}
.green:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
	background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
	/*filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');*/
}

.green:active {
	color: #a9c08c;
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
	background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
	/*filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');*/
}

/* Tables  - not used in final version
------------------------------------------------ */

table {
	border-collapse: collapse;
	font-size: 1.3em;
	border: 0;
	}

th {
	text-align: left}
	
td {
	vertical-align: top;
}

/* News page 
------------------------------------------------ */

#mainContent .date, #mainContent .vcard { 
	font-size: 1.1em;
}

/* Others 
------------------------------------------------ */

.fleft {
	float: left;
	margin-right: 10px;
}

ul.fleft {
	width: 60%;
	margin-bottom: 1.5em;
}

p.fright {
	width: 35%;
	margin-top: 0;}

.centered {
	text-align: center;
}
.fright {
	float: right;
	margin-left: 10px;
}

.clearboth {
	clear: both;
}
 
/* The Contact form
----------------------------------------*/

form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
	margin: 0;
	padding: 0;
	/*min-width: 500px;*/
	max-width: 600px;
	width: 95%;
	font-size: 120%;
}

form fieldset {
	padding: 10px;        /* padding in fieldset support spotty in IE */
	margin: 0;
	border-top: 1px solid #F25E22;
	border-right: 2px solid #F25E22;
	border-bottom: 2px solid #F25E22;
	border-left: 1px solid #F25E22;
}

form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 200px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}

form fieldset legend {
	font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
	color: #CCC;
                       /* be careful with padding, it'll shift the nice offset on top of border  */
}

form input, form textarea, form select {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width:auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
	padding: 3px;
	border: 1px solid #FFF;
}

form input:focus, form textarea:focus { /*on focus*/
	border: 1px solid #666;
	padding: 3px;
}

form input#submit {
	padding: 5px; /* set padding */
}

textarea { overflow: auto; }

form small {
	display: block;
	margin: 0 0 5px 210px; /* instructions/comments left margin set to align w/ right column inputs */
	padding: 1px 3px;
	font-size: 100%;
	color: #EFEFEF;
}

form .required {font-weight:bold;} /* uses class instead of div, more efficient */

form br {
	clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}


/* Media queries
----------------------------------------*/

/*Intermediate [tablet] screen size*/

@media screen and (max-width: 767px) {

#header { /*make the header deeper to accommodate different strapline position*/
	height:405px
}

#strapline { /*move the strapline below the logo*/
	top: 270px;
	right: 0px;
	width: 95%;
}

}

/* Original elastic layout has min-width = 600px, therefore add 599px media query for smaller devices*/

@media screen and (max-width: 599px) {
	
#content, #mainContent, #secondaryContent, p.fright, ul.fleft { /*remove floats, set widths*/
	float: none;
	width: 95%;
}

#wrapper {/* reset min-width*/
	min-width: 100px;
}

#mainContent, #secondaryContent  { /*change paddings*/
	padding-left: 20px;
}

#content { /*change paddings*/
	padding-top: 40px;
}

#navigation {
	margin-bottom:20px; /*more bottom margin*/
}

form label { /*make the form labels fit above the fields*/
	float: none;
	text-align: left;
}

form small { /*move the form field 'note' to the left*/
	margin-left: 10px;
}

}

/*Smallest screens*/

@media screen and (max-width: 320px) {

#header { /*make the header deeper to accommodate different strapline position*/
	height:320px
}

#strapline { /*move the strapline below the logo*/
	top: 220px;
	right: 0px;
	width: 95%;
}

}