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

	Main screen stylesheet (screen_main.css)

	version: 	1.1
	date:			23rd August 2006
	site: 		reefnet.co.uk
	author:		ReefNet

	=TODO
	=FIX
	=BUG

	External   	: External stylesheet imports
	General		: Overall rules, bug-fixes etc
	Typography 	: Text fonts and sizes
	Colours		: Foreground / background colours
	Layout		: Sizes, Margin, Padding, floats etc
	Navigation  : Links, nav lists
	Images		: Background images, replacements, headers, bullets, lists

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

/* =External
-------------------------------------------------------------------*/


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

* {
	margin: 0;
	padding: 0;
}

/* =FIX : clear float-containing elements *without* using non-struc markup */

.replace {
	text-indent: -3000px;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}/* End hide from IE-mac */



/* =Typography
-------------------------------------------------------------------*/

body {
	font: 76% / 1.2em arial, sans-serif;
	margin-top: 8px;
}

#pg_portfolio .portfolio_image h3, #pg_portfolio .portfolio_image_d h3 {
	font-size: 95%;
}

#header ul {
	font-size: 110%;
	font-weight: bold;
}

#header ul li a {
	text-decoration: none;
}

#nav_sub li a {
	text-decoration: none;
	font-weight: bold;
}

.box h2 {
	font-size: 115%;
	font-weight: bold;
	letter-spacing: 0.1em;
}

#sub form input {
	font-size: 90%;
}

/* =Colours
-------------------------------------------------------------------*/

body {
	background-color: #fff;
	color: #333;
}

#nav_sub {
	background-color: #B3C6D3;
}

#nav_sub li, .portfolio_image, .portfolio_image_d, #port h2, #pg_portfolio #header h1, h2#portfolio, #footer, #sub form, .box {
	background-color: #fff;
}

#nav_sub li a {
	background-color: #B3C6D3;
	color: #2C687C;
}

#nav_sub li a:hover, #nav_sub li a.here {
	background-color: #7F9DB9;
	color: #fff;
}

.portfolio_image, .portfolio_image_d {
	color: #00495F;
}

#header ul li a {
	color: #00495F;
}

#sub form input#button {
	background:#7F9DB9;
	color:#fff;
}

#sub form input#button:hover {
	color: #7f9DB9;
	background-color: #B3C6D3;
}

.box {
	color: #1F5F72;
}

#sub form input#button {
	background:#7F9DB9;
	color:#fff;
}

p.gal_desc {
	color: #00495F;
}

/* =Layout
-------------------------------------------------------------------*/

#page_wrapper {
	width: 795px;
	margin: 0 auto;
}

#header {
	width: 100%;
	margin: 5px auto 0 auto;
	height: 186px;
}

#content {
	width: 520px;
	float: right;
	margin-top: 5px;
}

#content h1 {
	margin: 22px 0 40px 0;
	font-size: 250%;
	letter-spacing: 0.1em;
	color: #A3BACB;
}


#content p {
	font-family: verdana, arial, sans-serif;
	font-size: 95%;
	line-height: 1.6em;
	color: #00495F;
	text-align: justify;
	margin: 1.2em 0;
}

#content h2 {
	font-size: 160%;
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: 0.1em;
	line-height: 1em;
	margin: 1em 0 0.5em 0;
	color: #A3BACB;
}

#content h3 {
	font-size: 120%;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin: 1em 0 0.5em 0;
	color: #A3BACB;
}

#content a {
	text-decoration: none;
	font-weight: bold;
	color: #00495F;
}

#content ul {
	margin: 1em 0 1em 1em;
}

#content li {
	margin: 0.2em 0 0.2em 0;
	list-style: none;
	font-family: verdana, arial, sans-serif;
	font-size: 95%;	
}

#content li a {
	display: block;
	padding: 0 0 0 21px;
	background: url(/_struct/bullet.gif) 4px 50% no-repeat;
}

#pg_about #content li {
        padding: 0 0 0 21px;
        background: url(/_struct/bullet.gif) 4px 5px no-repeat;
}

#content blockquote {
	font-family: verdana, arial, sans-serif;
	font-size: 95%;
	line-height: 1.6em;
	color: #00495F;
	text-align: justify;
	margin: 1.2em 1.5em 0 1.5em;
	Font-Style: Italic;
}

.mainimg {
	border: 3px double #a3bacb;
	margin: 5px;
}

#pg_portfolio #content a
{
	text-decoration: none;
	font-weight: bold;
	color: #00495F;
}
#pg_portfolio #content .gal_more a
{
	color: #fff;
}

#content a:hover {
	color: #95026a;
}

#pg_portfolio #content {
	margin-top: 5px;
	width: 515px;

}

.portfolio_image, .portfolio_image_d {
	float: left;
	padding-bottom: 25px;
	padding-left: 10px;
	height: 199px;
	width: 502px;
}

#sub {
	width: 252px;
	float: left;
}

#header ul {
	margin-top: -18px;
	margin-left: 230px;
}

#header ul li a {
	padding: 1px 12px;
}

#nav_sub {
	height: 725px;
	width: 252px;
}

#pg_portfolio #content h2 {
	height: 176px;
}

#nav_sub ul {
	height: 478px;
}

#nav_sub li {
	padding-bottom: 1px;
	margin: 0;
}

#nav_sub li a {
	text-align: right;
	display: block;
	margin: 0;
	padding: 4px 6px;
}

#nav_sub address {
	border: 0;
	text-align: center;
}

#nav_sub address a img {
	border: 0;
	text-align: center;
	margin: 0 auto;
}

#header h1 {
	height: 186px;
}

#nav_sub h2
{
	height: 58px;
	margin-bottom: 1px;
}
/* 
h2#portfolio, h2#about, h2#clients, h2#services, h2#contact, h2#news {
	height: 58px;
	margin-bottom: 1px;
} */

#footer {
	height: 120px;
}

#sub form fieldset {
	border: none;
	padding-top: 21px;
	padding-right: 15px;
}

#sub form {
	height: 113px;
	margin-left: 86px;
	padding: 0;
	width: 165px;
	text-align: right;
}

#sub form input {
	margin-top: 0.8em;
	margin-bottom: 0.3em;
	border: 1px solid #7F9DB9;
	padding: 1px;
}

#sub form input#button {
	width: 70px;
	border: 1px solid #7F9DB9;
	font-size: 110%;
	bottom: 0px;
	position: relative;
	left: 7px;
	top: 1px;
}

.box {
	margin: 25px 0;
	width: 251px;
	padding-bottom: 10px;
}

.box img {
	padding: 2px;
	border: 1px solid #CFDFE8;
}

.box img.f {
	float: left;
}

.box h2 {
	padding-left: 70px;
	height: 30px;
}

.box p {
	padding: 0 10px;
	clear: both;
}

.box a {
	color: #00495F;
	text-decoration: none;
}

#paginate {
	width: 300px;
	margin: 0 auto;
	text-align: center;
	clear: both;
}

#paginate p.pages
{
	white-space: nowrap;
	display: inline;
	position: relative;
	top: 1em;
}
#paginate p a img {
	border: none;
}

#paginate p.prev, p.prev_o {
	float: left;
}

#paginate p.next, p.next_o {
	float: right;
}

.portfolio_image p, .portfolio_image_d p {
	float: left;
}

#pg_portfolio #content p.gal_desc {
	float: right;
	margin-right: 30px;
	margin-top: 55px;
	width: 262px;
	height: 105px;
	padding-top: 20px;
	line-height: 1.5em;
}

/* =Navigation & Links
-------------------------------------------------------------------*/

#header ul {
	text-align: center;
	list-style: none;
}

#header ul li {
	display: inline;
	margin-right: 14px;
}

#header ul li a {
	color: #00495F;
	padding: 0 2px 0 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 1px;
}

#header ul li a:hover, #header ul li a.here {
	border-bottom: 3px solid #7F9DB9;
}

#nav_sub ul {
	list-style: none;
}

#paginate p.pages {
	color: #00495F;
}

#paginate a {
	font-size: 80%;
	text-decoration: none;
	font-weight: bold;
	color: #00495F;
	padding: 0 10px;
}

#paginate a:hover {
	color: #95026a !important;
}

/* =Images
-------------------------------------------------------------------*/

p.gal_desc {
	background: url(/_struct/gal_desc_box2.gif) no-repeat 4px 0;
	font-size: 95%;
	padding: 0 4px 0 0px;
}

#pg_portfolio .portfolio_image h3, #pg_portfolio .portfolio_image_d h3 {
	position: relative;
	top: 67px;
	left: 240px;
	font-size: 110%;
	font-weight: bold;
	letter-spacing: 0;
	margin: 0 0 0 0;
	color: #00495F;
	width: 250px;
}

#pg_portfolio #content p.gal_desc a {
	color: #00495F;
	font-weight: bold;
	text-decoration: none;
	font-size: 100%;
}
#pg_portfolio #content p.gal_desc a:hover {
	color: #95026a;
}

#pg_portfolio #content p.gal_more a {
	position: relative;
	/* left: 407px; */
	left: 202px;
	top: -53px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}
#pg_portfolio #content p.gal_more a:hover {
	color: #b4ff1d;
}


#sub form {
	background: url(/_struct/login_form_bg.gif) no-repeat top right;
}

#pg_services #header h1 {
	background: url(/_struct/pg_head_services.gif) no-repeat top;
	text-indent: -3000px;
}

#pg_news #header h1 {
	background: url(/_struct/pg_head_news.gif) no-repeat top;
	text-indent: -3000px;
}

#pg_clients #header h1 {
	background: url(/_struct/pg_head_clients.gif) no-repeat top;
	text-indent: -3000px;
}

#pg_contact #header h1 {
	background: url(/_struct/pg_head_contact.gif) no-repeat top;
	text-indent: -3000px;
}

#pg_portfolio #header h1 {
	background: url(/_struct/pg_head_portfolio.gif) no-repeat top;
	text-indent: -3000px;
}

#pg_about #header h1 {
	background: url(/_struct/pg_head_about.gif) no-repeat top;
	text-indent: -3000px;
}

#nav_sub h2 {
	text-indent: -3000px;
	background: url(/_struct/sec_head_about.gif) no-repeat top;
}

#nav_sub h2#portfolio {
	text-indent: -3000px;
	background: url(/_struct/sec_head_portfolio.gif) no-repeat top;
}

#nav_sub h2#about {
	text-indent: -3000px;
	background: url(/_struct/sec_head_about.gif) no-repeat top;
}

#nav_sub h2#clients {
	text-indent: -3000px;
	background: url(/_struct/sec_head_clients.gif) no-repeat top;
}

#nav_sub h2#contact {
	text-indent: -3000px;
	background: url(/_struct/sec_head_contact.gif) no-repeat top;
}

#nav_sub h2#services {
	text-indent: -3000px;
	background: url(/_struct/sec_head_services.gif) no-repeat top;
}

#nav_sub h2#news {
	text-indent: -3000px;
	background: url(/_struct/sec_head_news.gif) no-repeat top;
}


#footer {
	background: url(/_struct/pag_footer.gif) no-repeat top;
}

#head
{
	background: url(/_struct/head_about.jpg) no-repeat top;
	text-indent: -3000px;
	height: 176px;
}
	
#pg_portfolio #head {
	background: url(/_struct/head_port.jpg) no-repeat top;
	text-indent: -3000px;
	height: 176px;
}

#pg_about #head {
	background: url(/_struct/head_about.jpg) no-repeat top;
	text-indent: -3000px;
	height: 176px;
}

#pg_news #head {
	background: url(/_struct/head_news.jpg) no-repeat top;
	text-indent: -3000px;
	height: 176px;
}

#pg_services #head {
	background: url(/_struct/head_services.jpg) no-repeat top;
	text-indent: -3000px;
	height: 176px;
}

#pg_contact #head {
	background: url(/_struct/head_contact.jpg) no-repeat top;
	text-indent: -3000px;
	height: 176px;
}

#nav_sub {
	background: url(/_struct/sub_nav_bg.gif) no-repeat bottom left;
}

.portfolio_image a img, .portfolio_image_d a img, .portfolio_show a img {
	background-repeat: no-repeat;
	background-position: center;
	border: 0;
}

.portfolio_image {
	background: url(/_struct/gal_bg_yel.gif) no-repeat bottom left;
}

.portfolio_image_d {
	background: url(/_struct/gal_bg_blu.gif) no-repeat bottom left;
}

.box {
	background: url(/_struct/box_bot.gif) no-repeat bottom left;
}

.box h2 {
	background: url(/_struct/box_top.gif) no-repeat top left;
}

.portfolio_show
{
	color: #00495F;
	padding-bottom: 25px;
	padding-left: 10px;

}
#pg_portfolio .portfolio_show h3
{
	margin: 0.5em 0 0.5em 0;
	color: #7F9DB9;
}

.portfolio_show img
{
	float: left;
	margin: 0 0.5em 0.5em 0;
}

#sub address {
	background: #A3BACB url(/_struct/wave_bullet.gif) no-repeat bottom left;
	border-bottom: 2px solid #7F9DB9;
	color: #fff;
	font-weight: bold;
	font-style: normal;
	font-size: 110%;
	width: 93%;
	margin: 0 auto;
	padding-top: 12px;
}

#sub address span {
	display: block;
	float: left;
	padding: 2px 0 0 27px;
}

#sub address a {
	display: block;
	float: right;
	text-decoration: none;
	color: #fff;
	background-color: #7F9DB9;
	padding: 2px 8px 2px 16px;
	font-size: 100%;
	margin: 0 0 0 0;
}

#sub address a:hover {
	color: #CFDFE8;
}