/* CSS for Hyperion, main web information */
/* Import in separate CSS stylesheets for different sections -- keeping things tidy */
/* For the right-hand boxes */
@import url(boxy.css);
/* For About ncn */
@import url(sections/aboutncn.css);
/* For generic pages, i.e. Prospectuses, Accessibility, etc. */
@import url(sections/generic.css);
/* For HE */
@import url(sections/he.css);
/* For Hair & Beauty Salons */
@import url(sections/salons.css);
/* For Enterprise Business Group */
@import url(sections/ebg.css);
/* For Adams Restaurant */
@import url(sections/adams.css);
/* For 14-16 */
@import url(sections/1416.css);
/* For International */
@import url(sections/int.css);
/* For High Pavement */
@import url(sections/hp.css);
/* For Full-Time */
@import url(sections/fulltime.css);
/* For Part-Time */
@import url(sections/parttime.css);
/* For ncnatwork */
@import url(sections/ncnatwork.css);
/* For Schools */
@import url(sections/schools.css);
/* For Your Look Salon */
@import url(sections/yourlook.css);
/* For Lace Market Gallery */
@import url(sections/gallery.css);
/* For ncn Arts Centre */
@import url(sections/artscentre.css);
/* For ncn Arts Centre */
@import url(sections/green.css);
/* for green area*/
@import url(sections/exams.css);
/* for exams area*/
@import url(sections/apprenticeships.css);
/* for apprenticeships area
 *
 Tags
 *
 */
/* firefox scroll bar fix*/
html { overflow: -moz-scrollbars-vertical; }
body {
background: #efefef url(/images/gradients/background_grad.jpg) repeat-x 0 0;
font-family:Arial, Helvetica, Sans-Serif;
font-size:small;
}
p {
padding: 0px 0px 8px 0px; 
}
a:link {
color: #006;
}
a:visited {
color: #606;
}
a:hover, a:focus {
color: #900;
}
a:active {
color: #c00;
}
/* Your basic img as a link no-border routine */
a img {
border: 0;
text-decoration: none;
}
/* Headlines. <h1> is used for the title bars.*/
h1 {
font-size: 150%;
padding-left: 20px;
}
h2 {
font-size: 115%; 
padding: 10px 0 10px 20px;
margin: 0;
}
h3 {
font-size: 100%;
padding: 10px 0 10px 20px; 
margin: 0;
}
h4 {
font-size: 90%;
padding: 0 0 15px 20px; 
margin: 0;
}
/* Definition List Hacks - only use a definition list when they are actual definitions! */
dl {
margin: 10px;
}
dl dt {
font-weight: bold;
float: left;
padding-right: 0.5em;
}
dl dd {
padding: 0 1em 0.5em 1em;
margin: 0;
}
/* Internet Explorer PNG fix.  */   
img, div { 
/*behavior: url(/js/iepngfix.htc) */
}

/* 
 *
 Standard Website Housekeeping
 *
 */
/* Positioning */
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
/* Text Formatting */
.small {
font-size: 80%;
}
/* Image floating */
.img {
padding: 0px 0px 3px 7px;
float:right;
}
.imgl {
padding: 0px 8px 3px 13px;
float:left;
}

.imgradio {
padding: 10px 8px 3px 10px;
float:left;
}

.imgla {
padding: 4px 5px 0px 0px;
float:left;
}
/* Clears */
.clearleft {
clear: left;
}
.clearright {
clear: right;
}
.clearboth {
clear: both;
}

/* List Style Hacks - for when the regular OL and UL just aren't right */
/* <ol class="lroman">: i, ii, iii */
ol.lroman {
list-style-type: lower-roman;
}
/* <ol class="uroman">: I, II, III */
ol.uroman {
list-style-type: upper-roman;
}
/* <ol class="lalpha">: a, b, c */
ol.lalpha {
list-style-type: lower-alpha;
}
/* <ol class="ualpha">: A, B, C */
ol.ualpha {
list-style-type: upper-alpha;
padding-left: 40px; 
}
/* <ul class="disc">: Standard UL disc */
ul.disc {
list-style-type: disc;
}
/* <ul class="circle">: Circles */
ul.circle {
list-style-type: circle;
}
/* <ul class="square">: Squares */
ul.square {
list-style-type: square;
}
/* Microformats hacks - to make them look pretty and work */
/* hCard hack - Outlook doesn't add the telephone number unless it's <span class="tel"><span class="type">Work</span> 011111</span>.  This lets you add in the type without everyone having to see it. */
.vcard span.type {
display: none;
}
.vcard span.title {
font-weight: normal;
font-size: 100%;
}

/* 
 *
 Builder Page Properties
 *
 */
#page_prop_box1{
width: 811px;
color:#666;
background:url(/images/hyp_builder/page_properties/page_mod_mid.gif) repeat-y;
}
#page_prop_box1 .cap {
height:12px;
margin:0;
}
#page_prop_box1 .cap.top {
height:5px;
background:url(/images/hyp_builder/page_properties/page_mod_top.gif) no-repeat top left;
padding: 0;
}
#page_prop_box1 .cap.bottom {
height:5px;
background:url(/images/hyp_builder/page_properties/page_mod_bttm.gif) no-repeat bottom left; 
padding: 0;
}
div#page_prop_box1 div {
padding: 0 10px;
}

/* 
 *
 Basic Layout
 *
 */
.WebDefault{
width:966px;
margin:0 auto;
padding: 0;
border-left:  solid 1px #dedeff;
border-right:  solid 1px #dedeff;
border-bottom:  solid 1px #dedeff;
background: #fff;
}
.WebDefault .pageHeader {
/*background-color:#efefef; */
}
/* Top Navigation Bar */
div.MyTab {
padding: 0px;
margin: 0px;
}
div.MyTab li span.rtsIn {
margin: -2px 0px 0px 0px;
padding: 0 5px;
}
/* Main sections */
.WebDefault .container {
margin: 0;
padding: 0;
}
.WebDefault .banner {
width: 100%;
margin: 0;
padding: 0;
height: 150px;
z-index:54 !important;
}
.WebDefault .pageNavigation { 
float: left;
margin: 5px 0 5px 0;
padding: 0;
width: 175px;
display: block;

}

.WebDefault .pageContent {
padding: 0 0 0 0; /*0 0 0 175px;*/
margin: 0 0 0 175px;
}
/* Footer */
div.footer {
clear:  both;
width: 940px;
margin: 0px 0 15px 5px;
display: block;
font-size: 75%;
overflow: auto;
}
div.footer ul {
margin: 0;
padding: 0;
list-style: none;
}
div.footer ul li {
padding: 0 5px;
margin: 0;
float: left;
border-right: 1px solid #999;
}
div.footer ul li a:link {
color: #333;
text-decoration: none;
}
div.footer ul li a:visited {
color: #333;
text-decoration: none;
}
div.footer ul li a:focus, div.footer ul li a:hover, div.footer ul li a:active {
color: #333;
text-decoration: underline;
}
div.footer ul li.last {
border: 0;
}
div.footer ul.vcard li {
border: 0;
color: #666;
}
/* Bounding box - grey-white, 780 pixels wide */
#fw_box1 {
width: 780px;
color:#666;
background:url(/images/box/fullwidth/box_mid.gif) repeat-y;
}
#fw_box1 .cap {
margin:0;
padding: 0;
}
#fw_box1 .cap.top {
height:5px;
background:url(/images/box/fullwidth/box_top.gif) no-repeat top left;
padding: 0;
}
#fw_box1 .cap.bottom {
height:15px;
background:url(/images/box/fullwidth/box_bttm.gif) no-repeat bottom left;
padding: 0;
}
div#fw_box1 div {
padding: 0 10px;
}
div#fw_box1 p {
margin: 0px 12px 8px 20px;
}
/* Bounding box - grey-white, 600 pixels wide */
#nw_box1{
width: 600px;
position:relative;
color:#666;
background:url(/images/box/normalwidth/nw_box_mid.gif) repeat-y;
margin: 0 0 10px 0;
}
#nw_box1 p {
margin: 0px 12px 8px 20px;
}
#nw_box1 .cap {
margin:0;
padding: 0;
}
#nw_box1 .cap.top {
height:5px;
background:url(/images/box/normalwidth/nw_box_top.gif) no-repeat top left;
padding:0;
}
#nw_box1 .cap.bottom {
height:15px;
background:url(/images/box/normalwidth/nw_box_bttm.gif) no-repeat bottom left;
padding: 0;
}
div#nw_box1 div {
padding: 0 10px;
}
/* Right column to go with #nw_box1 */
#rightCol {
padding: 0;
position:relative;
float: right;
width: 180px;
margin: 0;
display:inline;
}
/* Search Box on every page */
div.searchform {
height: 30px;
padding: 0px;
margin: 0px 10px 0px 10px ;
width: 150px;

}
div.searchform label {
width: 30px;
height: 30px;
margin: 0;
padding: 0;
float: left;
display: block;
position: relative;
}
div.searchform input {
border: 0;
}
div.searchform .searchtext {
background: #f9f9f9;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
height: 15px;
width: 90px;
margin: 5px 0 8px -10px;
padding: 2px 2px 3px 8px;
float: left;
}
div.searchform div.searchbutton {
padding: 1px 0;
border: 1px solid #ccc;
border-left: 0px;
width: 30px;
height: 14px;
padding: 3px 0 3px 0;
margin: 5px 0 9px -1px;
float: left;
}
/* Title Bars */
/* This applies the black background with white text. */
#dark_title {
background:url(/images/titlebars/dark_title.jpg) top left;
position: relative;
font-weight: bold;
color: #fff;
font-size: 115%;
padding: 2px 0 2px 10px;
margin: 5px 0 10px 0;
}
/* This applies the grey-blue background with white text. */
#greyblue_title {
background:url(/images/titlebars/greyblue_title.jpg) top left;
position:relative;
left:1px;
font-weight:bold;
color: #fff;
padding: 2px 0 2px 10px;
margin: 5px 0 10px 0;
font-size: 115%; 
}





/* This applies the light blue-grey background with black text. */
#light_title {
background:url(/images/titlebars/light_title.jpg) top left; 
position:relative; 
font-weight:bold;  
color: #000;  
font-size: 115%;
padding: 2px 0 2px 10px;
margin: 5px 0 10px 0;
}
/* This applies the pale grey background with dark grey text. */
#offgrey_title {
background: url(/images/titlebars/offgrey_title.jpg) top left;
font-weight: bold;
position: relative;
color: #333;
font-size: 115%;
margin: 5px 0 10px 0;
padding: 2px 0 2px 10px;
}

/* 
 *
 Particular Items used regularly around the site
 *
 */
/* The basic tables */
#table4 {
	border: 1px solid white;
	border-collapse: collapse;
	width: 90%;
	margin-left:25px; margin-bottom:20px;
}
#table4 td {
	border: 1px solid white;
	text-align: left;
	padding: 0.25em 0.5em;

		background-color:#EFF9DD;
}
#table4 th{
	border: 1px solid white;
	background-color:#7E9C40;
	text-align: left;
	padding: 0.25em 0.5em;
	color: #fff;
}


#table3 {
	border: 1px solid silver;
	border-collapse: collapse;
	width: 90%;
	margin-left:25px; margin-bottom:20px;
}
#table3 td {
	border: 1px solid silver;
	text-align: left;
	padding: 0.25em 0.5em;

		background-color:#ECF5FF;
}
#table3 th{
	border: 1px solid silver;
	background-color:#8e8e8e;
	text-align: left;
	padding: 0.25em 0.5em;
	color: #fff;
}
#table2 {
width: 95%; 
border: 1px solid silver;
border-collapse: collapse;
margin: 5px auto 10px auto;
color: #036;
}
#table2 tr {
color: #036;
}
#table2 td {
border: 1px solid silver;
padding: 0.25em 0.5em;
border-collapse: collapse;
color: #036;
}
#table2 th {
border: 1px solid silver;
background-color: #d8dde2;
text-align: left;
padding:0.25em 0.5em;
color: #036;
}
#table1, .table1 {
margin: 1em;
border-collapse: collapse;
width: 90%;
}
#table1 caption, .table1 caption {
font-weight: bold;
padding: 0.5em 0;
text-align: left;
}
#table1 td, .table1 td {
padding: 0.5em;
border: 1px solid #666;
}
#table1 th, .table1 th {
padding: 0.5em;
border: 1px solid #666;
text-align: left;
background: #ECEFF0;
}
#table1 td.noborder, .table1 td.noborder {
border: 0;
}
/* Student Profiles - for whenever the HE profiles are used on other pages */
ul.profiles {
list-style: none;
}
ul.profiles li {
width: 45%;
float: left;
display: block;
margin: 0 5px;
padding: 10px 5px 20px 5px;
}
ul.profiles img {
float: left;
margin-right: 10px;
border: 1px solid #333;
}
ul.profiles li strong {
font-weight: normal;
display: block;
margin-top: 40px;
}
/* Videos */
ul.video {
list-style: none;
margin: 0 auto;
padding: 0;
width: 550px;
color: #333;
}
ul.video li {
float: left;
width: 225px;
height: 250px;
margin: 0 10px;
padding: 0;
font-size: 80%;
}
ul.video li h4 {
margin: 0 0 2px 0;
padding: 0;
font-size: 120%;
}
ul.video li a {
display: block;
margin-bottom: 2px;
text-decoration: none;
}
/* Powered by Google logo */
div.google {
margin: 5px 0;
padding: 0;
text-align: left;
}
div.google a {
padding: 5px 50px 5px 0;
margin: 0;
background: url(/Media/Images/aboutncn/googlelogo.gif) 100% 50% no-repeat;
}
/* Image montage */
div.montage {
float: right;
padding: 0 0 3px 7px;
text-align: center;
}
div.montage img {
display: block;
}
/* News Date */
p.date {
font-size: 80%;
color: #333;
font-style: italic;
}
/* Text changes */
.title {
font-size: 110%; 
font-weight:bold;
padding: 15px 0 3px 0; 
}
.newstitle {
font-size: 110%; 
font-weight:bold;
padding: 15px 0 3px 0; 
color:#660066; 
}
.title2W {
font-weight: bold;
font-size: 120%; 
padding-top: 2px; 
}
/* Boxes */
.box {
border:1px solid silver;
background-color:#d8dde2;
text-align:left;
padding:0.1em;
width: 80%; 
}
.announcementbox {
margin: 1em auto;
width: 85%;
background: #fff;
color: #000;
border: 1px solid #000;
padding: 10px 5px;
}
div.quote {
width: 80%;
display: block;
margin: 0 auto 10px auto;
background: #fff;
border: 1px solid #ccc;
padding: 10px 0 0 0;
font-style: italic;
color: #333;
}
div.quote p {
margin: 5px 0;
padding: 0;
}

/* 
 *
 Currently unused, but potentially needed 
 *
 */
 /* Vacancies */
.iframeNews 
{
width: 560px;
height: 600px;
margin: 5px 20px;
border: 1px solid silver;
padding: 0;
}
body#vacantbox {
background: #f7f7f7;
margin: 0;
padding: 0;
}
/* News Panels (for when News system is live) */
span.postdate {
font-size: 80%;
color: #333;
font-style: italic;
margin: 0px 12px 8px 20px;
}
table.headlines {
border-collapse: collapse;
margin: 0 10px;
padding: 0;
}
table.headlines span.date {
font-size: 80%;
color: #333;
font-style: italic;
}

.Caption {
font-size:80%; }


/* This applies the blue background with white text. */
#cooper_title {
background:url(/images/titlebars/cooper_title.jpg) top left;
position:relative;
left:1px;
font-weight:bold;
color:#AAE0F2;  
padding: 2px 0 2px 10px;
margin: 5px 0 10px 0;
font-size: 115%; 
}

.cooper{
font-size: 150%;
padding-left: 20px;
color:#0099FF!important; 
}


/* This applies the light grey background with blue text. */
#kronos_title {
background:url(/images/titlebars/light_title.jpg) top left;
position:relative;
left:1px;
font-weight:bold;
color:#707070;  
padding: 2px 0 2px 10px;
margin: 5px 0 10px 0;
font-size: 115%; 
}

.kronos{
font-size: 140%;
padding-left: 20px;
color:#1D67A0!important; 
}