/* ========== Basic main body layout ============ */
* { padding: 0; margin: 0; }

html, body {
	font-family:  Arial, "Arial Narrow","Frutiger 45 Light", Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 0.9em;
	color: #000;
}

img { border: none; }
.left { float: left; }
.right {float: right; }
.center { text-align: center; }

/* colours */
.myaccount { background-color: #DA541F; }
.myhomefactfile { background-color: #AC0234; }
.tiling { background-color: #2D67CA; }
.downloads { background-color: #F77300; }
.createoptions { background-color: #53A4CC; }
.factoring { background-color: #CF9A7A; }
.messages { background-color: #8C63A5; }

input.button { border: 1px solid #666; color: #DA541F; background-color: #fff; padding: 0.1em 0.4em; }
input.button:hover { cursor: pointer; background-color: #666; color: #fff; }

p { padding: 0.2em 0; }
p.error { color: #d00; text-align: center; font-weight: bold; padding-bottom: 0.5em; }

ol { margin: 0.5em; }
ol li { margin-left: 2em; }

#wrapper {
	margin: 15px 30px;
	padding: 0 0 25px 0;
	border: 1px solid #888;
	min-width: 850px;
	position: relative;
}

/* ===== header background images ============ */

#header {
	position: relative;
	width: 100%;
	height: 200px;
}

#head1 {
	position: absolute;
	z-index: 5;
	top: 0;
	left:0;
	background: url(/images/background-head1.jpg) top left no-repeat;
	height: 100px;
	width: 600px;
	}

#head-divider {
	position: absolute;
	z-index: 50;
	top: 0;
	left: 600px;
	height: 100px;
	width: 25px;
	background-repeat: no-repeat;
	background-position: top left;
}

#head2 {
	position: absolute;
	height: 100px;
	width: 100%;
}

/* ====== main top menu ======*/

#top-menu {
	position: absolute;
	z-index: 50;
	top: 25px;
	background: #F7DE00;
	height: 26px;
	width: 100%;
}

#top-menu ul {
	list-style: none;
	padding-left: 1em;
}

#top-menu ul li {
	float: left;
	margin: 5px 0;
	padding: 0 10px;
}

#top-menu a { color: #000; text-decoration: none; font-size: 12px; }
#top-menu a:hover {	text-decoration: underline; }

/* ======= end main top menu ====*/

#divider {
	position: absolute;
	top: 100px;
	height: 15px;
	background-color: #4f4b4a;
	width: 100%;
}

#page-title {
	position: relative;
	width: 100%;
	top: 115px;
	height: 85px;
	background: #fff url(/images/background-title1.jpg) top left no-repeat;
	padding: 15px 0 0 0;
}

#page-title h1 { margin-left: 80px; float: left; font-size: 16px; }

#page-title p {
	padding: 0.2em 0 0 5em;
	font-size: 0.8em;
	float: left;
}

#page-title p.logged { float: right; padding-right: 50px; }
#page-title p.logged a { color: #da541f; font-size: 13px; text-decoration: none; }
#page-title p.logged a:hover { text-decoration: underline; }

/* ======= main body details ===== note further menu.css for navigation ====*/

#main-page {
	margin: 15px 0 0 0;
	background: url(/images/background-body1.jpg) top left no-repeat;
	min-height: 300px;
}

#body {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 0 0 50px;
	min-width: 800px;
}

table.login { width: 450px; margin: 20px auto; }

option { padding-left: 1em; }

div.row { clear: both; margin-bottom: 0.5em; float: left; text-align: center; width: 100%;}

div.row label { float: left; width: 120px; text-align: right; padding-right: 0.3em; font-weight: bold; }
div.row div.col2 { float: left; width: 280px; text-align: left; }

fieldset { border: 1px solid #666; }
#login { padding-top: 1em; }
#login fieldset { width: 450px; margin: 20px auto; padding: 1em 0.5em; }

p.small { font-size: 0.8em; }

p.head { margin: 15px 30px 0 30px; font-weight: bolder; }

table td { padding: 0.2em; vertical-align: top; }

#main-content {
	width: 95%;
	margin: 0 0 0 9px;
	border: 1px solid #666;
	background: #fff;
}

#content {
	margin: 0;
	width: 100%;
	min-height: 250px;
	padding-bottom: 20px;
}

.feature {
	padding: 10px;
	border: 1px solid #333;
	border-top: 0;
	margin: 0 30px;
}

h2.feature-title {
	height: 16px;
	font-size: 13px;
	padding: 2px 5px;
	margin: 20px 30px 0 30px;
	background: #eee url(/images/background-h2.gif) top left no-repeat;
	border: 1px solid #333;
	border-bottom: 0;
}

/* ========= footer details =======*/

#footer {
	width: 100%;
	color: #666;
}

#footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	
	margin-left: 50px;
	margin-right: 2%;
}

#footer ul li {
	float: left;
	font-size: 80%;
	width: 33%;
	text-align: center;
}

#footer a { color: #666; }

#footer li.left { text-align: left; } 
#footer li.right { text-align: right; }

/* ==== end footer details ======= */

/* ===== feature boxes in the content area ======= */


/*  create package stuff */

/* GMcA Layout */
#packagelist {
	margin: 0 20px;
	/*height: 200px;*/
	/*overflow: auto;*/
	scrollbar-face-color: #1F4756;
	scrollbar-arrow-color: #fff;
	scrollbar-base-color: #fff;
	scrollbar-3dlight-color: #3D8DB0;
	scrollbar-highlight-color: #1F4756;
	scrollbar-track-color: #D8EAF1;
	scrollbar-shadow-color: #1F4756;
	scrollbar-darkshadow-color: #3D8DB0;
	
}

#packagelist ul {
	list-style-type: none;
	margin-top: 1em;
}

#packagelist li {
	margin-bottom: 15px;
	width: 100%;
}

.packagePanel {
	border: 1px solid #1F4756;
	font-family: arial;
}

.packagePanel a:hover {
	text-decoration: none;
	color: #ffc;
}

.packageHeader {
	height: 20px;
	background-color: #eee;
	border-bottom: 1px solid #1F4756;
}

.packageHeader p {
	color: #000;
	padding-left: 0.5em;
}

.packageHeader span { padding-right: 0.5em; }

.packageHeader input { margin-bottom: 1px; }

.packageHeader a {
	color: #fff;
	text-decoration: none;
}

.packageHeader a:hover {
	color: #ffe90f;
	text-decoration: none;
}

.packageText {
	padding: 0.5em 0.7em;
	clear: both;
}

.packageText a { color: #da541f; text-decoration: underline; }
.packageText a:hover { color: #000;}

.packageText img { border: 1px solid #666; }