/*-----------------------------------------------------------------------------
 THE ETHICS GUIDE BOOK WEBSITE

version:   1.0
THE WOW AGENCY www.thewowagency.com
author:    Mawada Abushwerb
email:     info@mawada.co.uk
date: 10 OCT 2009
Modified: 17 Dec

-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/


/* Remove padding and margin */
* {}

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {

 margin: 0 0;
}
/* Remove border around linked images */
img {
	border: 0;

}

/* Class for clearing floats */
.clear {
	clear:both;

}
.left {
float:left
}
.right {
float:right}


/* =Layout
-----------------------------------------------------------------------------*/
body {
font-family:Verdana,Arial, Helvetica, sans-serif;
	margin: 15px;
	background-color: #eee;
	font-size: 83%;
	color: #333; 
}

a {
	color: #33C;
}


#wrapper{
    margin: 0 auto;
	width: 1000px;
	max-width:1200px;
	min-width: 800px;
	border: #CCCCCC 1px solid;
	background-color: #fff;
	}

#header{
	height:100px;
}

#headershadow{
	height: 12px;
	background-image: url("images/top_shadow.png");
	background-repeat: repeat-x;
}

#maincontent{
background: url("images/border.png") repeat-y 80% 0;
}

#content{
	width:100%;
	float:left;
}
  /* =Page Content Format-----------------------------------------------------------------------------*/
#pageContent {

	float: left;
	width: 580px;
	padding: 0 10px 10px 20px;
 }

#pageContent p {
	font-size:100%;
	padding-top: 1em;
}

#pageContent li {
	padding-top: 0.5em;
}

.msg_head {
	margin-top: 1em;
	padding: 0.2em;
	background-color: #CCCCCC;
}

.msg_head:after {
display: inline;
content: " (click)";
}

.msg_body {
	border: 1px solid #CCCCCC;
	padding: 0.5em;
}


/* ------------- Pagination -----------	*/

#pagination             {
	clear:both;
	margin-left: 40%;
}
#pagination li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination a           { border:solid 1px #DDDDDD; margin-right:2px; }
#pagination .previous-off,
#pagination .next-off   {
	color:#CCCCCC;
	display:block;
	float:left;
	font-weight:bold;
	padding:3px 4px;
}
#pagination .next a,
#pagination .previous a { font-weight:bold; border:solid 1px #FFFFFF; }
#pagination .active     {
	color:#000000;
	font-weight:bold;
	display:block;
	float:left;
	padding:4px 6px;
}
#pagination a:link,
#pagination a:visited   {
	color:#999999;
	display:block;
	float:left;
	padding:3px 6px;
	text-decoration:none;
}
#pagination a:hover     { border:solid 1px #666666; }



.searchResult  {
	font-size:11px;
	line-height: 150%;
}
.searchResult p  {font-size:11px;
margin-left: 10px;}

.searchResult a {font-size:12px;
                font-weight:bold;
                text-decoration:underline;
				color:#07399c;
				margin-top:10px;
}
.searchResult a:visited   {
	color:#999999;
}

.searchResult a:hover   {
	color:#0000FF;
	text-decoration:none;

}

















/* ----------------------------------------------------------------------------*/
#sidebar{
	float:right;
	width: 200px;
}

#footer{border-top: #cccccc 1px solid;}



/* =Typography
-----------------------------------------------------------------------------*/
h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#FFFFFF;
	padding: 10px;

}


/* =Links
-----------------------------------------------------------------------------*/
#skip {display:none;}


/* = Coloured Banner in all pages
-----------------------------------------------------------------------------*/
#colouredbanner{
	background-repeat: repeat-x;
	min-height: 50px;
}
#colouredshadow{
	background-repeat: repeat-x;
	width: 100%;
	clear: both;
	margin-bottom: 5px;
 }

/* = Coloured Banner Classes for each colour
-----------------------------------------------------------------------------*/
.blue{
background-image:url("images/1.png")}
.blueshadow{background-image:url("images/shadow_01.png")}

.green{
background-image:url("images/2.png")}
.greenshadow{background-image:url("images/shadow_02.png")}

.lime{
background-image:url("images/3.png")}
.limeshadow{background-image:url("images/shadow_03.png")}

.orangelight{
background-image:url("images/4.png")}
.orangelightshadow{background-image:url("images/shadow_04.png")}


.orangedark{
background-image:url("images/5.png")}
.orangedarkshadow{background-image:url("images/shadow_05.png")}

.red{
background-image:url("images/6.png")}
.redshadow{background-image:url("images/shadow_06.png")}

.pink{
background-image:url("images/7.png")}
.pinkshadow{background-image:url("images/shadow_07.png")}

.maroon{
background-image:url("images/8.png")}
.maroonshadow{background-image:url("images/shadow_08.png")}

.purple{
background-image:url("images/9.png")}
.purpleshadow{background-image:url("images/shadow_09.png")}


.sky{
background-image:url("images/10.png")}
.skyshadow{background-image:url("images/shadow_10.png")}

.turquoise{background:url("images/11.png")}
.turquoiseshadow{background:url("images/shadow_11.png")}

.sage{background:url("images/12.png")}
.sageshadow{background:url("images/shadow_12.png")}

.brown{background:url("images/13.png")}
.brownshadow{background:url("images/shadow_13.png")}

.chocolate{background:url("images/14.png")}
.chocolateshadow{background:url("images/shadow_14.png") }





/* =Breadcrumbs
-----------------------------------------------------------------------------*/
#breadcrumbs{
	font-size:12px;
	color:#000000;
	padding:10px;
	float:left;
}

#breadcrumbs a{
text-decoration: none;
color: #000000
}
#breadcrumbs a:hover, #breadcrumbs a:active {
text-decoration:underline;
color:#333333;
}

/* =Search Box
-----------------------------------------------------------------------------*/
#searchbox{
	float:right;
	font-size:13px;
	font-weight:bold;
	color: #666666;
	padding:10px;
}


/* =Main Content Home page
-----------------------------------------------------------------------------*/


/* =Right Side Bar Content
-----------------------------------------------------------------------------*/
.graybanner{
	padding:6px;
	background-image:url("images/sidebar_H_03.png");
	text-align: center;
}

h2{ font-size:14px;

}

#sidenav, #ethicpage, #externallinks {
	margin-bottom: 3px;
}

/* =Right Side Bar Content (Top Box ) SideNav
-----------------------------------------------------------------------------*/




#sidenav ul {
	list-style-type: disc;
	padding: 15px 30px;
	font-size: 13px;
	font-weight: bold;

}
#sidenav li a{
	text-decoration: none;

}

#sidenav li a:hover, #sidenav li a:active{
	text-decoration: underline;

}

.bluecolour {
	color:#07399c;
}


.greencolour {color:#20803a;
}

.limecolour {color:#a0a82d;/*#bcc44a*/
}

.orangelightcolour {color:#da9031;/*#ecab57*/
}


.orangedarkcolour {color:#ec6e22;
}

.redcolour {color:#cc3033;
}

.pinkcolour {color:#b81856;
}

.marooncolour {color:#7f084c;
}

.purplecolour {color:#662875;
}


.skycolour {color:#006b91;
}

.turquoisecolour{color:#009999;
}

.sagecolour{color:#265554;
}

.browncolour{color:#643c14;
}


.chocolatecolour{color:#31250d;
}




/* =Right Side Bar Content (Middle Box ) #ethicpage
-----------------------------------------------------------------------------*/
#ethicpage {
	text-align:center;
}

#ethicpage h2 {
	font-size:11px;
}
#ethicpage h2.graybanner {
	font-size:14px;
}
#ethicpage p {
	padding: 15px;
	font-size:13px;
	text-align:center;
}

#ethicpage img{
	border:#006600;
	margin: 0 20px;
	padding-top: 5px;
}



/* =Right Side Bar Content (last Box ) #externallinks
-----------------------------------------------------------------------------*/
#externallinks ul {
	padding: 15px;
	font-size: 13px;
	list-style: none;
}
#externallinks li a{

	text-decoration: none;
	color:#000000
}

#externallinks li a:hover, #externallinks li a:active{
	text-decoration: underline;
	color:#666666;

}



/* =Footer
-----------------------------------------------------------------------------*/
#footer{
	font-size:12px;
	color:#999999;
	padding: 10px;
	background-color: #FFFFFF;
}

#footer a{
	text-decoration:none;
	color:#999999;
}
#footer a:hover, #footer a:active {
text-decoration:underline;
color:#333333;
}
#footer img{

margin-left:20px;}
.logo{
margin: 0 auto;
float:right}
.footerlinks{
float:left;}


/* =Navigation menu
-----------------------------------------------------------------------------*/
.sidebarmenu {
	float: left;
	width: 180px;
}
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #fff;
}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
/*background-color: #012D58; background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{

}

.sidebarmenu ul li a:hover{
color:#FFFFFF;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 200px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}




/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */



.blueB a:hover{background:url("images/1.png")}

.greenB a:hover{background-image:url("images/2.png")}

.limeB a:hover{background-image:url("images/3.png")}

.orangelightB a:hover{background-image:url("images/4.png")}

.orangedarkB a:hover{background-image:url("images/5.png")}

.redB a:hover{background-image:url("images/6.png")}

.pinkB a:hover{background-image:url("images/7.png")}

.maroonB a:hover{background-image:url("images/8.png")}

.purpleB a:hover{background-image:url("images/9.png")}

.skyB a:hover{background-image:url("images/10.png")}

.turquoiseB a:hover{background-image:url("images/11.png")}

.sageB a:hover{background-image:url("images/12.png")}

.brownB a:hover{background-image:url("images/13.png")}

.chocolateB a:hover{background-image:url("images/14.png")}




.blueB{background:url("images/menu_01.png") right}
.blueBS{background:url("images/menu_01.png") left}

.greenB {background:url("images/menu_02.png") right}
.greenBS {background:url("images/menu_02.png") left}

.limeB {background:url("images/menu_03.png") right}
.limeBS {background:url("images/menu_03.png") left}


.orangelightB{background:url("images/menu_04.png") right}
.orangelightBS{background:url("images/menu_04.png") left}

.orangedarkB{background:url("images/menu_05.png") right}
.orangedarkBS{background:url("images/menu_05.png") left}

.redB{background:url("images/menu_06.png") right}
.redBS{background:url("images/menu_06.png") left}

.pinkB{background:url("images/menu_07.png") right}
.pinkBS{background:url("images/menu_07.png") left}



.maroonB{background:url("images/menu_08.png") right}
.maroonBS{background:url("images/menu_08.png") left}

.purpleB{background:url("images/menu_09.png") right}
.purpleBS{background:url("images/menu_09.png") left}

.skyB{background:url("images/menu_10.png") right}
.skyBS{background:url("images/menu_10.png") left}

.turquoiseB{background:url("images/menu_11.png") right}
.turquoiseBS{background:url("images/menu_11.png") left}

.sageB{background:url("images/menu_12.png") right}
.sageBS{background:url("images/menu_12.png") left}

.brownB{background:url("images/menu_13.png") right}
.brownBS{background:url("images/menu_13.png") left}

.chocolateB{background:url("images/menu_14.png") right}
.chocolateBS{background:url("images/menu_14.png") left}



/* =Wheel of ethics
-----------------------------------------------------------------------------*/
#ethicwheel {
	background-image:url("images/wheel-bg.png");
	height:530px;
	background-repeat: no-repeat;


}

#principles{
	float:left;
	padding-top: 75px;
	padding-left: 7px;
}

#circle{
	width:100%;
	height: 320px;
	overflow: auto;
	padding: 7px;
}

#circle_wrapper {
	width: 320px;
	float:left;
	height: 380px;
	margin-top: 100px;
}

#start_again {
	width:100%;
	text-align: center;
	padding-top: 24px;
	padding-left: 10px;
	}
	#start_again a {
		font-weight: bold;
		text-decoration: none;
		color: #36F;
	}

#factors{
	width:338px;
	float:right;
	margin-top: 60px;
	padding-right: 7px;
}

/*principles buttons-------*/
#prin_one {
	display:block;
	width:228px;
	height:44px;
	background:url("images/l1.png") no-repeat;
	margin-bottom:10px;
	padding-right:10px;
	padding-left:70px;
	padding-top:10px;
	overflow:hidden;
}


#prin_one:hover, #prin_one.selected {

background:url("images/l11.png") no-repeat;
font-weight:bold}


#prin_two {
	display:block;
	width:200px;
	height:44px;
	background:url("images/l2.png") no-repeat;
	margin-bottom:10px;
	padding-right:68px;
	padding-left:40px;
	padding-top:10px;
	overflow:hidden;
}
#prin_two:hover, #prin_two.selected {

background:url("images/l22.png") no-repeat;
font-weight:bold}



#prin_three {
	display:block;
	width:200px;
	height:44px;
	background:url("images/l3.png") no-repeat;
	margin-bottom:10px;
	padding-right:98px;
	padding-left:10px;
	padding-top:10px;
	overflow:hidden;
}

#prin_three:hover, #prin_three.selected {

background:url("images/l33.png") no-repeat;
font-weight:bold}



#prin_four {
display:block;
width:200px;
height:44px;
background:url("images/l4.png") no-repeat;
margin-bottom:10px;
	padding-right:98px;
	padding-left:10px;
	padding-top:10px;
	overflow:hidden;
}
#prin_four:hover, #prin_four.selected {

background:url("images/l44.png") no-repeat;
font-weight:bold}


#prin_five {
	display:block;
	width:200px;
	height:44px;
	background:url("images/l5.png") no-repeat;
	margin-bottom:10px;
	padding-right:68px;
	padding-left:40px;
	padding-top:10px;
	overflow:hidden;
}

#prin_five:hover, #prin_five.selected {

background:url("images/l55.png") no-repeat;
font-weight:bold}

#prin_six {
	display:block;
	width:190px;
	height:44px;
	background:url("images/l6.png") no-repeat;
	margin-bottom:10px;
	padding-right:48px;
	padding-left:70px;
	padding-top:10px;
	overflow:hidden;
}


#prin_six:hover, #prin_six.selected {

background:url("images/l66.png") no-repeat;
font-weight:bold}



/*principles buttons-------*/










/*factor buttons-------*/
#factor_one {
	display:block;
	width:181px;
	height:44px;
	background:url("images/r1.png") no-repeat;
	margin-bottom:3px;
	padding-right:107px;
	padding-left:44px;
	padding-top:10px;
	overflow:hidden;
}


#factor_one:hover, #factor_one.selected {

background:url("images/r11.png") no-repeat;font-weight:bold;}




#factor_two {
	display:block;
	width:200px;
	height:44px;
	background:url("images/r2.png") no-repeat;
	margin-bottom:3px;
	padding-right:80px;
	padding-left:60px;
	padding-top:10px;
	overflow:hidden;
}


#factor_two:hover, #factor_two.selected {

background:url("images/r22.png") no-repeat;
font-weight:bold;}



#factor_three{
	display:block;
	width:200px;
	height:44px;
	background:url("images/r3.png") no-repeat;
	margin-bottom:3px;
	padding-right:50px;
	padding-left:90px;
	padding-top:10px;
	overflow:hidden;
}



#factor_three:hover, #factor_three.selected {
	background:url("images/r33.png") no-repeat;
	font-weight: bold;
}






#factor_four{
	display:block;
	width:210px;
	height:44px;
	background:url("images/r4.png") no-repeat;
	margin-bottom:3px;
	padding-right:30px;
	padding-left:100px;
	padding-top:10px;
	overflow:hidden;
}


#factor_four:hover, #factor_four.selected {

background:url("images/r44.png") no-repeat;
font-weight:bold;}






#factor_five{
	display:block;
	width:200px;
	height:44px;
	background:url("images/r5.png") no-repeat;
	margin-bottom:3px;
	padding-right:45px;
	padding-left:95px;
	padding-top:10px;
	overflow:hidden;
}

#factor_five:hover, #factor_five.selected {
background:url("images/r55.png") no-repeat;
font-weight:bold;}





#factor_six{
	display:block;
	width:200px;
	height:44px;
	background:url("images/r6.png") no-repeat;
	margin-bottom:3px;
	padding-right:70px;
	padding-left:70px;
	padding-top:10px;
	overflow:hidden;
}


#factor_six:hover, #factor_six.selected {

background:url("images/r66.png") no-repeat;
font-weight:bold;}



#factor_seven{
	display:block;
	width:220px;
	height:44px;
	background:url("images/r7.png") no-repeat;
	margin-bottom:3px;
	padding-right:100px;
	padding-left:20px;
	padding-top:10px;
	overflow:hidden;
}


#factor_seven:hover, #factor_seven.selected {
	background:url("images/r77.png") no-repeat;
	font-weight:bold;
}


#ethicwheel p{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;

}


#principles a,#factors a{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
color:#000000;

}

#back_button{
	display: block;
	float: left;
	padding: 0px 0 10px 10px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	text-decoration:none;
	color: #900;
}

#ethicpage a img {
	margin-top: 5px;
	padding: 2px;
	}

#subsidebar {
	width: 200px;
	top: 0px;
	position: relative;
	}

span.smaller {
	font-size: 10px;
	}

.ethicsLinkText {
	padding: 5px;
	}
	.ethicsLinkText a {
		color: #000;
		font-weight: bold;
		text-decoration: none;
		}
		.ethicsLinkText a:hover {
			font-weight: bold;
			text-decoration: none;
			border-bottom: 1px solid #ccc;
			}