﻿/*----------------------------------------------------------


----------------------------------------------------------*/


/* Current page highlight 
----------------------------------------------------------*/

#home #menu a#homebutton, #about #menu a#aboutbutton, #email #menu a#contactbutton
{
    color:red;
}



body
{
    background-color: #ccc;
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    min-width: 850px;
}


/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

h1
{
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}
h2
{
    padding: 0 0 10px 0;
}
h3
{
    font-size: 1.2em;
}
h4
{
    font-size: 1.1em;
}
h5, h6
{
    font-size: 1em;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
    /*border: #000 solid 1px;  Black*/ 
	position:relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
	
}

#pageheader
{
    background-color: #5c87b2;
    color: #000;
}

#pageheader h1
{
    font-weight: bold;
    padding: 0 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
}

div#title	    /*in pageheader*/
{
    float:left;
    background:  url(../Images/basic_logo03.png) no-repeat;
    width:400px;
	height:100px;
    text-indent:-9999px;
}

/*text Sizer */

#textSizer
{
   float:right;
}

#textSizer ul, #textSizer li
{
      list-style: none;
	  float:left;
	  margin: 0;
	  padding: 0;
}

#textSizer span.szLabel
{
	padding:10px;
	color: #FFFFFF;
	font-weight:bold;
}

.ulSizer li a {text-decoration: none; width:25px; height:25px; background:url(../Images/saibasprite01.png);}


a#larger {background-position:0px 0px; text-indent: -9999px; display:block; outline:none;}
a#smaller {background-position:-25px 0px; text-indent: -9999px; display:block; outline:none;}
a#reset {background-position:-51px 0px; text-indent: -9999px;display:block; outline:none; }






#menucontainer   /*in pageheader*/
{
	 height:100px;
}

h1#sticker{
	position:absolute;
	z-index:100;
	top:2.8em;
	right:11em;
	margin:0;
	padding:0;
	
}

h1#sticker a{
	display:block;
	background:url(../Images/WantWorkSticker.png)  no-repeat;
	width:4.9em;
	height:4.4em;
	outline:none;
	text-indent: -99999px;
}

#pagebody
{
    /*border: #ffff00 solid 1px;   Yellow */
	background-color:#FFFFCC;
	position:relative;
    padding: .5em 0 0 1em;
}

#footer
{
    color: #5c87b2;
    padding: 1em 0;
    text-align: center;
    line-height: normal;
    margin: 0;
    font-size: .9em;
}

#pagecontent{overflow:auto;}  

#mainview{float:left; padding:0 26em 0 0; 	margin-left: 1em;}

#mainview p{color: #000; padding: 0 1em;}

#sidebar                                    
{
	float:right;
	background-color:Transparent;
	width:25em;
	padding: 0;
	margin-left:-27em;
	margin-right: 1em;
} 

#sidebar div.section{margin: 0 0 1.5em 0;}

#sidebar div h3                   /*header section */
{
    background: url(../Images/basic_sidebar_top10.png) repeat-x;
	background-color:#fff;
	border-left: .1em solid #ccc;
	border-right: .1em solid #ccc; 
	  
	height: 32px; 
    padding:.5em 0 0 0; 
	margin-bottom:-.5em;          /*reduce space between header and content*/
	
	text-align:center;
	color:#0000FF;
}



#sidebar div.content               /* Content devisions within the sidebar */
{    
    background: url(../Images/basic_sidebar_bottom10.png) bottom repeat-x;
	background-color:#fff;
	border-left:solid .1em #ccc;   /*.1em is 1px I think*/
	border-right:solid .1em #ccc;
	
	padding-bottom: 2em;
	overflow:auto;                /*incase it contains floated elements*/ 
}



#sidebar div.content p {padding-left: 1em;}



ul#books
{
	position:relative;
	list-style:none;
	width:23em;
	margin: 0 0 0 1em;
	padding: 0;
}

ul#books li
{
	float:left;
}


#contact
{
	float:left;
	padding:0 36em 0 0;
	margin-left: 1em;
}

#contact p,#contact li
{
   color: #000;
   padding: 0 1em;
   font-size: 1.4em;
}

#contactform
{
	float:right;
	background-color:Transparent;
	width:35em;
	padding: 0;
	margin-left:-37em;
	margin-right: 1em;
}

#contactform fieldset
{
	border:none;
}


#contactform div.button
{
	padding: 0 0 0 1em;
	
}
#contactform fieldset label
{
	display:block;
	font-weight:bold;
	margin: 0 0 .3em 0;
}

#contactform fieldset input,
#contactform fieldset textarea 
{
	padding:.5em;
	font-size: 1.4em;
	border:none;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	background:#e2e1d7 url(../Images/basic_top_shadow.png) top repeat-x;
	
	-webkit-border-radius : 5px;
	-moz-border-radius: 5px;
}

#contactform fieldset input:focus,
#contactform fieldset textarea:focus 
{
	background:#fff;
	border:groove;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    padding: 3.5em 0 0em 0;
    margin: 0;
    text-align: right;
}

ul#menu li
{
    display: inline;
    list-style: none;
	
	
}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    padding: .9em 1.7em;
	font-weight: bold;
    text-decoration: none;
    background: url(../Images/basic_button.png)  no-repeat;
	margin-left:-.4em;   /*this removes the space between the items, must be a better way*/
	outline:none;
}

ul#menu li a:hover
{
    background-color:#FF0000;
	color:#FF0000;
    text-decoration: none;
}

ul#menu li a:active
{
    background-color: #FF0000;
    text-decoration: none;
}



/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/


legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

input[type="password"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

/* TABLE
----------------------------------------------------------*/

table 
{
  border: solid 1px #e8eef4;
  border-collapse: collapse;
}

table td 
{
  padding: 5px;   
  border: solid 1px #e8eef4;
}

table th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #e8eef4; 
  border: solid 1px #e8eef4;   
}

/* MISC  
----------------------------------------------------------*/
.clear
{
    clear: both;
}

.error
{
    color:Red;
}





.field-validation-error
{
    color: #ff0000;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

