/* Start of djoo.com stylesheet */

/* Body */
body {font:77% Verdana, Arial, Helvetica, sans-serif; text-align:center;}
div#index {
	position:absolute; 
	left:50%; 
	width:760px; 
	margin-left:-380px; 
}

/* Background and text colours */
div.linebreak1, div.linebreak2, div.centercontent, div.introcontent, div.introimage, div.footer, div.validation {
	background-color:white;
	color:black;
}
#blue #navigation, #blue #nav a, #blue div.breadcrumb, #blue div.topbar, #blue #navigation, #blue div.rightheading {
	background-color:#369;
	color:white;
}
#blue, #blue div.header, #blue div.rightcontent, #blue div.rightmembers {
	background-color:#69C;
	color:white;
}
#green #navigation, #green #nav a,  #green div.breadcrumb,#green div.topbar, #green #navigation, #green div.rightheading {
	background-color:#066;
	color:white;
}
#green, #green div.header, #green div.rightcontent, #green div.rightmembers {
	background-color:#099;
	color:white;
}
#red #navigation, #red #nav a,  #red div.breadcrumb, #red div.topbar,  #red #navigation, #red div.rightheading {
	background-color:#900;
	color:white;
}
#red, #red div.header, #red div.rightcontent, #red div.rightmembers {
	background-color:#c33;
	color:white;
}

/* Background Images */
#blue #navigation {background-image: url('images/blue_fade.jpg');}
#blue div.rightheading {background-image: url('images/corner_blue.gif');}
#red #navigation {background-image: url('images/red_fade.jpg');}
#red div.homeimage {background-image: url('images/left_prospectus.gif');}
#red div.rightheading {background-image: url('images/corner_red.gif');}
#green #navigation {background-image: url('images/green_fade.jpg');}
#green div.rightheading {background-image: url('images/corner_green.gif');}

/* Image borders */
.noborder   			{border:0px; vertical-align:middle;}
.border   			{border:1px solid white;}

/* Hyperlinks */
a:link 				{color:#369; background-color:white;}
#green a:link 			{color:#066; background-color:white;}
#red a:link 			{color:#900; background-color:white;}
a:visited 			{color:black; background-color:white;}
a:hover 			{color:black; text-decoration:none; background-color:white;}
a:active 			{color:black; background-color:white;}

/* Font styles */
h1 				{font-size:135%;}
h2 				{font-size:105%;}
.subheading 			{font-size:90%;}
p.bold, span.bold, .location 	{font-weight:bold;}
.subheading, .intro, .italic 	{font-style:italic;}
.capitalize 			{text-transform:capitalize;}
.warning			{font-weight:bold; color:#369;}
#green .warning			{font-weight:bold; color:#066;}
#red .warning			{font-weight:bold; color:#900;}

/* Horozontal rules */
div.hr {
	margin-left:-1px;
	margin-right:-1px;
	width:576px;
	height:5px;
}
#blue div.hr {color:white; background: #369 url(images/hr_blue.gif);}
#green div.hr {color:white; background: #066 url(images/hr_green.gif);}
#red div.hr {color:white; background: #900 url(images/hr_red.gif);}
div.hr hr {display: none;}
hr {color:white; background-color:white;}

/* Lists */
ul.columnlist {list-style:circle url(images/list_arrow.gif);}
ul.link, ul.linksection {list-style:circle url(images/list_blue.gif);}
#green ul.link, #green ul.linksection {list-style:circle url(images/list_green.gif);}
#red ul.link, #red ul.linksection {list-style:circle url(images/list_red.gif);}
ul.columnlist li {margin-left:-15px;}
ul.link li {line-height:150%;}
ul.linksection li {margin-left:-20px; line-height:25%;}

/* Form buttons */
.searchbutton, .memberbutton, .fieldterms, .fieldprivacy, .surveybutton {
	font-size:90%;
	border:outset white;
}
#blue .searchbutton, #blue .memberbutton, #blue .fieldterms, #blue .fieldprivacy, #blue .surveybutton, #blue .contactsend, #blue .contactreset {
	background-color:#369; 
	color:white;
}
#red .searchbutton, #red .memberbutton, #red .fieldterms, #red .fieldprivacy, #red .surveybutton, #red .contactsend, #red .contactreset {
	background-color:#900;
	color:white;
}
#green .searchbutton, #green .memberbutton, #green .fieldterms, #green .fieldprivacy, #green .surveybutton, #green .contactsend, #green .contactreset {
	background-color:#066; 
	color:white;
}
.searchbutton, .searchfield {margin-left:2px;}
.searchbutton, .memberbutton {width:147px;}
.surveybutton {width:73px;}
.contactsend {width:140px;}
.contactreset {width:60px;}

/* Form fields */
.searchfield, .fieldemail, .fieldpassword, .fieldfname, .fieldlname, .fieldusername {
	font-size:90%;
	background-color:#dddddd;
	color:black;
}
.contactfield, .contactsection, .contactenquiry {
background-color:#dddddd;
color:black;
}
.searchfield {width:141px;}
.fieldpassword {width:77px;}
.fieldterms {width:69px;}
.fieldfname {width:70px;}
.fieldlname {width:71px;}
.fieldprivacy {width:73px;}
.fieldusername, .fieldemail {width:100px;}
.contactfield, .contactenquiry {width:200px;}
.contactsection {width:206px; background-color:#dddddd;}
.fieldfix {display:none;}

/* Misc settings */
.clear {clear:left;}

/* Logo and user buttons */
.topbar {		
	position:absolute;
	width:748px;
	height:50px;
	top:5px;
	left:10px;
	border:2px solid #000;
	border-bottom:none;
}
.logo {float:left; padding-top:5px;}
.buttons {float:right; width:400px;}

/* Buttons enlarged */
/* Adapted version of the exploding images on www.cssplay.co.uk/menus/magnifier2.html */
#enlarge {margin:0.8em auto; list-style-type:none;}
#enlarge li {display:block; float:right; width:30px; height:30px; position:relative;}
#enlarge li a {
	display:block; 
	width:20px; 
	height:20px; 
	background:transparent; 
	overflow:hidden; 
	position:relative;}
#enlarge li a img {width:100%; height:100%;}
#enlarge li a:hover {position:absolute; right:-10px; top:-10px; width:40px; height:40px;}

/* Navigation header */
#header	{		
	position:absolute;
	left:10px;
	top:55px;
	width:748px;
	height:35px;
	border-right:2px solid #000;
	border-left:2px solid #000;
	background-repeat: no-repeat;
	background-position: top center;
}

/* Navigation tab menu */
#navmenu {position:absolute; top:5px; left:20px;}
.menu {letter-spacing:0.1em; font-weight:bold;}
.menu dl {margin-top:0px;}
.menu dd {float:left; padding:0px; margin:0px;}
.menu dd span.aa, .menu dd span.cc {
	display:block; 
	width:25px; 
	height:30px; 
	float:left; 
	padding:7px 0;
}
.menu dd span.bb {height:30px; float:left; padding:7px 0;}
.menu a, .menu a:visited, #green .menu a, .menu a:visited,
#red .menu a, .menu a:visited {
	color:white;
	text-decoration:none;
}
.menu a:hover, #green .menu a:hover, #red .menu a:hover {
	color:black; 	
	background:white;
}
span.bb {text-decoration:underline;}
.menu dd span.aa {background:#69C url(images/tab_left_blue.gif);}
#green .menu dd span.aa {background:#099 url(images/tab_left_green.gif);}
#red .menu dd span.aa {background:#c33 url(images/tab_left_red.gif);}
.menu dd span.bb {background:#69C url(images/tab_middle_blue.gif);}
#green .menu dd span.bb {background:#099 url(images/tab_middle_green.gif);}
#red .menu dd span.bb {background:#c33 url(images/tab_middle_red.gif);}
.menu dd span.cc {background:#69C url(images/tab_right_blue.gif);}
#green .menu dd span.cc {background:#099 url(images/tab_right_green.gif);}
#red .menu dd span.cc {background:#c33 url(images/tab_right_red.gif);}

/* Navigation search box */
#navigation {
	position:absolute;
	left:10px;
	top:90px;
	width:748px;
	height:45px;
	border-right:2px solid #000;
	border-left:2px solid #000;
	background-repeat: repeat-x;
	background-position: bottom;
}
#search {position:absolute; top:6px; left:220px;}

/* Line Breaks */
.linebreak1 {
	position:absolute;
	top:135px;
	left:10px;
	width:748px;
	height:10px;
	border-right:2px solid #000;
	border-left:2px solid #000;		
}
.linebreak2 {
	position:absolute;
	top:145px;
	left:172px;
	width:588px;
	height:10px;
	border-right:2px solid #000;		
}

/* Breadcrumb trail */
.breadcrumb {
	position:absolute;
	padding-top:1px;
	padding-left:7px;
	top:155px;
	left:172px;
	width:581px;
	height:18px;
	text-align:left;
	border-right:2px solid #000
}

/* Center content */
.centercontent {
	position:absolute;
	padding:7px;
	top:173px;
	left:170px;
	width:574px;
	text-align:left;
	border-left:2px solid #000;
	border-right:2px solid #000;
	border-bottom:2px solid #000;
}
/* Introduction text */
.intro 	{height:60px;}
/* Section image */
.centerimage {float:right; margin-left:7px;}
#blue .centerimage {border:1px dashed #369;}
#green .centerimage {border:1px dashed #066;}
#red .centerimage {border:1px dashed #900;}
.centerimage, .sectionimage {width:100px; height:100px;}
/* Center columns */
.left, .leftcolumn {margin-top:0px; float:left; width:270px;}
.left {margin-right:7px; padding-right:7px;}
#blue .right {border-left:1px dotted #369;}
#green .right {border-left:1px dotted #066;}
#red .right {border-left:1px dotted #900;}
.right, .rightcolumn {
	float:left;
	margin-right:7px;
	margin-bottom:14px;
	margin-top:0px;
	padding-left:7px;
	width:270px;
}
.leftcolumn {text-align:left;}
.rightcolumn, .leftscripts, .leftdesigns {text-align:right;}
.dictionary {float:left; width:130px; padding-bottom:5px;}
.contentscripts {width:284px;	height:100px; border:1px solid black;}
.contentdesigns {width:286px;	height:100px; border:1px solid black;}
.leftscripts, .rightscripts {float:left; width:141px;	line-height:270%}
.leftdesigns {float:left; width:85px; padding-top:10px;}
.rightdesigns {float:left;	width:190px; padding-top:10px; padding-right:7px;}
.middlescripts, .middledesigns {float:left; width:2px;}
.imagescripts {
	float:right;
	width:95px;
	height:100px;
	border:1px solid black;
	border-left:none;
}
.imagedesigns {
	float:right;
	width:142px;
	height:100px;
	border:1px solid black;
	border-left:none;
}
/* Section banners */
.banner1, .banner2, .banner3, .banner4 {
	width:574px;	
	height:161px; 
}
.banner1 {background:url(images/banner_1.jpg); background-position:bottom; background-repeat:no-repeat;}
.banner2 {background:url(images/banner_2.jpg); background-position:bottom; background-repeat:no-repeat;}
.banner3 {background:url(images/banner_3.jpg); background-position:bottom; background-repeat:no-repeat;}
.banner4 {background:url(images/banner_4.jpg); background-position:bottom; background-repeat:no-repeat;}
.bannertext1, .bannertext2, .bannertext3, .bannertext4 {font-size:85%; font-style:italic;}
.bannertext1 {position:relative; left:130px; top:40px; width:50px; line-height:135%;}
.bannertext2 {position:relative; left:334px; top:20px; width:160px;}
.bannertext3 {position:relative; left:200px; top:35px; width:60px;}
.bannertext4 {position:relative; left:267px; top:37px; width:58px; text-align:center;}

/* Side heading */
.rightheading {
	position:absolute;
	left:10px;
	top:142px;	
	padding-top:7px;
	height:24px;
	width:160px;
	border-left:2px solid #000;
	background-repeat: no-repeat;
	background-position: top right;
	font-weight:bold;
}

/* Side content */
.rightcontent {
	z-index:2;
	position:absolute;
	left:10px;
	top:173px;
	width:160px;
	padding-bottom:10px;
	border-left:2px solid #000;
	border-bottom:2px solid #000;
	text-align:left;
}

/* Tab system */
.tabberlive .tabbertabhide, .tabber, .tabberlive .tabbertab h2 {display:none;}
.tabberlive {margin-left:5px; margin-right:5px;}
ul.tabbernav {
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #000;
 font-size:90%;
 font-weight:bold;
 text-align:center;
}
ul.tabbernav li {list-style: none; margin: 0; display: inline;}
ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #000;
 border-bottom: none;
 text-decoration: none;
}
#blue ul.tabbernav li a {color:white; background-color:#369;}
#green ul.tabbernav li a {color:white; background-color:#066;}
#red ul.tabbernav li a {color:white; background-color:#900;}
#blue ul.tabbernav li.tabberactive a {color:white; background-color: #69c; border-bottom:1px solid #69c;}
#green ul.tabbernav li.tabberactive a {color:white; background-color: #099; border-bottom:1px solid #099;}
#red ul.tabbernav li.tabberactive a {color:white; background-color: #c33; border-bottom:1px solid #c33;}
#blue ul.tabbernav li a:hover, #green ul.tabbernav li a:hover, #red ul.tabbernav li a:hover, #blue ul.tabbernav li.tabberactive a:hover, #green ul.tabbernav li.tabberactive a:hover, #red ul.tabbernav li.tabberactive a:hover {
 color: #000;
 background:white;
}
ul.tabbernav li a:link, ul.tabbernav li a:visited {color:white;}
.tabberlive .tabbertab {
 padding:1px;
 border:1px solid #000;
 border-top:0;
 font-size:90%;
 text-align:center;
}

/* Footer */
.footer {height:98px; text-align:center;}

/* Banner advertisement */
.advertisement {
   	float:left;
	width:468px;
	height:60px;
	border-top:2px solid #000;
	border-bottom:2px solid #000;
	border-left:2px solid #000;
}

/* Copyright information */
.copyright {
	float:left;		
	left:600px;
	width:100px;
	height:60px;
	border:2px solid #000;
}

/* Validation and Sponsor Links */
.sponsors {
	clear:left;
	float:left;		
	left:600px;
	width:570px;
	height:32px;
	border:2px solid #000;
	border-top:none;
}

/* End of djoo.com stylesheet *//* Body */
body {		
	font:77% Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}

/* ID Backgrounds and Text Colors */
#blue #navigation, #blue #nav a, #blue div.breadcrumb, #blue div.logo, #blue div.buttons, #blue #navigation, #blue div.rightheading {
	background-color:#369;
	color:white;
}
div.linebreak1, div.linebreak2, div.centercontent, div.introcontent, div.introimage, div.footer, div.validation {
	background-color:white;
	color:black;
}
#blue, #blue div.header, #blue div.rightcontent, #blue div.rightmembers {
	background-color:#69C;
	color:white;
}
#red #navigation, #red #nav a,  #red div.breadcrumb, #red div.logo, #red div.buttons, #red #navigation, #red div.rightheading {
	background-color:#900;
	color:white;
}
#red, #red div.header, #red div.rightcontent, #red div.rightmembers {
	background-color:#c33;
	color:white;
}
#green #navigation, #green #nav a,  #green div.breadcrumb,#green div.logo, #green div.buttons, #green #navigation, #green div.rightheading {
	background-color:#066;
	color:white;
}
#green, #green div.header, #green div.rightcontent, #green div.rightmembers {
	background-color:#099;
	color:white;
}
a:link {color:#369; background-color:white;}
#red a:link {color:#900; background-color:white;}
#green a:link {color:#066; background-color:white;}
a:visited {color:black; background-color:white;}
a:hover {color:black; text-decoration:none; background-color:white;}
a:active {color:black; background-color:white;}

/* Heading Font Sizes */
h1 			{font-size:135%;}
h2 			{font-size:105%;}

/* Font Styles */
p.bold, span.bold {font-weight:bold;}
.location {font-weight:bold;}
.subheading {font-size:90%; font-style:italic;}
.capitalize {text-transform: capitalize;}
.intro {font-style:italic; height:60px;}

/* Horozontal Rules */
hr {color:white; background-color:white;}
div.hr {
	margin-left:-1px;
	margin-right:-1px;
	width:576px;
	height: 5px;
}
#blue div.hr {color:white; background: #369 url(images/hr_blue.gif);}
#green div.hr {color:white; background: #066 url(images/hr_green.gif);}
#red div.hr {color:white; background: #900 url(images/hr_red.gif);}
div.hr hr {
  	display: none;
}

/* Images */
.noborder   	{border:0px; vertical-align:middle;}
.border   	{border:1px solid white;}
.small		{width:100px; height:100px; border:0px;}
.large		{width:570px; height:150px;}
.column		{width:145px; height:60px; border:0px;}
.favourites	{width:150px; height:31px; border:0px;}

/* Form Fields */
/* Buttons */
.searchbutton, .memberbutton, .fieldterms, .fieldprivacy, .surveybutton {
	font-size:90%;
	border:outset white;
}
#blue .searchbutton, #blue .memberbutton, #blue .fieldterms, #blue .fieldprivacy, #blue .surveybutton, #blue .contactsend, #blue .contactreset {background-color:#369; color:white;}
#red .searchbutton, #red .memberbutton, #red .fieldterms, #red .fieldprivacy, #red .surveybutton, #red .contactsend, #red .contactreset {background-color:#900; color:white;}
#green .searchbutton, #green .memberbutton, #green .fieldterms, #green .fieldprivacy, #green .surveybutton, #green .contactsend, #green .contactreset {background-color:#066; color:white;}
.searchbutton, .searchfield {margin-left:2px;}
.searchbutton, .memberbutton {width:147px;}
.surveybutton {width:73px;}
.contactsend {width:140px;}
.contactreset {width:60px;}
/* Fields */
.searchfield, .fieldemail, .fieldpassword, .fieldfname, .fieldlname, .fieldusername {
	font-size:90%;
	background-color:#dddddd;
	color:black;
}
.contactfield, .contactsection, .contactenquiry {
background-color:#dddddd;
color:black;
}
.searchfield {width:141px;}
.fieldemail {width:100px;}
.fieldpassword {width:77px;}
.fieldterms {width:69px;}
.fieldfname {width:70px;}
.fieldlname {width:71px;}
.fieldprivacy {width:73px;}
.fieldusername {width:100px;}
.contactfield {width:200px;}
.contactsection {width:206px; background-color:#dddddd;}
.contactenquiry {width:200px;}

/* Background Images */
#blue div.logo {background-image: url('images/logo_blue.gif');}
#blue #navigation {background-image: url('images/blue_fade.jpg');}
#blue div.rightheading {background-image: url('images/corner_blue.gif');}
#red div.logo {background-image: url('images/logo_red.gif');}
#red #navigation {background-image: url('images/red_fade.jpg');}
#red div.homeimage {background-image: url('images/left_prospectus.gif');}
#red div.rightheading {background-image: url('images/corner_red.gif');}
#green div.logo {background-image: url('images/logo_green.gif');}
#green #navigation {background-image: url('images/green_fade.jpg');}
#green div.rightheading {background-image: url('images/corner_green.gif');}
	
/* Section Positioning */
.topbar {		
	position:absolute;
	height:50px;
	width:748px;
	top:5px;
	left:52px;
	border:2px solid #000;
	border-bottom:none;
}
/* Logo Area */
.logo {float:left; padding-top:5px;}
/* Buttons */
.buttons {display:none;}

/* Lists */
ul.columnlist {list-style:circle url(images/list_arrow.gif);}
ul.link, ul.linksection {list-style:circle url(images/list_blue.gif);}
#green ul.link, #green ul.linksection {list-style:circle url(images/list_green.gif);}
#red ul.link, #red ul.linksection {list-style:circle url(images/list_red.gif);}
ul.columnlist li {margin-left:-15px;}
ul.link li {line-height:150%;}
ul.linksection li {margin-left:-20px; line-height:25%;}

/* Header */
.header	{		
	display:none;	
}

/* Navigation Positioning */
#navigation {
	display:none;	
}
#search {
	display:none;	
}

/* Line Breaks */
.linebreak1 {
	position:absolute;
	top:135px;
	left:10px;
	width:748px;
	height:10px;
	border-right:2px solid #000;
	border-left:2px solid #000;		
}
.linebreak2 {
	position:absolute;
	top:145px;
	left:172px;
	width:588px;
	height:11px;
	border-right:2px solid #000;		
}

/* Breadcrumb Section */
.breadcrumb {
	display:none;	
}

/* Center Content Column */
.centercontent {
	position:absolute;
	padding:7px;
	top:50px;
	left:52px;
	width:85%;
	text-align:left;
	border-left:2px solid #000;
	border-right:2px solid #000;
	border-bottom:2px solid #000;
}
.clear {clear:left;}
.centerimage {	
	float:right;
	width:100px;
	height:100px;
	margin-left:7px;
}
#blue .centerimage {border:1px dashed #369;}
#green .centerimage {border:1px dashed #066;}
#red .centerimage {border:1px dashed #900;}
.sectionimage {width:100px; height:100px;}
.left, .leftcolumn {
	margin-top:0px;
	float:left;
	width:270px;
}
.left {margin-right:7px; padding-right:7px;}
.leftcolumn {text-align:right;}
#blue .right {border-left:1px dotted #369;}
#green .right {border-left:1px dotted #066;}
#red .right {border-left:1px dotted #900;}
.right, .rightcolumn {
	float:left;
	margin-right:7px;
	margin-bottom:14px;
	margin-top:0px;
	padding-left:7px;
}
.rightcolumn, .leftscripts {text-align:right;}

.contentscripts {
	width:284px;
	height:100px;
	border:1px solid black;
}
.leftscripts, .rightscripts {
	float:left;
	width:141px;
	line-height:270%;
}
.middlescripts {
	float:left;
	width:2px;
}
.imagescripts {
	float:right;
	width:95px;
	height:100px;
	border:1px solid black;
	border-left:none;
}

/* Contact Form Image */
.homeimage {
	float:left;
	width:110px;
	height:260px;
	background-repeat: no-repeat;
	background-position: left;
}

/* Centre Column Side Images */
.sideimage {
	float:left;
	width:105px;
	height:105px;
	background-repeat: no-repeat;
	background-position: left;
}

/* Right Column Heading */
.rightheading {
	display:none;	
}

/* Right Content Column */
.rightcontent {
	display:none;	
}

/* Footer */
.footer {
	height:65px;
	text-align:center;
}
/* Banner Advertisement */
.advertisement {
	display:none;	
}
/* Copyright Information */
.copyright {
	float:left;		
	left:600px;
	width:100%;
	height:60px;
	border:2px solid #000;
}
/* Validation and Sponsor Links */
.sponsors {
	display:none;	
}