/* Build by Neil Paterson, Design by Will Price @ CIVIC - www.civicuk.com */

* {margin:0; padding:0;}
body, html {background:#fff;}
body {text-align:center; font-family:Arial, sans-serif; font-size:81%; background:url(../images/bgTop.png) top left repeat-x; position:relative}
#container {width:970px; margin:0 auto; text-align:left; position:relative}
#content {padding:20px 0 0 0}
body#home #content {padding:0}
.clear {display:block; clear:both; height:1px; width:100%; text-indent:-9999px}
.skiplinks, .printLogo {display:none;}
div#AdminFunc {position:absolute; top:0; left:0; z-index:1000}
body, img, a, div, span, p, #subBanner #subText p, #slideshowText p, .sliderNav a, #slideshowNav {behavior:url(assets/js/iepngfix.htc) }

/* header */
#header {height:210px; position:relative; background:url(../images/headerBg.png) top right no-repeat;}
#header a {color:#333}
#header a:hover {border-bottom:1px dotted #333}
#header p#logo a {width:240px; height:140px; display:block; background:url(../images/sisLogo.png); position:absolute; top:0; left:0; text-indent:-9999px; margin:0; line-height:0; border:none}
#header p#logo a:hover {border:none}
.search {position:absolute; top:18px; right:0; text-align:right; padding:0 14em 0 0; font-size:91%;}
.search ul {padding:7px 0 0 0}
.search li {display:inline; border-right:1px solid #333;}
.search li.last {border:none;}
.search fieldset {border:none; padding:0;}
.search form {position:absolute; top:0; right:0;}
.search form input {padding:3px; font-size:100%; width:120px;}
.search form input.submit {padding:1px; width:auto;}
.search label {display:none;} 
.search a {margin:0 3px 0 0; padding:0}
#topNav {position:absolute; top:153px; left:0; height:48px; }
#topNav .topNavLeft {position:absolute; top:0; left:0; background:url(../images/topNavLeft.png) top left no-repeat; display:block; width:17px; height:48px; display:block}
#topNav .topNavRight {position:absolute; top:0; right:0; background:url(../images/topNavRight.png) top left no-repeat; display:block; width:17px; height:48px; display:block}
#topNav ul {background:url(../images/topNavLines.gif) 142px 12px no-repeat; height:48px;}
#topNav .wrapper {height:48px; display:block; margin:0 17px; background:url(../images/topNavBg.png) top left repeat-x;}
#topNav li {float:left; text-align:center; display:block; height:48px;}
#topNav li a {font-size:121%; color:#fff; font-weight:bold; margin:14px 0 0 0; display:block; text-align:center; float:left; border:none;}
#topNav li a:hover {color:#99a7cc; border:none;}
#topNav li.topNav6 a {border:none;}
#topNav li.topNav1 a {width:143px;}
#topNav li.topNav2 a {width:133px;}
#topNav li.topNav3 a {width:159px;}
#topNav li.topNav4 a {width:195px;}
#topNav li.topNav5 a {width:140px;}
#topNav li.topNav6 a {width:166px;}
body#home #topNav li.topNav1 a {background:url(../images/topNav1hot.png) 27px 0 no-repeat; color:#323232; padding:14px 0 28px 0; margin:0}
body#about #topNav li.topNav2 a {background:url(../images/topNav2hot.png) top center no-repeat; color:#323232; padding:14px 0 28px 0; margin:0}
body#expertise #topNav li.topNav3 a {background:url(../images/topNav3hot.png) top center no-repeat; color:#323232; padding:14px 0 28px 0; margin:0}
body#achievements #topNav li.topNav4 a {background:url(../images/topNav4hot.png) top center no-repeat; color:#323232; padding:14px 0 28px 0; margin:0}
body#news #topNav li.topNav5 a {background:url(../images/topNav1hot.png) top center no-repeat; color:#323232; padding:14px 0 28px 0; margin:0}
body#media #topNav li.topNav6 a {background:url(../images/topNav4hot.png) top center no-repeat; color:#323232; padding:14px 0 28px 0; margin:0}

/* fonts, headings, lists */
a {text-decoration:none; outline:none;}
img {border:none;}
li {list-style-type:none;}
h1 {color:#0098db; font-size:191%; margin:0 0 10px 0; font-style: italic; font-weight:bold}
h2 {color:#fff; font-size:191%; margin:0 0 10px 0; font-style:italic}
h2 a {color:#fff;}
h2 a:hover {color:#f0f0f0}
h3 {margin:0 0 10px 0}

/* tooltip */
#tooltip {font-size:91%; position:absolute; top:0; left:0; z-index:3000; color:#fff; background-color:#263692; padding:5px; opacity:0.85; -moz-border-radius:5px; -webkit-border-radius:5px;}
#tooltip h3, #tooltip div {margin:0;}
body#home #tooltip {display:none!important}
body#home #content #tooltip {display:block!important}
body#home p#logo a {cursor:default}

/* homepage banner */
#banner {position:relative; margin:7px 0 20px 0}
#slideshowContent {width:970px; height:380px; overflow:hidden; position:relative}
	* html #slideshowContent {height:380px; overflow:hidden}
#slideshow img {position:absolute!important; top:5px!important; left:5px!important; z-index:1; width:960px!important; height:370px!important;}
span.mask {width:970px; height:381px; display:block; position:absolute; top:0; left:0; background:url(../images/sliderMask.png); z-index:100; overflow:hidden;}
#slideshowNavContainer {position:absolute; z-index:102; bottom:4px; left:5px; background:url(../images/sliderNavBg.png) top left no-repeat; width:675px; height:52px;}
	* html #slideshowNavContainer {bottom:5px; background:url(../images/sliderNavBgIe.png); width:678px;}
#slideshowNav {padding:0 0 0 168px; }
#slideshowNav li {width:48px; float: left; margin:0 10px 0 0; list-style: none; padding:0; display: block; position:relative}
#slideshowNav li span {position:absolute; }
#slideshowNav li img {border:1px solid #fff; margin:4px 0 0 0}
#slideshowNav a {width:48px; height:auto; padding:0; display:block; padding:12px 0 0 0; background:url(../images/sliderArrow.png) 17px 0 no-repeat; }
#slideshowNav a:hover img {border:1px solid #ccc}
#slideshowNav li a.activeSlide {background:none}
	* html #slideshowNav li a.activeSlide img {border:1px solid #000}
#slideshowNav a:focus {outline:none;}
#slideshowNav img {border: none; display:block}
#slideshowText {position:absolute; top:207px; left:0; }
#slideshowText p {position:relative; font-size:191%; color:#fff;  background:transparent url(../images/sliderTextBg.png) 5px 0 no-repeat; width:680px; height:117px; padding:0; margin:0; line-height:1em}
	* html #slideshowText p {width:683px; background:transparent url(../images/sliderTextBgIe.png) 5px 0 no-repeat; line-height:1}
#slideshowText p span {padding:50px 0 0 20px; display:block;}
#sliderContent {position:absolute; top:5px; right:5px; width:285px; height:370px; background:transparent url(../images/sliderContentBg.png); z-index:1000; overflow:hidden}
#sliderContent div.panel {padding:15px 0 20px 18px}
#sliderContent img {margin:0 0 10px 0; position:relative!important; top:auto; left:auto; float:none!important; clear:both; width:266px; height:155px;}
#sliderContent h2 {line-height:1em}
#sliderContent div.panel p {color:#fff; margin:0 0 10px 0; display:block; clear:both; position:relative}
#sliderContent div.panel p a {color:#fff; font-weight:bold; background:url(../images/whiteArrow.gif) center left no-repeat; padding:0 0 0 10px; position:relative}
#sliderContent div.panel p a:hover {border-bottom:1px dotted #fff}
.sliderNav {position:absolute; bottom:10px; right:10px; width:64px; z-index:100}
.sliderNav li {display:inline;}
.sliderNav a {height:32px; width:32px; display:block; text-indent:-9999px; float:left}
.sliderNav a#prev {background:url(../images/slider-arrow-previous.png)}
.sliderNav a#next {background:url(../images/slider-arrow-next.png)}

/* homepage panels */
.smPanel {width:211px; display:block; float:left; margin:0 10px 0 4px;}
	* html .smPanel {margin:0 -14px 0 4px}
.smGreyRound {position:relative; border:1px solid #dfdfdf; background:#e8e8e8 url(../images/whiteBottomGradient.png) bottom left repeat-x; -moz-border-radius:5px; -webkit-border-radius:5px; behavior:url(../js/border-radius.htc); padding:140px 15px 15px 15px; height:110px; margin:0 0 10px 0}
.smGreyRound .image {position:absolute; top:2px; left:2px; width:207px; height:130px; overflow:hidden}
.smGreyRound .image img {position:absolute; top:3px; left:7px; z-index:1; width:190px; height:130px;}
.smGreyRound .image span {position:absolute; top:0; left:-2px; z-index:2; background:url(../images/smGreyRoundMask.png); width:207px; height:130px; display:block}
.smGreyRound h2 {color:#333; font-size:121%; margin:0 0 5px 0}
.smGreyRound h2 a {color:#333;}
.smGreyRound h2 a:hover {color:#000} 
.smGreenRound {background:#009b48 url(../images/greenPanelBg.png) top center repeat-y; float:right; width:290px; margin:-3px 2px 0 0}
.smGreenRound .wrapper {background: url(../images/greenPanelTop.png) top left no-repeat; padding:20px 15px 0 15px; margin:0}
.smGreenRound span.bottom {background: url(../images/greenPanelBottom.png) top left no-repeat; width:290px; height:25px; display:block; text-indent:-9999px; margin:0}
.smGreenRound h2 {font-size:151%;}
.smGreenRound ul {line-height:150%;}
.smGreenRound li {color:#fff; font-weight:bold; font-size:100%; margin:0; background:url(../images/whiteArrow.gif) center left no-repeat; padding:0 0 0 10px; position:relative}
.smGreenRound li a {color:#fff; font-weight:bold;}
.smGreenRound li a:hover {border-bottom:1px dotted #fff;}
.smGreenRound span {font-weight:normal; font-style:italic; display:block; margin:0 0 8px 0; color:#fff; font-size:100%;}
div.smPanel .link {display:block; clear:both; padding:0}
div.smPanel .link a {width:215px; height:80px; display:block; float:left; position:relative; padding:15px 0 0 5px; margin:0 7px 0 0}
div.smPanel .link a span {width:215px; height:80px; display:block; position:absolute; top:0; left:0; z-index:1}
div.smPanel .p1 span {background:url(../images/home-smPanel1.png) bottom left repeat-x; cursor:pointer}
div.smPanel .p2 span {background:url(../images/home-smPanel2.png) bottom left repeat-x; cursor:pointer}
div.smPanel .p3 span {background:url(../images/home-smPanel3.png) bottom left repeat-x; cursor:pointer}

.smTwitter {background:#f6a900 url(../images/yellowPanelBg.png) top center repeat-y; float:right; width:290px; margin:20px 2px 0 0; position:relative;}
.smTwitter .wrapper {background: url(../images/yellowPanelTop.png) top left no-repeat; padding:20px 15px 0 15px; margin:0}
.smTwitter span.bottom {background: url(../images/yellowPanelBottom.png) top left no-repeat; width:290px; height:25px; display:block; text-indent:-9999px; margin:0}
.smTwitter h2 {font-size:151%;}
.smTwitter ul {line-height:150%;}
.smTwitter li {color:#fff; font-weight:bold; font-size:100%; margin:0; padding:0 0 0 10px; position:relative}
.smTwitter li a {color:#fff; font-weight:bold;}
.smTwitter li a:hover {border-bottom:1px dotted #fff;}
.smTwitter span {font-weight:normal; font-style:italic; display:block; margin:0 0 8px 0; color:#fff; font-size:100%;}
.smTwitter #bird{background:url(../images/twitter.png) top center no-repeat; display:block; width:97px; height:95px; position:absolute;top:-30px; right:-35px; z-index:10;}

.tweet .tweet_list, .query .tweet_list { margin: 0; padding: 0;  }
.tweet .tweet_list li, .query .tweet_list li {overflow-y: auto;  overflow-x: hidden;  padding: .5em;  color:#003b89;}
.tweet .tweet_list li a, .query .tweet_list li a {    color: #fff; }

.smTwitter .tweet span{color:#003b89;margin:0; }
.smTwitter .tweet span.tweet_time{border-bottom:1px dotted #fff;}

/* sub page banners */
#subBanner {width:960px; height:235px; overflow:hidden; position:relative; margin:15px 0 0 5px}
#subBanner #subImage {width:960px; height:235px; overflow:hidden}
#subBanner #subText {position:absolute; bottom:0; left:0; width:960px; height:117px; background:url(../images/sliderSubPageText.png) 0 0 no-repeat;}
#subBanner #subText p {font-size:200%; font-style:italic; font-weight:bold; color:#fff; font-style:italic; padding:55px 0 0 30px}
#subBanner #subText p span {font-size:61%; display:block; font-weight:normal}
#subBanner span.subMask {width:960px; height:235px; display:block; position:absolute; top:0; left:0; background:url(../images/sliderSubPageMask.png); z-index:100}
#subBanner .pics img { display: none }

/* milestone slider */
#ms {height:338px; width:682px; position:relative; overflow:hidden; margin:0 0 20px 0}
#ms span.mask {position:absolute; top:0; left:0; z-index:100; background:url(../images/milestonesOverlay.png); height:338px; width:682px; display:block}
#milestoneContent {height:338px; width:682px; overflow:hidden; position:relative}
	* html #milestoneContent {height:338px; overflow:hidden}
#milestone div {position:absolute; top:0; left:0; z-index:1; width:682px; height:320px}
#milestonenav {display:block; clear:both; width:682px; height:40px; padding:0; position:absolute; bottom:0; left:0; z-index:1000; text-align:center;}
#center ul#milestonenav {margin:0;}
#center ul#milestonenav li {display:inline; background:none; padding:0; margin:0}
#center ul#milestonenav li a {color:#0098db; text-decoration:none; border-left:1px solid #d4d4d4; border-bottom:none; padding:0 10px; font-size:131%; font-weight:bold; cursor:pointer}
#center ul#milestonenav li a.activeSlide {color:#0b276e}
#center ul#milestonenav li#milestone3 {display:none;}
#center ul#milestonenav li#milestone7 {display:none;}
#center ul#milestonenav li#milestone9 {display:none;}
#center ul#milestonenav li#milestone1998 a {border-left:none}
#milestone div.blank {}
#center ul#milestonenav li a.activeSlide {background:none}
	* html #center ul#milestoneNav li a.activeSlide img {border:1px solid #000}
#center ul#milestoneNav li a:focus {outline:none;}
#center #milestone p {position:absolute; top:1px; left:1px; z-index:100; font-size:100%; color:#fff!important;  background:transparent url(../images/milestonesP.png) bottom right no-repeat; width:205px; padding:0; margin:0; line-height:140%}
#center #milestone p.wide {background:transparent url(../images/milestonesPwide.png) bottom right no-repeat; width:245px}
#center #milestone p strong {display:block; clear:both; color:#fff}
#center #milestone p span {padding:20px 20px 30px 20px; display:block;}
#center #milestone p em {font-style:normal; font-weight:bold; display:block; clear:both}


/* left */
#left {width:207px; float:left; margin:0 0 30px 0}
#left h2 {background:url(../images/leftH2.gif) top left no-repeat; text-transform:uppercase; font-weight:normal; font-size:100%; padding:15px; height:10px; margin:0 0 0 5px}
	* html #left h2 {padding:12px 15px}
#left ul#subNav {line-height:150%;background:url(../images/leftUL.gif) bottom center no-repeat; padding:0 0 20px 0; margin:0 0 15px 5px;}
#left ul#subNav li {color:#fff; line-height:150%;background:url(../images/leftLI.gif) top center repeat-y; padding:0 0 5px 0}
#left ul#subNav li a {color:#fff; padding:5px 15px; background:#25428a; margin:0 2px 0 2px; display:block;}
#left ul#subNav li.hot ul li, #left ul#subNav li.hot ul li a, #left ul#subNav li.open ul li a {background:none;}
#left ul#subNav li.hot ul, #left ul#subNav li.open ul {padding:3px 0 0 0; font-size:91%;}
#left ul#subNav li.hot ul li a, #left ul#subNav li.open ul li a {padding:2px 0 2px 15px; line-height:130%;}
#left ul#subNav li.hot ul li a:hover, #left ul#subNav li.open ul li a:hover, #left ul#subNav li.open ul li.hot a {background:none; text-decoration:underline;}
#left ul#subNav li a:hover, #left ul#subNav li.hot a, #left ul#subNav li.hot a:hover, #left ul#subNav li.open a {background:#071b4c}
#left ul#nuggets {width:200px; height:200px; overflow:hidden}
#left ul#nuggets li {width:200px; height:200px;}

/* center */
#center {margin:0 14px 36px 14px; float:left; width:491px; -moz-border-radius:5px; -webkit-border-radius:5px; behavior:url(../js/border-radius.htc); background:#fff; padding:0 14px 14px 14px}
#center.wideRight {width:716px; margin:0 0 36px 14px}
#center ul {margin:0 0 15px 10px; line-height:130%;}
#center li {margin:0 0 5px 0}
#center ul li {background:url(../images/centerLi.gif) 0 6px no-repeat; padding:0 0 0 10px; display:block;}
#center ul li a {}
#center h2 {font-size:121%; font-style:normal; color:#263692; display:block; padding:5px 0; margin:0 0 5px 0}
#center p {margin:0 0 15px 0; line-height:150%; color:#333; text-align:left!important}
#center p.intro {font-size:121%}
#center a {color:#0d2f85; border-bottom:1px dotted #0d2f85;}
#center a:hover {color:#000; border-bottom:1px dotted #000}
#center a.backtop {float:right; clear:both; display:block}
#center img.floatLeft, body#news #center img {float:left; border:2px solid #0d2f85; padding:2px; margin:0 10px 10px 0}
#center img.floatRight {float:right; border:2px solid #0d2f85; padding:2px; margin:0 0 10px 10px}
#center #map1 {height:400px; border:2px solid #0d2f85; margin:0 0 15px 0}
#center #map1 a, #center #map1 a:hover {border:none}

/* center accordion */
#center .accordion {width:100%; margin:0 0 15px 0}
#center .accordion p {background:none; padding:10px 0 0 0;}
#center .accordion p img {border:1px solid #ccc; float:left; margin:0 20px 0 0}
#center .accordion p a {font-weight:bold;}
#center .accordion h3 {font-size:121%; font-style:normal; border-top:1px solid #ccc; border-bottom:1px solid #ccc; color:#263692; cursor:pointer; display:block; padding:5px 0; background:url(../images/accordion-closed-arrow.gif) center right no-repeat; margin:1px 0 -2px 0; position:relative}
#center .accordion h3.selected, #center .accordion h3.selected:hover {background:url(../images/accordion-open-arrow.gif) center right no-repeat; color:#263692}
#center .accordion h3:hover {color:#000; background:url(../images/accordion-open-arrow.gif) center right no-repeat;}
#center .accordion h3.selected {border-top:1px solid #929ac8; border-bottom:1px solid #929ac8}
#center .accordion ul {padding:10px 0 0 0}
body#media #center .accordion a {display:block; clear:both; border:none;}
#center .accordion h4{padding:10px 0 0 0;}
#center .accordion h4 + p{padding:0;}

/* center form */
#center div.form {-moz-border-radius:5px; -webkit-border-radius:5px; padding:15px 15px 0 15px; border:1px solid #ccc; background:#fff;}
#center form p {display:block; height:2em;}
#center form label {width:150px; float:left; padding:5px 0}
#center form input {background:#f5f5f5; border:none; padding:5px; border:1px solid #333; width:290px;}
#center form input.submit {display:block; clear:both; margin:10px 0 0 150px; width:auto;}
#center form input.submit:hover {background:#ccc}
#center form p.dob {margin:0; height:auto}
#center form p.dob select {background:#f5f5f5; border:none; padding:5px; border:1px solid #333;}
#center form p.submit {padding:15px 0 0 0; margin:0 0 30px 0}

/* center news */
#center div.newsItem {-moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #dcdcdc; padding:10px; margin:0 0 10px 0; display:block;}
#center div.newsItem img {float:left; border:2px solid #0d2f85; padding:2px; margin:0 10px 10px 0}
#center div.newsItem p.marginLeft {margin:-3px 0 10px 90px}
#center div.newsItem h2 {padding:0;}
body#about #center div.newsItem img {width:150px; float:left; margin:0 10px 5px 0}
body#about #center div.newsItem {padding:10px; position:relative}
body#about #center div.newsItem li a {background:url(../images/newWin.gif) center right no-repeat; padding:0 10px 0 0; border:none;}
#center a.externalLink {background:url(../images/newWin.gif) center right no-repeat; padding:0 10px 0 0}
#center a.email {background:url(../images/css-icon_mail.gif) center right no-repeat; padding:0 20px 0 0}
#center a.pdf {background:url(../images/css-icon_pdf.gif) center right no-repeat; padding:0 20px 0 0}
#center #ftfcontainer a.externalLink {background:none; padding:0}
#center #ftfcontainer table a.fom {border:none!important}

body#about #center div.newsItem li a {}

/* right */
#right {width:205px; margin:0 5px 0 0; float:right;}
#right .greyPanel {background:url(../images/greyPanelBg.png) bottom right no-repeat; padding:0 0 20px 0; margin:0 0 10px 0; display:block; clear:both; position:relative}
#right .greyPanel {}
#right .greyPanel h2 {background:#007ab0 url(../images/rightH2bg.gif) top left no-repeat; padding:7px 15px; margin:0 0 10px 1px; font-size:100%; text-transform:lowercase; position:relative; display:block; clear:both;}
#right .greyPanel p, #right .greyPanel div, #right .greyPanel ul {margin:0 0 10px 0; line-height:150%; color:#333}
#right .greyPanel p, #right .greyPanel div, #right .greyPanel ul {padding:0 15px}
#right .greyPanel a {color:#0d2f85; font-weight:bold;}
#right .greyPanel a:hover {color:#000}

/* wide */
#wide ul {margin:0 0 15px 10px; line-height:130%;}
#wide li {margin:0 0 5px 0}
#wide ul li {background:url(../images/centerLi.gif) 0 6px no-repeat; padding:0 0 0 10px; display:block;}
#wide p.resultsheader {-moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #ccc; padding:5px; margin:0 0 10px 0}

/* footer */
#footer { width:100%; display:block; clear:both; padding:10px 0 10px 2px; height:30px;}
#footer li {display:inline; font-size:91%; border-right:1px solid #333; float:left; padding:0 5px }
#footer a {color:#333; float:left; padding:0}
#footer a:hover {border-bottom:1px dotted #333}
#footer li.last {border:none;}
#footer li.high {display:none}

/* gallery */ 
#center ul.gallery {padding:0; margin:0;}
#center ul.gallery li {width:182px; padding:0; margin:0; float:left; margin:0 20px 5px 0; min-height:205px; background:none;}
	* html #center ul.gallery li {height:200px;}
#center ul.gallery li a{border:none;}
#center ul.gallery li.clearLeft {clear:left;}
#center ul.gallery li.noMargin {margin:0;}
#center ul.gallery li a.externalLink{background:none; padding:0;}
#center ul.gallery li a span {background:url(../images/centerLi.gif) 0 0.5em no-repeat; padding:0 0 0 10px; margin:10px 5px; font-size:90%; display:block; clear:both;}
#center ul.gallery li a:hover span {text-decoration:underline; background:url(../images/centerLi.gif) 0 0.5em no-repeat;  }

/* remove colouring for dehli */
.smGreenRound {background:#00a4e1 url(../images/bluePanelBg.png) top center repeat-y;}
.smGreenRound .wrapper {background: url(../images/bluePanelTop.png) top left no-repeat;}
.smGreenRound span.bottom {background: url(../images/bluePanelBottom.png) top left no-repeat; }