/*
 
Copyright (c) Enigma Interactive 2004

SOM2
Project:		ONENE
Filename:		layout_toolkit.css
Description:	Toolkit layout elements
     
History
ver date  		who     	comment
-----------------------------------------------------------------------------
23	29/6/07		PG			added style for small text area
22	19/06/07	PG			added rollover styles
21	15/05/07	PW			Cathy fixed submenu spacing with IE6
20	15/05/07	PW			font size changed on menuItem anchors
19	14/05/07	PW			lined up projectTitle and projectRef
18	09/05/07	PW			added styles for sub-section buttons in theme menu
17	09/05/07	PW			copied mainButtons for mainButtonsTop and changed top padding to bottom
16	09/05/07	PW			added menuTop, menuBottom, menuMid (used for sections in theme menu)
15	03Apr07		CT			Added dialog box and other minor updates
14	30Mar07		CT			Updated tab layout
13	30Mar07		CT			More updates
12	30Mar07		CT			More updates
11	30mar07		CT			More updates
10	30Mar07		CT			Layout updates
9	30mar07		CT			Question layout adjustment
8	30Mar07		CT			Adjusted message layout
7	30Mar07		CT			Further padding adjustments
6	30Mar07		CT			Further adjustment to question padding
5	30mar07		CT			In progress
4	30mar07		CT			In progress
3	29Mar07		CT			In progress
2	27Mar07		CT			In progress
1	27Mar07		CT			Created

*/

body {
	margin: 0;
	padding: 0;
	font: normal 80% arial, verdana, sans-serif;
	text-align: center; /* centering for IE users */
	background-color: #666666;
}

h1 {
	font-size: 1.4em;
	padding: 0px;
	margin: 0px;
}

h2 {
	font-size: 1.3em;
	padding: 0px;
	margin: 0px;
}

h3 {
	font-size: 1.2em;
	padding: 0px;
	margin: 0px;
}

h4 {
	font-size: 1.2em;
	padding: 0px;
	margin: 0px;
}

h5 {
	font-size: 1.1em;
	padding: 0px;
	margin: 0px;
}

a {
	color: #990000;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	text-decoration: underline;
}

#siteHolder {
	width: 784px;
	margin : 0px auto; /* required by Firefox and Netscape */
	text-align : left; /* re-align text to the left */
}

#siteContent {
	width: 100%;
	padding: 0px;
	margin: 0px;
	float: left;
	color: #333333;
}

.header {
	width:588px;
	height:81px;
	float: left;
	background: transparent url('/res/coToolKit/images/header.gif') no-repeat top left;
}

.headerTitle {
	width:588px;
	height:111px;
	float: left;
	background: transparent url('/res/coToolKit/images/header_title.gif') no-repeat top left;
}

.header .projectTitle,
.headerTitle .projectTitle {
	color: #ffb300;
	margin-top: 38px;
	margin-left: 135px;
	height: 16px;
	width: 470px;
	overflow: hidden;
}

.header .projectRef,
.headerTitle .projectRef {
	color: #ffb300;
	margin-top: 2px;
	margin-left: 135px;
	height: 16px;
	width: 435px;
	overflow: hidden;
}

.menuItem {
	padding:0px 39px 0px 10px;
	width:194px;
	height:44px;
	font-size: 0.8em;
	background-color:#666666;
	background-repeat: no-repeat;
	background-position: bottom center;
}

.specialMenuItem {
	padding:0px 39px 0px 10px;
	width:194px;
	height:34px;
	font-size: 0.8em;
	background-color:#666666;
	background-repeat: no-repeat;
	background-position: bottom center;
}

.menuItem a, .specialMenuItem a, .menuSub a {
	font: normal 110% arial, verdana, sans-serif;
	font-weight: normal;
	color: #333333;
}

.menuSub
{
	position: relative;
	width:194px;
	height:auto;
	font-size: 0.8em;
	background-color:#666666;
}

.menuSubFirst1
{
	position: relative;
	width: 194px;
	height: 7px;
	float: left;
	background: transparent url('/res/coToolKit/images/menu_top_top.gif') no-repeat bottom left;
}

.menuSubFirst1 img {
	height: 7px;
}

.menuSubLast1, .menuSubMid1
{
	position: relative;
	width: 194px;
	height: 4px;
	float: left;
	background: transparent url('/res/coToolKit/images/menu_mid_top.gif') no-repeat bottom left;
}

.menuSubFirst2, .menuSubMid2, .menuSubLast2
{
	position: relative;
	width: 194px;
	height: auto;
	min-height: 23px;
	_height: 23px;
	float: left;
	background: transparent url('/res/coToolKit/images/menu_mid.gif') repeat-y top left;
}

.menuSubFirst3
{
	position: relative;
	width: 194px;
	height: 4px;
	float: left;
	background: transparent url('/res/coToolKit/images/menu_mid_bottom.gif') no-repeat top left;
}


.menuSubLast3
{
	position: relative;
	width: 194px;
	height: 9px;
	float: left;
	background: transparent url('/res/coToolKit/images/menu_bottom_bottom.gif') no-repeat top left;
}

.menuSubLast3 img {
	height: 9px;
}

.menuSubMid3
{
	position: relative;
	width: 194px;
	height: 4px;
	float: left;
	background: transparent url('/res/coToolKit/images/menu_mid_bottom.gif') no-repeat top left;
}

.menuSubMid3 img, .menuSubFirst3 img, .menuSubLast1 img, .menuSubMid1 img {
	height: 4px;
}

.menuLink {
	margin-top: -1px;
	padding:0px 5px 0px 10px;
	width: 138px;
	height: auto;
	float: left;
}

.menuSubFirst2 img, .menuSubMid2 img, .menuSubLast2 img {
	margin: 4px 10px;
	width: 20px;
	height: auto;
	float: left;
	vertical-align: bottom;
}

.tabItem {
	width:48px;
	height: 18px;
	float:left;
	padding-left: 4px;
	padding-top: 10px;
	margin: 3px 2px 2px 0px;
	background-color:#666666;
	background-repeat: no-repeat;
	background-position: top center;
	vertical-align: bottom;
}

.tabItem a {
	color: #ffffff;
}

.main, .title, .body, .question, .error_message, .success_message {
	width: 500px;
	float: left;
	padding: 0px 44px 20px 44px;
	font-size: 0.9em;
}

.help {
	width: 500px;
	float: left;
	padding: 0px 44px 6px 44px;
	font-size: 0.9em;
}

.questionHelp,
.questionDownload {
	width: 440px;
	float: left;
	margin-bottom: 5px;
}

.mainButtons {
	width: 500px;
	float: left;
	padding: 20px 44px 0px 44px;
}

.mainButtons .leftButton {
	margin-left: 5px;
	width:156px;
	height: 34px;
	float: left;
	text-align: left;
	vertical-align: bottom;
}

.mainButtons .middleButton {
	width: 156px;
	height: 34px;
	float: left;
	text-align: center;
}

.mainButtons .rightButton {
	margin-right: 20px;
	width: 156px;
	height: 34px;
	float: right;
	text-align: right;
}

.mainButtons .leftButton input,
.mainButtons .rightButton input {
	vertical-align: bottom;
}

.mainButtonsTop {
	width: 500px;
	float: left;
	padding: 0px 44px 20px 44px;
}

.mainButtonsTop .leftButton {
	margin-left: 5px;
	width:156px;
	height: 34px;
	float: left;
	text-align: left;
	vertical-align: bottom;
}

.mainButtonsTop .middleButton {
	width: 156px;
	height: 34px;
	float: left;
	text-align: center;
}

.mainButtonsTop .rightButton {
	margin-right: 20px;
	width: 156px;
	height: 34px;
	float: right;
	text-align: right;
}

.mainButtonsTop .leftButton input,
.mainButtonsTop .rightButton input {
	vertical-align: bottom;
}

.error_message {
	color: #990000;
	font-weight: bold;
	font-size: 1.1em;
}

.success_message {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.1em;
}

.question_title, .help {
	width: 440px;
	float: left;
	margin-bottom: 10px;
}

.row {
	width: 440px;
	float: left;
	margin-bottom: 10px;
}

.innerRow {
	width: 440px;
	float: left;
	margin-bottom: 3px;
}

.innerRow textarea {
	width: 440px;
	height: 200px;
	font-size: 0.95em;
	background-color: #eeeeee;
}

.innerRow textarea.small{
	height: 40px;
}

.label {
	min-height: 1px;
	width: 100px;
	float: left;
	font-weight: bold;
}

.field {
	width: 200px;
	float: left;
}

.field input {
	width: 200px;
	font-size: 0.8em;
}

.bottons {
	width: 200px;;
	float: left;
	text-align: right;
}

.left {
	width: 50%;
	float: left;
}

.right {
	width: 50%;
	float: left
}

.question_top {
	width: 482px;
	height: 20px;
	float: left;
	background: transparent url('/res/coToolKit/images/question_top.gif') no-repeat bottom left;
	margin: 0px 4px;
}

.question_bottom {
	width: 482px;
	height: 20px;
	float: left;
	background: transparent url('/res/coToolKit/images/question_bottom.gif') no-repeat top left;
	margin: 0px 4px;
}

.question_body {
	width: 448px;
	height: auto;
	float: left;
	border-right: 2px solid white;
	border-left: 2px solid white;
	background-color: #DDDDDD;
	padding: 15px;
	margin: 0px 4px;
}

.question_title {
	font-weight: bold;
}

.content {
	width: 588px;
	_height: 440px;
	min-height: 440px;
	vertical-align:top;
}

.bottom {
	vertical-align: bottom;
}

.tkRollOver {
	position: absolute;
	width: 270px;
	height: 167px;
	background: transparent url('/res/coToolKit/images/roll.gif') no-repeat top left;
}

.tkRollOver .tkHolder {
	scrollbar-arrow-color: #666666;
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-darkshadow-color: #FFFFFF;
	scrollbar-face-color: #FFFFFF;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-track-color: #ffffff;
	font: normal 90% arial, verdana, sans-serif;
	position: absolute;
	top: 10px;
	left: 60px;
	width: 195px;
	height: 150px;
	overflow: auto;
	padding-right: 10px;
}


.tkPopupH {
	position: absolute;
	width: 511px;
	height: 387px;
	background: transparent url('/res/coToolKit/images/pop.gif') no-repeat top left;
}

.tkPopupH .tkClose {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 23px;
	height: 23px;
	background: #900;
	cursor: pointer;
	background: transparent url('/res/coToolKit/images/close.gif') no-repeat top left;
}

.tkPopupH .tkHolder {
	scrollbar-arrow-color: #666666;
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-darkshadow-color: #FFFFFF;
	scrollbar-face-color: #FFFFFF;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-track-color: #ffffff;
	font: normal 90% arial, verdana, sans-serif;
	position: absolute;
	top: 36px;
	left: 150px;
	width: 340px;
	height: 314px;
	overflow: auto;
	padding-right: 10px;
	
}