/* -------------------------------------------------------------- 
  
   CSS Starter Kit
   Web Design & Development by Studio 24 Ltd
   www.studio24.net - (0870) 241 6159
     
-------------------------------------------------------------- */

@import "reset.css";


body {
	background: url(../img/layout/bg.jpg) 0 0 repeat-x;
}


/* =CONTAINERS
-------------------------------------------------------------- */
div#container { /* set as 'standard' width, centred container for 1024x768 site - 960px wide inc. 20px padding left and right */
	background: #fff;
	width: 960px;
	margin: 0 auto;
	padding:0 10px;
}

/* =BRANDING
-------------------------------------------------------------- */
img#logo {
	float: left;
}

/* =SITE-TOOLS
-------------------------------------------------------------- */
div#site-tools {
	float: right;
	background: #F0F0F0 url(../img/layout/site-tools-bg.gif) 0 100% no-repeat;
	width: 285px;
	margin: 0;
	padding: 10px;
}

div#site-tools ul {
	list-style: none;
	margin: 0 0 5px 0;
	padding: 0;
}

div#site-tools li {
	display: inline;
	margin-right: 5px;
}

div#site-tools li#student-trainee-login a:link, 
div#site-tools li#student-trainee-login a:visited, 
div#site-tools li#student-trainee-login a:focus, 
div#site-tools li#student-trainee-login a:active {
	color: #b21c50;
}

div#site-tools form {
	margin: 0;
	padding: 0;
	clear: both;
}

div#site-tools fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

div#site-tools input#search {
	background: #fff url(../img/layout/search-bg.gif) 0 0 no-repeat;
	border: none;
	width: 224px;
	height: 14px;
	padding: 5px 10px;
	overflow: hidden;
}

div#site-tools input#search-submit {
	position: relative;
	top: 6px;
	margin-left: 5px;
}

/* =NAV-PRIMARY
-------------------------------------------------------------- */

ul#nav-primary {
	background: #666;
	list-style-type: none;
	clear: both;
	float: left;
	width: 945px;
	margin: 15px 0 0 0;
	padding: 0 0 0 15px;
	border-bottom: 1px solid #fff;
	color: #fff;
}

ul#nav-primary li {
	float: left;
	position: relative;
}

ul#nav-primary li a {
	display: inline-block; /* Needed for IE6 */
	/* padding: 10px 12px; */
	padding: 10px 9px;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 14px;
	color: #fff;
}

ul#nav-primary li a:hover,
ul#nav-primary li:hover a,
ul#nav-primary li.sfhover a {
	background: #ccc;
	text-decoration: none;
	color: #333;
}

/* =DROP DOWN MENU */
ul#nav-primary ul.submenu {
	display: none; /* Hide */
    /* float: none; */
    position: absolute;
    top: 37px;
    left: 0;
    margin: 0;
    z-index: 20;
}

ul#nav-primary li:hover ul.submenu,
ul#nav-primary li.sfhover ul.submenu
{
    display: block; /* show the dropdown menu on hover */
}

ul#nav-primary ul.submenu li {
    background: #bababa;
    margin: 0;
    padding: 0;
    float: none;
    display: block;
}

ul#nav-primary ul.submenu a:link, ul#nav-primary ul.submenu a:visited, ul#nav-primary ul.submenu a:focus, ul#nav-primary ul.submenu a:active {
	background: #ccc;
    /* float: none; */
    display: block;
    width: 120px;
    margin: 0;
    padding: 4px 15px;
    border-bottom: 1px solid #bebebe;
    font-size: 1em; /* 12px */
    font-weight: normal;
    color: #5c5c5c;
}

ul#nav-primary ul.submenu a:hover {
	background: #999;
	color: #fff;
}


/* =NAV-SECONDARY
-------------------------------------------------------------- */
div#nav-secondary {
	float: left;
	clear: both;
	width: 150px;
	margin: 0;
	padding: 0 10px 0 20px;
}

div#nav-secondary h2 {
	margin-bottom: 20px;
}

div#nav-secondary ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div#nav-secondary li {
	margin-top: 5px;
}

div#nav-secondary li li {
	margin-left: 10px;
}

/* =BANNER
-------------------------------------------------------------- */
img#banner {
	width: 960px;
	float: left;
	clear: both;
}

/* =BREADCRUMB
-------------------------------------------------------------- */
ul#nav-breadcrumb {
	background: #e5e5e5;
	float: left;
	clear: both;
	width: 920px;
	margin: 1px 0 25px 0;
	padding: 5px 20px;
	list-style-type: none;
}

ul#nav-breadcrumb li {
	float: left;
}

ul#nav-breadcrumb a:link,
ul#nav-breadcrumb a:visited,
ul#nav-breadcrumb a:focus,
ul#nav-breadcrumb a:active {
	background: url(../img/layout/breadcrumb-divider.gif) 100% 50% no-repeat;
	margin: 0 6px 0 0;
	padding: 0 13px 0 0;
}


/* =CONTENT CONTAINERS
-------------------------------------------------------------- */

div#content {
	width: 780px;
	float: left;
}

body.home div#content {
	clear: both;
	width: 960px;
}

div#content-primary {
	float: left;
	width: 534px;
	padding: 0 40px 0 20px;
	border-left: 1px solid #cbcbcb;
}

body.home div#content-primary, 
body.home div#content-secondary, body.area div#content-primary {
	width: 960px;
	float: none;
	padding: 0;
	border: none;
}



div#content-secondary {
	float: left;
	width: 185px;
}


/* =SITE-INFO / FOOTER
-------------------------------------------------------------- */

div#site-info {
	clear:both;
	border-top: 10px solid #e0e0df;
	float: left;
	width: 960px;
	margin: 10px 0 0 0;
	padding: 10px 0 10px 0;
}

div#site-info ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
} 

div#site-info li {
	float: left;
	margin-right: 15px;
	display: inline;
}

div#site-info li span {
	margin-top:5px;
	font-size:0.9em;
}

div#site-info p {
	float: right;
}

div.clear {
	clear: both;
}


/* =BASIC TYPOGRAPHY
-------------------------------------------------------------- */

html {
	font-size: 100%; /* 100% = the default font size of the browser, usually 16px -> DON'T CHANGE THIS */
}

/**
 * Font sizing: 
 *
 * To calculate the percentage font-size to use in the body tag use the following calculation:
 *
 * (16px / Required body font-size) x 100
 *
 * Examples below:
 * 16px = 100%
 * 14px = 87.5%
 * 12px = 75%
 * 10px = 62.5%
 *
 */

body {
    font-family: Helvetica, Arial, sans-serif;
	font-size: 75%; /* Set the base font-size (75% sets a size of 1em = 12px) */
    line-height: 1.4em;
    color: #333;
}

/* =HEADINGS */
h1, h2, h3, h4 {
	line-height:1.5em;
}

/* 1em = body font-size, so we can calculate our other font-sizes based on this:
   for example, if we want a font-size of 32px, in ems 32px = (32 / 12) = 2.6em */

h1 {
	font-size: 1.83em; /* 22px */
	color: #990033;
}

h2 {
	font-size: 1.16em; /* 14px */
	font-weight: bold;
}

h2.sub {
	text-transform: uppercase;
	font-size: 1em; /* 12px */
	font-weight: normal;
	color: #333;
}

h3 {
	font-size: 1em; /* 12px */
	font-weight: bold;
}

h4 {
	font-size: 0.9em; /* 11px */
	font-weight: bold;
}


p {
	margin: 0 0 1em 0; 
}

p.strap {
	margin-top: 0.5em;
	font-family: Georgia;
	font-size: 1.3em; /* 16px */
	font-style: italic;
	line-height: 1.3em;
	color: #39c;
}


/* =OTHER TEXT ELEMENTS
-------------------------------------------------------------- */

blockquote {
	font-style: italic; 
	font-family: serif;
	font-size: 2em;
}

pre, code {
	margin: 0 0 1em 0;
}

/* =IMAGES
-------------------------------------------------------------- */
img.page-image {
	margin-top: 20px;
}

div#content-primary img {
	margin: 1em;
}

img.case-study-photo {
	float: left;
}

/* =LINKS
-------------------------------------------------------------- */

a:link, a:visited, a:focus, a:active {
	color: #006699;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

p#skip-link { 
	position:absolute;
	left:-9000px;
	top:0; 
	z-index:20;
} 


/* icon links */
a.icon:link, a.icon:visited, a.icon:focus, a.icon:active, a.icon:hover {
	padding:2px 0 4px 20px;
	background-color: transparent;
	background-position:0 0;
	background-repeat: no-repeat;
} 
a.pdf:link, a.pdf:visited, a.pdf:focus, a.pdf:active, a.pdf:hover {
	background-image:url(../img/icons/pdf.png);
}
a.word:link, a.word:visited, a.word:focus, a.word:active, a.word:hover {
	background-image:url(../img/icons/word.png);
}
a.excel:link, a.excel:visited, a.excel:focus, a.excel:active, a.excel:hover {
	background-image:url(../img/icons/excel.png);
}
a.txt:link, a.txt:visited, a.txt:focus, a.txt:active, a.txt:hover {
	background-image:url(../img/icons/txt.png);
}
a.flash:link, a.flash:visited, a.flash:focus, a.flash:active, a.flash:hover {
	background-image:url(../img/icons/flash.png);
}
a.video:link, a.video:visited, a.video:focus, a.video:active, a.video:hover {
	background-image:url(../img/icons/video.png);
}
a.podcast:link, a.podcast:visited, a.podcast:focus, a.podcast:active, a.podcast:hover {
	background-image:url(../img/icons/podcast.png);
}
a.pub:link, a.pub:visited, a.pub:focus, a.pub:active, a.pub:hover {
	background-image:url(../img/icons/pub.png);
}
a.rss:link, a.rss:visited, a.rss:focus, a.rss:active, a.rss:hover {
	background-image:url(../img/icons/rss-feed.png);
}
a.print:link, a.print:visited, a.print:focus, a.print:active, a.print:hover {
	background-image:url(../img/icons/print.png);
}
a.friend:link, a.friend:visited, a.friend:focus, a.friend:active, a.friend:hover {
	background-image:url(../img/icons/friend.png);
}
a.help:link, a.help:visited, a.help:focus, a.help:active, a.help:hover {
	background-image:url(../img/icons/help.png);
}
a.info:link, a.info:visited, a.info:focus, a.info:active, a.info:hover {
	background-image:url(../img/icons/info.png);
}
a.email:link, a.email:visited, a.email:focus, a.email:active, a.email:hover {
	background-image:url(../img/icons/email.png);
}
a.vcard:link, a.vcard:visited, a.vcard:focus, a.vcard:active, a.vcard:hover {
	background-image:url(../img/icons/vcard.png);
}
a.plus:link, a.plus:visited, a.plus:focus, a.plus:active, a.plus:hover {
	background-image:url(../img/icons/plus.png);
}
a.minus:link, a.minus:visited, a.minus:focus, a.minus:active, a.minus:hover {
	background-image:url(../img/icons/minus.png);
}
	
	
/* =LISTS
-------------------------------------------------------------- */

ul {
	margin: 0 0 1em 2em;
}

ol { 
	margin: 0 0 1em 2em;
}

dl {
	margin: 0 0 1em 2em;
}

dt {
	font-weight: bold;
}

dt, dd {
	margin: 0 0 0.5em 0 ;
}

body.area dl {
	margin: 1em 0 1em 0;
}

body.area dt {
	float: left;
	clear: left;
	font-weight: bold;
	width: 250px;
}

body.area dt, body.area dd {
	margin: 0 0 0.5em 0 ;
	border-bottom: 1px solid #ddd;
}
/* =TABLES
-------------------------------------------------------------- */

table {
	width: auto;
	margin: 0 0 1em 0;
	border-top:1px solid #cbcbcb;
	border-left:1px solid #cbcbcb;
}

table.forum {
    width: 100%;
}

th,td {
	padding: 0.3em 0.4em 0.2em 0.4em;
	border-bottom:1px solid #cbcbcb;
	border-right:1px solid #cbcbcb;
}

th {
	font-weight:bold;
	background-color: #e5e5e5;
}

tr:nth-child(odd) { /* CSS3 zebra row solution - only works in Opera & Safari */
  /* background-color: #f4f4f4; */
}


tr.alt { /* Hardcoded zebra row solution - use this class on every other <tr> for a zebra effect */
	background-color: #f4f4f4;
}

div#content-primary table, div#content-primary th, div#content-primary td {
    border: none; /* Removing the table borders */
}

div#content-primary table {
    border-top: 1px solid #CBCACA;
}

div#content-primary td {
    border-bottom: 1px solid #CBCBCB;
}


/* -------------------------------------------------------------- 
   -------------------------------------------------------------- 
	     				FORMS
   -------------------------------------------------------------- 
   -------------------------------------------------------------- */
/* form warning message */
form div.message p {
	color:#000;
}
   
/* fieldset messages - before the relevant field */
form div em {
	display: none;
}

form div.problem em {
	display: inline;
	color:red;
}

   
   
/* =SIMPLE-FORM
----------------------------------------------- */

form.simple-form fieldset {
	margin:1em 0;
	padding:1em;
	border:solid 1px #ccc;
	background-color:#eee;
}

form.simple-form legend {
	font-weight: bold;
}

form.simple-form div {
	position:relative;
	padding:6px;
	margin-bottom: 0.5em;
}

form.simple-form label {
	display: block;
}

form.simple-form input {
	width:200px;
}
form.simple-form input#preferred{
	width:auto;
}

form.simple-form textarea {
	width:490px;
	height:100px;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 1em;
}

form.simple-form div.radio input, form.simple-form div.checkbox input, form.simple-form input.submit {
	width:auto;
}
   
form.simple-form div.radio label, form.simple-form div.checkbox label {
	display: inline;
}

/* fieldset messages - before the relevant field */
form.simple-form div.problem {
	background-color: #ffefef;
	border:solid 1px #ff7f7f;
}

/* progressive enhancements for browsers beyond ie6 */
form.simple-form input:focus, form.simple-form textarea:focus {
	background-color: #ffc;
}

form.simple-form input[type="text"], form.simple-form textarea{
	border-top: solid 2px #999;
	border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	border-left: solid 2px #999;
}

/* CSS rounded corners - no Opera support as of Aug 09 */
form.simple-form div.message,
form.simple-form div.problem,
form.simple-form fieldset {
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;
}

 

/* =FLASH MESSAGES
----------------------------------------------- */

div.message {
	padding:10px;
}

div.message ul a:hover {
	text-decoration: none;
}

/* flash message - error */
div.error {
	border:solid 1px #ff7f7f;
	background-color: #ffefef;
}
div.error,
div.error a:link, 
div.error a:visited, 
div.error a:focus, 
div.error a:active  {
	color:red;
}

/* flash message - alert */
div.alert {
	border:solid 1px #FF8A00;
	background-color: #FCFFDF;
}
div.alert,
div.alert a:link, 
div.alert a:visited, 
div.alert a:focus, 
div.alert a:active  {
	color:#FF8A00;
}

/* flash message - success */
div.success {
	border:solid 1px #3FAF00;
	background-color: #EAFFDF;
}
div.success,
div.success a:link, 
div.success a:visited, 
div.success a:focus, 
div.success a:active  {
	color:#2D7F00;
}



/* =HOMEPAGE
------------------------------------------- */
body.home h1 {
	display: none;
}

body.home div#highlight {
	/* background: url(../img/banners/banner-home.jpg) 0 0 no-repeat; */
	/*width: 610px;
	height: 312px;*/
	margin: 0 0 10px 0;
	/* padding: 0 350px 0 0; */
	padding: 0;
}

body.home div#content-primary div#highlight img {
    margin: 0;
    padding: 0;
}

body.home div#highlight p {
	padding: 235px 0 0 30px;
	color: #fff;
}

body.home #slideshow_as2 {
    margin-bottom: 7px;
}

div.homepage-box {
	background-color: #f2f2f2;
	background-position: 0 0;
	background-repeat: no-repeat;
	float: left;
	width: 313px;
	min-height: 280px;
	margin: 0 10px 0 0;
}

div.homepage-box#homepage-box-3 {
	margin-right: 0;
}

div.homepage-box h2 {
	margin: 0 0 130px 0;
	padding: 10px 30px;
	font-weight: bold;
	font-size: 1.6em; /* 19px */
	color: #fff;
}

div#homepage-box-1 {
	background-image: url(../img/homepage/box-1-bg.jpg);
}

div#homepage-box-2 {
	background-image: url(../img/homepage/box-2-bg.jpg);
}

div#homepage-box-3 {
	background-image: url(../img/homepage/box-3-bg.jpg);
}

/* RGBA Backgrounds for the H2 headings */
div#homepage-box-1 h2 {
	background: rgba(153,0,51,0.6);
}

div#homepage-box-2 h2 {
	background: rgba(255,102,0,0.9);
}

div#homepage-box-3 h2 {
	background: rgba(51,153,204,0.8);
}

div.homepage-box ul {
	list-style: none;
	margin: 0 0 0 15px;
	padding: 0;
}

div.homepage-box li {
	background: url(../img/homepage/bullet.gif) 0 5px no-repeat;
	margin-bottom: 5px;
	padding: 0 0 0 20px;
}

body.home div#content-secondary {
	clear: both;
	float: left;
	width: 960px;
	margin: 10px 0 0 0;
	padding: 0 0 10px 0;
	background: #000 url(../img/homepage/secondary-bg.jpg) 100% 0 no-repeat;
}

body.home div#content-secondary dl {
	float: left;
	width: 253px;
	margin: 0 10px 0 0;
	padding: 0 30px;
	color: #fff;
}

body.home div#content-secondary dl.last-item {
	margin-right: 0;
}

body.home div#content-secondary dt {
	padding: 10px 0;
	font-weight: bold;
	font-size: 1.6em; /* 19px */
	font-size: 1.3em; /* 16px */
}

body.home div#content-secondary a:link,
body.home div#content-secondary a:visited,
body.home div#content-secondary a:focus,
body.home div#content-secondary a:active {
	color: #66ffff;
}

body.home div#content-secondary ul {
	list-style: none;
	margin: 0;
}

/* =SECONDARY PAGES
------------------------------------------------------ */
dl.quicklinks {
	background: #ececec;
	margin: 20px 0 0 0;
	padding: 10px;
	width: 165px;
}

dl.quicklinks dt {
	color: #666;
}

dl.quicklinks dd {
	margin: 0 0 1px 0;
	padding: 0;
}

dl.quicklinks a:link,
dl.quicklinks a:visited,
dl.quicklinks a:focus,
dl.quicklinks a:active {
    background: #666;
	padding: 5px;
	color: #fff;
	display: block;
	width: 155px;
}

dd.quicklinks-1 a:link,
dd.quicklinks-1 a:visited,
dd.quicklinks-1 a:focus,
dd.quicklinks-1 a:active {
	background: rgb(153,0,51);
}

dd.quicklinks-2 a:link,
dd.quicklinks-2 a:visited,
dd.quicklinks-2 a:focus,
dd.quicklinks-2 a:active {
	background: rgb(255,102,0);
}

dd.quicklinks-3 a:link,
dd.quicklinks-3 a:visited,
dd.quicklinks-3 a:focus,
dd.quicklinks-3 a:active {
	background: rgb(51,153,204);
}

/* =PRIVATE AREA PAGE
----------------------------------------------- */
div.personal, div.useful, div.contact {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 4px solid #ccc;
}

div.personal, div.useful {
	width: 450px;
	margin-right: 20px;
	float: left;
}

div.contact {
	clear: left;
}

body.area dt {
	width: 180px;
}

div.contact ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

div.contact ul li {
	width: 450px;
	float: left;
	margin-right: 20px;
	display: inline;
}

div.exams {
	width: 450px;
	float: left;
}

div.forthcoming {
	border-left: 4px solid #ccc;
	padding-left: 20px;
}

div.useful {

}

p.add a, a.edit, a.view {
	background: #fff;
	/* border: 1px solid #B21C50; */
	width: auto;
	padding: 5px;
	text-decoration: none;
	padding-left: 24px;
}

p.add {
	clear: both;
}

p.add a {
	background: #fff url(../img/icons/plus.png) 4px 0 no-repeat;
}

a.view {
	background: #fff url(../img/icons/pub.png) 4px 0 no-repeat;
}

a.edit {
	background: url(../img/icons/txt.png) 4px 2px no-repeat;
}

/* =REGISTRATION AREA
------------------------------------------------- */
body.registration dl {
	margin: 0 auto;
	padding: 1em;
}
 span.required{
 	color: #ff0000;
}

p.required {
	color: #ff0000;
	margin-left: 16.5em;
}

/* =FORUM
-------------------------------------------------- */
body.forum a.topic:link, body.forum a.topic:visited, body.forum a.topic:focus, body.forum a.topic:active,
body.forum a.reply:link, body.forum a.reply:visited, body.forum a.reply:focus, body.forum a.reply:active {
    margin-bottom: 10px;
    margin-right: 10px;
    padding-left: 20px;
    display: inline-block;
    height: 16px;
}

body.forum a.topic:link, body.forum a.topic:visited, body.forum a.topic:focus, body.forum a.topic:active {
    background: url(../img/forum/add-topic.gif) 0 0 no-repeat;
}

body.forum a.reply:link, body.forum a.reply:visited, body.forum a.reply:focus, body.forum a.reply:active {
    background: url(../img/forum/reply.gif) 0 0 no-repeat;
}

/* =STAFF TEMPLATE
------------------------------------------------ */
div.contacts-detail-page {
	float:left;
	/* border:1px solid #cbcaca; */
	position:relative;
	list-style-type:none;
	margin:0 0 20px 0;
	padding:0;
	width:100%;
}

div.contacts-detail-page h1 {
	margin-top:0;
	color:#ffffff;
	font-size: 1.3em;
	background-color:#666666;
	padding:5px 12px 16px 12px;
}

div.contacts-detail-page h3 {
	color:#ffffff;
	font-weight: normal;
	font-style: italic;
	margin:-22px 0 15px 5px;
	padding-left: 7px;	
}

div.contacts-detail-page img {
	border:7px solid #cccccc;
	float:right;
	position:absolute;
	top:0;
	right:0;
	z-index:10;
}

div.contacts-detail-page p {
	float:left;
	padding-left:13px;
	width: 355px;
}

div.contacts-detail-page p.phone {
	float:left;
	width:243px;
	margin-left:12px;
	margin-top: 15px;
	margin-bottom: 0;
	padding-left: 0;
	padding-top:5px;
	padding-bottom:0px;	
	border-top:1px solid #cbcaca;
	display: inline;
}

div.contacts-detail-page p.email {
	float:left;
	text-align: right;
/*	width:286px; */
    width: 266px;
	margin-top: 15px;
	padding-top:5px;
	padding-bottom:0px;	
	border-top:1px solid #cbcaca;		
}

div.contacts-detail-page span {
	font-weight: bold;
	
}

div.contacts-detail-page div#bio {
    min-height: 120px;
}

/****Adminn CSS****/
form#courseform div{
	margin-bottom: 10px;
}

form#courseform label{
	width: 100px;
	display: block;
	float: left;	
}

form#courseform input{
	width: 500px;	
}

form#courseform input#submit{
	width: auto;	
}

table#viewtable td#tablelabel{
	width: 100px;
}

table#viewtable td#tabletext{
	width: 500px;
}

body.details h3,body.area h3 , body.area h2{
color:#990033;
}

/* =REGISTRATION RESEND
------------------------------------------------ */
body.resend p.message {
    padding: 0.5em;
    border:solid 1px #3FAF00;
	background-color: #EAFFDF;
}

body.resend ul.resend {
    background: #eee;
    list-style: none;
    margin: 0.5em 0 0 0;
    padding: 1em;
    float: left;
}

body.resend ul.resend li {
    float: left;
    margin: 0 1em 0 0;
    
}

body.resend a.resend {
    color: #990033;
    font-weight: bold;
}