/*----------------------------------------------------------------------------- 
Batex Screen Stylesheet 

version:   0.1.1 
date:      9 Aug 2011
author:    Martyn Joyce
email:     martyn@batex.co.za
website:   www.batex.co.za
-----------------------------------------------------------------------------*/

/*
  Recommended colours

Brown:
    Dark:       #752E1B		Background dark colour of shaded range
    Strong:	    #612515     
	Middle:		#4E1C10		Background middle colour of shaded range
	Light:		#A84C2E		Background light colour of shaded range							

Blue:   
	Dark:		#0E2F72     Used in BATEX logo
	Less dark:	#0E2FE2	    Used when hover over logo 
	Less dense:	#3F4D6A		Used for headings 2 onwards
   
White:
    Off-white   #B3AFA0     Less conspicuous than the next
    Off-white:	#FCF9F3     Used for font shadow and box background
    White:      #FFFFFF     
    
Grey:    
    Medium: 	#C7C2B2     Background for text
    
Blue-Grey:
    Medium:		#959ED6
*/


/* -----------------------------------------------
   Remove padding, margin and border from all tags 
   ----------------------------------------------- */
*  
    { 
    margin: 0; 
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    border: 0;
}

/* Set defaults for BODY tag
   ------------------------- */
body 
    {
	padding-top: 20px;
    padding-bottom: 20px; 
	font-family: Arial, Verdana, serif;
	font-size: 12px;
	background: url('../images/bg.gif');      /* Shaded brown */
	background-repeat: repeat-x;
	background-color: #4E1C10;                /* Strong brown */
    text-align:left; 
} 

/* Set main heading characteristics (only used for BATEX logo)
   ----------------------------------------------------------- */
h1 
    {
	padding-top: 40px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 30px;
	font-family: Georgia, "Trebuchet MS", "Times New Roman", serif; 
    font-size: 480%;
    font-weight: normal;
    text-shadow: 1px 2px 1px #FCF9F3;		/* off-white */ 
    letter-spacing: -2px;
    color: #0E2F72;
}
h1 a {
    color: #0E2F72;							/* dark blue */
    text-decoration: none;
} 
h1 a:hover {
    color: #0E2FE2;							/* dark blue */
    text-decoration: none;
} 

/* Set second heading characteristics
   ---------------------------------- */ 
h2 
    { 
    font-size: 150%;
    font-weight: normal;
    color: #3F4D6A; 						/* Less dense blue */    
} 
/* Set third heading characteristics
   --------------------------------- */      
h3 
    { 
    font-size: 120%;
    font-weight: normal;
    color: #3F4D6A;                         /* Less dense blue */  
} 

/* Set paragraph characteristics
   ----------------------------- */
p {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
    line-height: 1.5em;	/* Vertical line spacing */
}
p#subtitle {
    padding-left: 34px;
    font-size: 200%;
    text-shadow: 0 1px 1px #FCF9F3;   	/* off-white */
    color: #612515;					  	/* Strong brown */	
}

/* Set anchor characteristics
   -------------------------- */
a {
    color: #A84C2E;						/* Light brown */
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

/* Set list characteristics
   ------------------------ */
ul {
    list-style: none;
}
ul li {
    line-height: 1.5em;
}

/* Set form characteristics
   ------------------------
*/
form span.req{
	display:inline;
	float:none;
	color:red !important;
	font-weight:bold;
	margin:0;
	padding:0;
}

/* Set label characteristcs
   ------------------------
*/
label.desc {
	font-size:95%;
	font-weight:bold;
	color:#000000;  /* Black */
	line-height:150%;
	margin:0;
	padding:0 0 3px 0;
	border:none;
	display:block;
	white-space: normal;
	width:100%;
}

input[type="text"] {
	width: 400px;
}

/* -----------------------------------------------
   Charcteristsic of the various ID selectors used
   -----------------------------------------------
*/
   
/* page
   ----
*/

#page {
    width: 950px;
    margin: 0 auto;
}

/* header
   ------
*/
#header {
    height: 180px;
    margin: 0 25px;
    background: #C7C2B2 url('../images/header.jpg') no-repeat;
}

/* menu (top bar with page selection) 
   ----
*/
#menu {
    height: 70px;
    background: #4E1C10 url('../images/menu.jpg') no-repeat;     
}
#menu ul {
    list-style: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 25px;
    padding-left: 25px;
}
#menu ul li {
    display: block;
    float: left;
    padding-top: 0;
    padding-right: 1px;
    padding-bottom: 0;
    padding-left: 0;
}
#menu ul li a {
    display: block;
    float: left;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 40px;
    padding-left: 40px;
    font-size: 170%;
    line-height: 70px;
    text-decoration: none;
    color: #FCF9F3;             /* Medium Grey */
}
#menu ul li a.active {
    color: #B3AFA0; 			/* Less conspicuous Grey */
    background: #5B2611 url('../images/menuover.gif') repeat-x;
}
#menu ul li a:hover {
    color: #FFFFFF;
    background: #5B2611 url('../images/menuover.gif') repeat-x;
}

/* menubot (bottom bar with page selection) 
   -------
*/
#menubot {
    height: 70px;
    background: #4E1C10 url('../images/menubot.jpg') no-repeat;     
}
#menubot ul {
    list-style: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 25px;
    padding-left: 25px;
}
#menubot ul li {
    display: block;
    float: left;
    padding-top: 0;
    padding-right: 1px;
    padding-bottom: 0;
    padding-left: 0;
}
#menubot ul li a {
    display: block;
    float: left;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 40px;
    padding-left: 40px;
    font-size: 170%;
    line-height: 70px;
    text-decoration: none;
    color: #FCF9F3;             /* Medium Grey */
}
#menubot ul li a.active {
    color: #B3AFA0; 			/* Less conspicuous Grey */
    background: #5B2611 url('../images/menubotover.gif') repeat-x;
}
#menubot ul li a:hover {
    color: #FFFFFF;
    background: #5B2611 url('../images/menubotover.gif') repeat-x;
}
/*  indeximg
    --------
*/   
#indeximg {
    height: 440px;
    background: #000000 url('../images/index.jpg') no-repeat;
}

/*  aboutimg
    --------
*/   
#aboutimg {
    height: 200px;
    background: #000000 url('../images/about.jpg') no-repeat;
}

/*  serviceimg
    ----------
*/   
#serviceimg {
    height: 200px;
    background: #000000 url('../images/services.jpg') no-repeat;
} 

/*  helpimg
    -------
*/   
#helpimg {
    height: 200px;
    background: #000000 url('../images/help.jpg') no-repeat;
} 

/*  contactimg
    ----------
*/   
#contactimg {
    height: 200px;
    background: #000000 url('../images/contact.jpg') no-repeat;
} 

/* underpic0
   ---------
*/
#underpic0img {
    height: 40px;
    background: #000000 url('../images/underpic0.jpg') no-repeat;
}
/* underpic1
   ---------
*/
#underpic1img {
    height: 40px;
    background: #000000 url('../images/underpic1.jpg') no-repeat;
}

/* Main
   ----
*/
#main {
    margin: 0 25px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 30px;
    padding-left: 30px;
    font-size: 120%;     
    background: #C7C2B2 url('../images/main.jpg') repeat;
}

/* Sidebar
   -------
*/
#sidebar {
    float: left;
    width: 270px;
    padding-top: 30px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
}
#sidebar .box {
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 40px;
    padding-left: 0;
}
#sidebar ul {
	padding-top: 20px;
    padding-right: 0;
    padding-bottom: 50px;
    padding-left: 0;
}
#sidebar ul li {
	padding-top: 3px;
    padding-right: 0;
    padding-bottom: 3px;
    padding-left: 25px;
    color: #959ED6;						/* Blue-Grey */
    background: url('../images/arrow.gif') no-repeat 0 9px;
}
#sidebar ul li a {
	padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    color: #A84C2E;						/* Light brown */
}


/* detail
   ------
*/
#detail {
    margin: 0 25px;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-right: 40px;
    padding-left: 40px;
    font-size: 120%;     
    background: #C7C2B2 url('../images/main.jpg') repeat;
}
#detail h2 {
	padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    letter-spacing: -1px;
    color: #3F4D6A;     /* Grey-Blue */
}
#detail h2 a {
    color: #3F4D6A;     /* Grey-Blue */
    text-decoration: none;
}
#detail td a {
    padding-top: 12px;
    padding-bottom: 2px;
    display: block;
    float: left;
}
#detail .entry {
	padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
} 
.eform tr, td {
	padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 80px;
}       
#detail .mylist {
	padding-left: 50px;
	list-style-type: square;
}





/* login
   -----
*/
#login h2 {
    font-size: 100%;
    line-height: 52px;
    height: 58px;
}
#login form {
    text-align: left;
}
#login form p {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0;
	padding-right: 0;
}
#login form p.txtleft {
    padding-top:5px;
    padding-bottom:0;
    padding-right:5px;
    padding-left:5px;
}
#login form p.remember {
    padding-top: 10px;
}
#login input.text, #login input.password {
    padding-top: 5px;
    width: 220px;
    font-size: 90%;
    background: #FCF9F3;				/* Off-white */
    border: 1px solid #C7C2B2;	        /* Medium grey */
    border-left: 1px solid #C7C2B2;
    border-bottom: 1px solid #C7C2B2;
}
#login input.submit {
    margin-top: 5px;
    margin-right: 0;
    width: 100px;
    height: 31px;
    color: #FCF9F3;      /* Off-White */     
    background-image:url('../images/submit.gif');
    background-repeat:no-repeat;
    border: none;
    cursor: pointer;
}

/* content
   -------
*/
#content {
    float: right;
    width: 550px;
    padding-top: 30px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
}
#content h2 {
    font-size: 150%;
	padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    letter-spacing: -1px;
    color: #3F4D6A;     /* Grey-Blue */
}
#content h2 a {
    color: #3F4D6A;     /* Grey-Blue */
    text-decoration: none;
}
#content .entry {
	padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

/* links
   -----
*/
#links {
    background: #5B2611 url('../images/links.jpg') no-repeat;
    height: 180px;
    padding-top: 0;
    padding-right: 60px;
    padding-bottom: 20px; 
    padding-left: 80px;
    float: none;
}
#links th {
	width: 400px;
	font-size: 160%;
	color: #AACEE6;
    padding-top: 25px;
    padding-bottom: 20px;
}
#links td a {
	font-size: 110%;
	color: #FCF9F3;
    padding-top: 12px;
    padding-bottom: 2px;
    display: block;
    float: left;
}
#links a.active {
    color: #C7C2B2;
    background: #5B2611 url('../images/menuover.gif') repeat-x;
}
#links a.hover {
    color: #C7C2B2;
    text-decoration: none;
    background: #5B2611 url('../images/menuover.gif') repeat-x;
}

/* underpic2
   ---------
*/
#underpic2img {
    height: 40px;
    background: #C7C2B2 url('../images/underpic2.jpg') no-repeat;
}

/* clearing
   --------
*/
.clearing {
    clear: both;
    height: 0;
    overflow: hidden;
}


/* footer
   ------
*/
#footer {
    clear: both;
    height: 106px;
    margin: 0 25px;
    padding: 30px 30px 0 30px;
    background: #C7C2B2 url('../images/footer.jpg') no-repeat; /* Pale Grey */
}
#footer p {
    float: right;
    width: 600px;
    font-size: 100%;
    text-align: right;
}

.logo {
	font-family: Georgia, "Trebuchet MS", "Times New Roman", serif;
	font-weight: bold; 
}