/* MAKE THE OUTER LINKS WHITE WITH UNDERLINES */

a:link {
	color: #FFFFFF;
	text-decoration: underline;
}
a:visited {
	color: #FFFFFF;
	text-decoration: underline;
}
a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
a:active {
	color: #FFFFFF;
	text-decoration: underline;
}

/* OUTER LINKS END */







/* INDEX PAGES
================================================================================================================================================*/

#homepage {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	background-color: #DCE4D4;
}
#header {
	background: #706f2d;	height: 240px;
}

/* left column starts here */
#centre {
	float: left;
	text-align: left;
	padding: 10px;
	width: 460px;
	color: #706f2d;
	font-weight: normal;
}
#centre h1 {
	font-size: 200%;
	font-weight: normal;
}
#centre h2 {
	font-size: 125%;
	font-weight: normal;
}
#centre p {
	font-size: 80%;
}

/* right column starts here */
#rightcol {
	background: url(../images/the_green_balls.jpg);
	float: right;
	width: 268px;
	height: 350px;
}

/* Editable sections for navigational styles */
#homenav ul {
	background: #706F2D url(../images/nav_buttons/blockdefault.gif) repeat-x center center
}
#homenav li a:link {
	text-decoration: none;
}
#homenav li a:visited {
	text-decoration: none;
}
#homenav li a:hover, #homenav li .current {
	text-decoration: none;
	color: #FFFFFF;
	background:  #9B9A43 url(../images/nav_buttons/blockactive.gif) repeat-x center center; 
}













/* WEBSITE PAGES
================================================================================================================================================*/

#website {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	background: #998699;
}
#webcontainer {
}
#webheader {
	background: #333333 url(../images/headings/website/php_scripting.jpg);
	height: 240px;
}

/* left column starts here */
#webcentre {
	float: left;
	padding: 10px;
	width: 235px;
	color: #4C3244;
}

/* left column links */
#webcentre a:link,
#webcentre a:visited,
#webcentre a:hover,
#webcentre a:active 
{
	text-decoration: none;
	font-weight: bold;
	color: #4C3244;
}
#webcentre h1 {
	font-size: 200%;
	font-weight: normal;
}
#webcentre h2 {
	font-size: 135%;
	font-weight: normal;
}
#webcentre p {
	font-size: 85%;
	padding: 8px 0px 0px;
}

/* right column starts here */

#webrightcol {
	float: right;
	width: 500px;
	color: #4C3244;
	font-size: 85%;
	text-align: right;
}

#webrightcol h3 {
	font-size: 90%;
}
#webrightcol p {
	font-size: 90%;
	padding: 0px 10px 0px 0px;
}


/* right column links */

#website #webrightcol a:link {
	text-decoration: none;
	font-weight: bold;
	color: #4C3244;
}
#website #webrightcol a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #4C3244;
}
#website #webrightcol a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #4C3244;
}
#website #webrightcol a:active {
	text-decoration: none;
	font-weight: bold;
	color: #4C3244;
}

/* background colours to listings */

.tablelayout {
	background: #F7F9E4;
	width: 500px;
}
.tablecolor {
	background: #E6E4D8;
}
.webimage {
	text-align: center;
	vertical-align: middle;
	padding: 5px;
	width: 155px;
}
.webtext {
	text-align: left;
	padding: 5px;
	width: 325px;
	vertical-align: top;
}

/* CSS for the box ends here */


/* Editable sections for navigational styles */
#webnav ul {
	background: #4C3244 url(../images/nav_buttons/webDefault.gif) repeat-x center center;
}
#webnav li a:link {
	text-decoration: none;
}
#webnav li a:visited {
	text-decoration: none;
}
#webnav  li a:hover, #webnav  li .current {
	text-decoration: none;
	color: #FFFFFF;
	background: #845F79 url(../images/nav_buttons/webActive.gif) repeat-x center center;
}



/* GRAPHIC HOLDING
================================================================================================================================================*/
#holdingsite {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0;
}
#holdingcontainer {
	background: #FFFFFF;
}
#holdingheader {
	background: #0878A6 url(../images/headings/graphics/bluedancers.jpg);
	height: 240px;
}

/* main div */

#holdingmain {
	text-align: left;
	padding: 10px;
	background-color: #FFFFFF;
	color: #0878A6;
}
#holdingmain h1 {
	font-size: 200%;
	font-weight: normal;
}
#holdingmain h2 {
	font-size: 110%;
	font-weight: normal;
}
#holdingmain h3 {
	font-size: 85%;
}
#holdingmain p {
	font-size: 85%;
	margin-top: 0; 
}

#holdingmain a:link,
#holdingmain a:visited,
#holdingmain a:hover,
#holdingmain a:active {
	text-decoration: underline;
	color: #0878A6;
	font-weight: bold;
}

/* search panel */

#holdingsearch {
	padding: 0px 5px;
	background-color: #DAF3F8;
	color: #001041;
}




/* Editable sections for navigational styles */
#holnav ul {
	background: #001041 url(../images/nav_buttons/graphicDefault.gif) repeat-x center center;;
}
#holnav li a:link {
	text-decoration: none;
}
#holnav li a:visited {
	text-decoration: none;
}
#holnav li a:hover, #holnav li .current {
	text-decoration: none;
	color: #FFFFFF;
	background: #0878A6 url(../images/nav_buttons/graphicActive.gif) repeat-x center center;
}




/* GRAPHIC PAGES
================================================================================================================================================*/

#graphicsite {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0;
}

#graphiccontainer {
	background: #FFFFFF;
}

#graphicheader {
	background: #0878A6 url(../images/headings/graphics/bluedancers.jpg);
	height: 240px;
}

/* left column starts here */

#graphiccentrecontainer {
	background: url(../images/miscImages/graphicbackground.gif) repeat-y;
}

#graphiccentre {
	float: left;
	padding: 0px 10px 10px;
	width: 255px;
	text-align: left;
	background-color: #B5E6F4;
	color: #0878A6;
}

#graphiccentre h1 {
	font-size: 200%;
	font-weight: normal;
}

#graphiccentre h2 {
	font-size: 125%;
	font-weight: normal;
}

#graphiccentre p {
	font-size: 85%;
}
#graphiccontainer #graphiccentre a:link,
#graphiccontainer #graphiccentre a:visited,
#graphiccontainer #graphiccentre a:hover,
#graphiccontainer #graphiccentre a:active {
	text-decoration: underline;
	color: #0878A6;
	font-weight: bold;
}

/* right column starts here */

#graphicrightcol {
	float: right;
	width: 475px;
	color: #000000;
	margin-top: 10px;
}
#graphicrightcol h2 {
	font-size: 85%;
	color: #001041;
}

#graphicrightcol p {
	font-size: 80%;
	color: #0878A6;
}

/* right column links */

#graphiccontainer #graphicrightcol a:link,
#graphiccontainer #graphicrightcol a:visited,
#graphiccontainer #graphicrightcol a:hover,
#graphiccontainer #graphicrightcol a:active {
	text-decoration: underline;
	color: #0878A6;
	font-weight: bold;
}

/* searchbox class */

.SBtext {
	height: 20px;
	width: 160px;
	color: #000000;
}
.SBtextArea {
	height: 65px;
	width: 160px;
}
.searchTable {
	font-size: 65%;
	color: #0878A6;
	padding: 10px 10px 10px 0px;
	margin: 0px;
	font-weight: bold;
}


/* results page layout class */

.resultTable {
	border-bottom: 5px solid #FFFFFF;
	background: #DAF3F8;
	width: 100%;
}

.resultText {
	vertical-align: top;
	padding: 0px 10px 5px 0px;
}
.thumbimage {
	text-align: center;
	vertical-align: middle;
	padding: 5px;
	width: 95px;
}
.graphictablecolor{
	background: #B5E6F4;
}

/* Editable sections for navigational styles */
#desnav ul {
	background: #001041 url(../images/nav_buttons/graphicDefault.gif) repeat-x center center;
}
#desnav li a:link {
	text-decoration: none;
}
#desnav li a:visited {
	text-decoration: none;
}
#desnav li a:hover, #desnav li .current {
	text-decoration: none;
	color: #FFFFFF;
	background: #0878A6 url(../images/nav_buttons/graphicActive.gif) repeat-x center center; 
}


#graphicrightcol #TotalRecords {
	margin-bottom: 5px;
}

/* Previous next results links */
#graphicrightcol #TotalRecords a:link,
#graphicrightcol #TotalRecords a:visited {
	text-decoration: none;
	color: #DAF3F8;
	background: #001041;
	margin: 0px;
	padding: 5px 8px;
	font-size: 70%;
	height: 20px;
}

#graphicrightcol #TotalRecords a:hover,
#graphicrightcol #TotalRecords a:active {
	text-decoration: none;
	color: #001041;
	background: #DAF3F8;
	margin: 0px;
	padding: 5px 8px;
	font-size: 70%;
	height: 20px;
}







/* LOGIN SECTION STARTS HERE
================================================================================================================================================*/

/* the outer container */

#LogInContainer {
	background: #FFFFFF;
	text-align: center;
	padding-bottom: 20px;
	color: #0878A6;
	margin: 0px;
	padding-top: 20px;
}

#LogInContainer h1 {
	font-size: 145%;
}

#LogInContainer h2 {
	font-size: 115%;
}

#LogInContainer p {
	font-size: 80%;
	padding: 0px 15px;
}

/* the outer Container LINKS */

#LogInContainer a:link,
#LogInContainer a:visited,
#LogInContainer a:active {
	text-decoration: underline;
	color: #0878A6;
	font-weight: bold;
}
#LogInContainer a:hover {
	text-decoration: underline;
	color: #0878A6;
	font-weight: bold;
}


/* the inner login panel */

#LogInPanel {
	margin: 0 auto;
	padding-bottom: 15px;
}

.LogInTable {
	margin: 0 auto 10px;
	width: 350px;
	text-align: left;
	font: 80% Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #0878A6;
	padding: 5px;
}















/* DETAIL PAGES
================================================================================================================================================*/
#detailsite {
	font: 100%/100% Verdana, Arial, Helvetica, sans-serif;
	background: #333333;
	color: #0878A6;
	margin: 0;
}

#detailcontainer {
	background: #FFFFFF;
}

/* the header links */

#detailheader {
	height: 200px;
	color: #0878A6;
	background: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 30px 0 0 15px;
}

#detailheader h1 {
	font-size: 335%;
	font-weight: normal;
}

#detailheader h2 {
	font-size: 135%;
	font-weight: normal;
}

#detailheader h3 {
	font-size: 85%;
	font-weight: normal;
}

/* the header links */

#detailheader a:link,
#detailheader a:visited,
#detailheader a:hover,
#detailheader a:active {
	text-decoration: underline;
	color: #0878A6;
}

/* left column starts here */
#detailcentre {
	float: left;
	padding: 0 0 15px;
	width: 430px;
	text-align: left;
}
#detailcentre h1 {
	font-size: 200%;
	font-weight: normal;
}
#detailcentre h2 {
	font-size: 125%;
	font-weight: normal;
}
#detailcentre p {
	font-size: 85%;
}

/* left column links */

#detailcentre a:link {
	text-decoration: none;
	font-weight: bold;
	color: #0878A6;
}
#detailcentre a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #0878A6;
}
#detailcentre a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #0878A6;
}
#detailcentre a:active {
	text-decoration: none;
	font-weight: bold;
	color: #0878A6;
}


/* right column starts here */

#detailrightcol {
	float: right;
	width: 305px;
	text-align: right;
	padding: 15px 0px 10px;
}















/* MERCHANDISE PAGES
================================================================================================================================================*/

#mercsite {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	background: #A2B6C1;
}

#mercheader {
	background: #DEC8FF url(../images/headings/merchandise/cat_pink_swirl.jpg);
	height: 240px;
}
#merccontainer {
	background: #FFFFFF;
}

/* left column starts here */

#merccentre {
	float: left;
	width: 235px;
	background: #96B8BA;
	padding: 10px;
	color: #FFFFFF;
}

#merccentre h1 {
	font-size: 200%;
	font-weight: normal;
}

#merccentre h2 {
	font-size: 125%;
	font-weight: normal;
}

#merccentre p {
	font-size: 85%;
}


/* right column starts here */

#mercrightcol {
	float: right;
	width: 485px;
	color: #000000;
	text-align: left;
}

#mercrightcol h1 {
	font-size: 175%;
	font-weight: normal;
}

#mercrightcol h2 {
	font-size: 100%;
	font-weight: normal;
}

#mercrightcol p {
	font-size: 75%;
}

.table {
	border: 2px solid #333333;
	margin: 0px;
	padding: 0px;
}
.mercimage {
	text-align: center;
	vertical-align: middle;
	padding: 5px;
	width: 155px;
}

/* Editable sections for navigational styles */
#mercnav ul {
	background: #1F2F3C url(../images/nav_buttons/mercdefault.gif) repeat-x center center;
}
#mercnav li a:link {
	text-decoration: none;
}
#mercnav li a:visited {
	text-decoration: none;
}
#mercnav li a:hover, #mercnav li .current {
	text-decoration: none;
	color: #FFFFFF;
	background: #426480 url(../images/nav_buttons/mercActive.gif) repeat-x center center;
}













/* EXPERIMENTAL PAGES
================================================================================================================================================*/

#expsite {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	background-color: #FF6600;
}
#expheader {
	background: #B16C1D url(../images/headings/experiment/orange_truck.jpg) no-repeat;	
	height: 240px;
}
#expcontainer {
	background: #FFFFFF;
}

#centrecontainer {
	background: url(../images/miscImages/experibackground.gif) repeat-y;
}

/* left column starts here */
#expcentre {
	float: left;
	width: 235px;
	background: #4B5663;
	padding: 10px;
	color: #FFFFFF;
}
#expcentre h1 {
	font-size: 200%;
	font-weight: normal;
}
#expcentre h2 {
	font-size: 125%;
	font-weight: normal;
}
#expcentre p {
	font-size: 85%;
}


/* right column starts here */
#exprightcol {
	float: right;
	width: 485px;
	color: #4B5663;
	text-align: left;
	margin-bottom: 15px;
}
#exprightcol h1 {
	font-size: 125%;
	font-weight: normal;
}
#exprightcol h2 {
	font-size: 125%;
	font-weight: normal;
}
#exprightcol p {
	font-size: 75%;
}

/* Editable sections for navigational styles */
#expcnav ul {
	background: #DF5901 url(../images/nav_buttons/expDefault.gif) repeat-x center center;
}
#expcnav li a:link {
	text-decoration: none;
}
#expcnav li a:visited {
	text-decoration: none;
}
#expcnav li a:hover, #expcnav li .current {
	text-decoration: none;
	color: #FFFFFF;
	background: #FF6600 url(../images/nav_buttons/expActive.gif) repeat-x center center;
}





/* LOG-OUT PAGE 
================================================================================================================================================*/
#logsite {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	background: #333333;
}

#LogInCentre h1 {
	font-size: 125%;	
}
#LogInCentre a:link,
#LogInCentre a:visited,
#LogInCentre a:active,
#LogInCentre a:hover  {
	text-decoration: underline;
	color: #000000;
	font-size: 85%;	
}


/* Editable sections for navigational styles */
#lognav ul {
	background: #000000;
}
#lognav li a:link {
	text-decoration: none;
}
#lognav li a:visited {
	text-decoration: none;
}
#lognav li a:hover {
	text-decoration: none;
	color: #000000;
	background: #FFFF00; 
}
#lognav li .current {
	text-decoration: none;
	color: #000000;
	background: #FFFF00;
}




/* FOOTERS
================================================================================================================================================*/

#footind {
	padding: 5px 0px 3px 10px;
	font-size: 70%;
	color: #FFFFFF;
	background: #706F2D;
}
#footweb {
	padding: 5px 0px 3px 10px;
	font-size: 70%;
	color: #FFFFFF;
	background-color: #4C3244;
}
#footgraphic {
	padding: 5px 0px 3px 10px;
	font-size: 70%;
	color: #FFFFFF;
	background: #001041;
}
#footdetail {
	padding: 5px 0px 3px 10px;
	font-size: 70%;
	color: #FFFFFF;
	background: #001041;
}
#footmerc {
	padding: 5px 0px 3px 10px;
	font-size: 70%;
	color: #FFFFFF;
	background: #314C60;
}
#footexperi {
	padding: 5px 0px 3px 10px;
	font-size: 70%;
	color: #FFFFFF;
	background-color: #C95000;
}
#footlogout {
	padding: 5px 0px 3px 10px;
	font-size: 70%;
	color: #FFFFFF;
	background: #000000;
}






/* CSS STYLESHEETS
================================================================================================================================================*/

#cssindex {
	padding: 6px 10px 0px;
	font-size: 70%;
	color: #FFFFFF;
	background: #706F2D;
	height: 18px;
	font-weight: bold;
}
#cssweb {
	padding: 6px 10px 0px;
	font-size: 70%;
	color: #FFFFFF;
	background: #4C3244;
	height: 18px;
	font-weight: bold;
}
#cssholding {
	padding: 6px 10px 0px;
	font-size: 70%;
	color: #FFFFFF;
	background: #0878A6;
	height: 18px;
	font-weight: bold;
}
#cssgraphic {
	padding: 6px 10px 0px;
	font-size: 70%;
	color: #FFFFFF;
	background: #0878A6;
	height: 18px;
	font-weight: bold;
}
#cssdetail {
	padding: 6px 10px 0px;
	font-size: 70%;
	color: #FFFFFF;
	background: #0878A6;
	height: 18px;
	font-weight: bold;
}
#cssmerc {
	padding: 6px 10px 0px;
	font-size: 70%;
	color: #FFFFFF;
	background: #314C60;
	height: 18px;
	font-weight: bold;
}
#cssexperi {
	padding: 6px 10px 0px;
	font-size: 70%;
	color: #FFFFFF;
	background-color: #C95000;
	height: 18px;
	font-weight: bold;
}
#csslogout {
	padding: 6px 10px 0px;
	font-size: 70%;
	color: #FFFFFF;
	background: #000000;
	height: 18px;
	font-weight: bold;
}
#csstext {
	width: 625px;
	float: left;
}
#logout {
	float: right;
}








/* GENERIC CLASSES
================================================================================================================================================*/

.clearfloat { 
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}














/* CSS NAVIGATION MENU
================================================================================================================================================*/
ul {
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	font: bold 85% Verdana, Arial, Helvetica, sans-serif;
}
li a {
	float: right;
	padding: 9px 11px;
	border-left: 1px solid white;
}
li {
	display: inline;
}















/* CSS for the box starts here
================================================================================================================================================*/
/* Default styling. Used when JavaScript is unsupported */
.cbb {
	padding:0 10px;
	margin:1em 0;
	border:1px solid #666;
	}
.cbb h1 {
	margin:0 -10px;
	padding:0.3em 10px;
	
	/*  font:bold 1.2em/1 Arial, Helvetica, sans-serif; */
	}
/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

/* Two of the boxes are floated just for this demo. Adjust to your needs. */
.cb {
	width: 804px;
	margin: 0 auto;
	}
.two {
	width:45%;
	float:left;
	}
.three {
	width:45%;
	float:right;
	}
/* Rules for the top corners and border */
.bt {
	background:url(../images/layout_images/box.png) no-repeat 100% 0;
	margin:0 0 0 18px;
	height:17px;
	}
.bt div {
	height:17px;
	width:18px;
	position:relative;
	left:-18px;
	background:url(../images/layout_images/box.png) no-repeat 0 0;
	}

/* Rules for the bottom corners and border */
.bb {
	background:url(../images/layout_images/box.png) no-repeat 100% 100%;
	margin:0 0 0 12px;
	height:14px;
	}
.bb div {
	height:14px;
	width:12px;
	position:relative;
	left:-12px;
	background:url(../images/layout_images/box.png) no-repeat 0 100%;
	}

/* Insert the left border */
.i1 {
	padding:0 0 0 12px;
	background:url(../images/layout_images/borders.png) repeat-y 0 0;
	}
/* Insert the right border */
.i2 {
	padding:0 12px 0 0;
	background:url(../images/layout_images/borders.png) repeat-y 100% 0;
	}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	background:#FFFFFF;
	border: 1px solid #fff;
	border-width: 1px 0;
	padding: 0 10px 10px 10px;
	}