﻿/*-------------Site Setup------------*/
/*-------------All classes in Lower Case*/
/*-------------Unless really necessary, leave BASIC MENU SETUP & STRUCTURE AND LAYOUT alone, */
/*-------------Tweak DESIGN: BACKGROUND IMAGES, SITE COLOURS, TYPOGRAPHY */ 

/* Basic Colours */
/* Find and Replace to change colours */ 
/* Dark Colour */
/* Used for background of banner, datagrid headers, titles and Headers, access bar text, login text*/
/* #333 */ 
/* Light Colour */
/* Used for datagrid alt items, navigation hovers */ 
/* ##999*/ 
/* Medium Colour */
/* Used for datagrid selected items */ 
/* Analogous Colour */ 
/* Navigation */
/* ================================================================ *
This copyright notice must be untouched at all times. 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/*..................... BASIC MENU SETUP...............*/
/* ================================================================ */ 

@import url("bsaconference.css");
#menu {width:745px; height:32px; font-size:90%; position:relative; z-index:100;border-right:1px solid #000;}
/* hack to correct IE5.5 faulty box model */
* html #menu {width:100%; w\idth:100%;}
/* remove all the bullets, borders and padding from the default list styling */
#menu ul {padding:0;margin:0;list-style-type:none;}
#menu ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#menu li {float:left;width:1px;position:relative;}
/* style the links for the top level */
#menu a, #menu a:visited {display:block;font-size:50%;text-decoration:none; color:#333; width:138px; height:30px; border:0px solid #333; border-width:1px 0 1px 1px; background:#758279; padding-left:10px; line-height:29px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html #menu a, * html #menu a:visited {width:149px; w\idth:138px;} 
/* style the second level background */
#menu ul ul a.drop, #menu ul ul a.drop:visited {background:#d4d8bd url(../../images/drop.gif) bottom right no-repeat;}
/* style the second level hover */
#menu ul ul a.drop:hover{background:#c9ba65 url(../../images/drop.gif) bottom right no-repeat;}
#menu ul ul :hover > a.drop {background:#c9ba65 url(../../images/drop.gif) bottom right no-repeat;}
/* style the third level background */
#menu ul ul ul a, #menu ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
#menu ul ul ul a:hover {background:#b2ab9b;} 
/* hide the sub levels and give them a position absolute so that they take up no room */
#menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:0px solid red;}
/* another hack for IE5.5 */
* html #menu ul ul {top:32px;t\op:32px;} 
/* position the third level flyout menu */
#menu ul ul ul{left:149px; top:-1px; width:149px;} 
/* position the third level flyout menu for a left flyout */
#menu ul ul ul.left {left:-149px;} 
/* style the table so that it takes no ppart in the layout - required for IE to work */
#menu table {position:absolute; top:0; left:0; border-collapse:collapse;} 
/* style the second level links */
#menu ul ul a, #menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
/* yet another hack for IE5.5 */
* html #menu ul ul a, * html #menu ul ul a:visited {width:150px;w\idth:128px;} 
/* style the top level hover */
#menu a:hover, #menu ul ul a:hover{color:#333; background:#949e7c;}
#menu :hover > a, #menu ul ul :hover > a {color:#333;background:#949e7c;} 
/* make the second level visible when hover on first level list OR link */
#menu ul li:hover ul,
#menu ul a:hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
#menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
#menu ul :hover ul :hover ul{ visibility:visible;}
/**------------ END OF NAVIGATION SET UP*------------ 
 
/* ================================================================ */ 
/*-------------****STRUCTURE AND LAYOUT****----------*/ 
/* ================================================================ */ 
/*-------------@FLOATS POSITIONS, AND CLEARS@----------*/ 
#supporting{float: left;}
#tabmanagerlist{float: left;}
#login{float: right;}
#credentials{float: right;}
#related{float: right;}
#tabmanagerproperties{float: left;}
#footermenu ul li {float: right;}
#footerbanner{clear: both;} 
#footerbannera{float: left;} 
#footerbannerb{float: right;}
#footerbannera{margin-top: 0px}
#footerbannerb{margin-top: 0px}
#validation{float: left;} 
#banner{clear: both;}
#footer{clear: both;}
#footer{float: left;}
#access{float: left;} 
#footermenu ul li{position: relative;}
/*-------------@POSITIONS, END OF FLOATS AND CLEARS----------*/ 
/*-------------HEIGHTS AND WIDTHS-----------*/
/*-------------@HEIGHTS -----------*/ 
#container{height: 100%;}
#top{height: 200px;}
#login{height: 27px;}
#banner{height: 100px;}
#menu {height:32px;}
#footer{height: 75px}
#footermenu{height: 20px;}
#footer{height: 60px}
#footerbanner{height: 120px}
#footerbannera{height: 120px}
#footerbannerb{height: 120px}
#footermenu{height: 10px;}
#access{height: 50px;}
#validation{height: 10px;}
#denied{height: 30px;}
#tabmanagerrepeaterinner{min-height: 350px;}
#tabmanagerproperties{min-height: 1000px;}

/*-------------@WIDTHS */
/*------------Set a width at which point the liquidity will stop -----------*/
body{min-width: 600px;}
body {width:100%;}
site {width:100%;}
#access{width:40%;}
#login{width:55%;}
/*-------------Default Width. This will be overriden by pageformat css settings----------*/
/*(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
#menu {width:100%;}
#menu li {width:120px;}
#colleft {width:100%;}/* width of page */
#content{width:100%;}
#main {width:46%} /* width of center column content (column width minus padding on either side) */
#supporting{width: 21%;} /* Width of left column content (column width minus padding on either side) */
#related{width: 21%;} /* Width of right column content (column width minus padding on either side) */
#footer{width: 100%;} 
#footerbanner{width: 100%;}
#footerbannera{width: 40%;}
#footerbannerb{width: 50%;}
#tabmanagerlist{width: 10%;}
#tabmanagerproperties{width: 50%;}
#denied{width: 100%;} 
/*--------------END OF HEIGHTS AND WIDTHS-----------*/


 

 
/* column container */
#colmask { position:relative;}/* This fixes the IE7 overflow hidden bug */ 
#colmask {clear:both; }
#colmask{ float:left; }
#colmask{ width:100%;}/* width of whole page */
#colmask{ overflow:hidden;}/* This chops off any overhanging divs */

/* common column settings */

#colright {float:left;}
#colmid{float:left;}
#colleft{float:left;}

#main{float:left;}
#supporting{float:left;}
#related {float:left;}

#colright {width:100%;}
#colmid{width:100%;}
#colleft{width:100%;}
#colright {position:relative;}
#colmid{position:relative;}
#colleft{position:relative;}

#main {position:relative;}
#supporting {position:relative;}
#related {position:relative;}

/* Overflows*/
/* To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 
/* This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:

800 x 600 
Left column: 162 pixels 
Main page: 550 pixels 
1024 x 768 
Left column: 210 pixels 
Main page: 709 pixels */
#main {overflow: hidden;}
#supporting {overflow: hidden;}
#related {overflow:hidden;}



/*--------------@WIDTH RELATED MARGINS-----------*/
#colmid {
right:25%;/* width of the right column */
}
#colleft {right:50%;/* width of the middle column */
} 
#main {left:102%;/* 100% plus left padding of center column */
}
#supporting {left:31%;/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
#related {left:85%;/* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
} 
/*--------------@END OF WIDTH RELATED MARGINS-----------*/
/*--------------@PADDING AND MARGINS-----------*/ 
body { margin:0; padding:0;} 
#related {padding:0 0 1em 0;} 
#login {padding-bottom: 1em;} 
.moduletitle{padding-top: 0em;padding-bottom: 3em;}
.credentialstext{padding-right: 2em;}
.credentialswelcome{padding-right: 10px;} 
#validation{padding: 1em;}
#validation ul li{padding: 2em;}
#footermenu ul{padding: 0;}
#footermenu ul li{padding-right: 2em;}
#access ul{padding-left: .5em;} 
#tabmanagerlist{padding-right: 15em;}
#tabmanagerlist h2{padding-top: 0;}
#tabmanagerarrows{padding-right: 5em;}
#tabmanagerproperties{padding-left: 5em}
#tabmanagerproperties h2{padding-bottom: 0;}
#tabmanagerlist h2{padding-bottom: 0;} 
#content ul {margin-left: 0; padding-left: 3em;} 
.modulewrapper {padding-bottom: 2em;} 
#main{padding-top: 3em;} 
#supporting{padding-top: 3em;} 
#related{padding-top: 3em;} 
/*--------------END OF PADDING AND MARGINS-----------*/ 
/*--------------BORDERS----------*/ 
 body { border:0;}/* This removes the border around the viewport in old versions of IE */ 
#tabmanagerlist{border-right: solid 1px #333;}
/*top border of the bar behind the menu items*/
#menu {border-top:1px solid #333;}
/*Right end border of the bar behind the menu items*/
#menu {border-right:0px solid #333;}
/* bottom and top border below and over menu items*/
#menu a, #menu a:visited {border-bottom:0px solid #333; border-top:2px solid #333;}
/* border between menu items*/
#menu a, #menu a:visited {border-left:1px solid #333;}
/* Set all four borders*/
#menu a, #menu a:visited { border-width:1px 0px 0px 0px;} 
.datagrid td{ border-color:#333;} 
#tabmanagerlist{border-right:1px solid #333;} 
 
/*--------------END OF BORDERS----------*/ 
/*--------------@LIST STYLES----------*/ 
#content ul li{display: block; list-style-type: disc;}
#footermenu ul li{display: inline;list-style-type: none;}
#access ul li{display: inline; list-style-type: none;}
#validation ul li {display: inline; list-style-type: none;}
#footermenu ul li{display: inline; list-style-type: none;}
#tabmanagerlist ul li{list-style-type: none;}
#sitemap ul {list-style-type: none;}
#sitemap ul li{list-style-type: none;} 
/*--------------END OF LIST STYLES----------*/ 
/*--------------END OF STRUCTURE----------*/ 
/* ================================================================ */ 
/*--------------DESIGN: BACKGROUND IMAGES, SITE COLOURS, TYPOGRAPHY -------*/
/*--------------@BACKGROUND IMAGES-------*/
/*-------------banner image-------------in PNG form and give transparent background behind any graphic elements*/ 
#banner{background-image: url('../../images/bsaliquid/banner.png') }
#banner{background-repeat: no-repeat }
#banner{background-position: 50% 0%;}
#footerbannera{background-repeat: no-repeat }
#footerbannera{background-position: 50% 0%;}

#footerbannerb{background-repeat: no-repeat }
#footerbannerb{background-position: 50% 0%;}
/*--------------END OF BACKGROUND IMAGES-------*/
/* ================================================================ */ 
/*--------------SITE COLOURS (NOT TYPOGRAPHY)-----------*/ 
/*--------------SETUP for preview on stylesheet page in portal admin-----------*/
.set1basic{background-color: #333;}
.set1dark{background-color: #c9ba65;}
.set1light{background-color: #999;}
.set2basic{background-color: green;}
.set2dark{background-color: green;}
.set2light{background-color: green;}
.set3basic{background-color: blue;}
.set3dark{background-color: blue;}
.set3light{background-color: blue;} 
/*--------------END OF SETUP for preview on stylesheet page in portal admin-----------*/
body
{ 
/*-------------base colour for the background behind the site-----------*/
background: #333;
background-color: #999;
/*------------- colour for the border when site is normal or narrow width----------*/
border-color: #999;
}
#site{background-color: #333;}
#top{background-color: #333;}
#login{background: #333;}
#banner{background-color: #333;}
#menu { background-color:#333;}
/*------------- @Panes -ensure content is same background colour as panes----------*/
#threecol {background:#333;/* right column background colour */}
#content{background:#333;}
#main{background: #333;}
#related{background: #333;}
#supporting{background: #333;} 
/*------------- End of Panes----------*/
#footer{background-color: #333;}
#footerbanner{background-color: #333}
#footerbannera{background-color: #333}
#footerbannerb{background-color: #333}
#footermenu{background-color: #333}
#validation{background-color: #333;}
#access{background-color: #333;} 
.datagridheader {Background-color:#333;}
.datagridItem{Background-color:#333;}
.datagridaltitem {Background-color:#999;}
.datagridselecteditem {color:#999;}
.textbox{color:#333;}
.basecolor{color:#333;}
.compcolor{color:#999;}
.highlightcolor{color:#999;}
/*--------------END OF SITE COLOURS (NOT TYPOGRAPHY)-----------*/ 
/*-------------TYPOGRAPHY------------*/
/*-------------Fonts, Colours, Size Case, line height------------*/
/*Use Specific statements as necessary--------*/ 
/*-------------FONT FAMILY -----------*/
/*-------------Base-----------*/
		body{font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;}
		.altfontfamily{font-family: "Comic Sans MS", "Lucida Sans Unicode", Arial, sans-serif;}
		.deffontfamily{font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;}
/*-------------Headers-----------*/
/*h1,h2,h3 {font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;}
/*-------------Content----------*/
/*#content{font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;} 
/*-------------Portal Elements-----------*/
/*.moduletitle,itemtitle{font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;}
credentialstext,credentialstextalert{font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;}
textbox,#footer, .emphasis {font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;} 
/*-------------Menu-----------Note that menu may also be set in Menu Configuration - be careful to determine which has precedence*/
/*#menu {font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;}*/ 
/*-------------END OF FONT FAMILY -----------*/ 
/*-------------FONT SIZE - Elements take a % of the base size so change the base size in preference to modifying these -----------*/
body {font-size: small;}
.h1 {font-size: 150%;}
.h2 {font-size: 125%;}
.h3 {font-size: 100%;}
#top {font-size: 100%;}
#content {font-size: 100%;}
.moduletitle,.itemtitle{font-size: 125%;}
.credentialstext,.credentialstextalert,.credentialswelcome {font-size: 85%;}
#footer{font-size: 100%;}
.emphasis{font-size: 100%;}
#tabmanagerproperties h2 {font-size: 80%;}
#tabmanagerrepeater h2 {font-size: 80%;}
#footermenu ul li {font-size: 80%;}
#tabmanagerproperties{font-size: 80%;}
.accessdenied {font-size: 120%;} 

/*IE5 menu */
.tdmenusub{font-size: 200%;}
.tdmenusubsub{font-size: 200%;}
/*-------------Menu-----------Note that menu may also be set in Menu Configuration - be careful to determine which has precedence*/
#menu { font-size:170%;} 
/*-------------END OF FONT FAMILY -----------*/ 
/*-------------TEXT ALIGNMENT -----------*/
#menu {text-align: left;}
/*flyout direction */
/* position the second level flyout menu */
#menu ul ul ul{right:149px; top:-1px; width:149px;}
/* position the third level flyout menu for a left flyout */
#menu ul ul ul.left {right:-149px;}
#main{text-align: justify;}
#supporting{text-align: left;}
#related{text-align: left;}
#access{text-align: left;}
#validation a {text-align: right;}
#tabmanagerarrows{text-align: right;}
.accessdenied {text-align: center;} 
/*-------------END OF TEXT ALIGNMENT -----------*/ 
/*-------------@CASE AND EMPHASIS -----------*/ 
.moduletitle,.itemtitle{font-weight: bolder;}
h1 {font-weight: bolder;}
h2 { font-weight: bolder;}
h3 { font-weight: bolder;}
.moduletitle{text-transform:capitalize; font-variant:small-caps;}
.credentialstext,.credentialstextalert,.credentialswelcome { font-variant:small-caps;} 
#footer{ font-variant:small-caps;}
.alert{font-weight:bolder;color:#ff0000;}
#footermenu a{text-decoration: none;}
/*-------------Menu-----------Note that menu may also be set in Menu Configuration - be careful to determine which has precedence*/
#menu {font-variant:small-caps;}
/*change to small caps */ 
.emphasis{font-weight: bolder;} 
.datagridheader{font-weight: bolder;}
.datagridheader{ font-variant:small-caps;}
.datagridfooter { font-variant:small-caps;} 
#tabmanagerrepeaterinner ul li{ font-variant:small-caps;}
.tabmanagerselectedtab{font-weight: bolder;}
/*-------------END OF CASE AND EMPHASIS -----------*/ 
/*-------------Line-Height avoid units-----------*/
body
{line-height: 1.3;} 
/*-------------End of Line-Height -----------*/ 
/*----------- COLOURS-----*/
/*-------------base font colour -----------*/
body {color: #fff;}
a {color:#fff; text-decoration: underline}
#access a {color:#fff; text-decoration: none}
#footer a {color:#fff; text-decoration: none}
#footermenu{color:#fff; text-decoration: none}
.h1 {color: #fff;}
.h2 {color: #fff;}
.h3 {color: #fff;}
#content{color: #000;} 
.moduletitle,.itemtitle{color:#fff;}
.credentialstext, .credentialstextalert,.credentialswelcome {color:#fff;}
#footer{color:#000;}
#footer{border-top: solid 1px #fff;}
.emphasis{color:#000;} 
.tabmanagerselectedtab{color: #fff;} 
.datagridheader {	background-color:#333;}
.datagridItem{	background-color:#333;}
.datagridaltitem  {	background-color:#333;}
.datagridselecteditem {color:#999;}
.textbox{color:#333;}
.basecolor{color:#333;}
.compcolor{color:#999;}
.highlightcolor{color:#999;}
#permissionsgrid {color:red;}
#permissionsgrid subhead{color:red;}
#permissionsgrid subsubhead{color:red;}
/*-------------MENU-----------
Note that menu may also be set in Menu Configuration - be careful to determine which has precedence*/
/*colour of the 1st  level menu text*/
#menu ul a, #menu ul a:visited { color:#fff;}
/* style the 1st level background */
#menu ul  a, #menu ul a:visited {background:#333;}
/* colour of the1st level hover text */
#menu a:hover {color:#333;}
/* colour of the1st level hover background */
#menu a:hover {background:#999;}
#menu  ul a:hover {background:#999;}

/*Hover colour of the previous level menu text  when on the next level down*/
#menu :hover > a, #menu ul ul :hover > a {color:#fff;}

/*Hover colour of the previous level menu item when on the next level down*/
#menu :hover > a, #menu ul ul :hover > a {background:#333;}


/* 2nd Level */

/*colour of the 2nd level menu text*/
#menu ul ul a, #menu ul ul a:visited { color:#fff;}
/* style the 2nd level background */
#menu ul ul a, #menu ul ul a:visited {background:#333;}
/* colour of the 2nd  level  hover text */
#menu ul ul a:hover, #menu ul ul a:hover{color:#333;}
/* colour of the 2nd level hover background */
#menu ul ul a:hover, #menu ul ul a:hover{background:#999;}

/* 3rd Level */
/*colour of the 3rd level menu text*/
#menu ul ul ul a, #menu ul ul ul a:visited { color:#fff;}
/* colour of the 3rd level background */
#menu ul ul ul a, #menu ul ul ul a:visited {background:#333;}
/* colour of the 3rd level hover text */
#menu ul ul ul a:hover, #menu ul ul ul a:hover{color:#333;}
/* colour of  the 3rd  level background*/
#menu ul ul ul a:hover, #menu ul ul ul a:hover{background:#999;}

/*----------- END OF COLOURS-----*/
/*-------------END OF TYPOGRAPHY------------*/
/* ================================================================ */

/*-------------END OF DESIGN------------*/

/* ================================================================ */


 

/*-------------Print Css setup-----------*/
#printsitetitle {display:none}

/*-------------Print Css setup-----------*/
