/* @override http://www.coalofafrica.com.dev/squelettes/habillage.css?123 */

/* @override http://www.coalofafrica.com/squelettes/habillage.css */

/**= Physical layout **/

html, body {
	margin: 5px 0 0 0; padding: 0;
	width: 100%; 
	
	height: 100%;
	background-color: #222222; 
	font-family: Arial, Helvetica, sans-serif;
}

#page {
	position: relative;
	width: 955px;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
}

.widtha { width: 148px; padding: 0 36px; }
.widthb { width: 186px; padding: 0 17px; }
.widthc { width: 374px; padding: 0 33px; }


/** @header - Page header. **/
#hd { 
	width: 880px; height: 150px;
	padding: 0 38px 0 37px;
	background: url(../IMG/new-bg-nav-img.gif) white no-repeat center bottom;
}
body.home #hd, #page.intro #hd {
	background: url(../IMG/new-bg-nav.gif) white no-repeat center bottom;
}
#hd small { line-height:1em; text-align:right;}

#hd div { text-align: left; float: left; }
#hd div.widtha { height: 25px; }

#hd #heading, #hd #shares { height: 125px; overflow: hidden; }
#hd #heading a { display: block; height: 97px; width: 105px; margin: 16px 0 0 24px; background: url(../IMG/new-hd-heading.gif)  no-repeat 0 0; }
#hd #heading h1,
#hd #heading h2 , #hd #shares h1, #hd #shares h2 { padding: 0; margin: 0; overflow: hidden;}

#hd #shares table { width: 148px; margin: 30px 0 6px 220px; border-collapse: collapse; font-size: 10px; line-height: 10px; text-align: center; }
#hd #shares table tr { background-color: white; }
#hd #shares table th { padding: 2px; border: 1px solid #dadada; background-color: none;}
#hd #shares table td { padding: 2px; border: 1px solid #dadada; }
#hd #shares table td.one   { background-color: #ffd600; }
#hd #shares table td.two   { background-color: #fff1a8; }
#hd #shares table td.three { background-color: #fffae4; }

/** @navigation - Main navigation menu. **/
#hd #nimag   { background: url(../IMG/nav-nimag.gif) white no-repeat bottom left; }
#hd #coal      { background: url(../IMG/nav-coal.gif) white no-repeat bottom left;   }
#hd #about     { background: url(../IMG/nav-about.gif) white no-repeat bottom left;  }
#hd #investors { background: url(../IMG/nav-investors.gif) white no-repeat bottom left; }

#hd #nimag:hover    { background: url(../IMG/nav-nimag-sel.gif) white no-repeat bottom left; }
#hd #coal:hover      { background: url(../IMG/nav-coal-sel.gif) white no-repeat bottom left; }
#hd #about:hover     { background: url(../IMG/nav-about-sel.gif) white no-repeat bottom left; }
#hd #investors:hover { background: url(../IMG/nav-investors-sel.gif) white no-repeat bottom left; }

#hd #nimag a, #hd #coal a, #hd #about a,  #hd #investors a { display: block; width: 148px; height: 20px; padding:0; margin: 2px 0 0 0; text-decoration: none;}

/** @content - Content sections. **/
body #bd { position: relative; background-color: white; height: auto !important; height: 100%; min-height: 100%; padding: 1pt 0; }
body.home #bd, #page.intro #bd { height: 450px !important; }


#bd #nav { width: 148px; height: 100%; padding: 0 36px; behavior: url("win_png.htc"); }
#bd #nav ul { list-style: none; margin: 0; padding: 0; }
#bd #nav li { display: block; list-style: none; margin: 4px 0 0 0; padding: 2px 0 1px 0; text-align: center; font-size: 10px; line-height: 12px; color: white; text-transform: uppercase;}
#bd #nav li a { display: block; width: 100%; color: white; background-color: inherit; text-decoration: none; }
#bd #nav li a:hover { color: white; text-decoration: underline; }

#bd #img { width: 203px; margin: 30px 17px 0 0; padding: 2px 0px 2px 0px; border-top: 2px solid; border-bottom: 2px solid; }
html body #page #bd #img img { border-bottom: 2px solid; padding: 0; margin: 0; border-color: inherit;}
html body #page #bd #img img.first { border-top: 2px solid; border-color: inherit; }

#bd #con   { width: 427px; padding: 1px 16px 25px 33px; }
#bd #intro { position: absolute; bottom: 10px; width: 394px; padding: 10px 23px; background: url(../IMG/bg-intro.png) transparent repeat 0 0; }


/** @footers - Page footer. **/
#ft { padding: 8px 0 ; color: #555555; font-size: 10px; font-family: Arial,Helvetica,sans-serif; text-transform: uppercase;}
#ft #left { float: left; }
#ft #right { float: right; text-align: right; }
#ft a { color: #555555; text-decoration: none; }
#ft a:hover {text-decoration: underline; }
#ft a.button { padding-left: 3em; color: #999999; }
#ft small { font-size: inherit; text-transform: none;}
#ft a.bouncing { color: #999999; text-decoration: none; }
#ft a.spip { color: #673588; text-decoration: none; }
.orange { color: #F26522; }


/** @home - Homepage layouts. **/
body.home #page, html body #page.intro { height: 620px ; }

body.home #bd {	background: url(../IMG/bg-home.jpg) white no-repeat bottom left; }
body.home #page #bd #nav { float: right; font-size: 10px; width: 200px; padding-right: 22px;}
body.home #nav dl    { margin: 10px 0 0 0; padding: 0; list-style: none; }
body.home #nav dt.hd {background: url(../IMG/label-latest.gif) no-repeat 0 0; height: 12px; width:121px;}
body.home #nav dt.hd, body.home #nav dt.media {padding: 0; margin: 0;}
body.home #nav dd.hd, body.home #nav dd.media {padding: 0; margin: 0 0 0px 0;}
body.home #nav dt.media {
	background: url(../IMG/label-media.gif) no-repeat left top;
	height: 12px;
	margin: 10px 0 0 0;
	width:121px;
}
body.home #nav dt , body.home #nav dd { padding-top: 5px; } 
body.home #nav dt { width: 40px; font-weight: bold;}
body.home #nav dd {	margin-left: 44px; }
body.home #nav a, body.home #nav a:visited {color: black;}

#nav dd .doc, #nav dd .doc span { display: block; }
#nav dd .doc { margin-top: 1ex; border-bottom: 1px solid grey; line-height: 1.8; }

body.coal #hd #coal   { background: url(../IMG/nav-coal-sel.gif) white no-repeat bottom left; }
body.coal #page.intro { background: url(../IMG/bg-coal.jpg) transparent no-repeat left 2px; z-index: 8888; }
body.coal #page #bd   {background: url(../IMG/nav-metals-bg.gif) white repeat-y 36px 0; padding: 0 36px; }
body.coal #page.intro #bd { background-color: transparent; }
body.coal #bd #nav    { position: relative; float: left; height: 100%; width: 148px; margin: 0 36px; padding: 0; }
body.coal #bd #img    { position: relative; float: left; width: 203px; margin: 25px 0 0 10px; padding: 1px 0;}
body.coal #bd #con    { position: relative; float: left; height: 100%; width: 420px; margin: 0; padding: 0 10px 25px 16px; }
body.coal #page #bd #nav li { background-color: #E94638; } /* red */
body.coal #bd #con a  { color: #de2110; }
body.coal #bd #con a:active, body.coal #bd #con a:visited  { color: #e94638; }
body.coal #bd #img, body.coal #bd #img img { border-color: #de2110; }

body.nimag #hd #nimag { background: url(../IMG/nav-nimag-sel.gif) white no-repeat bottom left; }
body.nimag #page.intro { background: url(../IMG/bg-metals.jpg) transparent no-repeat top left; }
body.nimag #page #bd   { background: url(../IMG/nav-coal-bg.gif) white repeat-y 256px 0; }
body.nimag #page.intro #bd { background-color: transparent; }
body.nimag #page.intro #bd #nav { float: left; margin-left: 292px;}
body.nimag #bd #nav    { position: relative; float: left; height: 100%; width: 148px; margin: 0 36px; padding: 0; }
body.nimag #bd #img    { position: relative; float: left; width: 203px; margin: 25px 6px 0 48px; padding: 1px 0; }
body.nimag #bd #con    { position: relative; float: left; height: 100%; width:  48%;  margin: 0; padding: 0 0 25px 0; }
body.nimag #bd #nav li { background-color: #FBC025; }
body.nimag #bd #con a  { color: #fbc025; }
body.nimag #bd #con a:active, body.nimag #bd #con a:visited  { color: #FBc025; }
body.nimag #bd #img, body.coal #bd #img img { border-color: #fbc025; }
body.nimag img { border:0; }
body.nimag table td { vertical-align:middle;}


body.about #hd #about  { background: url(../IMG/nav-about-sel.gif) white no-repeat bottom left; }
body.about #page.intro { background: url(../IMG/bg-about.jpg) transparent no-repeat left 2px; }
body.about #page #bd   { background: url(../IMG/nav-about-bg.gif) white repeat-y 476px 0; }
body.about #page.intro #bd { background-color: transparent; }
body.about #page.intro #bd #nav  { margin-left: 512px; float: left; }
body.about #bd #nav    { position: relative; float: right; height: 100%; width: 148px; margin: 0 44px 0 28px; padding: 0; }
body.about #bd #img    { position: relative; float: right;               width: 203px; margin: 25px 48px 0 0; padding: 1px 0; }
body.about #bd #con    { position: relative; float: left;  height: 100%; width: 427px; margin: 0 20px 0 36px; padding: 0; }
body.about #bd #nav li { background-color: #8CC06E; } /* green */
body.about #bd #con a  { color: #399400; }
body.about #bd #con a:active, body.about #bd #con a:visited  { color: #8cc06e; }
body.about #bd #img, body.about #bd #img img { border-color: #399400; }
body.about #page.gallery #con a, body.about #page.gallery #con a img { border-width: 0 0 2px 0; }
body.about #page.gallery #img { border: none; }

body.investors #hd #investors { background: url(../IMG/nav-investors-sel.gif) white no-repeat bottom left; }
body.investors #page.intro #bd            { background: url(../IMG/bg-investors.jpg) white no-repeat bottom left; }
body.investors #page.intro a.access { display: block; width: 316px; height: 435px; margin: 16px 0 0 0; float: left;}
body.investors #page.intro a#aimlink { background: url(../IMG/market-aim_off.jpg) white no-repeat 0 0; margin: 16px 3px 0 0;}
body.investors #page.intro a#asxlink { background: url(../IMG/market-asx_off.jpg) white no-repeat 0 0; margin: 16px 4px 0 0; }
body.investors #page.intro a#jselink { background: url(../IMG/market-jse_off.jpg) white no-repeat 0 0; }
body.investors #page.intro a:hover#aimlink { background: url(../IMG/market-aim_roll.jpg) white no-repeat 0 0; }
body.investors #page.intro a:hover#asxlink { background: url(../IMG/market-asx_roll.jpg) white no-repeat 0 0; }
body.investors #page.intro a:hover#jselink { background: url(../IMG/market-jse_roll.jpg) white no-repeat 0 0; }


body.investors #bd { background: url(../IMG/nav-investors-bg.gif) white repeat-y 696px 0; }
body.investors #bd #nav       { position: relative; float: right; margin: 0 39px 0 0;  }
body.investors #bd #img       { position: relative; float: right; border: none; }
body.investors #bd #con       { position: relative; float: left;  }
body.investors #bd #nav li    { background-color: #2E57A8; } /* blue */

body.contact #bd #nav    { left: 36px; background: url(../IMG/nav-contact-bg.gif) repeat 0 0; }
body.contact #bd #nav li { background-color: #E94638; } /* red */
body.contact #bd #img    { float: left; margin: 25px 44px; }
body.contact #bd #con    { float: right; }
body.contact #bd #con a  { color: #de2110; }
body.contact #bd #con a:active, body.contact #bd #con a:visited  { color: #e94638; }

body.disclaimer #hd #disclaimer { background: url(../IMG/nav-disclaimer-sel.gif) white no-repeat bottom left; }
body.disclaimer #page.intro #bd         { background: url(../IMG/bg-disclaimer.jpg) white no-repeat bottom left; }
body.disclaimer #bd #nav    { left: 36px; background: url(../IMG/nav-disclaimer-bg.gif) repeat 0 0; }
body.disclaimer #bd #nav li { background-color: #E94638; } /* red */
body.disclaimer #bd #img    { left: 256px; }
body.disclaimer #bd #con    { padding-left: 476px; 	}
body.disclaimer #bd #con a  { color: #de2110; }
body.disclaimer #bd #con a:active, body.disclaimer #bd #con a:visited  { color: #e94638; }

body.report #bd #con { float: left; padding-left: 36px; width: 341px; }
body.report #bd #con a { color: black; }
body.report #bd #con a:visited { color: #333; }
body.report #bd #con a:hover { color: #de2110; } 
body.report #bd #rep { width: 562px; float: right; margin: 25px 0 0 0;}
body.report #bd #rep a, body.report #bd #rep a img {margin: 0; border: none; }
body.report #page #hd { background: url(../IMG/bg-nav-report.gif) white no-repeat center bottom; }
body.report #ft small {padding-left: 520px;}


body.error #bd #con       { position: relative; margin: 0 auto;  }

/** @intro - Section intro pages. **/
body.nimag #page.intro #intro, body.coal #page.intro #intro { left: 476px; }
body.about #page.intro #intro, body.investors #page.intro #intro { left: 36px; }

/**@typography**/

body { font-size: 10pt; line-height: 14pt; font-family: Arial, Helvetica, sans-serif; margin: 1em 0 0 0; padding-top: 1em; }

body #con h1 { font-size: 14pt; line-height: 16pt; padding-top: 25px; text-transform: uppercase; }
body #con h2 { font-size: 12pt; line-height: 16pt; padding-bottom: 0; margin-bottom: 0; text-transform: lowercase, capitalize; }
body #con h3 { font-size: 10pt; line-height: 14pt; font-weight: bold; padding: 1em 1ex 0 0; margin: 0;  }
body #con p.sub { font-size: 10pt; line-height: 14pt; font-style: italic; font-weight: normal; padding-top: 0; margin-top: 0;  }

body.nimag h1, body.nimag h2.sect { color: #ffd600; }
body.coal h1, body.coal h2.sect { color: #de2110; }
body.about h1      { color: green; padding-bottom: 0; margin-bottom: 0; line-height: 1em; }
body.about h2.sect { color: green; padding-top: 0; margin-top: 0; line-height: 1em; }
body.investors h1, body.investors h2.sect { color: #00319c; }
body.error h1, body.error h2.sect { color: #9c3100; }


/* Tables */
#con table { font-size: 11px; line-height: 1.2em; margin: 0 auto; border-collapse: collapse; width: 100%; }

td, th { vertical-align: top; padding: 2px 4px; margin:0; border: 0; }
body.about tr.row_first { background-color: #399400; color: white; }
body.about tr { border-bottom: 1px solid #BBDAAA; background-color: #E6F3DE; /* #CFF0BD; /* #BBDAAA; /* #8cc06e; /**/}
body.investors tr.row_first { background-color: #00319c; color: white; }
body.investors tr { border-bottom: 1px solid #7192DB; background-color: #AABDE7; }

/* Document lists */
body table.documents { width: 100%; }
#con table.shareprice { margin: 0 0;}
#con table.sharehistory { margin: 0 0;}

table.shareprice th, table.shareprice td, 
table.sharehistory th, table.sharehistory td { padding: 2px 5px; }

body .documents .document .icon  { width: 35px; }
body .documents .document .title { font-weight: bold; }
body .documents .document td { padding-top: 1em; }


/* Forms */

div.form form div, div.form form label { display: block; width: 100%; margin-top: 1ex; }

hr.clear { clear: both; visibility: hidden; }

/**@accessibility - Text replacement for non-aural agents. **/
	#hd #heading h1 a {
	 font-size: 1px; text-indent: -9999999px; line-height: 1;
	}
	#hd #heading h2 { visibility:hidden; font-size: 1pt; }
	#nav dt.hd span { visibility:hidden; font-size: 1pt; }
	.access span { visibility:hidden; font-size: 1pt; }
@media aural {
	#hd #heading h1,#hd #heading h2 { visibility: visible; }
	.access span { visibility:visible; }
	#nav dt.hd span { visibility:visible; }
} 

iframe { border: 1px solid #eee; } 
body.home iframe { margin-top: -8px; border: none; }