/* layout.css - contains the positioning and layout styles for all audiences */
    
/* set the body to have no padding or margin and set the font size to default 
to 62.5% (10px - to make it easier to specify a px size in em (at default text 
size broswer settings) for the rest of the styles)*/
body {
    margin: 0px;
    padding: 0px;
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 62.5%;
    min-width: 450px; /* min-width so small windows don't break column layout */
}

/* ############## START BANNER STYLES ############### */
/* headerBox is the containing div for all the header elements */
#headerBox {
    padding: 0px;
    min-width: 750px; /* to prevent wide banners from wrapping under logo */
}

/* float the logo image left and give it no border */
#headerBox img.logo {
    float: left;
    margin: 0px;
    border: none;
}

/* both "information about" and "information for" bars given left margin that 
takes them past the 150px wide logo image. Top and bottom margins eliminated so 
they sit nicely together */
#headerBox ul {
    margin-left: 150px;
    margin-bottom: 0px;
    margin-top: 0px;
}

/* "information about" bar */
#headerBox #topBar1 {
    padding: 4px;
}

/* "information for" bar */
#headerBox #topBar2 {
    margin-top: 0px;
    padding: 4px;
}

/* list items in "information about/for" display inline, at 12px default.  */
#headerBox li {
    font-size: 1.2em;
    display: inline;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 4px;
}

/* the first items in the list don't need the left border */
#headerBox li.first {
    border: 0px; 
    padding-left: 0px;
}

/* link styles for "information for/about" */
#headerBox li a {
    text-decoration: none;
    font-weight: normal;
}
    
/* link hover styles for "information for/about" */
#headerBox li a:hover {
    text-decoration: underline;
}

/* container div for search form on bottom right of banner, needed to set 
positioning context for the form */
#searchForm {
    float: right;
    padding: 1px;
}

#searchForm form {
    margin: 0px;
}

/* setting a lower font size for the form elements */
#searchForm form input {
    font-size: 0.9em;
}

#bannerImageBox {
    margin-left: 150px;
}
    
/* breadcrumbBox is the list of breadcrumb links. */
#breadcrumbBox, #breadcrumbBox2 {
    clear: both;
    font-size: 1.2em;
    margin: 0px;
    padding: 4px;
}

#breadcrumbBox2 {
    padding-left: 6px;
}

#breadcrumbBox, #breadcrumbBox2 ul {
    list-style: none;
    margin: 0px;
}

#breadcrumbBox2 ul {
    padding-left: 0px;
    display: inline;
}

/* the <sct:css_breadcrumb> tag wraps the breadcrumb ul in a div */
#breadcrumbBox2 div {
    display: inline;
}

#breadcrumbBox li, #breadcrumbBox2 li {
    display: inline;
    padding-left: 3px;
}

#breadcrumbBox li a, #breadcrumbBox2 a {
    text-decoration: none;
}

#breadcrumbBox li a:hover, #breadcrumbBox2 a:hover {
    text-decoration: underline;
}

/* ############## START COLUMN LAYOUT STYLES ############### */
/* contentBox is the central column. We're putting it first in the source code 
order for SEO and accessibility reasons. contextNavBox is the context nav left 
column and will be coming second in the source order, and finally extrasBox is 
third in source order and is on the right.
We'll do this by floating each of the columns to the left, then pulling 
contextNavBox and extrasBox into position with negative margins */
/* bodybox is the container div for all three columns */
#bodyBox {
    padding-left: 150px; /* space on the left for contextNavBox */
    padding-right: 150px; /* space on the right for extrasBox */
    clear: both;
/*    width: 100%;
    margin: 0px;*/
}

/* contentBox floated and made relative so that we can override the block 
display and sit the columns side by side */
#contentBox {
    float: left;
    position: relative;
    width: 100%; /* fill the available space less the padding of bodyBox */
    /* overflow: auto; */ /* IC: commented out as interfering with Photo Gallery */
}


/* add padding to content box via an internal wrapper div since applying it 
to contentBox affects the positioning */
#contentPadder {
    padding: 15px;
    padding-left: 50px;
    padding-right: 50px;
}

/* contextNavBox floated and made relative so that we can override the block 
display and sit the columns side by side. The column is dragged the full width 
of bodyBox (less the padding) with the -100% margin and then pushed the final 
width of the padding with the right-position value (although IE6 needs a fix 
because the 100% negative margin pushes it the full width of the browser window, 
not the container div, bah) */
#contextNavBox {
    float: left;
    position: relative;
    width: 150px; /* set width of column to match left padding of bodyBox */
    margin-left: -100%;
    right: 150px; /* set right position to width of contextNavBox */
}

/* here's a fix for the left column position in IE 6 */
* html #contextNavBox {
    left: 150px;  /*left position should be set to the width of extrasBox */
}

/* here's a fix for the left column position in IE 7 */
* + html #contextNavBox {
    left: 150px;  /*left position should be set to the width of extrasBox */
}

/* extrasBox floated and made relative so that we can override the block 
display and sit the columns side by side. It is positioned with a neagtive 
right margin set to its own width */
#extrasBox {
    float: left;
    position: relative;
    width: 150px;
    margin-right: -150px;
}

#extrasPadder {
    padding: 5px;
}

/* ############## CONTEXT NAV STYLES ############### */
/* nav containter ul with all padding and margins removed, except for a 10px 
bottom padding so that the curved list bottom will display. Width fixed to 
fill 150px space */
#contextNavBox ul, #contextNavBox div.navList {
    margin: 0px;
    padding: 0px;
    padding-bottom: 10px;
    width: 150px;
}

/* set font height and remove whitespace from list items so that we can fill the 
<li> with the <a> for rollover purposes */
#contextNavBox ul li {
    font-size: 1.3em;
    margin: 0px;
    padding: 0px;
    display: inline; /* this is a fix for the IE 6 whitepace list bug */
}

/* add padding and set to display block so that the mouseover effects 
fill the containing <li> */
#contextNavBox ul li a {
    padding: 5px;
    margin: 0px;
    text-decoration: none;
    display: block;
}

#contextNavBox ul li form {
    margin: 0px;
    padding: 5px;
}

#contextNavBox ul li form input {
    width: 120px;
}

/* Study Group styles for 2nd level */
#contextNavBox ul.secondLevel li a {
        padding-left:10px;    
}
/* End Study Group styles for 2nd level */

/* ############## FOOTER STYLES ############### */
/* set footer padding */
#footerBox {
    clear: both;
    padding-bottom: 10px;
}

/* justify contents right */
#footerBox ul {
    margin: 0px;
    margin-bottom: 3px;
    padding: 3px;
    list-style: none;
    text-align: right;
}

/* set font size and right float for link list items */
#footerBox ul li {
    display: inline;
    font-size: 1.1em;
}

/* last item in the link list needs no right border */
#footerBox ul li.last {
    border-right: none;
}

/* set the link styles for the list */
#footerBox ul li a {
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
}

/* hover style for the links */
#footerBox ul li a:hover {
    text-decoration: underline;
}

#footerBox p {
    padding-left: 5px;
    margin: 0px;
}

/* ############## BASIC BODY CONTENT STYLES ############### */

#contentBox h1 {
    font-size: 2.8em;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 15px;
}

#contentBox h2 {
    font-size: 2.4em;
    font-weight: normal;
    text-decoration: none;
    margin-top: 10px;
}

#contentBox h3 {
    font-size: 2em;
    font-weight: bold;
}

#contentBox h4 {
    font-size: 1.6em;
    font-weight: bold;
}

#contentBox h5 {
    font-size: 1.4em;
    font-weight: bold;
}

#contentBox h6 {
    font-size: 1.2em;
    font-weight: bold;
}

#contentBox p {
    font-size: 1.2em;
    line-height: 1.5em;
}

/*
#contentBox a:link {
    text-decoration: underline;
}

#contentBox a:visited {
    text-decoration: underline;
}

*/
#contentBox li {
    font-size: 1.2em;
    line-height: 1.5em;
}

/* to prevent nested tags from overgrowing */
#contentBox td li, #contentBox li li, #contentBox li p, #contentBox blockquote p, #contentBox p select, #contentBox p input, #contentBox td p, #contentBox td input, #contentBox form input, #contentBox label input, #contentBox form select, #contentBox p td {
    font-size: 1em;
}

#contentBox img, #contentBox img.noframe {
    border: none;
    padding: 0px;
    margin: 4px;
}

#contentBox img.left {
    float:left;
}

#contentBox img.right {
    float:right;
}

#contentBox img.borderpad {
    padding: 3px;
}

#contentBox table {
    padding: 0px;
    border-collapse: collapse;
}

#contentBox tr {
    padding: 0px;
    margin: 0px;
    border: none;
}

#contentBox th {
    font-size: 1.4em;
    margin: 0px;
    padding: 5px;
}

#contentBox td {
    font-size: 1.2em;
    margin: 0px;
    padding: 3px;
}

#contentBox blockquote {
    font-family: Georgia, "Times New Roman", "Courier New", serif;
    font-size: 1.2em;
    padding: 15px; 
}

#contentBox label, #contentBox input {
    font-size: 1.2em;
}

/* ----  News events article style applied to components start  ------*/
p.imageleft {float:left; margin:0.4em 0.8em 0.8em 0em;}

p.imageright{float:right; margin:0.4em 0em 0.8em 0.8em;}

p.imageleft, p.imageright {font-size:0.8em; font-weight:bold;}
/* ----  News events article style applied to components end  ------*/

/* Study Group's language link bar */

#breadcrumbBox2 ul.languageBar {
    padding: 0;
    float: right;
}
#breadcrumbBox2 ul.languageBar li {
    display: inline;
    padding: 0 5px 0 5px;
    border-left: 1px solid #FFFFFF;
}
#breadcrumbBox2 ul.languageBar li.first {
    border: none;
}
#breadcrumbBox2 ul.languageBar li a {
    color: #FFFFFF;
    font-size: 1em;
    font-weight: normal;
}
#breadcrumbBox2 ul.languageBar li a:hover {
    color: #FFFF33;
    text-decoration: underline;
}

/* End Study Group's language link bar */

/* Study Group GCS, BRS and FLA forms */

/* Form table styles */
#aspnetForm table
{
    border: none;
}
#aspnetForm table tbody tr td
{
   border: none;
    text-align: left; 
    font-size: 1.2em;
}
#aspnetForm table tbody .tdreq
{
    color: Red;
}

/* GCS preferred route styles for imbedded table */
table #ucGCS_rdoPeferredRoute {
    font-size: 1em;
}
/* needed for subscribe text */
#aspnetForm label {
    font-size: 90%;  
}
/* End GCS preferred route styles for imbedded table */
/* Fields marked are compulsory label */
#ucGCS_lblCompulsory, #ucBRS_lblCompulsory
{
    font-size: 100%; 
}
/* GCS and  BRS form field styles */
#ucGCS_tblContactForm input, #ucGCS_tblContactForm select, #ucGCS_tblContactForm textarea
{ 
font-family: Arial, Helvetica, sans-serif; 
font-size: 100%;
}
#ucGCS_tblContactForm select
{ 
width: 62%; 
}
#ucBRS_tblOrderForm input, #ucBRS_tblOrderForm select, #ucBRS_tblOrderForm textarea
{ 
font-family: Arial, Helvetica, sans-serif; 
font-size: 100%;
}
#ucBRS_tblOrderForm select
{ 
width: 62%; 
}
#aspnetForm table tbody .button
{
    font-size: 110%; 
}
/* Note: this style also exists on the BRS and GCS .NET component */
#ucBRS_tblOrderForm .redtext
{
    font-size: 100%;
    color: Red;
    font-weight: normal;
}
/* Adobe paragraph on brochure page*/
p.adobe
{
    padding: 0px;
}
img.adobe
{
    float: left;
    width: 88px;
    height: 31px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}
/* End Adobe paragraph on brochure page */
/* FLA */
#flaDetails, #flaQuestions 
{
    width: 650px;
}

#flaDetails td.labelcell 
{
    /* width: 150px;  */  
}

#flaQuestions td.labelcell 
{
   width: 145px;
}

#flaDetails .inputstyle
{
    margin-bottom: 2px;
}
#flaQuestions .inputstyle
{
    width: 400px;
    min-height: 50px;
    color:#333333;
    font-family:Verdana,Arial,sans-serif;
    font-size:100%;
   
}
#flaDetails input, #flaDetails textarea, #flaDetails select 
{
color:#333333;
font-family:Verdana,Arial,sans-serif;
font-size:100%;
}
#flaDetails .required
{
    color: Red;
}
#flaQuestions .required
{
    color: Red;
}
#flaQuestions .clear
{
    padding: 10px 0px 0px 150px;
}
/* End Find a local agent */

/* End Study Group GCS, BRS and FLA forms */

/* ==== Study Group bespoke Photo Gallery =====================================  */
.shadow_box {
    position:relative;
    border:2px solid #EFF6FA;
    margin:1em 0 0 1em;
    }
    
.shadow_box_content {
    border:1px solid #BAD9E9;
    padding:0.5em 0.5em 0.5em 1.2em; /* see IE style sheet as well */
    }
    
.shadow_box_content a {
    color:#429951;
}
.shadow_box_content a:visited {
    color:#575757;
}
.shadow_top_left {
    position:absolute;
    left:-7px;
    top:-7px;
    /* z-index:1; */
    }
    
.shadow_top_right {
    position:absolute;
    right:-7px;
    top:-7px;
     /* z-index:1; */
    }
    
.shadow_bottom_left {
    position:absolute;
    left:-7px;
    bottom:-7px;
     /* z-index:1; */
    }
    
.shadow_bottom_right {
    position:absolute;
    right:-7px;
    bottom:-7px;
     /* z-index:1; */
    }
    
.gallery_container 
{
    /* min-height:90em;*/ 
    /* height: 90em; */
 }
 
/* We need to force the main content box out as the DDs in the gallery are abs positioned - so you get over hang. */
.gallery {
    width:20em;
    }
.gallery_content {
   margin:0!important; /* for IE to position bottom curves correctly */
    background-image: url("/isc/huddersfield/Images_Foundation/gallery_list_background.gif");
    background-repeat: no-repeat;
    background-position: center bottom;
    }
    
.gallery_content dt {
    display:inline; 
    }
    
.gallery_content dt a {}
.gallery_content dt img {
    padding:2px;
    border:1px solid #C2DDEC;
    /* width:4.4em; */
    /* height:4.4em; */
}
.gallery_content dd {
    width:40em;
    overflow:hidden; 
    position:absolute;
    top:0;
    left:17.5em;
    }
    
.gallery_content dd p {
    margin-left:0;
    margin-right:0;
    font-size: 1em;
}
.gallery_content dd .student_photo {
    /* width:40em;
    height:28em; */
    }
   
.gallery_right_arrow {
    position:absolute;
    left:19.3em;
    top:0.7em;
    z-index:100;
    }
    
/* Main photo area */
.rounded_box 
{
    position:relative;
    width: 400px; 
    }
.top_left_punch_out {
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    }
    
.top_right_punch_out {
    position:absolute;
    right: -10px; /* -3px for IE */
    top:0;
    z-index:1;
    }
    
.bottom_left_punch_out {
    position:absolute;
    left: -1px;
    bottom: 0px;
    z-index:1;
    }
                
.bottom_right_punch_out {
    position:absolute;
    right: -11px; /* -3px for IE */
    bottom: 0px;
    z-index:1;
    }
/* End Main photo area */
 .gallery_description
 {
     width: 40em;
 } 
 
/* ==== End Study Group bespoke Photo Gallery =================================== */
 /* ==== AddThis button =================== */
#addthis_bespoke {
    clear: both;
    /* border: solid 1px red; */
    float:left;
    width: 190px;
    margin-top: 10px;
    /*margin-left: 10px;*/
}
#addthis_bespoke a {
    padding: 0px;
    background: none;
    width: 25px;
    color: #05354F;
    text-decoration: underline;
}
/* bespoke style for the Share link to go on to one line */
#bespoke_share a
{
    /* border: solid 1px green; */
    width: 51px;
}

/* Study Group bespoke table */
#contentBox table.noborder {
    border: soild 1px red;
}

/* End Study Group bespoke table */

/* ==== Miniinfo box ==== */
#contentBox #miniinfo {
    width: 300px;
    border: 1px solid #666666;
    background-color: #eaf6fb;
    float: right;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;        
    margin-left: 20px;
    color: #666666;
}
#contentBox #miniinfo p {
    color: #666666;
}
#contentBox #miniinfo #savethis {
    width: 140px;
    padding: 0px;
    float: left;
    text-align: left;
}
#contentBox #miniinfo #viewbasket {
    width: 140px;
    float: right;
    padding: 0px;
    text-align: right;
}
#contentBox #miniinfo #savethis a, #contentBox #miniinfo #savethis img, #contentBox #miniinfo #viewbasket a, #contentBox #miniinfo #viewbasket img {
    border: none;
    margin: 0px;
}

#contentBox #miniinfo #savethis a:hover {
    background-color: transparent;
}
#contentBox #miniinfo #viewbasket a:hover {
    background-color: transparent;
}
/* ==== End Miniinfo box ==== */