/*
    Elements of the Steeple design adapted for the SMS.
    
    The original Steeple files were labelled with:
        Project:        UOC Steeple Application
        Version:        1.1
        Last change:    10/03/10
        Assigned to:    David Rendle (dr)    
*/

/* [Global]
-------------------------------------------------------------------*/
/* Applies the white background with blue edges */
body { 
    background: #9cc url(../images/bg-uoc.png) repeat-y 50% 0; 
    margin: 0;
}

body {
    font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
    color: #333;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
}

div.page {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
}

a:link, a:visited, a:active {
    text-decoration: none;
    color: #336633;
    outline: none;
}

a:hover {
    text-decoration: underline;
    color: #336633;
}

a:focus {
    text-decoration: none;
    color: #336633;
}

img { border: 0em none; }

/* [Typography]
-------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
}

h1 {
    font-size: 24px;
    line-height: 32px;
    margin: 10px 0px;
    font-weight: 200;
}

h1 a:link, h1 a:visited, h1 a:active {
    /*text-shadow: 0 2px 0 white;*/
    text-decoration: none;
    color: #333;
}

h2 {
    font-size: 20px;
    font-weight: 200;
    /*line-height: 36px;
    padding: 24px 13px 12px 13px;*/
}

h3 {
    font-size: 16px;
    font-weight: 200;    
}

h4 {
    font-size: 14px;
}

pre {
    font-size: 12px;
}

p,
ul,
ol,
pre
{
    margin-bottom: 1em;
}


ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

.small-caps {
    font-variant: small-caps;
}

.italic {
    font-style: italic;
}

.small-caps-italic {
    font-variant: small-caps;
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.bold-small-caps {
    font-weight: bold;
    font-variant: small-caps;
}

.bold-italic {
    font-weight: bold;
    font-style: italic;
}

.left {
    float: left;
    margin: 0 10px 0 0;
}

/* [Grid]
-------------------------------------------------------------------*/
/* line up content into white section of background */
.container_12, .container_16 { margin-left:auto; margin-right:auto; width:960px; }

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16 {
    display:inline;float:left;position:relative;margin-left:10px;margin-right:10px
}
/*
.container_12 .grid_3, .container_16 .grid_4{ width:220px; }
*/
.container_12 .grid_6, .container_16 .grid_8{ width:460px; }
/*
.container_12 .grid_9, .container_16 .grid_12{ width:700px; }
*/
.container_12 .grid_12, .container_16 .grid_16{ width:940px; }
/*
.alpha{ margin-left:0; }
.omega{ margin-right:0 }
.container_12 .grid_1{ width:60px; }
.container_12 .grid_2{ width:140px; }
.container_12 .grid_4{ width:300px; }
.container_12 .grid_5{ width:380px; }
.container_12 .grid_7{ width:540px; }
.container_12 .grid_8{ width:620px; }
/*
.container_12 .grid_10{ width:780px; }
.container_12 .grid_11{ width:860px; }
.container_16 .grid_1{ width:40px; }
.container_16 .grid_2{width:100px; }
.container_16 .grid_3{width:160px}
.container_16 .grid_5{width:280px}
.container_16 .grid_6{width:340px}
.container_16 .grid_7{width:400px}
.container_16 .grid_9{width:520px}
.container_16 .grid_10{width:580px}
.container_16 .grid_11{width:640px}
.container_16 .grid_13{width:760px}
.container_16 .grid_14{width:820px}
.container_16 .grid_15{width:880px}
*/
/*
.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}
.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}
.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}
.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix{height:1%}
*/

/*------------------------------------------------------------------
[Global Masthead]
-------------------------------------------------------------------*/
/* black background across the top of the page */
#globalMasthead {
    background: #000 url(../images/sprite-global-masthead.png) repeat-x 50% 0;
    border-bottom: 1px solid white;
    height: 47px;
}

/* the UOC logo linked within the masthead */
#globalMasthead #brand a {
    background: #000 url(../images/sprite-global-masthead.png) no-repeat 0 -48px;
    height: 47px;
    width: 136px;
    display: block;
    text-indent: -9999px;
}

#globalMasthead label {
    display: none;
}

#globalMasthead #search #globalMastheadSearch {
    -moz-border-radius: 5px;
    -o-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    background: transparent url(../images/sprite-global-masthead.png) no-repeat -136px -48px;
    border: 1px solid white;
    width: 195px;
    padding: 0 131px 0 22px;
    height: 27px;
    line-height: 27px;
    color: #333;
    margin: 9px 0 0 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#globalMasthead #search #filterOpen,
#globalMasthead #search a#filterClose {
    position: absolute;
    right: 131px;
    top: 11px;
}

#globalMasthead #search a#filterOpen,
#globalMasthead #search a#filterClose {
    text-decoration: none;
    color: #333;
}

#globalMasthead #search a#filterClose {
    -moz-border-radius: 5px 5px 0 0;
    -o-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-bottom: 0;
    padding: 1px 20px 3px 20px;
    text-align: right;
    top: 0;
    right: 0;
    z-index: 200;
    /*width: 102px;*/
}

#globalMasthead #filterWrap {
    position: absolute;
    right: 110px;
    top: 9px;
    width: 200px;
}

#globalMasthead #filterWrap #filters {
    -moz-border-radius: 5px 0 5px 5px;
    -o-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    position: absolute;
    top: 28px;
    right: 0;
    width: 168px;
    z-index: 100;
    padding: 5px 10px;
}

#globalMasthead #filterWrap #filters label {
    display: block;
    line-height: 30px;
}

#globalMasthead #filterWrap #filters label.last {
    border: none;
}

#globalMasthead #search #globalMastheadSubmit {
    background: #000 url(../images/sprite-global-masthead.png) no-repeat 0 -96px;
    width: 100px;
    height: 46px;
    border:none;
    text-indent: -9999px;
    cursor: pointer;
/*  alterations by BB to fix dropping button in Firefox 2 */
/*  display: block;*/
/*  float: right;*/
    position: absolute;
    top: 1px;
    right:2px;
}

/* [IE6 fixes]
-------------------------------------------------------------------*/
/*
* html #globalMasthead #search #globalMastheadSearch {
    width: 350px;
    height: 28px;
}

* html #globalMasthead #search a#filterClose {
    width: 122px;
}

*html #globalMasthead #filterWrap #filters {
    width: 188px;

}


* html #globalMasthead #filterWrap #filters label.last {
    padding-bottom: 0;
}

* html #globalMasthead #filterWrap #filters label {
    height: 30px;
}
*/


/* [Containers]
-------------------------------------------------------------------*/

#footer {
    border-top: 5px solid #e6e6db;
    padding-top: 19px;
    margin-top: 19px;
}

/* [Breadcrumb]
-------------------------------------------------------------------*/

#breadcrumb {
    background: #f4f4ee url(../images/sprite-layout-uoc.png) no-repeat 0 0;
    border-bottom: 1px solid #AAA;
    color: #AAA;

    line-height: 47px;
    width: 940px;
    height: 47px;
}

#breadcrumb a:link, #breadcrumb a:visited, #breadcrumb a:active {
    text-decoration: none;
}

#breadcrumb a:hover {
    text-decoration: underline;
}

#breadcrumb a.home {
    padding-left: 30px;
}

#breadcrumb a.item {
    padding-right: 30px;
}




/*-------------------------------------------------------------------
    Rounded panels that are cross browser compatible.
---------------------------------------------------------------------*/

/* Blue tab top panel.  Emulates top tab of multilineTextList */
.roundedTab .b1, .roundedTab .b2, .roundedTab .bflat 
    {background:#6699ff;}
.roundedTab .b3, .roundedTab .b4, .roundedTab .roundedBoxSides 
    {background:#6699ff; border-right-color:#6699ff; border-left-color:#6699ff;}


/*-------------------------------------------------------------------
    Tables within jsTabs
---------------------------------------------------------------------*/

.camJsTabSet th {
    text-align: left;
    padding: 0.1em 0.5em 0.1em 0.5em;
}
.camJsTabSet td {
    padding: 0.1em 0.5em 0.1em 0.5em;
}

/*-------------------------------------------------------------------
    Lists of items (with roundedTab tops)
---------------------------------------------------------------------*/
/* heading inside blue tab top */
.itemList .roundedContent h3 {
    color: white;
    text-align: center;
    position: relative;
    top: -3px;  
    padding: 0;
    margin: 0px;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;    
    font-weight: normal;  
}

/*.fullWidth ul {
    width: 938px;
}*/

.itemList > table,  .itemList > ul {
    width: 100%;
    border-color: #AAA;
    list-style-type: none;
    border-right: 1px solid #AAA;
    border-left: 1px solid #AAA;
    padding: 0;
    margin: 0;   
    background: #f4f4ee;
}

.itemList td {
    border-bottom: 1px solid #AAA;
    background: #f4f4ee;    
    padding: 18px 20px 17px 20px;
    margin-left: 5px;
}

/* the table cell grouping one collection's items together */
td.recentCollection {
    padding: 0px 0px 0px 10px;
    margin: 0;
    border-bottom: 1px solid #AAA;
}

.recentCollection > h3 {
	color: black;
	margin: 1em;
}
/*
.recentCollection > h3 {
    color: black;
    margin: 1em;
}
*/

td.recentCollection .listing {
	width: 99%;
}

.recentCollection .listing td { 
    padding-bottom: 0.5em;
}

.recentCollection .listing td { 
	border-bottom: none;
}
/*-------------------------------------------------------------------
    Featured Content (Spotlight) 
---------------------------------------------------------------------*/
.tabBody.spotlightBox .roundedBoxSides { padding-top: 0px; }

table.spotlight td { 
	vertical-align: top; 
}

/* spotlight rounded box titles */
/* box holding item title */
.spotlightTitle .roundedBoxSides { padding: 0; }

.spotlightTitle {
    width: 400px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 36px;
    font-weight: normal;
    text-align: center;
    padding: 0 6px 0 0;
    text-decoration: none;
    display: block;
    color: white;
    
    margin-bottom: 0.5em;
}

/* foreground title box (green) */
.spotlightTitle .b1,  .spotlightTitle .bflat, .spotlightTitle .b2,  .spotlightTitle .b3,  .spotlightTitle .b4,  .spotlightTitle .roundedBoxSides {background:#366; border-right-color:#366; border-left-color:366; }


/* Background title box */
.spotlightTitle.bg .bflat 
    { background: #aaaaaa; }
.spotlightTitle.bg .b1, .spotlightTitle.bg .b2, .spotlightTitle.bg .b3, .spotlightTitle.bg .b4, .spotlightTitle.bg .roundedBoxSides
    {background:#333333; border-right-color:#333333; border-left-color:#333333;}

/* Background title box with hover */
.spotlightTitle.bg:hover .bflat 
    { background: #aaaaaa; }
.spotlightTitle.bg:hover .b1, .spotlightTitle.bg:hover .b2, .spotlightTitle.bg:hover .b3, .spotlightTitle.bg:hover .b4, .spotlightTitle.bg:hover .roundedBoxSides
    {background:#444444; border-right-color:#444444; border-left-color:#444444;}

/* title box link */
.spotlight a:link, .spotlight a:visited, .spotlight a:active {
    text-decoration: none;
    outline-style: none;
}
.spotlightTitle:hover span {
    text-decoration: underline;
}

/* spotlightBody elements to be positioned absolute from this one */
.spotlightBodies { 
    position: relative;
    overflow: hidden;
    width: 500px;
    height: 420px;
}

/* Container for spotlight image and description. */
.spotlightBody { 
	color: #333333; 
    width: 500px; /* the maximum image width in the sms is 400px */
    overflow: hidden;
    position: absolute;
}

/* only one spotlight item at a time will be shown */
.spotlightBody.bg { 
	visibility: hidden;
}

/* Image for spotlight. Try to handle over sized images gracefully by centering */
.spotlightIcon { 
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/* Description centred and text a little less wide that a full size image. */
.spotlightDescription {
    margin-left: auto;
    margin-right: auto;
    padding: 1em 5em;
    text-align: justify;
}

/* hide spotlightBody when in the background */
/*.spotlightBody.bg { display: none;}*/


/* Style the watch/listen button 
    Background image sprite is transparent with arrow only.
*/

/*
.spotlightButton a {
    width: 102px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 36px;
    font-weight: normal;
    text-align: center;
    padding: 0 6px 0 0;
    text-decoration: none;
    display: block;
}

.spotlightButton a:link,
.spotlightButton a:visited,
.spotlightButton a:active {
    background: #366 url(../images/sprite-layout-uoc.png) no-repeat -458px -358px;
    color: white;
    outline-style: none;
}

.spotlightButton a:hover{
    background-color: #333;
    text-decoration: underline;
}

div.spotlightButton .roundedBoxSides { width: 120px; padding: 0; }
div.spotlightButton .b1,  div.spotlightButton .bflat, div.spotlightButton .b2,  div.spotlightButton .b3,  div.spotlightButton .b4,  div.spotlightButton .roundedBoxSides {background:#366; border-right-color:#366; border-left-color:366;}
*/
.scroller { position: relative; overflow: hidden; z-index:10; width:800px; height: 200px; padding: 0px; top:0px; left:0px; }

/* set width = (maxItems+visibleItems) * itemWidth.  Eg (5+2)*400 = 2800; */
.scroller ul { position: absolute; list-style-type: none; width:2800px; padding: 0px; margin: 0px; top: 0px; left: 0px;}
.scroller li.scrollItem { float: left; width: 400px; height: 200px; overflow: hidden; }
.scroller .spotlightItem { float: left; }
.scroller table { width: 400px; height: 200px; border: 1px solid grey; }
.scroller table td.text { vertical-align: top; }
.scroller table td.image { width: 50px; }
.scroller .spotlightIcon { 
	float: left; 
	height: 100px;
}
.scroller .spotlightDescription {
    /*width: 100px;*/
}


/*-------------------------------------------------------------------
    Search forms within media/inst/person pages. 
---------------------------------------------------------------------*/
form.search {
    padding-top: 2em;
}