﻿/*=====================================================

Skinned by David Sanderson
Acumen Technologies Ltd
http://acumen.co.uk

Color scheme: TMSA Beta 3 - Fixed Width 980px


=======================================================*/


/*=====================================================

1. body and html

=======================================================*/
* {padding: 0; margin: 0;}

body, html {background: #fff url(images/pageBg.png) repeat-x; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; font-size: 8pt; line-height: 1.5; color: #003366; text-align: center; }


/*=====================================================

2. Page Structure - Primary Site Layout Ids

=======================================================*/

#pageContainer{margin: 0 auto; clear: both; text-align: left; max-width: 980px; margin-top: 20px; }

	#pageHeader{background: url(images/pageHeaderBg.png) no-repeat top left; clear: both; text-align: left; height: 180px; width: 980px; color: #fff; overflow:auto;}
		#pageHeaderTop{height: 20px; margin-top: 4px;}
		#pageHeaderMiddle{height: 78px;}		
		#pageHeaderBottom{height: 70px;}
		
	#pageContent{background: #dfeef5 url(images/pageContentBg.png) no-repeat top left; clear: both; height: auto; width: 980px; min-height: 400px; padding-bottom: 0px;}
		#pageContentTop{}
		#pageContentMiddle{}		
		#pageContentBottom{}
																				
	#pageFooter{background: #fff url(images/pageFooterBg.jpg) no-repeat left; clear: both; text-align: left; height: 220px;  width: 980px; color: #fff;}
		#pageFooterTop{height: 180px;}
		#pageFooterMiddle{height: 80px;}		
		#pageFooterBottom{height: 24px;}
								
#paneContentMain {width: 940px; margin: 0 auto; padding-top: 20px; margin-left: 20px;}



/*=====================================================

2b. Columns

=======================================================*/

.columnContainer {padding-top: 10px; width: 940px; }

.clearFix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/*=====================================================

3. Specific Page Classes

=======================================================*/

.siteBanner{visibility: hidden;}


.siteLookAndFeel{float: left; margin-left: 20px; font-weight: normal; visibility: visible;}
.siteInduction{float: left; margin-left: 4px; font-weight: normal; visibility: visible;}
.siteLogin{float: right; width: 570px; margin-right: 20px; font-weight: normal; text-align: right; visibility: visible;}
.siteForgottenPwd{float: right; width: 570px; margin-top: 10px; margin-right: 20px; font-weight: normal; text-align: right; visibility: visible;}
.siteRegistration{float: right; width: 570px; margin-right: 20px; font-weight: normal; text-align: right; visibility: visible;}
.siteWelcome{float: right; width: 570px; margin-right: 20px; margin-top: 6px; font-weight: normal; text-align: right; visibility: visible;}
.siteImpersonation{float: right; width: 450px; margin-right: 20px; font-weight: normal; text-align: right; visibility: visible;}

.siteTagLine{float: left; width: 330px; margin-top: 50px; margin-left: 20px; font-size: 12pt; font-weight: normal; visibility: visible;}

.siteSearch{visibility: hidden;}
	.siteSearch a{}


.siteLogo{visibility: hidden;}

.siteNavigation{float: left; height: 70px; width: 940px; margin-left: 20px; margin-top: 4px; visibility: visible;}
	.siteMenu{width: 940px; height: 52px; 	border-left: solid 1px white; visibility: visible;}
	.siteBreadcrumb{width: 940px; color: #fff; margin-top: 6px; margin-left: 6px; visibility: visible;}
		.siteBreadcrumb a{font-weight: normal; color: #fff;}


.siteFooterlinks{visibility: hidden;}

.navigationGotoTop{float: right; width: 200px; margin-top: 120px; margin-right: 20px; text-align: right; color: #444; visibility: visible;}

.siteCredits{float: left; margin-left: 20px; visibility: visible;}
.siteContactUs{float: left; margin-left: 4px; visibility: visible;}
.termsPrivacy{float: left; margin-left: 4px; visibility: visible;}
	.termsPrivacy a.SkinObject:link, .termsPrivacy a.SkinObject:visited, .termsPrivacy a.SkinObject:active{color:#666; font-weight: normal;}

.siteCopyright{float: right; width: 200px; margin-right: 20px; text-align: right; visibility: visible;}
	.siteCopyright .SkinObject{color: #fff; font-weight: normal;}



.blueborder{width: 620px; height: 450px; border: #05567b 1px solid;}

.borderImage{border: #be6a2c 1px solid;}

/*=====================================================

4.	Panel Classes - Main Panel layouts within Pages

=======================================================*/


.panelFull{background: #fff; width: 932px; height: auto; float: left; margin-left: 28px; margin-bottom: 12px;}


.panelFull2{background: #fff; width: 1000px; height: auto; float: left; margin-left: 28px;}

.panelFull100{width: 932px; height: 400px; float: left; margin-left: 28px; margin-bottom: 12px; border: #05567b 1px solid;}

.panelMiddle{width: 580px; height: 100px; float: left; margin-left: 24px;}

.panelRight{width: 280px; float: right; margin-right: 40px;}



/*=====================================================

5. Containers within Panels

=======================================================*/


.containerLeft{background: #fff; width: 300px; min-height: 100px; float: left;}

.containerLeft500{background: #fff; width: 500px; min-height: 100px; float: left;}


.containerLeft300{background: #fff; width: 300px; min-height: 100px; height: 300px; float: left; margin-left: 12px;}
.containerMid200{background: #fff; width: 200px; min-height: 100px; height: 300px; float: left; margin-left: 12px;}
.containerRight300{background: #fff; width: 300px; min-height: 100px; height: 300px; float: left; margin-left: 12px;}

.containerRight{background: #fff; width: 540px; min-height: 100px; float: left; margin-left: 24px;}

.panelSideGrid{background: #fff url(images/sideGridBg.gif) repeat-x top; border: #a0a0a0 1px solid; height: auto; width: 100%; padding: 8px 8px 8px 8px; margin-bottom: 12px;}
				
.panelSideGrid h1{font-size: 1.2em; color: #e0e0e0; }



.panelModule_{background: #fff url(images/moduleBg.gif) repeat-x top; border: #be6a2c 1px solid; height: auto; width: 100%; margin-bottom: 12px;}
				
.panelModule_ h1{font-size: 1.0em; color: #e0e0e0; padding: 4px; margin-bottom: 16px;}



.panelBox{height: auto; width: 100%; margin-bottom: 12px;}

.panelFlex{height: auto; width: 100%;}

.fadeSand{background: #fff url(images/fadeSandBg.gif) repeat-x top; border: #be6a2c 1px solid; text-align:center;}
	.fadeSand h1{font-size: 1.0em; color: #e0e0e0; padding: 4px; margin-bottom: 16px; text-align:left;}

.fadeBlue{background: #fff url(images/fadeBlueBg.gif) repeat-x top; border: #7a9eb8 1px solid;}
	.fadeBlue h1{font-size: 1.0em; color: #e0e0e0; padding: 4px; margin-bottom: 4px;}

.fadeBlueCentred{background: #fff url(images/fadeBlueBg.gif) repeat-x top; border: #7a9eb8 1px solid; text-align:center;}
	.fadeBlueCentred h1{font-size: 1.0em; color: #e0e0e0; padding: 4px; margin-bottom: 4px; text-align:left;}

.containerFull
{
	float: right; 	
	height: auto;
	width: 600px;
	border:	solid 1px #e2e2e2;
	margin: 32px 16px 16px 0px;
}


.containerButtons
{
	float: right; 
	height: 28px;
	width: auto;
	font-family: verdana; 
	font-size: 8pt;
	font-weight: normal; 
	color: #333333;
	display: inline;
	margin: 8px 0px 8px 0px; 		  	
}

/*=====================================================

6.	Standard Widths, Heights and Floats

=======================================================*/


.width176{width: 176px;}
.width180{width: 180px;}

.width210{width: 210px;}
.width284{width: 284px;}
.width300{width: 300px;}
.width480{width: 500px;}	

.width500{width: 500px;}
	
.width600{width: 600px;}
.width620{width: 620px;}

.width780{width: 780px;}

.width800{width: 800px;}
.width1000{width: 1000px;}

.width940{width: 940px;}

.height600{height: 600px;}

.floatLeft{float: left; min-height: 200px ;}
.floatCenter{float: left; margin-left: 20px; min-height: 200px ;}
.floatRight{float: right; margin-left: 20px; min-height: 200px ;}
	
	
/*=====================================================

7. Text

=======================================================*/


.Normal, .NormalDisabled{font-size: 100%; font-family: Helvetica, Arial, sans-serif; line-height: 1.2; }
.CommandLink, .CommandButton, .NormalTextBox{font-family: Helvetica, Arial, sans-serif;}

.highlight{font-size: 1.0em; font-weight: bold; background-color: Orange ; color: white; margin: 0px; padding: 8px;}

h1{font-size: 1.6em; color: #be6a2c; padding: 6px;}		
h2{font-size: 1.2em; color: #003366; padding: 6px;}		
h3{font-size: 1.15em;}	


						
/*=====================================================

8. Links - Move Specific elements to section 3 above?

=======================================================*/


a{color: #5e96b1; }

p {padding: 6px;}

a:link{color: #fff; text-decoration: none;}
a:active, a:visited{color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: underline;}

.CommandButton, a.CommandButton:link, a.CommandButton:visited, a.CommandButton:active {color: #df5e00; text-decoration: none;}
a.CommandButton:hover {color: #000; text-decoration: underline;}

a.SkinObject:link, a.SkinObject:visited, a.SkinObject:active{color:#e42025;}
a.SkinObject:hover {color:#c64e27; text-decoration: underline;}


.searchLink, .searchLink a, .searchLink a:link, .searchLink a:active, .searchLink a:visited{color: #555 !important; font-weight: bold; text-transform: uppercase;}	



/*=====================================================

9. Images

=======================================================*/

.imagewrap {float: left; margin: 0px; padding-right: 8px;}
			


/*=====================================================

10. Form Elements - Review and rationalise - is .form required?

=======================================================*/

.form{
	float: left;
	clear: both; 		
	color: #333333;
	height: 32px;
	width: 780px;
	padding-bottom: 4px;
	display: inline; 	
}

.formRow
{
	float: left; 
	height: 28px;
	width: 98%;
	border-bottom:	solid 1px #e2e2e2;	
	font-family: verdana; 
	font-size: 8pt;
	font-weight: normal; 
	color: #333333;
	display: inline;
	margin-top: 4px;
	margin-left: 4px;
}

/* Form row to hold a Telerik Editor */
.formEditorRow
{
	float: left; 
	height: 370px;
	width: 98%;
	border-bottom:solid 1px #e2e2e2;	
	font-family: verdana; 
	font-size: 8pt;
	font-weight: normal; 
	color: #333333;
	display: inline;
	margin-top: 4px;
	margin-left: 4px;
}

.formExpandableRow
{
	float: left; 
	width: 98%;
	border-bottom:solid 1px #e2e2e2;	
	font-family: verdana; 
	font-size: 8pt;
	font-weight: normal; 
	color: #333333;
	display: inline;
	margin-top: 4px;
	margin-left: 4px;
}

.formLabel {
	float: left;	
	font-family: verdana; 
	font-size: 8pt;
	font-weight: normal; 
	color: #333333;
	width: 200px;
	padding-left: 20px;
	padding-top: 2px;
	padding-bottom: 6px;			
}

.formTextBox 
{
	height: 16px;
	width: 300px;
	font-family: verdana; 
	font-size: 8pt;
	color: #333333;	
	border: 1px solid #919b9c;
}

.formMultiLineTextBox 
{
	width: 400px;
	font-family: verdana; 
	font-size: 8pt;
	color: #333333;	
	border: 1px solid #919b9c;
}

.formListBox 
{
	height: 400px;
	width: 200px;
	font-family: verdana; 
	font-size: 8pt;
	color: #333333;	
	border: 1px solid #919b9c;
}

.formDropDownList 
{
	width: 300px;
	font-family: verdana; 
	font-size: 8pt;
	color: #333333;	
	border: 1px solid #919b9c;
}

.formButton 
{
	width: 80px;
	font-family: verdana; 
	font-size: 8pt;
	color: #333333;	
	border: 1px solid #919b9c;
	margin: 0px 8px 0px 0px;
	cursor: pointer;
}
        
.formButton:hover 
{
	font-family: tahoma; 
	color: #555555;	
	border: 1px solid #c0c0c0;
}

.formOrangeButton 
{
	width: 80px;
	font-family: verdana; 
	font-size: 8pt;
	background-color: #D8955D;
	color: #000000;	
	border: 1px solid #919b9c;
	margin: 0px 0px 0px 0px;
	cursor: pointer;
}
        
.formOrangeButton:hover 
{
	font-family: tahoma;
	background-color: #D8955D;
	color: #000000;	
	border: 1px solid #c0c0c0;
}

.formSmallOrangeButton 
{
	width: 60px;
	font-family: verdana; 
	font-size: 8pt;
	background-color: #D8955D;
	color: #000000;	
	border: 1px solid #919b9c;
	margin: 0px 0px 0px 0px;
	cursor: pointer;
}
        
.formSmallOrangeButton:hover 
{
	font-family: tahoma;
	background-color: #D8955D;
	color: #000000;	
	border: 1px solid #c0c0c0;
}

.formLabelText
{
    font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; 
    font-size: 8pt;	
    margin: 0px 8px 0px 0px;
    color:#787878;
}

.formActiveText
{
    font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; 
    font-size: 8pt;	
	margin: 0px 8px 0px 0px;
    color:#000000;
}

.formLabelErrorText
{
    color:#FFFFFF;
	font-weight: bold; 
}

.formMultiPage
{
    margin: 0px 0px 0px 20px;
}

/*====================================================================

20. Third party Controls - See Specific style sheets and/or skins

======================================================================*/



