/* CSS document for City and Guilds Institute website */
@import url(tabs.css);
@import url(subnav.css);
body {font: 76%/1.56 Arial, Helvetica, sans-serif; text-align:center; padding:0 0 14px 0;background-repeat:no-repeat; background-position:bottom center; background-attachment: fixed; color:#565656; background-color:#fff; background-image:url(../../../images/assets/bg-default.png);}
html {min-height:100.01%;}

/* Kill all browser defaults */
* {margin:0; padding:0;}
/* end */

/* links */
a, a:visited {text-decoration:none; color:#000;}
a:hover {text-decoration:underline;color:#ED2324;}
a {outline:none;}
/* end links */

/* general layout rules */
div#wrapper {margin:0 auto; text-align:left; width:770px; background:#fff; border-top: 1px solid #ED2324;}
p.skip {display:none;}

div#contentholder {}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

div#left {float:left; margin:0 0 0 0; padding:0 0 14px 0; width:186px; display:inline;}
div#contentarea {float:left; margin:0 0 0 12px; padding:0 0 14px 0; width:572px; min-height:400px; height:auto !important; height:400px;}
div#content {float:left; width:372px; border-top:1px solid #BCBABA;}
div#content.wide {float:left; width:572px; border-top:1px solid #BCBABA; border-bottom:1px solid #BCBABA;}
div#right {float:right; margin:0 0 0 0; width:186px; border-top:1px solid #BCBABA;}
div#right.freetext {background:#D6D2CE; border-bottom: 1px solid #BCBABA; padding:0 8px; width:186px; w\idth:170px;}
div#inlinebanner {border-bottom:1px solid #BCBABA; border-top:1px solid #BCBABA; height:144px; background-repeat:no-repeat; background-position:left top; background-image:url(../../../images/assets/bn-default.jpg); margin:0 0 -1px 0;}
/* end general layout rules */

/* page header */
div#header {width:770px; position:relative; height:112px;}
div#header h1 {display:none;}
div#header img {position:absolute; top:24px; left:15px;}
div#toplinks {width:288px; float:right; border-bottom:1px solid #ED2324; background:#D6D2CE; margin:0 0 24px 0;width : 310px;}
div#toplinks h2, div#toplinks h3 {font-size:.92em; text-transform:uppercase; float:left; line-height:1.2; margin:0;}
div#toplinks h2 {width:125px;}
div#toplinks h3 {width:140px; border-left:1px solid #BCBABA; }
div#toplinks h2 a, div#toplinks h3 a {display:block; padding:14px 4px 14px 14px;}
div#toplinks h4 {width:20px; padding : 0; margin : 0; float : left;}
div#toplinks h4 a {display:inline;}
div#toplinks h4 a img {float : left; position : static; padding : 10px 0px 0px 0px;}
/* page header */

/* site search */
div#search {width:288px; float:right; clear:right;} 
div#search fieldset {float:left; margin:0 0 0 0; border:none;}
div#search div#searchBox {float:left; margin:0 0 0 0;}
div#header div#search img {position:static; margin:0 14px 0 8px; }
div#search label {display:none;}
div#search input {float:left; margin:0; padding:4px 3px 2px 3px; width:110px; font-size:1em; height:24px; he\ight:14px;}
div#search input.button {float:left; margin:0 16px 0 8px; padding:0; border:none; width:27px; height:22px; cursor:pointer; font-size:.92em; font-weight:bold;}
div#search p {font-size:.92em; font-weight:bold; margin:2px 0 0 0;}
div#search input, div#advancedsearch input, div#content div#inlinesearch input {border: 1px solid #C2BDBD;}
div#search input.button, div#advancedsearch input.button, div#content div#inlinesearch input.button {background:#D6D2CE; color:#000;}
/* end site search */

/* advanced search */
div#advancedsearch {margin:0 0 0 0; padding:0 2px 6px 0px; border-top:1px solid #BCBABA;}
div#advancedsearch h2 {margin-bottom:2px;}
div#advancedsearch label {cursor:pointer; font-weight:normal; width:100px; margin:-2px 0 0 0;}
div#advancedsearch input {margin:6px 0px 12px 0px; padding:2px 4px 3px 4px; font-size:1em; border: 1px solid #BCBABA; width:148px; w\idth:140px;}
div#advancedsearch input.radio {width:auto; margin:-4px 6px 0px 2px; clear:left; border:none;}
div#advancedsearch input.button {margin:8px 0 0 0; padding:0; width:27px; height:22px; cursor:pointer; border:none; font-size:.92em;}
div#advancedsearch p {margin:0; padding:0;}
/* end advanced search */

/* inline search */
div#inlinesearch {float:left; width:372px; margin:0 0 10px 0; padding:0 0 12px 0; border-top:1px solid #BCBABA; border-bottom:1px solid #BCBABA; display:inline;}
div#content div#inlinesearch label {clear:none; font-weight:normal; margin:0 0 0 0;}
div#content div#inlinesearch input {margin:0px 0px 6px 0px; padding:1px 4px 2px 4px; background:#fff; width:190px; w\idth:180px;}
div#content div#inlinesearch select {background:#fff; margin:0px 0px 6px 0px;}
div#content div#inlinesearch div.radios {float:left; width:190px; margin:0 0 12px 0;}
div#content div#inlinesearch div.radios label {font-weight:normal; font-size:1em; width:80px;}
div#content div#inlinesearch input.radio {width:auto; background:#ECEBEF; margin:0px 6px 0px 2px; clear:left; border:none; display:inline;}
div#content div#inlinesearch input.button {margin:0 0 0 148px; clear:left; padding:0; width:27px; height:22px; cursor:pointer; border:none; font-size:.92em; font-weight:bold;}
div#inlinesearch p {margin:0; padding:0;}
/* end inline advanced search */

/* primary navigaton */
div#nav {float:left; width:770px; font-weight:bold; text-transform:uppercase; font-size:.92em; border-bottom:1px solid #BCBABA; border-top:1px solid #BCBABA; background:#D6D2CE;}
div#nav ul {float:left; list-style-type:none;}
div#nav ul li {float:left; letter-spacing:.6px;}
div#nav ul li a {padding:10px 0; text-align:center; text-decoration:none; display:block;}
div#nav ul li a:hover {text-decoration:none; color:#ED2324;}
div#nav ul li.active a {color:#ED2324;}
/* end primary navigaton */

/* primary nav items have a declared width for cross browser purposes. Total width = 770px */
div#nav ul li#home {width:74px;}
div#nav ul li#who {width:113px;}
div#nav ul li#what {width:113px;}
div#nav ul li#news {width:133px;}
div#nav ul li#resources {width:108px;}
div#nav ul li#research {width:107px;}
div#nav ul li#publications {width:122px;}
/* end */

/* breadcrumb trail */
div#crumbs {float:left; font-size:0.92em; width:770px;}
div#crumbs ul {float:left; list-style-type:none; padding:8px;}
div#crumbs ul li {float:left; padding:0 6px 0 0; white-space:nowrap;}
div#crumbs ul li a {padding:0 4px 0 0; text-decoration:none;}
div#crumbs ul li a:hover {text-decoration:underline;}
/* end breadcrumb trail */

/* homepage navigation */
div#homenav {float:left; width:186px; padding:6px 0; border-top:1px solid #ED2324;  border-bottom: 1px solid #ED2324; background:#D6D2CE;}
div#homenav h2 {margin:2px 6px 4px 6px; font-size:1.1em;}
div#homenav h3 {margin:0 6px; font-size:.92em; text-transform:uppercase;}
div#homenav ul {float:left; list-style-type:none; margin:0 6px 8px 6px; display:inline; font-size:.92em; width:174px;}
div#homenav ul li {float:left; white-space:nowrap; width:auto; padding:0 4px 0 0; line-height:1.4;}
div#homenav ul li a {}
div#homenav div.line {border-bottom:1px solid #BCBABA; margin:0px 0 6px 0; height:1px; clear:left;}
div#homenav div.line hr {display:none;}

div#left h4 {float:left; margin:14px 0; border-top: 1px solid #BCBABA; border-bottom: 1px solid #BCBABA; background:#D6D2CE;}
div#left h4 a {padding:8px 8px; text-decoration:none; display:block; width:186px; w\idth:170px; text-align:center;}
/* homepage navigation */

/* homepage featured articles */
div#featured {float:left; width:372px; padding:14px 0 0 0; border-top:1px solid #BCBABA; border-bottom: 1px solid #BCBABA;}
div.articleintro {float:left; width:372px; padding:0 0 18px 0;}
div.articleintro img {float:left; margin:4px 12px 4px 0;}
div.articleintro h3 {margin:0 0 0 0;}
div.articleintro p {line-height:1.4; margin:0;}
div.articleintro img {border: 1px solid #6E6664;}
/* end homepage featured articles */

/* left hand dropdown */
div#lhdropdown {float:left; margin:14px 0; border-top: 1px solid #BCBABA; border-bottom: 1px solid #BCBABA; background:#D6D2CE;padding:12px 8px; text-decoration:none; display:block; width:186px; w\idth:170px;}
div#lhdropdown label {display:none}
div#lhdropdown select {border: 1px solid #BCBABA; font-size:.92em; padding:2px 1px; width:170px; w\idth:168px;}
div#lhdropdown option {}
/* end left hand dropdown */

/* right hand navigation */
div#right h4 {font-size:.92em; text-transform:uppercase; margin:0; background-repeat:no-repeat; background-position: 168px 14px; background-image:url(../../../../images/assets/right-arrow.png); border-bottom: 1px solid #BCBABA; background-color:#D6D2CE;}
div#right h4.open {background-image:url(../../../../images/assets/down-arrow.png)}
div#right h4 a {padding:12px 18px 12px 8px; text-decoration:none; display:block; width:186px; w\idth:160px;}
div#right h4.open a {color:#565656;}
div#right h5 {font-size:.92em; text-transform:uppercase; margin:0; border-bottom: 1px solid #BCBABA; background-color:#D6D2CE; padding:12px 18px 12px 8px; text-decoration:none; display:block; width:186px; w\idth:160px;}

div.rhlinks {padding:12px 8px 6px 8px; border-bottom: 1px solid #BCBABA; background:#fff;}
div.rhlinks h6 {}
div#right div.rhlinks h5 {font-size:1em; text-transform:none; margin:0; border-bottom:none; background-color:#fff; padding:0; text-decoration:none; width:auto;}
div.rhlinks p {line-height:1.2; font-size:.92em;}

div#subnav {width:186px; font-weight:bold; border-top:1px solid #ED2324; border-bottom: 1px solid #ED2324; margin:0;}

div#right ul {list-style-type:none; text-transform:uppercase; padding:4px 0; border-bottom: 1px solid #BCBABA; font-weight:bold; backgro und:#fff;}
div#right ul li {line-height:normal; padding:0; font-size:.92em; margin:0;}
div#right ul li a {padding:5px 8px 4px 8px; display:block; border-bottom: none; width:186px; w\idth:170px;}
div#right ul li a:hover {text-decoration:none;}
div#right ul li.active a {color:#E52324;}
/* end right hand navigation */

/* have your say and comments */
div.haveyoursay {background:#D6D2CE; border-top: 1px solid #BCBABA; border-bottom: 1px solid #BCBABA; float:right; margin:0 0 4px 10px; padding:8px; width:122px; w\idth:104px;}
div.haveyoursay h3 {margin:0; line-height:1.3;}
div.haveyoursay h3 span {display:block; font-size:.84em; margin:4px 0 0 0;}
div.haveyoursay h3 a:hover {text-decoration:none;}
div.comments {border-top: 1px solid #BCBABA; border-bottom: 1px solid #BCBABA; margin:10px 0 0 0;}
div.comment {background:#D6D2CE; padding:2px 10px; margin:0 0 14px 0;}
/* end have your say and comments */

/* footer */
div#footer {float:left; font-size:.92em; color:#000; padding:8px 14px 8px 14px; margin:0 0 0 0; background:#D6D2CE; border-top:1px solid #BCBABA;  border-bottom: 1px solid #ED2324; width:770px; w\idth:742px; }
div#footer ul {float:left; clear:left; list-style-type:none; white-space:nowrap; margin: 0 0 0 0; width:742px;}
div#footer ul li {float:left; padding:0 4px 0 0;}
div#footer ul li.credit {float:right; padding:0;}
div#footer ul li a {color:#000;}
/* end footer */

/* general typography */
h1, h2 {font-size:1.2em; color:#ED2324; margin:.6em 0 .6em 0; text-transform: uppercase;}
h2 span {font-size:.92em; text-transform:none;}
h3 {font-size:1.1em; color:#ED2324; margin:1em 0 .5em 0;}
h4 {font-size:1em; color:#ED2324; margin:1em 0 0 0;}
h5 {font-size:1em; margin:1em 0 .5em 0;}
h6 {font-size:1em; margin:0;}
p {margin:0 0 1em 0;}
p.pagination span {margin:0 0 0 30px;}
p.pagination strong {color:#ED2324;}
acronym {border-bottom: 1px dashed #BCBABA; cursor: help;}
hr {height:1px; color:#D5D2D3; border: 0; background-color: #BCBABA; margin: 10px 0;}
div#content div.line {margin:10px 0 10px 0; height:2px; clear:left; border-bottom:1px solid #BCBABA;}
div#content div.line hr {display:none;}
/* end general typography */

/* image floats */
img.left, img.leftborder {float:left; margin:4px 12px 4px 0;}
img.left, img.right {border:none;}
img.right, img.rightborder {float:right; margin:0 0 12px 12px;}
img.leftborder, img.rightborder {border-top: 1px solid #BCBABA; border-bottom: 1px solid #BCBABA;}
img.border {margin:4px 0 12px 0; border: 1px solid #BCBABA;}
img.rss {float:right; margin:10px 0 0 14px;}
/* end image floats */

/* image captions */
.captionleft {float:left; margin:4px 10px 4px 0; width:172px; background-color:#D6D2CE;}
.captionleft p, .captionright p {margin:0; padding: 6px; font-size:.92em;}
.captionright {float:right; clear:right; margin:4px 0 4px 10px; width:172px; background-color:#D6D2CE;}
.captionleftborder {float:left; margin:4px 10px 4px 0; width:172px; border:1px solid #BCBABA; background-color:#D6D2CE;}
.captionleftborder p, .captionrightborder p {margin:0; padding: 6px; font-size:.92em;}
.captionrightborder {float:right; margin:4px 0 4px 10px; width:172px;  border:1px solid #BCBABA; background-color:#D6D2CE;}

div#content.wide .captionleft,
div#content.wide .captionright,
div#content.wide .captionleftborder,
div#content.wide .captionrightborder {width:200px;}
/* end image captions */

/* lists */
div#content ul {margin:0 0 1em 3em;}
div#content ul li {padding:0; list-style-type:square;}
div#content ul ul {margin:.3em 0 .3em 3em;}
div#content ul ul li {list-style-type:circle;}
div#content ul ul ul li {list-style-type:disc;}
div#content ol {padding:0 0 0 0; margin:.5em 0 1em 3em;}

div#content dl {margin: 0 0 1em 0;}
div#content dt {margin: 1em 0 0 0; font-weight:bold;}
div#content dd {margin: 0 0 0 1em;}
/* end lists */

/* address */
div#content address {font-style:normal; font-weight:normal; margin: 0 0 .7em 0;}
div#content address p {margin:0;}
/* end address */

/* tables */
table, th, tr, td {font-size:1em;}
table {margin: .5em 0 1em 0; padding:0; border-right:1px solid #BCBABA; border-top:1px solid #BCBABA;}
th {padding: .2em .4em; background:#BCBABA; text-align:left;}
td {padding: .4em; border-bottom:1px solid #BCBABA; border-left:1px solid #BCBABA;}
table caption {text-align:left; font-size:1em; font-weight:bold;}
/* end tables */

/* forms */
div.formholder {float:left; width:100%;}
div#content form {}
div#content fieldset {border:none; margin: 20px 0; float:left; width:372px;}
div#content legend {font-size:1.5em; margin:0 0 4px 0;}
div#content label {clear:left; cursor:pointer; font-weight:normal; display:block; width: 148px; float:left;}
div#content input, div#content textarea, div#content select {width:190px; float:left; margin:1px 0; border: 1px solid #BCBABA; background:none;}
div#content option {background: #fff;}
div#content input.checkbox {float:left; margin:0px 0 5px 0; padding:1px 0 3px 0; width:auto; cursor:pointer; border:none;}
div#content input.button {display:inline; margin:5px 0 0 148px; padding:1px 3px 3px 3px; width:auto; cursor:pointer; background:#D6D2CE; border:1px solid #BCBABA; clear:left;}
/* end forms */

div#content .row table table {display: none; }

/* Practice DB */
div#projectslist 
{
	width : 98%;
	float : left;
	margin : 0px;
	padding : 2px;
	background-color : #f9f9f9;
	text-align : left;
	list-style-type: none;
	
}
div#projectslist ul {
	margin : 0px;
	padding : 0px;
	float : left;
}

div#projectslist ul li {
	list-style-type: none;
	
	float: left;
	margin: 0px 0px 0px 0px; 
	padding: 0px;	
	background: none;
	width: 100%;
	
}

div#projectslist ul li a {
	display: block;
	text-decoration: none;
	background: none;
}

div#projectslist ul li a:hover {
	background-color: #efefef;
}
div#pagingHolder 
{
	width : 100%;
	min-width : 500px;
	margin : 0px;
	padding : 10px 0px 10px 0px;
	float : left;
	text-align : center;
}

div#paging 
{
	width : 100%;
	margin : 0 auto;
	text-align : left;
	float : left;
}

div#paging p {
	float : left;
	width : 100px;
	margin-top : 4px;
}

div#paging ul {
	margin : 0px;
	padding : 0px;
	float : left;
}

div#paging ul li {
	list-style-type: none;
	display: block;
	float: left;
	margin: 0 2px 2px 0; 
	padding: 0px;
	font-size: 0.9em; 
	font-weight: bold; 
	text-align: center;
	border: 1px solid #ccc;
	background: none;
}

div#paging ul li a {
	width: 20px;	
	display: block;
	text-decoration: none;
	/*padding: 3px 5px 3px 5px;*/
	padding: 1px 2px 1px 2px;
	background: none;
}

div#paging ul li a:hover {
	background-color: #efefef;
}

.errortxt { color: Red; }

div.stepBar {
	text-align: center;
	width : 544px;
	margin : 0px;
	padding : 0px;
	float : left;
	
}

div.stepBar ul.step 
{
	margin: 0px;
	padding: 0px;
	width : 544px;
	display: inline;
}

div.stepBar ul.step li {
	background-color: #EEECE9;
	padding: 0px;
	margin: 10px 0px 0px 5px;
	width: 65px;
	background-image: none;
	list-style-type: none;
	float: left;
	border: 1px solid #ccc;
}

div.stepBar ul.step li.separator {
	font-size: 2.0em;
	background-color: #fff;
	border: none;
	width: 15px;
	padding-bottom: 10px;
}

div.stepBar ul.step li.stepSelected {
	border : solid 1px #ED2324;
	font-weight : bold;
	color : #000000;
	background-color : #EEECE9;
}

div.stepBar ul.step li span {
	display: block;
	padding: 10px 5px 10px 5px;
}

div.stepBar ul.step li a {
	margin: 0px;
	padding: 0px;
}

div#buttonholder {
	float : left;
	width : 544px;
	padding : 5px 0px 5px 0px;
}

div#deleteholder 
{
	float: left;
	display: block;
	width: 250px;
	
}

div input#btndelete {
	float : left;
	margin : 0px 10px 0px 0px;
	padding : 0px;
	width : 50px;
	background-color : #EEECE9;
	cursor : hand;
}

div#buttonholder input#btnlogin, div#buttonholder input#btnsubmit {
	float : right;
	margin : 0px 10px 0px 0px;
	padding : 0px;
	width : 100px;
	background-color : #EEECE9;
	cursor : hand;
}

div#buttonholder input#btnprevious {
	float : left;
	margin : 0px 0px 0px 10px;
	padding : 0px;
	width : 100px;
	background-color : #EEECE9;
	cursor : hand;
}

div#content input#addresscheck, div#content input#phonecheck, div#content input#emailcheck, div#content input#websitecheck {
	float:left; 
	margin:0px; 
	padding:1px; 
	width:auto; 
	cursor:pointer;
	border : none;
}

div.formrow 
{
	float : left;
	width : 100%;
	margin : 0px;
	padding : 2px 0px 2px 0px;
}

div.formrow label
{
	float : left;
	text-align : right;
	padding : 0px 8px 0px 0px;
}

div#content ul.searchlist {
	margin: 0px;
	padding : 0px;
	background: none;
}

div#content ul.searchlist li {
	list-style: none;
	/*padding: 2px 10px 0px 10px;*/
	padding : 0px;
	margin : 0px;
	width : 544px;
	float : left;
}

div#content ul.searchlist li.colourOne {
	background-color : #ffffff;
}

div#content ul.searchlist li.colourTwo {
	background-color : #EEECE9;
}

div#content ul.searchlist p {
	padding: 5px;
	margin : 0px;
	float : left;
	width : 500px;
}
/* end Practice DB */