/** Default colours **/

/* links */
a {
	color:#000080;
	font-family:Arial, Helvetica, sans-serif;
	/*background: transparent;*/
}
a:focus, a:hover, a:active {
	color:#800000;
	/*background: transparent;*/
}
/** end global **/

/* setting the base font size to 90% allows even scaling by the user while keeping font-size 'xx-small' legible */
body {
    background:#E9E9C4;
	/*color: #3D3D3D;*/
	/*background:#FFFFCC;*/
	color: #000000;
	font-size:90%;
}

#container {
	/*border-left:2px solid #D9CAB6;
	border-right:2px solid #D9CAB6;*/
	border-top: 1px solid #E5DDD4;
	border-bottom: 1px solid #E5DDD4;
}

#floater {
	/*background:#fff url(images/header_grad.jpg) repeat-x;
	color:#000;*/
	/*background:#E5DDD4;
	color: #000000;*/
	background:#E9E9C4 url(images/puzz_grad.jpg) no-repeat top right;
	color: #000000;
}

/********
Any elements inside #outer that require a set width or horizontal margins/padding use the '%' unit for that value.
This means that regardless of what causes the #outer div to expand (font size or screen size), 
the content will seemlessly re-flow to fill that space.
*********/
 
ul#access {
	/*font: 1em tahoma, verdana, Helvetica, arial, sans-serif ;*/
	font-size: 1.5em;
}

#access li a{
	color: #FFF;
	/*background:transparent;*/
}
#access li a:focus, #access li a:hover, #access li a:active{
	color: #FFFFFF;
	background: transparent;
}
#header h1 {
    font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
	color:#845697;
    background: transparent url(img/banner.jpg) no-repeat right bottom; 
}
#header h1 a {
	color:#845697;
}
/** Navigation **/
ul#nav {
   	background:#4D3B95 url(images/navgrad.jpg) repeat-x left bottom;
	color:#fff;
}
#nav li {
	/*background:#4D3B95;*/
	color:#fff;
	/*height: 2.5em;*/
}
#nav a {
	/*font:bold 1em 'Lucida Grande', Arial, tahoma, verdana, sans-serif;*/
	font-family: Tahoma, Verdana, Arial, sans-serif;
	color:#fff;
}
#nav a:focus, #nav a:hover, #nav a:active {
	color:#FFFFFF;
	/*background: #036F30;*/
	background:#4D3B95 url(images/navgrad_on.jpg) repeat-x left bottom;
}
/** current menu item **/
ul#nav li#active {
	/*background:#51514F;*/
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	color:#fff;
	background:#4D3B95;
}

#mainback {
	background:#E9E9C4;
}

#mainback0 {
	background:#E9E9C4 url(images/picture_sub1.jpg) no-repeat top right;
}

#mainback1 {
	background:#E9E9C4 url(images/picture_sub2.jpg) no-repeat top right;
}

#mainback2 {
	background:#E9E9C4 url(images/picture_sub3.jpg) no-repeat top right;
}

#mainback3 {
	background:#E9E9C4 url(images/picture_sub4.jpg) no-repeat top right;
}

#mainback4 {
	background:#E9E9C4 url(images/picture_sub5.jpg) no-repeat top right;
}

#mainback5 {
	background:#E9E9C4 url(images/picture_sub6.jpg) no-repeat top right;
}

#mainback6 {
	background:#E9E9C4 url(images/picture_sub7.jpg) no-repeat top right;
}

#mainback, #mainback0, #mainback1, #mainback2, #mainback3, #mainback4, #mainback5, #mainback6 {
	/*background:#F5EDE3;*/
	/*background:#FFFFCC;*/
	color:#000;
	border: 1px solid #DFD4C6;
	font-family:Arial, Helvetica, sans-serif;
}

#mainback ol, #mainback0 ol, #mainback1 ol, #mainback2 ol, #mainback3 ol, #mainback4 ol, #mainback5 ol, #mainback6 ol {
	color:#800000;
}

#mainback a, #mainback0 a, #mainback1 a, #mainback2 a, #mainback3 a, #mainbac4k a, #mainback5 a, #mainback6 a {
	font-weight:bold;
}

/** Content Containers **/
#sub, #right {
	font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

/******
div#sub is an extra wrapper, which allows the center column to come first in the source. 
#sub is floated left, with #center -the content column- nested within and floated to the right.
concept from http://www.positioniseverything.net/piefecta-rigid.html
******/

#sub-content {
	border: 1px solid #DBD0C4;
	background: #FFFFCC;
	color: #000000;
}

#top-content-left0, #top-content-left1, #top-content-left2, #top-content-left3, #top-content-left4, #top-content-left5, #top-content-left6 {
	border: 1px solid #DBD0C4;
}

#top-content-left0 {
	background: #FFFFCC url(images/picture1.jpg) no-repeat top left;
}

#top-content-left1 {
	background: #FFFFCC url(images/picture2.jpg) no-repeat top left;
}

#top-content-left2 {
	background: #FFFFCC url(images/picture3.jpg) no-repeat top left;
}

#top-content-left3 {
	background: #FFFFCC url(images/picture4.jpg) no-repeat top left;
}

#top-content-left4 {
	background: #FFFFCC url(images/picture5.jpg) no-repeat top left;
}

#top-content-left5 {
	background: #FFFFCC url(images/picture6.jpg) no-repeat top left;
}

#top-content-left6 {
	background: #FFFFCC url(images/picture7.jpg) no-repeat top left;
}

#sub-content h1, #top-content-left0 h1, #top-content-left1 h1, #top-content-left2 h1, #top-content-left3 h1, #top-content-left4 h1, #top-content-left5 h1, #top-content-left6 h1 {
	color:#800000;
}

.top-right-panel1, .top-right-panel2, .top-right-panel3  {
	border: 1px solid #DBD0C4;
	background: #FFFFCC;
}

.top-right-panel1 {
	background: #FFFFCC url(images/picture-small2.png) no-repeat top left;
}
.top-right-panel2 {
	background: #FFFFCC url(images/picture-small3.png) no-repeat top left;
}
.top-right-panel3 {
	background: #FFFFCC url(images/picture-small1.png) no-repeat top left;
}

#bottom-content-left {
	border: 1px solid #E9DECF;
	background: #FFFFCC
}

.contact-panel, .login-panel {
	border: 1px solid #E9DECF;
	background: #FFFFCC
}

.login-panel .edit-boxes{
	border:1px solid;
	border-color:#999999;
	background: #fff url(images/edit-grad.jpg) repeat-x;
	color: #666;
	font-size: 0.8em;
}

/***
Containers should be named according to what they contain. not where they sit in the layout.
To make identifying each column more simple, I have named them according to their position.
***/
#center {
	/*width:73%;
	float:right;*/
}
#left {
	background:transparent url(img/eye.jpg) no-repeat right top;
	border-bottom:9px solid #845697;
	color:#000;
}
#center ul {
	list-style-image:url(images/geen_arrow.gif);
}


/** Left Col Contents**/
#left h2 {
	color:#845697;
	font-size:1.5em;
	background:#fff;
}
#left p {
	font-size:.9em;
}

/** Right Col Contents **/

#right h2 {
	font-size:1.2em;
}

/** Footer **/
#footer {
	font:.9em 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	/*border-top:3px double #C8DCC2;*/
	background: #D9CAB5 url(images/footer-grad.jpg) repeat-x top left;
}
#footer li {
	border-right: 1px solid #C8DCC2;
}

/****Testing******/

#tabs {
	font-size: 0.8em;
}

#tabs li {
	/*background: #fff;*/
	border-left: 1px solid #DBD0C4;
	font-size: 120%;
}

#search .sys_search_box {
	background: #fff url(images/search-icon.gif) no-repeat 4px 50%;
	color: #666;
	font-size: 1.2em;
}

#basket {
	border-right: 1px solid #fff;
	/*border-bottom: 1px solid #fff;*/
	background: url(images/search-curve-left.gif) no-repeat right bottom;
}

#basket strong {
	font-weight: bold;
	color: #fff;
	background: #4D3B95;
}

#basket a {
	font-weight: bold;
}

#header {

	/*background-image:url(images/navbar-top.gif) !important;*/

}

#header #tabs {

	background-image: url(images/search-curve-right.gif);

}

#header #search {

	background-image: url(images/search-tab.gif);

	background-color: #4D3B95;

}

#header #basket p.default {

	background: url(images/default-tab.gif) no-repeat left top;

}

#header #basket p.yellow {

	background: url(images/yellow-tab.gif) no-repeat left top;

}
#header #basket p.grey {

	background: url(images/grey-tab.gif) no-repeat left top;

}

.sys_button-go {
	background: #46B846;
	color: #fff;
	border: 2px solid #000;
}

table {
	border: 1px solid #DBD0C4;
}

table caption {
	font: bold 1.5em/1.2 'Lucida Grande', arial, tahoma, verdana, sans-serif
}

table th {
	background: #E9E9C4;
	color:#000;
}

/*sub styles */

.page-content-right {
	background:#E9E9C4;
}