/************************************************************************************************************
 * P A G E   H E A D E R   S T Y L E S H E E T   R U L E S
 *
 * Stylesheet rules that are specific to the user control that is used to implement the page header which
 * will be displayed at the top of every page. The header contains the title and the top-level menu list
 ************************************************************************************************************/

/* mark the <div> as relative-positioned to change the context of the <a> and <p> tags */
/* because both controls need to be positioned absolutely with regard to this <div>    */
div#header{ background: url(../images/background/title.gif) repeat-x bottom left; }
div#header{ position: relative; height: 82px; border-bottom: solid 4px #CD3132;}

/* the <a> control used to return to the home page displaying the logo as background */
div#header a { background: url(../images/logo.gif) no-repeat left top; }
div#header a { position: absolute; bottom: 0; width: 137px; height: 63px; margin: 0 0 5px 10px;}

/* the <p> that contains the address information which we display on the right side */
div#header p {
	font: 1.1em "Century Gothic", Verdana, Sans-Serif;
	position: absolute; bottom: 0; right: 0;
	letter-spacing: 0.1em; color: #444;
	line-height: 1.1em;
	margin: 0 30px 5px 0;}


/* we do not float the menu <div> even though the contained ul is floated - instead */ 
/* we use the alsett clear method to make sure the <div> does not snap shut         */
div#menu { background: url(../images/shadow.gif) repeat-x top left; }
div#menu { font-family: "Century Gothic", Verdana, Sans-Serif; background-color: #97BAD6;}

/* the menu items are implemented as list items of an unordered list */
div#menu ul {
	list-style-type: none; 	list-style-image: none;
	letter-spacing: 0.25em; font-size: 1.6em;
	margin-left: 0}

/* float the list items to display them side-by-side instead of stacked vertically */
div#menu ul li { margin-bottom: 0px; float: left;}


/* note that we change the display style of the menu link to 'block' */
/* so that we can can set the lower and upper padding                */
div#menu a { display: block; color: #FFFFFF; padding: 13px 20px 7px 20px;}
div#menu a:hover { background-color: #614E44; text-decoration: none;}

/* the selected menu link displays a background image (a small array) */
/* which indicates which menu item is currently active                */
div#menu a.selected { background: url(../images/selected.gif) no-repeat center bottom;}
	


/************************************************************************************************************
 * P A G E   F O O T E R   S T Y L E S H E E T   R U L E S
 *
 * Stylesheet rules that are specific to the user control that is used to implement the page footer which
 * will be displayed at the bottom of every page.
 ************************************************************************************************************/

div#footer { margin: 0 auto 10px auto; position: relative; text-align: left; width: 900px;}
div#footer a { font-size: 1.1em;}
div#footer span { margin: 0 10px;}
	
div#copyright { font: 1.1em "Century Gothic", Verdana, Sans-Serif; position: absolute; right: 2px; top: 0; color: #666;}
div#copyright span { margin: 0; }	


/************************************************************************************************************
 * P R O J E C T   I N F O   S T Y L E S H E E T   R U L E S
 *
 * Stylesheet rules that are specific to the user control that is used to display the project summary 
 * information on the project list screen.
 ************************************************************************************************************/

div.card {
	border-top: solid 1px #E2E0E0; 
	border-right: solid 1px #E8E7E7;
	border-left: solid 1px #E2E0E0; 
	border-bottom: solid 1px #E8E7E7;
	padding-bottom: 7px; 
	margin-bottom: 5px;}
	
div.card h3 {
	background-color: #F4F4F4; color: #555555;
	font-weight: bold; letter-spacing: 0.1em;
	border-bottom: solid 1px #DDDADA;
	font: 1.1em Verdana, Sans-Serif; 
	padding: 6px 5px 6px 5px;}

div.card h4 {
	color: #555555; border-bottom: solid 1px #555555;
	font-weight: bold; letter-spacing: 0.1em;
	font: 1.1em Verdana, Sans-Serif; 
	padding: 6px 0 3px 1px;
	margin: 0 5px 5px 5px;}

div.card p {
	font-size: 1.1em; line-height: normal;
	margin: 5px 5px;}

div.card a {
	font-size: 1.1em;
	margin: 5px 5px;}
	
div.card div.alsett div {
	float: left; width: 47%;
	margin: 0 2px 0 1px;}

div.card div.alsett div ul {
	margin: 0 0 10px 25px; 
	font-size: 1.1em;}

div.card div.alsett div ul li {
	line-height: normal;
	margin: 0 0 2px 0;}


/************************************************************************************************************
 * V A L I D A T I O N   S U M M A R Y   S T Y L E S H E E T   R U L E S
 *
 * Stylesheet rules that are used to style the validation summary to display the information in a box 
 * with rounded corners
 ************************************************************************************************************/

/* The main <div> control that is automatically generated by the server */
/* control. This control contains all other controls                    */
div.summary {
	background-image: url(../images/message/error/topLeft.gif);
	background-repeat: no-repeat; background-position: top left;
	margin: 0 0 10px 0; padding: 10px 10px 5px 15px;
	background-color: #CC0000; position: relative;}	


/* The <div> control to display the rounded corners, except for the top left */
/* corner - the controls are absolutely positioned in regards to the outer   */
/* div.summary control and they use the background to display the corner     */
div.summary div.topRight {
	background-image: url(../images/message/error/topRight.gif);
	background-repeat: no-repeat; background-position: top right;
	position: absolute; top: 0px; right: 0px;
	width: 10px; height: 10px;}	
div.summary div.bottomLeft {
	background-image: url(../images/message/error/bottomLeft.gif);
	background-repeat: no-repeat; background-position: bottom left;
	position: absolute; bottom: 0px; left: 0px;
	width: 10px; height: 10px;}	
div.summary div.bottomRight {
	background-image: url(../images/message/error/bottomRight.gif); 
	background-repeat: no-repeat; background-position: bottom right;
	position: absolute; bottom: 0px; right: 0px;
	width: 10px; height: 10px;}	

/* We need to override the bottom value for Internet Explorer because with IE */
/* the bottom for absolutely positioned controls is not at zero but at one    */
* html div.summary div.bottomLeft { bottom: -1px;}	
* html div.summary div.bottomRight { bottom: -1px;}	

/* Redefine some of the rules for the <p>, <ul>, and <li> tags */	
div.summary p { font-family: Verdana, Arial, Sans-Serif; margin: 0 0 5px 0; color: #FFFFFF;}
div.summary ul { margin: 0 0 5px 18px; color: #FFFFFF;}
div.summary li { margin-bottom: 0px;}



/************************************************************************************************************
 * M E S S A G E   C O N T R O L   S T Y L E S H E E T   R U L E S
 *
 * Stylesheet rules that are used to style the info message custom control that is used to display any
 * kind of messages, be it success, error, warning, or informational messages.
 ************************************************************************************************************/

/* -------------------- general info message rules -----------------------*/
div.message { background-repeat: no-repeat; background-position: top left; margin: 0 0 10px 0; }
div.message div.top { background-repeat: no-repeat; background-position: top right; height: 10px; }
div.message div.bottom { background-repeat: no-repeat; background-position: bottom left; }
div.message div.bottom div { background-repeat: no-repeat; background-position: bottom right; height: 10px; }

div.message h1 { margin: 0 0 0 20px; font-size: 1.3em; border: none; }
div.message p {	margin: 5px 0 0 20px; }
div.message ul { margin: 5px 0 0 40px; }
div.message li { margin: 0 0 2px 0; }

/* the default color for all text is white */
div.message h1 { color: #FFFFFF; }
div.message p { color: #FFFFFF; }
div.message ul { color: #FFFFFF; }
div.message a { color: #D9D9D9; }


/* -------------------- error message rules -----------------------*/
div.errorMessage { background-image: url(../images/message/error/topLeft.gif); background-color: #CC0000; }
div.errorMessage div.top { background-image: url(../images/message/error/topRight.gif); } 
div.errorMessage div.bottom { background-image: url(../images/message/error/bottomLeft.gif); }
div.errorMessage div.bottom div { background-image: url(../images/message/error/bottomRight.gif);}

/* -------------------- success message rules -----------------------*/
div.successMessage { background-image: url(../images/message/success/topLeft.gif); background-color: #B8D267;}
div.successMessage div.top { background-image: url(../images/message/success/topRight.gif);}
div.successMessage div.bottom { background-image: url(../images/message/success/bottomLeft.gif);}
div.successMessage div.bottom div { background-image: url(../images/message/success/bottomRight.gif);}

/* -------------------- info message rules -----------------------*/
div.infoMessage { background-image: url(../images/message/info/topLeft.gif); background-color: #6699CC;}
div.infoMessage div.top { background-image: url(../images/message/info/topRight.gif);}
div.infoMessage div.bottom { background-image: url(../images/message/info/bottomLeft.gif);}
div.infoMessage div.bottom div { background-image: url(../images/message/info/bottomRight.gif);}

/* -------------------- warning message rules -----------------------*/
div.warningMessage { background-image: url(../images/message/warning/topLeft.gif); background-color: #FFCC33;}
div.warningMessage div.top { background-image: url(../images/message/warning/topRight.gif);}
div.warningMessage div.bottom { background-image: url(../images/message/warning/bottomLeft.gif);}
div.warningMessage div.bottom div { background-image: url(../images/message/warning/bottomRight.gif);}

div.warningMessage h1 { color: #505050;}
div.warningMessage p { color: #505050;}
div.warningMessage ul { color: #505050;}