/*********************************************************************

	scratch.css
	Manning School for Girls

	This stylesheet is used for additional page styles and is responsible for
	the rounded edges in the firefox browser
	
**********************************************************************/

/*
#menu-wrap{
	position: relative;
	float: left;
	min-height: 200px;
	width: 170px;	
	margin-top: 30px;
	-moz-border-radius: 0px 30px 30px 30px;
	-webkit-border-radius: 0px 30px 30px 30px;
	border-radius: 0px 30px 30px 30px;
	background-color: #2D2D2D;
}
*/

.noScreen
{/* Use when you want something hidden on screen but visible when printing */
	display: none;
}

/*** 
	colors for the block content headers/footers 
***/
.col-01, .col-02, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08{
	color: #FFF;
	background-position: top;
	background-repeat: repeat-x;
}
.col-01{	
	background-image:url("/image/tiles/col-01.png");
}
.col-02{
	background-image:url("/image/tiles/col-02.png");
}
.col-03{
	background-image:url("/image/tiles/col-03.png");
}
.col-04{
	background-image:url("/image/tiles/col-04.png");
}
.col-05{
	background-image:url("/image/tiles/col-05.png");
}
.col-06{
	background-image:url("/image/tiles/col-06.png");
}
.col-07{ 
	background-image:url("/image/tiles/col-07.png");
}
.col-08{
	background-image:url("/image/tiles/col-08.png");
}
/*** block content **/
.block-content{
	position: relative;
	display: block;
	/*-moz-border-radius: 20px 20px 10px 10px;*/
	margin-bottom: 10px;
	background-color: #181818;
	background-color: #000000;
	background-image: url("/image/back-tile-diag.png");
	background-attatchment: fixed;
	background-repeat: repeat-x;
	background-position: top;
}
/*** generic block content styles (inheritted by the block-content-body) ***/
/*
.block-content-body p
{
	color: #EAEAEA;
	font-family: Arial, Helvetica, sans-serif;
/*	font-size: 13px;	*//*
	font-size: 100%;
	font-weight: 300;
	padding-top: 10px;
}
.block-content	a
{
	color:#B9F7FD;
	text-decoration:none;
	font-weight: bold;
	font-style:italic;
}
.block-content	a:hover
{
	text-decoration:underline;
}
*/
/*** 
	block-content header, body and footer markup divs
***/
.block-content-header
{
	/*-moz-border-radius: 20px 20px 0px 0px;*/
	border-bottom: 1px solid #1D1D1D;
	cursor: pointer;
}
.block-content-body
{
	min-height: 50px;
}
.block-content-footer
{
	bottom: 0;
	display: block;
	clear:both;
	margin-top: 10px;
	/*-moz-border-radius-: 0px 0px 30px 30px;*/
	background-color: #2A323A;
	/*-moz-border-radius: 0px 0px 10px 10px;*/
}
/*** 
	block-content-header styles
***/
	.block-content-header h1
,	.block-content-header p
{
	font-family: "Century Gothic", Arial;
	font-weight: 100;
/*	font-size: 17px; 	*/
	font-size: 130%;
	color: #FFF;
	min-height: 20px;
	padding: 2px 10px 2px 10px;
	text-transform: uppercase;
	text-shadow: #000 1px 1px 1px;
	margin-right: 30px;
	line-height: 1.0;
}

.block-content-header p
{
/*	font-size: 130%;
	color: #FFF; 
	text-shadow: #000 1px 1px 1px;*/
	text-transform:none;
}

/****
	block-content-footer styles 
***/
	.block-content-body h1, h1
,	.block-content-body h2, h2
,	.block-content-body h3, h3
,	.block-content-body h4, h4
,	.block-content-body h5, h5
,	.block-content-body h6, h6
{
	color: #E9E9E9;
	padding: 4px 15px 2px 15px;
	line-height: 1.5;
}

.block-content-body h1, h1{
/*	font-size: 20px;	*/
	font-size: 140%;
}
.block-content-body h2, h2{
/*	font-size: 18px;	*/
	font-size: 130%;
}
	.block-content-body h3
,	.block-content-body h4
,	.block-content-body h5
,	.block-content-body h6
{
	color: #ABABAB;
}
.block-content-body h3, h3{
	font-size: 110%;
}
.block-content-body h4, h4{
	font-size: 100%;
}
.block-content-body h5, h5{
	font-size: 90%;
}
.block-content-body h6, h6{
	font-size: 85%;
}

.block-content-footer h6{
	padding: 2px 0px 2px 0px;
	background:transparent;
	text-align: center;
	font-weight: 100;
	font-family: "Century Gothic", Georgia,"Verdana", Arial;
/*	color: #CDD2D6;
*/	
}



.block-content-body img{
	margin-bottom: 10px;
}

p.header-click 
{
	display: block;
	position: absolute;
	top: 0px;	
	right: 0px;
	width: 10px;
	height: 10px;
	margin: -5px;
	margin-right: 0px;
	cursor: pointer;
	padding: 10px;
}

/*** this selector overrides the img tag applied to any image that falls inside a block content ***/
img.img-full
{
	width: 80%;
	margin-left: 9%;
}
img.img-half
{
	width: 44%;
	margin-left: 3%;
	margin-right: 2%;
}
img.img-quarter{
	width: 22%;
	margin-left: 2%;
}
img.img-eighths{
	width: 10%;
	margin-left: 1%;
}
img.img-banner{
	width: 60%;
	margin-left: 20%;
}
h1.text-center
{
	text-align: center;
}
h3.text-yel
{
	color: #DC8505;
}
p.text-indent{
	margin: 10px 30px;
}
ol, ul{
	margin-bottom: 0px;
}
li, li,not_highlighted, li.not_highlighted a, li a{
/*	
	Changed by msf 08/11/2010 - default li should be compact
	margin-left: 50px;
	padding: 5px 0px;
	color: #D5D5D5;
	font-weight: bold;
	list-style: disc;
*/	
	margin-left: 0px;
	padding: 1px 0px;
	color: #D5D5D5;
	font-weight:inherit;
	list-style: none;
}
li.highlighted, li.highlighted a
{
	color:#CC0000;
	font-weight:inherit;
}

li.not_highlighted, li.not_highlighted a
{
/*	font-size:smaller; */
}

/****	default table styles	***/


table
{
/*	margin: 10px 10px 10px 30px; */
	margin: 5px auto; 
	background-color:#2D2D2D;
/*	border-collapse: collapse;	*/
	border-collapse:separate;
	border-spacing:0;
	font-family: Arial, Helvetica, sans-serif;
	width: 95%;
	background-color: #2A2A2A;
	float:none;
	clear:both;
	border-style: solid;
	border-color: #040404;
	border-width: 0px 1px 1px 0px;
}

tr, th, td
{
	padding: 8px;
	margin: 0px;
/*	border: 1px solid #040404; 
	border: 1px 0px 0px 1px;
*/
	border-style: solid;
	border-color: transparent;
	border-top-color: #040404;
	border-left-color: #040404;
	border-width: 1px 1px 1px 1px;

	line-height: 1.0;
	color: #D5D5D5;
	text-align: left;
}
tr:hover, th:hover,	tr:hover > td, tr:hover > td.th
{
	background-color:#3F3F3F;	
	opacity: 0.9; 
}

table.selector
{
}
td.selector, th.selector, td.th.selector
{
}
td.selected, th.selected, td.th.selected
{
	background-color:#3F3F3F;
	border-color:#E7E7E7;
	border-width: 1px 1px 1px 1px;	
}

tr:hover > td.selected, tr:hover > td.th.selected
{
	background-color:#545454;
}

/* Table header cells */
/* use td class = 'th' if you want a cell to have these styles. */
th, td.th
{
	font-size: 110%;
	background-color: #191919;
	color: #FDFDFD;
	overflow: hidden;
	font-weight: bold;
}

tr:hover > td.th
{
	background-color:#2E2E2E;
}

th.align_left, 		td.align_left, 		.align_left		{	text-align:left;	}
th.align_right,		td.align_right,		.align_right	{	text-align:right;	}
th.align_center,	td.align_center,	.align_center	
, th.align_centre,	td.align_centre,	.align_centre	{	text-align:center;	}

width_auto, table.width_auto
{
	width: auto;
	margin: 5px auto;
}

table.width_auto
{
	margin: 5px;
}

.table input
{
	background-color:#2D2D2D;
	color: #C0C0C0;
	border: none;
	padding: 5px;
	width: 90%;
	margin: auto;
}

input.red, input.amber, input.green
{
	position:absolute;
	display:inline;
	float:right;
	width:15px;
	text-align:center;
	margin: 0px 0px 0px 4px;
	padding: 1px 0px 3px 0px;
}

select.red,		input.red,		.red,	td.red		{	background-color:#FF0000;	color:#000000;	background-image:url(/image/tiles/rag_red.png)}
select.red_1,	input.red_1,	.red_1,	td.red_1	{	background-color:#FF0000;	color:#FFCC00;	background-image:url(/image/tiles/rag_red.png)}
select.red_2,	input.red_2,	.red_2,	td.red_2	{	background-color:#FF0000;	color:#339900;	background-image:url(/image/tiles/rag_red.png)}
select.amber,	input.amber,	.amber,	td.amber	{	background-color:#FFCC00; 	color:#000000;	background-image:url(/image/tiles/rag_amber.png)}
select.green,	input.green,	.green,	td.green	{	background-color:#339900;	color:#000000;	background-image:url(/image/tiles/rag_green.png)}
select.light,	input.light,	.light,	td.light	{	background-color:#393939; 	}
select.dark,	input.dark,		.dark,	td.dark		{	background-color:#090909;	}


span.red					{	color:#FF0000;	background-color:#000000;	}
span.red_1					{	color:#FF0000;	background-color:#FFCC00;	}
span.red_2					{	color:#FF0000;	background-color:#339900;	}
span.amber					{	color:#FFCC00; 	background-color:#000000;	}
span.green					{	color:#339900;	background-color:#000000;	}
span.light					{					background-color:#393939;	}
span.dark					{					background-color:#090909;	}

span.red,	
span.red_1,	
span.red_2,	
span.amber,	
span.green, 
.inline_rag
{
	background-color:transparent;
	padding: 2px 4px;
	margin: 0px 4px 0px 0px;
	background-image:none;
}

#save_message
{
	display: inline;
	float: left;
	color:yellow;
	padding: 7px 4px 0px 4px;
}

#save_message:hover
{
	cursor: pointer;
	color:pink;
	text-decoration:underline;
}

img.table-icons-small
{
	display: block;
	width: 20px;
	margin: 0 auto;
	cursor: pointer;
}

/*********************************************************************
	
	popup screen functions (controlled by the javascript Screen object
	
	#blackout is a <div> which is used in combination with the 
	'popup' windows. When the blackout div is set to display,
	it will cover the entire page and switch the users attention
	to the popup window shown
	
**********************************************************************/

#blackout{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	display: none;
	background-color: black;
	cursor: pointer;
}
#popup-wrap{
	position: absolute;
	top: 15%;
	left: 50%;
	display: none;
}
.popup-wrap p{
	line-height: 1.3;
	text-align: left;
}
.popup-1{
	width: 400px;
	min-height: 300px;
	margin-left: -200px;
	display: none;
}
.popup-2{
	width: 500px;
	min-height: 300px;
	margin-left: -250px;
	display: none;
}
.popup-3{
	width: 600px;
	min-height: 400px;
	margin-left: -300px;
	display: none;
}
.popup-4{
	width: 800px;
	min-height: 400px;
	margin-left: -400px;
	display: none;
	background-color: yellow;
}
.popup-flashVideo{
	width: 720px;
	height: 480px;
	margin-left: -360px;
	background-color: #181818;
	display: none;
	border: 1px solid #181818;
}

h1.text-comp{
	font-size: 20px;
	color: green;
	margin: 0px 20px;
	background-color: #000;
	display: block;
	font-family: "Courier New";
}
span.blink{
	text-decoration: blink;
}
.click-link{
	display: block;
	text-align: center;
	background-color: #191919;
	border: 1px solid #011;
	margin: 5px 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	cursor: pointer;
	clear: both;
	background-image:url("/image/tiles/back-01.png");
}
.click-link:hover{
	background-image:url("/image/tiles/back-01-hover.png");
}
h1.click-link{
	font-family: "Century Gothic", Arial;
	font-weight: 100;
	font-size: 115%;
	color: #FFF;
}


/*********************************************************************

	Public appliction styles

	This section contains the styles for public applications. These
	are class-based applications that have public member functions 
	that require styling outside of the existing block system 
			
**********************************************************************/


/****
	classVote
***/

.block-cand{
	display: inline;
	float: left;
	width: 90%;
	margin: 1px 20px;
}
.block-cand h1{
	float: left;
/*	font-size: 14px; */
	font-weight: bold;
	color: #0080FF;
}
.block-cand p{
	clear: none;
/*	font-size: 13px; */
	color: white;
}
.block-content-body-infocus{
	background-color: #181818;
	cursor:pointer;
}
.block-content-body-nofocus{
	background-color: #222222;
}
.block-cand input{
	background-color: #222222;
	color: #1874CD;
	padding: 5px;
	border: 1px solid gray;
	margin-right: 20px;
	margin-top: 10px;
	margin-left: 20px;
	margin-bottom: 10px;
}
input.vote-button{
	cursor: pointer;
	border: 1px gray;
}
input.vote-button:hover{
	background-color: #424242;
}
p.vote-strong{
	color: #FF0080;
	font-weight: bold;
	font-size: 130%;
}
div.vote-hidden{
	display: none;
}
div.vote-show{
	display: block;
}
tr.vote-row-on{
	background-color:#191919;
	border: 3px solid #FFF;
}

/****
	classFeedback
***/

#feedback-wrap{
	width: 90%;
	margin-left: 5%;
	margin-top: 10px;
}
#feedback-wrap textarea{
	width: 100%;
	height: 100px;
	padding: 5px;
	overflow: auto;
	border: 1px solid #011;
	background-color: #181818;
	color: #FFFF00;
	font-family: Cursive, Arial;
	font-size: 100%;

}
#feedback-response{
	font-size: 120%;
	float: left;
}
p.normal{
	color: #FFF;
	font-weight: 100;
}
p.exceeded{
	color: #FE1010;
	font-weight: bold;
}
button{
	float: right;
	margin: 2px -12px 2px 0px;
	width: 200px;
	background-color: #969696;
	border: 1px solid #011;
	padding: 2px;
	cursor: pointer;
}
#feedback-button:hover{
	background-color: #FFFF00;
}
#feedback-confirmation{
	width: 200px;
	height: 200px;
	margin-left: -100px;
}
#feedback-comment-form{
	display: none;
}
#feedback-button{

}
#feedback-thanks{
	width:400px;
	height: 200px;
	background-color: red;
	margin-left: -200px;
	display: none;
}

/************************************************/

.div-show{
	display: block;
}
.div-hide{
	display: none;
}
.showHideIndicator{
	position: relative;
}

/************************************************/

.file-icon{
	position: relative;
	min-width: 128px;
	float: left;
	margin-left: 5px;
	background-color: #1D1D1D;
	cursor: pointer;
}
.file-icon:hover{
	background-color: #2F386A;
}
.file-icon img{
	display: block;
	width: 100px;
	margin: 0 auto;
	border: none;
}
.file-icon p{
  display: block;
  color: #FFF;
  text-align: center;
  font-family: arial;
  padding: 2px;
}

/************************************************/
/*
	CMS Modular Blocks - Individual Styles
	
	module blocks appear on the right hand side
	of the home page and contain important
	information about the school. Content is provided
	to the module blocks via xml data
*/

.module-blocks
{
	margin: 0px;
	padding: 0px;
	font-size: 100%;
}
.module-blocks p
{
	padding: 0px;
}
/*************************************** module block lists */
ul.module-blocks{
	margin-top: 10px;
	margin-bottom: 10px;
	width: 90%;
	margin-left: 5%;
}
.module-blocks li{
	list-style: none;
	padding: 2px;
	margin: 2px;
	color: #FFFFFF;
	font-weight: 100;
}
/** used in the 'About Us' module block **/
ul.module-list{
	margin: 5px 5px 5px -5px;
	padding: 0px;
	list-style: disc;
}
.module-list li{
	font-size: 100%;
	font-weight: 100;
	padding: 3px 20px;
}
ul.multi-column, ol.multi-column
{
  width: 90%;  /* room for 3 columns */
  list-style:katakana;
}
ul.multi-column li, ol.multi-column li
{
	font-size:75%;
	float: left;
	width: 30%;  /* accommodate the widest item */
	list-style-type: none;
	padding: 0px 0px 4px 0px;
}
/*************************************** module blocks - images */
img.module-news{
	position: relative;
	display: block;
	height: auto;
	width: 150px;
	float: left;
	margin: 2px 10px 2px 10px;
}
img.module-image{
	width: 80%;
	margin-left: 9%;
}
#image-lightbox{
	width: 800px;
	height: 400px;
	margin-left: -400px;
	background-color: red;
}
img.module-icon{
	width: auto;
	height: 20px;
	margin: 0px;
	padding: 0px;
	clear: none;
	float: none;
	border: none;
}
/*************************************** module blocks - anchors and hyperlinks*/
.module-blocks a{
	font-style: normal;
	margin: 1px;
	padding: 5px;
	color: #EAEAEA;
	margin-left: 10px;
}
.module-links a{
	font-size: 80%;
	padding: 0px;
	margin: 0px;
}
h1.module-links{
	padding: 0px;
	margin: 0px;
}
a.show-more{
	display: block;
	margin: 0px 10px 10px 20px;
	font-size: 95%;
	font-weight: bold;
	color: #0080FF;
	font-style: normal;
}
/*************************************** module blocks - tables*/
table.module-table
{
	font-size: 85%;
	margin: 5px auto;
/*	
	width: 95%;
	background-color: #252525;
	border: 1px solid #181818;
*/	
}
.module-table td
,.module-table th	{	padding: 4px;	}
/*.module-table tr
{
	border-bottom: 1px solid #181818;
}

.module-table-header
{
	background-color: #0D0D0D;
	font-family: "Century Gothic";
	font-weight: bold;
}
*/

table.compact
{
	margin:5px;
	font-size: 85%;
}

.compact tr, .compact th, .compact td
{
	padding: 4px 2px;
}

.compact th
{
	padding: 4px 4px;
}


.menu-item h2
{
	padding: 2px;
	color: #FFF;
	margin-left: 5px;
	font-style: normal;
	font-size: 14px;
	text-transform: uppercase;
}
.menu-item h2:hover
{
	color: #2D96FF;
}

/********************************************* module blocks*/
.cancelled, td.cancelled, td.cancelled.th, th.cancelled, th.cancelled
			{	color: #FF6A6A;					}
.inline		{	display:inline;					}
.strike		{	text-decoration: line-through;	}
.hidden 	{	display:none;					}
/*** 	.clear-none class used to remove the clear setting on elements ***/
.clear-none	{	clear: none;	}
.clear-both	{	clear: both;	}