/* CSS Document */
/* Standard Screen Style Sheet for www.cagaran.co.uk */

/* Main page declarations */
html {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	}	/*Removing user style-sheets*/

body {
	background-color: #330033;	/*Dark purple outer edges*/
	color: #330033;	/*Dark purple body text*/
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.8em !important;
	height: 100%;
	width: 100%;	/*Gives page a height for subsequent elements to relate to (100%)*/
	}	/*Default colour scheme, font and dimensions*/

a:link {
	color: #431B38;	/*Mid purple link text - same colour as right menu text*/
	}

a:visited {
	color: #330033;	/*Visited link same colour as unvisited link*/
	}

a:hover, a:active {
	color: #703870;
	text-decoration: none;
	background-color: #C184FF;	/*Link text/background reverse of menu button text/background*/
	}

/*Class to hide print-only elements*/
.print {
	display: none;
	}

/*Overall page container*/
#container {
	width: 950px;
	margin-right: auto;
	margin-left: auto;	/*Auto margin property centres container*/
	margin-top: -8px;
	position:relative;
	background-color: #DFCEEA;	/*Main area pale lilac*/
	min-height: 700px;	/*Minimum height for page background*/
	height: 100%;	/*Makes container run to the page bottom*/
	}

/*Top of page - banner*/
#top-banner {
	background: #590063 url("../images/layout/banner-purple-950.jpg") no-repeat right top;	/*Bright purple banner*/
	height: 180px;
	width: 100%;
	background-repeat: no-repeat;
	margin-top: 0px;
	position: relative;
	}

#prefix {
	z-index: 15;	/*Higher z-indexes will display on top of lower ones*/
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 10px;
	padding-left: 10px;
	}

#prefix h1 {
	background-image: url("../images/layout/prefix.gif");
	background-repeat: no-repeat;
	height: 154px;
	width: 90px;
	margin-top: 0;
	}	/*Asigning prefix picture*/

#prefix h1 span {
	display: none;
	}	/*Allows text for search engines without showing it*/

/*Top of page - navigation*/
#top-nav {
	height: 180px;
	width: 950px;
	margin-top: 0px;
	z-index: 3;	/*Higher z-indexes will display on top of lower ones*/
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 16px !important;	/*Ensuring top navigation bar stays looking correct*/
	}

#top-nav ul {	/*Declaring unordered list*/
	margin: 0;
	padding: 0;
	list-style-type: none;	/*Removing bullets from the list*/
	position: absolute;
	right: -1px;
	bottom: 0;
	margin-bottom: 0;
	}

#top-nav li {
	background-color: #703870;	/*Button background mid purple*/
	white-space: nowrap;
	height: 28px;
	}	/*Creating navigation buttons using a background colour*/
	
#top-nav ul li {
	float: left;
	margin: 0 1px 1px 0;
	padding: 0;
	}	/*Aligning the list items for the menu; creating right/bottom margins*/

#top-nav ul a {
	margin: 0;
	padding: 0 10px;
	display: block;
	line-height: 28px;
	text-decoration: none;
	font-style: normal;
	color: #C184FF;	/*Button text mid lilac*/
	}	/*Creating the navigation text in the form of links*/

#top-nav ul a:hover {
	color: #480048;	/*Button roll-over text moderate-deep purple*/
	}	/*Declaring navigation link hover activity*/

#top-nav li a:hover {
	background-color: #3E4D5B;	/*Button roll-over background aquamarine-blue*/
	}	/*Declaring hover activity for background to navigation buttons*/

#fi_legs {
	height: 53px;
	width: 166px;
	background-image: url("../images/layout/fi_legs.gif");
	background-repeat: no-repeat;
	margin-top: 0px;
	z-index: 4;	/*Higher z-indexes will display on top of lower ones*/
	position: absolute;
	top: 125px;
	left: 463px;
	}

/*Left of Page - Navigation & Annas*/
#left-nav-holder {
	position: relative;
	float: left;
	top -1px;	/*Removes 1 pixel border to align menu top with bottom of top banner*/
	margin-right: 5px;
	}

#left-nav {
	background-color: #590063;	/*Button outlines bright purple*/
	margin:0;
	position:relative;
	float: left;
	top:-1px;
	z-index: 15;	/*Higher z-indexes will display on top of lower ones*/
	font-size: 16px !important;	/*Ensuring the left menu doesn't overflow the content area*/
	}
 
#left-nav ul {	/*Declaring unordered list style for left menu*/
	margin:0;
	padding:0;
	list-style:none;	/*Removes bullets*/
	white-space:nowrap;
	text-align:left;
	background-color: #590063;	/*Button background bright purple*/
	position:absolute;
	left:-9999px;
	}
	
#left-nav li {	/*Declaring style for invidual list items for left menu*/
	margin:0;
	padding:0;
	list-style:none;
	display:inline-block;
	display:inline;
	}
	
#left-nav ul.menu {
	position:absolute;
	left:0;
	top:0;
	}	/*Positioning class for menu links*/
 
#left-nav a {
	display:block;
	background-color: #703870;	/*Button background mid purple*/
	color: #C184FF;	/*Button text mid lilac*/
	line-height:22px;
	text-decoration:none;
	padding:0 35px 0 10px;
	margin: 1px;
	}	/*Creating links for left menu*/
	 
#left-nav li a:hover {
	background-color: #3E4D5B;	/*Button roll-over background aquamarine-blue*/
	color: #480048;	/*Button roll-over text moderate-deep purple*/
	}	/*Declaring hover properties for left menu*/

#left-nav ul li:hover > ul {
	visibility:visible;
	left:100%;
	margin-top:-24px;
	margin-left: -1px;
	}	/*Declaring properties for opening pull-out items*/
	
#left-nav li:hover > a {
	background-color: #3E4D5B;
	color: #480048;
	}
 
#left-nav a:hover ul,

#left-nav a:hover a:hover ul,

#left-nav a:hover a:hover a:hover ul {
	left:100%;
	visibility:visible;
	}

#left-nav a:hover a:hover a:hover a:hover ul {
	left:100%;
	visibility:visible;
	}
	
#left-nav a:hover ul ul,

#left-nav a:hover a:hover ul ul {
	left:-9999px;
	}

#left-nav a:hover a:hover a:hover ul ul {
	left:-9999px;
	}	/*The above declare the various levels for the pull-out menu*/

#left-nav li a.open {
	background: #703870 url("../images/navs/leftnav_open.gif") no-repeat right top;
	}	/*Declaring class for pull-out items*/
	
#left-nav li:hover > a.open {
	background: #703870 url("../images/navs/leftnav_open.gif") no-repeat right top;
	}
	
#left-nav li a.open:hover {
	background: #3E4D5B url("../images/navs/leftnav_open_hover.gif") no-repeat right top;
	}

#annas-left {
	background-image:   url("../images/layout/annas_footer.gif");
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 219px;
	height: 202px;
	position: relative;
	left: 0;
	z-index: 11;	/*Higher z-indexes will display on top of lower ones*/
	padding-top: 278px;	/*Pads the picture to below the left menu*/
	}	/*Positioning picture of Annas*/

/*Content Holders*/
#main {
	background-color: #DFCEEA;	/*Main area background pale lilac*/
	z-index: 1;	/*Higher z-indexes will display on top of lower ones*/
	}

#background {
	background-image: url(../images/layout/13_cats_final.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-bottom: 197px;
	margin-bottom: 15px;
	}

#content {
	top: 180px;
	left: 185px;	/*Positioning content area so that it sits clear of the menus*/
	margin: 0px;
	padding: 4px 7px 1px 7px;
	}

/*Content Items*/
#content h1 {	/*Main content area Header1*/
	margin: 0px;
	margin-bottom: 4px;
	background-image:  url("../images/layout/KatieDarnaBullet.gif");	/*Introduces a bullet of Katie & Darna cuddling*/
	background-repeat: no-repeat;
	display: block;
	line-height: 38px;	/*Ensures enought line height for the bullet to display*/
	padding-left: 65px;	/*Allows space for the bullet*/
	margin-left: 215px;	/*Positions start away from left menu*/
	}

#content .h1_small {	/*Main content area Small Header1*/
	margin: 0px;
	margin-bottom: 4px;
	background-image:  url("../images/layout/KatieDarnaBullet.gif");	/*Introduces a bullet of Katie & Darna cuddling*/
	background-repeat: no-repeat;
	display: block;
	font-size: 1.7em;
	line-height: 38px;	/*Ensures enought line height for the bullet to display*/
	padding-left: 65px;	/*Allows space for the bullet*/
	margin-left: 215px;	/*Positions start away from left menu*/
	}

#content .h2_report {
	margin-bottom: 0;
	padding-bottom: 0;
	}

#content .h3_report {
	margin: 0;
	padding: 0;
	}

#content p {	/*Main content area paragraph items*/
	margin: 5px 0px;
	padding: 0;
	}

#content .p_catname {  /*Main content area larger, bolder text for cat's names on intro pages*/
	font-size: 1.6em;
	font-weight: bold;  /*Appears bold but no extra emphasis from screen readers (Strong would)*/
}

#content .p1 {	/*Main content area bolder first paragraph class*/
	font-size: 1.1em;
	font-weight: bold;	/*Appears bold but no extra emphasis from screen readers (Strong would)*/
	}

#content .p_report {
	margin: 0;
	padding: 0;
	}

#content ul.teaser { /*Declaring unordered list for teasers*/
	width: 400px;
	margin: 0 0 0 215px;	/*Positioning teaser out from left menu*/
	padding: 0;
	list-style: none;
	background-color: #750075;	/*Teaser background pale bright purple*/
	}
	
#content ul.teaser li a {
	display: block;
	color: #EEAAFF;	/*Teaser text colour pale pink-lilac*/
	text-decoration: none;
	padding: 3px 10px 3px 5px;
	border-bottom: 1px solid #330033;	/*Teaser item bottom border deep purple*/
	border-top: 1px solid #CA79FF;	/*Teaser item top border medium lilac-pink*/
	font-size: 1.1em;
	}	/*Creating appearance of teaser items using links*/

#content ul.teaser li span {
	display: none
	}	/*Hiding teaser text when parent item is not active*/
		
#content ul.teaser li a:hover {
	background-color: #AA59BB;	/*Teaser open background pale purple*/
	color: #431B38;	/*Teaser open text dull moderate-deep purple*/
	}	/*Appearance of parent teaser items on hover*/

#content ul.teaser li a:hover span {
	display: block;
	padding: 10px;
	font-size: 0.8em;
	}	/*Displaying teaser text when parent item is hovered over*/

#content ul.no_bullet {
	list-style: none;	/*Creating list with no bullets*/
	}

.pic {	/*Declaring picture element*/
	top: 3px;
	background-color: #590063;	/*Picture frames bright purple*/
	padding: 4px;
	font: 0.6em;
	text-align:center;	/*Aligns caption with centre of image*/
	color: #DFCEEA	/*Picture caption text pale lilac*/
	}
	
.pic img {	/*Positioning image within picture element*/
	vertical-align:middle;
	margin-bottom: 3px;
	} 
	
.left {		/*Creating left-alignment for pictures*/
	margin: 5px 10px 5px 0;
	float:left;
	}
	
.right {	/*Creating right-alignment for pictures*/
	margin: 5px 0 5px 10px;
	float:right;
	}

/*Right Navigation*/
#right-nav {
	margin: -4px -7px 5px 5px;	/*Creating space below and to left of menu and aligning top with banner bottom*/
	padding: 0;
	padding: 3px 0 5px 0;
	position:relative;
	float: right;	/*Ensures that the text wraps around the menu*/
	border-left: 1px solid #590063;
	border-bottom: 1px solid #590063;	/*Right menu borders bright purple*/
	}
 
#right-nav ul {	/*Declaring unordered list for right-menu*/
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#right-nav a {
	color: #431B38;	/*Right menu text dull moderate-deep purple*/
	background-color: transparent;
	text-decoration: underline;
	text-align: right;
	display: block;
	padding:1px 5px 1px 10px;
	margin: 1px;
	}	/*Creating appearance for right-menu items*/
	 
#right-nav a:hover {
	color: #480048;	/*Right menu roll-over text moderate-deep purple*/
	background-color: #3E4D5B;	/*Right menu roll-over background aquamarine-blue*/
	}	/*Declaring hover behaviour of right-menu items*/

#right-nav a:visited {
	color: #3E4D5B;	/*Right menu visited link aquamarine-blue*/
	background-color: transparent;
	}

#right-nav li a#current {
	color: #480048;	/*Right menu current page text same colour as hover*/
	background-color: #C184FF;	/*Right menu current page background mid lilac*/
	}	/*Declaring appearance for link relating to current page*/

/*Footer*/
#footer {
	width: 950px;
	height: 20px;
	position: fixed;	/*Tieing footer to the bottom of the screen regardless of scrolling*/
	bottom: 0;
	}

#footer-image-spacer {
	position: relative;
	float: right;
	margin: 4px 4px 0 4px;
	}

#footer-right {
	background-image:   url("../images/layout/footer.gif");
	background-repeat: no-repeat;
	background-position: right bottom;
	width: 467px;
	height: 240px;
	position: absolute;
	bottom: -4px;	/*Moving image down to bring ears closer to page bottom*/
	right: 0;
	z-index: 10;	/*Higher z-indexes will display on top of lower ones*/
	}

#bottom-stripe {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 15px;
	background-color: #590063;	/*Bottom stripe background bright purple*/
	z-index: 8;
	}

#footer-left {
	position: absolute;
	left:0px;
	bottom: -1px;
	z-index: 9;
	background-color: #DFCEEA;
	}

#utilities {
	font-size: 12px !important;	/*Ensuring that the utilities fit in the footer bar*/
	position: absolute;
	bottom: 2px;
	left: 200px;
	z-index: 9;
	}

#utilities a {
	color: #DFCEEA;	/*Bottom stripe text pale lilac*/
	background-color: transparent;
	text-decoration: underline;
	line-height: 12px;
	display: block;
	padding: 0 5px;
	}

#utilities a:hover {
	color: #480048;	/*Bottom stripe roll-over text moderate-deep purple*/
	background-color: #3E4D5B;	/*Bottom stripe roll-over background aquamarine-blue*/
	}

#sitemap {
	position: relative;
	float: left;
	}
	
#terms {
	position: relative;
	float: left;
	}

#copyright {
	font-size: 12px !important;	/*Ensuring that the copyright notice fits in the footer bar*/
	color: #DFCEEA;	/*Bottom stripe text colour pale lilac*/
	position: absolute;
	bottom: -12px;	/*Moving down so that text sits nicely on bottom stripe*/
	right: 0px;
	width: 440px;
	text-align: center;	/*Placing copyright declaration centred beneath footer*/
	z-index: 9;	/*Higher z-indexes will display on top of lower ones*/
	}