@charset "UTF-8";

/*Page structure as follows: body, containing div (#outerwrap/#wrap) to hold everything together; navigation div (#nav), to hold left navigation menu ONLY; an inner container (#innerwrap) to hold the rest of the page - this allows the left navigation bar to sit fixed on the left as necessary; header (#head), to hold the title image ONLY; main content div (#maintext) to hold everything else FOR NOW; - for now no footer seems required. A right-hand menu (#rnav) may be necessary for the "quick facts" and photos as laid out. Body will have white background in current form, with a pale logo added as a background image eventually.*/

/* =initial global settings *****************************/

* {padding:0; margin:0;} /*Using universal selector for a margin and padding reset as - for now at least - forms are not envisaged for this site. Should forms be required and styles applied to form inputs, this will probably have to change to a block reset of every element in use on the site*/

html {font-size:100%;min-height: 100%;}

/*forcing IE to understand the font size, for people zooming their text size.

dt216 2011.11 Min-heightin HTML devlaration ensures gradient background fills the whole browser window*/ 

body {font-size:1em;font-family:Arial, Helvetica, sans-serif;background: #000000; /* for non-css3 browsers */filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476bb4',

endColorstr='#000000'); /* for IE */

background: -webkit-gradient(linear, left top, left bottom,

from(#476bb4), to(#000)); /* for webkit browsers */

background: -moz-linear-gradient(top, #476bb4,  #000); /* for firefox 3.6+ */ }

/*setting a 1em font size allows an elastic-type width of the site set in ems (1em=16px here)*/

img {/*width:40em;*/ border:1px solid #818e57;border-top-color:#c5cfd8;border-left-color:#8895a5;}

.lf {float:left;}

.rt {float:right;}

.ctr {text-align:center; padding:0;margin:0;}



.pic {background:#eee;border:1px solid #666; padding:3px;margin:0.5em;width:40%;}

.pic img {width:100%;}

.pic.sm {width:20%;}

.pic.med {width:40%;}

.pic.lg {width:75%;}

.pic.sup {width:100%;}

.cap {width: 100%;font-size:0.95em;margin-bottom: 20px;float:left;clear:right!Important; }     

img {font-weight:normal;font-style:oblique;} 



/* =links *********/

a img {border:0;}

ul {list-style:none;} /*removing bullets from all unordered lists. Ordered lists will remain numbered, though.*/

a.current {color:#fff !important;cursor:default;}/*class the current page as "current" and it should be displayed in white text.*/

a.hidden {display:none;}

a {text-decoration:none;}

#maintext a{border-bottom: 1px dotted #333;}

.thumbs a,#rnav a{border: none!important;}



/* =miscellaneous **************/

title, alt {font-style:italic;font-size:0.875em;}

sup, sub {font-size:0.6em;}

#hidden {width:1px;font-size:1px;z-index:-5;position:absolute;left:0;top:0;}/*hiding the 'skip to main text' link, which is intended for screen-readers and print only*/

#hidden a {color:#fff;}/*see above*/



/* =Text  ********************************/

#maintext {min-width:37.43em;max-width:53.68em;margin:40px 0 1em 1em;}

#maintext ol,#maintext ul{line-height: 1.5em;padding-left: 50px;}

#maintext ul {	list-style-type: disc;}

#homepage #maintext{ margin:20px 0 1em 1em!important;}          

#maintext p {line-height:1.4em;margin-bottom:1.3em;}

#maintext h1, #maintext h2, #maintext h3 {

	margin:10px 0;

	color:#146ab7;

	font-weight:normal;

	font-style:normal;

}

#childpage #maintext{padding-top: 0px;}  

/* =captions*/

.caption{background:#000;opacity:0.6;filter:alpha(opacity=60); /* For IE8 and earlier */padding: 5px;

	margin: 0px!important; position: relative;top: -50px;display: block;color: #fff;font-size: 16px;textalign:left;}

#homepage2 .caption{display:inline!important;position: relative;top: -180px!important;display: block;color: #fff;font-size: 16px;text-align:left;}

#footer .creds {float:right;margin:0;padding:0 15px 0 0;text-align:right;width:420px;}

#footer .copyright{float:left;width:400px}



/* = structural **********************/

#header {height:7.5em; min-width:37.43em; max-width:53.68em;}

#header h1,#header h2{position: relative;top:115px;left:10px;} 

#header {background: #fff url(../img/banners/ASMA5.Banner.Home_v3.jpg) no-repeat top right;}  

#header h1, #header h2 {

	color:#146ab7;

	font-weight:normal;

	font-style:normal;

}

#header.environment {background: #fff url(../img/banners/ASMA5.Banner.Home.jpg) no-repeat top right  !important;}

#header.activities {background: #fff url(../img/banners/ActivitiesHeader1.jpg) no-repeat top right  !important;}/*to be replaced by .balloon*/

#header.aurora {background: #fff url(../img/banners/ASMA5.Banner.Atmosphere.jpg) no-repeat top right  !important;} 

#header.sunset {background: #fff url(../img/banners/ASMA5.Banner.Environment.jpg) no-repeat top right  !important;}

#header.wind {background: #fff url(../img/banners/ASMA5.Banner.Climate.jpg) no-repeat top right  !important;}

#header.aurorastation {background: #fff url(../img/banners/ASMA5.Banner.Atmosphere.jpg) no-repeat top right  !important;}

#header.balloon {background: #fff url(../img/banners/ASMA5.Banner.Science.jpg) no-repeat top right  !important;}

#header.liftingsection {background: #fff url(../img/banners/ASMA5.Banner.Station.jpg) no-repeat top right  !important;}

#header.shadow {background: #fff url(../img/banners/ASMA5.Banner.Tourism.jpg) no-repeat top right  !important;}

#header.march57 {background: #fff url(../img/banners/ASMA5.Banner.Past.jpg) no-repeat top right  !important;}

#header.flags {background: #fff url(../img/banners/ASMA5.Banner.Management.jpg) no-repeat top right  !important;}

#header.storm {background: url(../img/banners/Linksbanner.jpg) no-repeat top right !important;}

/* On the homepage the  header image is overlaid with the site site, hence the z-index*/ 

#homepage #header h1{position: relative;font-size: 1.5em;top:6px;left:35px;color:#fff;display:inline-block;padding:5px 10px 5px 10px;z-index:900; /* For IE8 and earlier */} 

#innerwrap {margin-left:8.82em; min-width:37.43em;max-width:53.68em;}

#wrap {padding: 10px;overflow: hidden;}

#outerwrap{background: #fff;width:960px;margin:10px auto;-khtml-border-radius:10px;-moz-border-radius:10px;-moz-box-shadow:0 1px 3px #666;-webkit-border-radius:10px;-webkit-box-shadow:0 1px 3px #666;overflow: hidden;}

#footer{border-top:1px solid #DDD;clear:both;color:#222;font-size:11px;height:30px;margin:0 auto;padding:10px;text-transform:uppercase;width:930px;}



/* =navigation ************************/

#breadcrumb{position:relative;top:35px;left:9px;}   

.crumb{	list-style: none;margin: 0;	padding: 0;	 display: inline-block;	font-size: .8em;}

.crumb li{float: left;padding: 0 .2em;line-height:1.5em;list-style-type:none!important;line-height:2.2em!important;

}

.crumb li a{text-decoration:none;margin-right: .2em;}

.crumb li.home {background: url(../img/controls/home-icon.png) no-repeat 0 -5px;padding-left: 30px;}

#nav {

	background: #03a2e5 url("../img/controls/logo-top3.jpg") no-repeat top center; 
	
	background-size: 141px 626px;
	
	width:9.3em;
	
	float:left;

	margin-top:10px;

	font-size:0.95em;

	font-weight:bold;

	font-style:normal;

	color:#87d1f6;

}

#nav ul {padding:5px 12px; margin-top:54px;}

#nav ul li {padding:5px 2px;}

#nav ul li a {color:#87d1f6;padding:1px 0;display:block; width:100%;}

#nav ul li a:hover {color:#fff;}

#nav ul li a.current:hover {cursor:default;}

#nav ul.subnav {font-size:0.8em;font-weight:normal;}

#nav img {border:0;} 

#nav ul.subnav {margin-top:0px !important;padding:2px 0 2px 10px !important;}

#nav img.btmlogo {position:relative; width:9.25em; top:4px;padding-top:60px;margin:0 !important;}

#nav a.transparenthomelink {display:block;width:99%;height:133px;}

/*setting the h1 styles, which will apply in header section: a different h1 is found in the right navigation bar. If using the header as a background image, then you will need to have the relative positioning of h1 as 120px*/



#rnav {

	width:170px;

	font-size:0.95em;

	float:right;

	padding-bottom:30px;

	margin:0px 0 1em 1em;

	border:1px solid #ccc;

	border-left-color:#e4e4e4;

	border-top-color:#e4e4e4;

	color:#282780;

	background: #f6fbfe url("../img/controls/rtnav.jpg") no-repeat top center;
	
	background-size: 100% auto;

	font-style:normal;

}

#rnav2 {width:170px;font-size:0.95em;float:right;clear: left;padding-bottom:30px;margin:0px 0 1em 1em;}

#homepage #rnav,#homepage2 #rnav{margin:00px 0 1em 1em;}

#rnav ul,#rnav2 ul {padding-left:10px;}

#rnav p,#rnav2 p {padding-left:10px;}

#rnav h1,#rnav2 h1 {padding:2px 10px 35px 10px;}

#rnav li,#rnav2 li {

	margin:5px 10px 20px 10px;

	font-style: normal;

}

#rnav img,#rnav2 img {width:10.625em;padding-left:5px;}

#rnav{} 

#rnav ul {list-style:disc;}

#rnav ul {list-style-position:inside;}/*force bullets to align with margin*/

#rnav h1{

	color:#87d1f6;

	font-size:1.1em;

	font-weight:bold;

	font-style:normal;

} 

#rnav h1.gallery_title{	background:#f6fbfe url(../img/controls/rtnav.jpg) no-repeat top center; padding: 5px; } 

#rnav li a {color:#282780;}

#rnav img {border:0;}



#rnavwide {width:299px;font-size:0.95em;float:right; padding-bottom:30px;margin:0px 0 1em 1em;border:1px solid #ccc;border-left-color:#e4e4e4;border-top-color:#e4e4e4;color:#282780;background:#f6fbfe url(../img/controls/rtnav_wide.jpg) no-repeat top center;font-style:italic;}

#homepage #rnavwide {margin:00px 0 1em 1em;}

#rnavwide ul {padding-left:10px;}

#rnavwide p {padding-left:10px;}

#rnavwide h1 {padding:2px 10px 35px 10px;}

#rnavwide li {margin:5px 10px 20px 10px;}

#rnavwide img {width:10.625em;padding-left:5px;}

#rnavwide{} 

#rnavwide ul {list-style:disc;}

#rnavwide ul {list-style-position:inside;}/*force bullets to align with margin*/

#rnavwide h1{color:#87d1f6;font-size:1.1em;font-weight:bold;font-style:italic;} 

#rnavwide h1.gallery_title{	background:#f6fbfe url(../img/controls/rtnav_wide.jpg) no-repeat top center; padding: 5px; } 

#rnavwide li a {color:#282780;}

#rnavwide img {border:0;}



/* =JQuery Overides ***************/



.jquery-showcase{margin-bottom:15px!important;height:370px!important;background: white!important;}

.jquery-showcase-header {width:500px!important;position:

relative!important; top: 315px!important; padding: 9px 20px 18px 10px;margin: 0; z-index: 100;}

.jquery-showcase .subtitle{font-size: 12px;}

.lightbox-photos a{border: none!important;}

.jquery-showcase-thumbnail img {margin: 0;padding: 0;}



/* =image thumbs ***************************************/

.thumbs img{height: 150px;padding-bottom: 20px;}

.indexmapthumb{width: 233px!important;float: left; padding-bottom:30px;}

.indexmapthumb p{margin-bottom: 0px!important;}   

.indexmapthumb img{border: none!important;padding-bottom: 10px;}

.photo-intro{float:left;width:200px;}

     

/* =map formatting **********************************/

#maplinks a{	border: none!important; }

.clearmap{clear: left!important;} 

#maintext  img.left{float: left;height: 150px;padding:2px 10px 2px 0} 

.mapcontainer{float:left;padding:0 80px 0 40px;}  

.mapcontainer-right{float:none;padding:0px ;} 

.mapcontainer a ,.mapcontainer-right a  {border: none!important;} 



#ftr {/*border-top:1px solid black;*/

  text-align:center;

  font-size:0.8em;

  margin-top:10px;

  clear:both;}/*border along top of footer set to black, font size reduced. clear applied to footer to force it below the sidebar and main text*/

#ftr {text-align:center; font-size:0.8em;}/*footer paragraph text centred*/

a img {border:none;}/*no border on linked images*/