/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*
{
border: 0;
margin: 0;
}

img
{
border: 0px;
}

body{
	color: #000;
	line-height: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #CFC; /* changed from CFC whole background below slider bar*/
	background-image: url(images/bg.jpg); /* top image background under top links Image is scaled to width, height as jpg file */
	background-repeat: repeat-x;
	background-position: center top;
}

#menu{
	background: url(images/menu.png) top repeat-x; /* height of image defines vertical size of menu bar. changed from 69 to 50 px image is the sides of the main menu bar then back to 70 so menu items dont overlap in some browsers*/
}


#for_home{
/*	background: url(images/for_home.png) 0px 185px repeat-x; /* image under the slider - darkens it and continues beneath background - all removed PHH Aug 2012 - plain bit under the darkened image*/
}

	
#main {
	width: 1028px;
	margin: 0px auto;
	}

#header {
	width:1028px;
	height: 80px; /* CHANGED FROM 180 TO 80 where the three boxes start under the slider if 55 not 185 then start near bottom of sliderpicture, otherwise at 185 start under slider */
}

#logo {	
		padding: 10px 0px 0px 5px; /* Location of the website title and PHH/TS names original was 35px 0px 0px 30px */
}

#logo H2 {

		font-family: Arial, Helvetica, sans-serif;
		color:#ffffff; /*changed from ffffff */
		font-size:24px; /*NOt sure which line this is! changed from 18 to make title larger*/
		font-style:italic;
		}

#logo a {
	text-decoration: none; /*title under menu bar first line*/
	text-transform: none;
	/* font-style: italic; */
	font-size: 24px; /*changed from 16 to make title of website/page larger on two lines*/
	color: #ffffff;
}
	
#logo H2 a{
	font-size: 18px; /*size of PHH TS nemas - from 12*/
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:100;
}

#buttons{ /* buttons in top menu bar */
	text-align:center;
	height: 50px; /*up from rom 39px as two button rows - location of website title under button row top of screen*/
	margin-left: 0px;
	padding: 1px 0px 0px 30px; /*changed from 470 to 30px  moves button row to left
	changed from 25 to 10px and moves up so you have 2 rows of buttons. Padding from 10 to 1*/
	background-color: #00C;
background-image: url(images/but_bg.png); /*	/* background pic under left half of screen top row buttons - can be only once or repeated in next line CURRENTLY JUST BLACK*/
	background-repeat: repeat; /*changed from n0-repeat */
	background-position: left top;
}

#buttons a {
	font-family: Arial;
	font-size: 14px;
	display: block; /*used to be block */
	float: left;
	text-decoration: none; /*used to be underlined */
	color: #8D0; /* changed from 3FC  the colour of the top line menu item links */
	text-align: center;
	padding-top: 0px;
	font-weight:bold;
	background-color: #000;/* background is now black like image, used to be lighter	background-image: url(images/bg.JPG); /*Background under the buttons - not clear why you would want an image here so added comment start */
}

.but_razd { /* width: 58px; space between menu items; height of menu items used to be: 28px;*/
    width: 14px;
	height: 16px;
	background:url(images/but_razd.gif) center 5px no-repeat; /*image that separates the menu items top of screen*/
	float:left;}

#buttons .but:hover {
	color:#2A83FB;
	}
	
.top {
	height:370px; /*where the three 'area' boxes start under the slider May2016 changed from 370*/
}

.top_text {
	width: 941px;
	float:left;
	background: url(images/content_text.png);
	/*height:550px; seems to have no effect - commented out May2016 changed from 308*/
	padding: 0px 0px 0px 0px;
	padding-right: 30px}

.top_img { 
	float:left;
	padding: 15px 16px 0px 1px;			
	}
.top h1 {
	color:#2A83FB;
	font-size:18px;
	padding: 15px 0px 13px 0px;
	font-weight:100;
	font-family:Arial;
}

.top_fish {
	width: 30px;
	height:25px;
	background:url(images/fish1.png) 14px 5px ; }
	
.span_top {
	color:#2A83FB;
	font-weight:bold;
}



#content{
	width: 1028px;
	margin: 0px auto;
	padding: 0px 15px 0px 15px;
	line-height: 22px;
}

.box_home_all {
	padding: 00px 0px 0px 0px; /* spacing above the three text boxes under slider; changed from 10 first top number*/
	/*height:400px; Commented out May 2016 - no effect? Position of footer under feed boxes. Test changing from 274 seems to have no effect*/

}

.box_home {
	width: 311px; /*changing this from 301px puts different box width for the three boxes under slider*/
	height: 450px;/*This is the text box size, not the background to it; changing from 273 seems to have no effect changed to 450 may 2016*/
	float:left;
	padding: 00px 10px 0px 5px; /* position of text in three boxes under slider changed from 0px 20px 0px 10px to get a bit more box colour under text inside*/
	background:url(images/box_home.png) left top no-repeat; /* this is size and colour of the three text boxes under*/
}

.box_home H1 {
	font-size:18px;
	font-family: Arial;
	/*color: #ffffFF; commented out, used to be #AA00FF changed from May 2016 used to be 2A83FB; title to three boxes under the slider*/
	padding: 17px 0px 17px 51px;
	text-decoration:underline;
	font-weight:100;
}

.tit_img1 {
background:url(images/tit_img1.png) left 10px no-repeat;} /*motif images for three text boxes*/
.tit_img2 {
background:url(images/tit_img2.png) left 10px no-repeat;}
.tit_img3 {
background:url(images/tit_img3.png) left 10px no-repeat;}

.read_l{
	text-align:right;
	padding: 8px 4px 3px 0px;
	background: url(images/read.png) right 8px no-repeat; /*read more link box in three text boxes*/
	text-transform:uppercase;
	color:#000; /*was ffffff*/
}

.read_l a {
	font-size:12px;
	color: #111111;/*was ffffff*/
	text-decoration: none;
	padding-right: 2px;
	
}

.read_l a:hover {
	font-size:12px;
	color: #FFD0AF;
	text-decoration: none;
}



.row-top {width:100%;padding:0px 0 0px; background: url(images/for_home.png) repeat-x} /*background colour of links panel below 3 panels but above footer/copyright - padding was 33px 0 42px*/
.row-padding {padding:0 62px}
.col-1, .col-2, .col-3, .col-4  {float:left}
.col-1  H2, .col-2  H2, .col-3 H2, .col-4 H2 {color: #2A83FB}
.list-services li, .list-1 li {margin-left: -30px}
.list-services li {line-height:24px;padding-left:28px; list-style:none}
.list-services li a {color:#2A83FB;text-decoration:none}
.list-services li a:hover {text-decoration:underline}
.list-services li.item-1 {background:url(images/facebook.png) 0 3px no-repeat}
.list-services li.item-2 {background:url(images/twitter.png) 0 3px no-repeat}
.list-services li.item-3 {background:url(images/linkedin.png) 0 3px no-repeat}
.list-services li.item-4 {background:url(images/google+.png) 0 3px no-repeat}
.list-1 li {line-height:24px;padding-left:10px;background:url(images/marker.gif) 0 10px no-repeat;  list-style:none; text-decoration:none}
.list-1 li a {display:inline-block;color:#2A83FB}
.list-1 li a:hover {text-decoration:underline}
.address a {color: #2A83FB}

.indent3 {padding-top:28px}
.footer-logo {
	display:block;
	color:#0CC; /*name of website on dark in footer (eg MOLCYT.ORG*/
	font-size:24px; /*down from 30 pt*/
	line-height:1em;
	/*	text-transform:uppercase; /*was uppercase - now changed*/
	/*letter-spacing:-3px;*/
	font-weight:400;
	margin-bottom:5px
}
.footer-logo strong {color:#0CC;text-transform:none;display:inline-block}
.phone {display:inline-block;font-size: 24px;line-height:1.2em;color:#666666;letter-spacing:-1px;padding-left:5px}
.phone strong {color:#666666}
.col-1 {
	width:210px;
	margin-right:25px
}
.col-2 {
	width:180px;
	margin-right:25px
}
.col-3 {width:180px;margin-right:45px}
.col-4 {width:235px}
.wrapper {width:100%;overflow:hidden; font-size: 12px; padding: 10px; color: #666666}

#footer_box{
	/*height: 108px;
	width: 1000px;*/
	height: 78px;
	width: 1028px;
}

#footer{
	font-size: 11px;
	/*inserted cc copyright image*/
	background: url(images/CCByNC.png) top 0px no-repeat; 
	color: #0000; /*colour of copyright etc notices*/
	text-align: center;
	padding: 0px 0px 0px 0px; /*Position of copyright text: 30px 0px 0px 30px;*/
	width: 400px;
	text-align: left;
}

#footer a{
	color: #880088; /*footer copyright link colours*/
	font-size: 11px;
	text-decoration: none;
}

#footer a:hover{
	color: #008800;/*footer copyright link colours on mouseover*/
	font-size: 11px;
	text-decoration: underline;
}



#buttons_b{
	text-align:center;
	height: 54px;
	margin-left: 15px;
	float:right;
	background: url(images/footer_menu.png) left top repeat-x; /*deleted as not wanted!*/
	width: 600px;
	padding: 15px 00px 0px 40px; /* box size bottom right footer position of buttons in box*/
}

/*Changed from #buttons_b{
	text-align:center;
	height: 39px;
	margin-left: 15px;
	float:right;
	background: url(images/menu.png) left top repeat-x; /*deleted as not wanted!
	width: 400px;
	padding: 15px 0px 0px 0px; /* position of buttons in box
} */

#buttons_b a {
	font-family: Arial;
	font-size: 14px;
	display: block;
	float: left;
	text-decoration: none;
	color: #8d0; /*FFFFFF; link buttons in footer changed from black to same greenish as top row*/
	text-align: center;
	padding-top: 0px;
	font-weight:bold;
}

.but_razd_b { width: 25px;
	height: 28px;
	background:url(images/but_razd.gif) center 5px no-repeat;
	float:left;}

#buttons_b .but:hover {
	color:#FFD0AF;
	}



h5 {
	font-family: Arial;
	font-size:18px;
	font-weight: 100;
	color: #7B3401;
	text-align: left;
	padding: 5px 0px 5px 0px;}



.prev_but_center{
    width: 950px;
	padding-top: 10px;
    float: left;
}

.prev_but_center_left{
    float: left;
	padding-left: 10px;
    width: 602px;
}

.prev_but_center_right{
    float: left;
    width: 290px;
    padding-left: 30px;
	padding-right: 10px;
}

.prev_but_center_right p{
    color: #ffffff;
}

.prev_but_center_right a{
    color: #ffffff;
    font-weight: bold;
}



/*
Header Scroller
*/

/*
	jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
	Copyright (c) 2009 Niall Doherty
	This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/

/* Insignificant stuff, for demo purposes */

	.panel h2.title { margin-bottom: 10px }
	noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px }

/* Most common stuff you'll need to change */

	.coda-slider-wrapper { padding: 0px; padding-left: 20px }
	.coda-slider { background: none}
	
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	.coda-slider-no-js .coda-slider { height: 338px; overflow: hidden !important; padding-right: 20px }
	
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel { width: 1028px;} 
	
	/* Change margin and width of the slider (with dynamic arrows) */
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 950px; }
	.coda-slider-wrapper.arrows .coda-slider { margin: 0px }
	
	/* Arrow styling */
	.coda-nav-left {padding-top: 120px;}
	.coda-nav-right {padding-top: 120px;}
	.coda-nav-left a { background: url(images/top_left.png) no-repeat 0px 30px; color: #fff; width: 27px; height: 108px; text-indent: -9000em;}
	.coda-nav-right a { background: url(images/top_right.png) no-repeat 0px 30px; color: #fff; width: 27px; height: 108px; text-indent: -9000em;}
	
	/* Tab nav */
	.coda-nav ul li a.current { background: #39c }
	
	/* Panel padding */
	.coda-slider .panel-wrapper { padding: 0px }
	
	/* Preloader */
	.coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

	/* Tabbed nav */
	.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
	.coda-nav ul li { display: none }
	.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: both; overflow: hidden }
	.coda-slider { float: left; overflow: hidden; position: relative }
	.coda-slider .panel { display: block; float: left }
	.coda-slider .panel-container { position: relative }
	.coda-nav-left, .coda-nav-right { float: left }
	.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
#menu #for_home #main #header #logo p a {
	font-size: medium;
}
.Button_Current_Page {
	color: #F00;
}