/* -----------------------------------------------------------------------
   UTALK V3 ADDONS TO LAYOUT.CSS and STYLE.CSS
   -------------------------------------------
   SeaGreen : #04A6B5
   HotPink  : #FE006D
*/

/* DEFAULTS */
body { height:100%; padding:0; margin:0; background-color:#fff; }

body, p, a, td, th, li, span { font-family:Arial, Helvetica, Sans-Serif; font-size:small; }

/* MAIN LAYOUT COMPONENTS */
#pageframe { width:992px; margin:4px auto; height:100%; border:dotted 1px silver; background-color:White; }
#pagehead {	display:block; width:992px; height:100px; margin:4px auto; }
#pagehead #logo { float:left; padding-left:4px; }
#pagehead #logo img { border-style:none; }
#pagehead #band { float:left; margin-left:10px; }
#mainContent { display:block; width:992px; margin:0px; padding:0; }
#footer { display:block; margin:auto; text-align:center; padding:6px 12px; }

/* MENU TABS - LAYOUT, BACKGROUNDS AND COLOURS */
#topnavbar { display:block; width:992px; height:22px; margin:0 auto; padding:0; 
	clear:both; } /* you need this to ensure this starts on a new line. Otherwise, the float:left's above screw up Chrome and Firefox */
#navline { display:block; padding:0; margin:0 auto; width:992px; height:9px; }
#navline #line { background:transparent url(../images/tabs/navline.gif) repeat-x; height:9px; width:992px; padding:0; margin:0; }
.btnleft { background: url("../images/tabs/navbtn_left.gif") left; width: 6px; height: 20px; float: left; }
.btnmid { background: url("../images/tabs/navbtn_back.gif") repeat-x; float: left; height: 20px; padding-top: 2px; }
.btnmid a, .btnmid a:link, .btnmid a:visited { font-weight:bold; color: #fff; text-decoration:none; }
.btnright { background: url("../images/tabs/navbtn_right.gif") right; width: 6px; height: 20px; float: left; margin-right: 2px; }
.selbtnleft { background: url("../images/tabs/selheadbar_left.gif") left; width: 10px; height: 24px; float: left; }
.selbtnmid { background: url("../images/tabs/selheadbar_back.gif") repeat-x; float: left; height: 22px; padding-top: 2px; color: #ffffff; }
.selbtnmid a { color: #ffffff; }
.selbtnright { background: url("../images/tabs/selheadbar_right.gif") right; width: 10px; height: 24px; float: left; margin-right: 5px; }

/* FONT SPECIALS */
#topnavbar { font-size:9pt; font-weight:bold; }

/* COLOUR SPECIALS */
#mainContent { background-color:#FFF; }


#singleCol { float:left; width:972px; color:#04A6B5; padding-left:12px; }
#halfCol_left { float:left; width:476px; padding:6px 0 0 12px; }
#halfCol_right { float:left; width:477px; border-left:dotted 1px #11AC8D; padding:0 12px; }
#rightCol { float:left; width:330px; padding:0 12px; }

#centre-panel { width:510px; height:400px; padding:20px; margin:0 auto; text-align:center; }

#leftCol { float:left; width:623px; border-right:dotted 1px #11AC8D; padding:6px 0 0 12px; }
#leftCol #strapLine {
	display:block;
	width:600px; /* keep the width well within the containing 'leftCol' div width, so it doesn't spill over in IE6 */
	padding:6px 12px 0 12px; height:18px;
	font-style:italic; font-size:10pt; font-weight:bold;
	background-color:White; color:#04A6B5;
}

.sideBlock { display:block; width:100%; vertical-align:middle;
	clear:both; /* this counteracts the bug in Chrome that reacts badly to <img ... align=left> in the preceding div */
}

.sideBlock-newsletter-signup {
	display:block; 
	width:288px; /* the problem with setting width to 100% (as above) is that the padding makes it spill over the side */
	margin-top:10px;
	padding:10px 10px 0px 32px;
	vertical-align:middle;
}

/* DEBUGGING */
/* ------------------------------------------------ *|
#mainContent { background-color:#fcc; }
#leftCol { background-color:#ff0; }
#rightCol { background-color:#0ff; }
#leftCol .news-block { border:solid 1px blue; }
|* ------------------------------------------------ */

/* This occurs on the UserRegistration page */
td.form-info ul { margin-left:0; padding-left:0px; } 
td.form-info li { color:#666; padding-top:4px; padding-bottom:4px; } 

/* LOG IN PANELS */
.LoggedIn-Wide { width:310px; height:140px; padding:1px 10px 10px 10px; margin:0; 
    background:transparent url(../images/backgrounds/bgLoggedInWide.jpg) no-repeat; }
.LoggedIn-Skinny { width:220px; height:170px; padding:2px 10px 0px 10px; margin:0; 
    background:transparent url(../images/backgrounds/bgLoggedInSkinny.jpg) no-repeat; }
.NotLoggedIn-Wide { width:310px; height:105px; padding:40px 10px 10px 10px; margin:0; 
    background :transparent url(../images/backgrounds/bgLoginPanelWide.jpg) no-repeat; 
    font-family:Tahoma; font-size:8pt; font-weight:normal; color:#04A6B5; }
.NotLoggedIn-Skinny { width:220px; height:130px; padding:40px 10px 10px 10px; margin:0; 
    background :transparent url(../images/backgrounds/bgLoginPanelSkinny.jpg) no-repeat; 
    font-family:Tahoma; font-size:8pt; font-weight:normal; color:#04A6B5; }

.NotLoggedIn-Wide p { padding:3px; margin:0; }
.NotLoggedIn-Skinny p { padding:3px; margin:0; }
.LoggedIn-Wide p { font-size:9pt; line-height:1.44em; } 
.LoggedIn-Skinny p { font-size:9pt; line-height:1.44em; } 

/*
div.NotLoggedIn
{
	font-size:9pt;
	color:White;
	padding:10px 0px 10px 0px;
	border-top:solid 1px White;
	border-bottom:solid 1px White;
}
*/


/*
    THESE STYLES ARE FOR THE 'TopFive' CONTROL
*/
div#SideLinks-News-Wide { width:310px; height:240px; padding:60px 10px 10px 10px; /* border:solid 1px red; */
    background:transparent url(../images/backgrounds/bgNewsWide.jpg) no-repeat; }                        
div#SideLinks-Diary-Wide { width:310px; height:140px; padding:50px 10px 10px 10px; /* border:solid 1px red; */
    background:transparent url(../images/backgrounds/bgDiaryWide.jpg) no-repeat; }                        
div#SideLinks-News-Wide td { padding:0 5px 5px 0; }

table.not-logged-in { border-collapse:collapse; }
table.not-logged-in td { margin:0; padding:2px 5px; border:dolid 1px blue; }