/* 
CSS Document for Archant - Canal Boat 

Author: 		Adam Collison [adam.collison@soup.co.uk]
Client: 		Archant
Project:		Canal Boat
Last Modified: 	19-04-2006

Contents:

1) Generic Styles
2) Structure Styles
3) Header Styles
4) Site Tools Styles
5) Nav Styles
6) Sub Nav Styles
7) Calout Column Styles
8) Main Content (general) Styles
9) Editorial Styles Within main content
	  a) Large Variation
	  b) Small Variation
	  c) List Variation
	  d) Homepage Variation
	  e) Features Variation
	  f) Classifieds Variation
	  g) Item Detail Variation
10) Item Detils Styles
11) Two column styles (within inner content)
	  a) caption styles
	  b) Default tables nested within 2 col layout
	  c) Specification Table styles
12) Default form styles
13) Footer styles
14) Misc styles

*/

/* *********************** Generic Styles **************************************** */
/* ******************************************************************************* */

body {
	font-family:			Verdana, Arial, Helvetica, sans-serif;
	padding:				0;
	margin:					0;
	font-size: 				small;
}

a img, img {
	border:					0;
}

a {
	text-decoration:		none;
}

p {
	margin-top:				0.8em;
	margin-bottom:			0.9em;
}

/* Main H3 Style */
h3.section_label {
	font-size:				70%;
	padding-bottom:			2px;
	padding-top:			2px;
	margin:					0 0 10px;
	clear:					both;
}

h3.section_label span {
	padding:				2px 4px 2px;
	text-transform:			uppercase;
}

h5 {
	margin:					0.8em 0;
}

/* ******************************************************************************* */
/* ************************ End Generic Styles *********************************** */


/* ************************ Structure Styles ************************************* */
/* ******************************************************************************* */

#structure {
	width:					960px;
	margin:					5px;
}

#structure th {
	text-align:				left;
	vertical-align:			top;
	padding-bottom:			1px;
	border-bottom:			3px solid;
	font-family:			Arial, Helvetica, sans-serif;
}

#structure td {
	padding-top:			10px;
	vertical-align:			top;
}

#structure_popup {
	width:					300px;
	margin:					5px;
}
#structure_popup th {
	text-align:				left;
	vertical-align:			top;
	padding-bottom:			1px;
	font-family:			Arial, Helvetica, sans-serif;
}

#structure_popup td {
	padding-top:			0px;
	vertical-align:			top;
}

/* ******************************************************************************* */
/* ************************ End Structure Styles ********************************* */


/* ************************ Header Styles **************************************** */
/* ******************************************************************************* */

#header h2, h2 {
	border-bottom-style:	solid;
	border-bottom-width:	1px;
	padding:				0 0 0 10px;
	margin:					0;
}

#header h1 {
	padding:				3px 0 9px;
	margin:					0;
	background-image:		url(../images/bg_header.gif);
	background-position:	bottom left;
	background-repeat:		repeat-x;
}

/* Below will only apply to IE (just like majic) */
* html #header h1 {
	padding:				0 0 7px;
}

#header .flash {
	float:					right;
	padding:				19px 15px 0 0;
}

/* ******************************************************************************* */
/* ************************ End Header Styles ************************************ */


/* ************************ Site Tools Styles ************************************ */
/* ******************************************************************************* */

#structure th.site_tools {
	width:					174px;
	background-position:	bottom left;
	background-repeat:		repeat-x;
	border:					0;
}

.site_tools .header div {
	padding:				7px 10px;
	font-size:				85%;
	margin-bottom:			1px;
}

.site_tools .header div a {
	display:				block;
	margin-right:			5px;
	padding:				2px 0;
}

.site_tools .header div a:hover {
	text-decoration:		underline;
}

.site_tools .header div div.form {
	padding:				0;
	margin:					0;
	font-size:				100%;
}

.site_tools .header div div.form select, .site_tools .header div div.form input {
	margin-right:			5px;
	font-size:				85%;
}

.site_tools .header div div.form select {
	margin:					0 0 10px;
}

.site_tools div.form label {
	visibility:				hidden;
	position:				absolute;
	top:					-4000px;
	left:					-4000px;
}

/* ******************************************************************************* */
/* ************************ Site Tools Styles ************************************ */


/* ************************ Nav Styles ******************************************* */
/* ******************************************************************************* */

#nav {
	padding:				3px 0 3px 5px;
	margin:					0;
	list-style-type:		none;
	position:				relative;
}

#nav li {
	margin:					0;
	display:				inline;
	font-weight:			bold;
	padding:				0;
	font-size:				85%;
}

#nav li a {
	margin:					0;
	font-weight:			bold;
	padding:				5px 5px 3px;
	text-transform:			uppercase;
}

/* ******************************************************************************* */
/* ************************ End Nav Styles *************************************** */

/* ************************ Sub Nav Styles *************************************** */
/* ******************************************************************************* */

#subnav h3.section_label {
	clear:					none;
}

#subnav {
	width:					173px;
	padding-bottom:			4px;
	float:					left;
}

#subnav ul {
	padding:				0;
	margin:					0;
	list-style:				none;
}

#subnav ul li {
	width:					173px;
	padding:				0;
	margin:					0;
	float:					left;
	clear:					left;
}



/* Hide subnavs unless selected Includes sub sub nav (third level) */

/* ********************************************************************************************* */
/* CHANGED STYLES ******************************************************************************* */

#subnav ul li ul, #subnav ul li.selected ul li ul {
	visibility:				hidden;
	position:				absolute;
}
#subnav ul li.selected ul, #subnav ul li.selected ul li.selected ul {
	visibility:				visible;
	position:				relative;
}

/* CHANGED STYLES ******************************************************************************* */
/* ********************************************************************************************* */




#structure #subnav ul li.last {
	padding-bottom:			10px;
}

#subnav ul li.last ul {
	display:				block;
}

#subnav ul li a {
	padding:				3px 10px 4px;
	margin:					0;
	display:				block;
	font-weight:			bold;
	font-size:				85%;
}

#subnav ul li.selected {
	padding:				0 0 5px;
}






/* ********************************************************************************************* */
/* NEW STYLES ********************************************************************************** */
/* ********************************************************************************************* */

#subnav ul li ul li a {
	padding:				2px 10px 2px 25px;
	font-weight:			normal;
	font-size:				80%;
}

#subnav ul li ul li ul li a {
	padding-left:			30px;
}

/* ********************************************************************************************* */
/* END NEW STYLES ****************************************************************************** */
/* ********************************************************************************************* */


/* ******************************************************************************* */
/* ************************ End Sub Nav Styles *********************************** */


/* ************************ Calout Column Styles ********************************* */
/* ******************************************************************************* */

.callout_column {
	width:					174px;
}

.callout_panel {
	padding:				0 0 6px;
	margin:					0 0 10px;
}

.callout_panel h5 {
	font-size:				70%;
	padding:				4px 10px 6px;
	margin:					0;
}

.callout_panel h5 a {
	padding-left:			12px;
}

.callout_column .callout {
	padding:				12px;
	font-size:				75%;
}

.callout_panel .callout p {
	padding:				0;
	margin:					0;
}

.callout_panel .callout a {
	font-weight:			bold;
	line-height:			1.8em;
}

/* Used for Subscription callout box to fix IE Bug */
.subscribe a {
	display:				block;
}

/* Overwrite Size for callout panel set in the homepage */
div.callout_column .callout {
	padding:				10px 10px 10px; 
	font-size:				75%;
}

/* Below will only apply to IE (just like majic) */
* html div.callout_column .callout {
	padding:				10px 10px 0; 
}

div.callout_column .callout p {
	float:					right;
	width:					165px;
	padding-top:			7px;
}

div.callout_column {
	width:					280px;
	float:					right;
}

div.callout_column .callout hr {
	padding:				0;
	margin:					0;
	clear:					both;
	height:					0;
	border:					0;
}

/* ******************************************************************************* */
/* ************************ End Calout Column Styles ***************************** */


/* ************************ Main Content (general) Styles ************************ */
/* ******************************************************************************* */

#content {
	float:					right;
	width:					570px;
	padding-right:		5px;
	font-size:				80%;
}

#content h3.section_label {
	font-size:				95%;
}

/* Target Homepage and reset the sizes */
#structure .homepage {
	width:					460px;
	float:					left;
	margin-left:			2px;
}

#structure .adminpage {
	width:					100%;
	float:					left;
	margin-left:			0px;
}
/* ******************************************************************************* */
/* ************************ End Main Content (general) Styles ******************** */


/* ************************ Editorial Styles Within main content ***************** */
/* ******************************************************************************* */

.editorial_panel {
	margin:					0 0 10px;
}

.editorial_panel div {
	float:					right;
	width:					475px;
	line-height:			1.4em;
}

.editorial_panel h4 {
	font-size:				135%;
	margin:					0;
	padding:				0;
}

.editorial_panel div p {
	margin-top:				0.8em;
	margin-bottom:			0.9em;
	padding:				0;
}

.editorial_panel a {
	font-weight:			bold;
	font-size:				95%;
}

.editorial_panel div span {
	display:				block;
	padding:				5px 0;
	font-size:				90%;
}



/* ------------------------------------------------------------------------------- */
/* ------------------------ Large Variation -------------------------------------- */
.large div {
	width:					273px;
	font-size:				105%;
	padding-right:			10px;
}

.large div h4 {
	padding:				15px 30px 0 0;
}

/* ------------------------------------------------------------------------------- */
/* ------------------------ Small Variation -------------------------------------- */
.small div {
	width:					182px;
	clear:					both;
}

.small div h4 {
	font-size:				100%;
}

.small div p {
	margin:					0.2em 0 0.6em;
}

/* ------------------------------------------------------------------------------- */
/* ------------------------ List Variation --------------------------------------- */
.list {
	padding-bottom:			15px;
}

/* Below will only apply to IE (just like majic) */
* html .list {
	padding-bottom:			0;
}

.list hr {
	clear:					both;
	height:					1px;
	color:					#fff;
	background:				#fff;
	margin:					0;
	padding:				0;
	border:					0;
}

/* ------------------------------------------------------------------------------- */
/* ------------------------ Homepage Variation ----------------------------------- */
.home div {
	width:					150px;
	padding:				20px 0 0;
}

.home div h4 {
	width:					150px;
}

/* ------------------------------------------------------------------------------- */
/* ------------------------ Features Variation ----------------------------------- */
.features div {
	width:					297px;
}

.features div h4 {
	font-size:				130%;
	padding:				0 0 4px 10px;
}

.features div ul {
	padding:				5px 0;
	margin:					0;
	list-style:				none;
}

.features div ul li {
	padding:				4px 10px 6px;
	margin:					0;
}

.features div ul li strong {
	display:				block;
}

.editorial_panel div span {
	display:				inline;
}


/* ------------------------------------------------------------------------------- */
/* ------------------------ Classifieds Variation -------------------------------- */

.classifieds {
	margin:					0;
	padding:				3px 0 1px;
}

.classifieds img {
	margin:					5px 0 0 5px;
}

.classifieds div {
	padding:				5px 0 0 10px;
	width:					465px;
}

.classifieds object {
	clear:					both;
	position:				relative;
}

.classifieds hr {
	color:					#fff;
	background:				#fff;
	border:					0;
	clear:					both;
}

* html .classifieds span hr {
	display:				none;
}

/* ------------------------------------------------------------------------------- */
/* ------------------------ Item Details Variation ------------------------------- */


.item_details {
	margin-top:				-10px;
}

.item_details img {
	margin-bottom:			5px;
}

.item_details ul {
	margin:					0;
	padding:				0;
}

.item_details ul li {
	list-style-position:	inside;
	padding:				0 0 10px;
}


/* ************************ End Editorial Styles Within main content ************* */
/* ******************************************************************************* */



/* ******************************************************************************* */
/* ************************ Gallery styles *************************************** */

.gallery div {
	width:					85px;
	padding-right:			50px;
	padding-bottom:			10px;
	float:					left;
	font-size:				95%;
	height:					130px;
}

* html .gallery div {
	font-size:				85%;
}

.gallery div strong {
	display:				block;
}

/* ************************ End Gallery styles *********************************** */
/* ******************************************************************************* */


/* ******************************************************************************* */
/* ************************ Two column styles (within inner content) ************* */

.two_column {
	width:					570px;
}

.two_column td.first {
	width:					275px;
	padding-right:			19px;
}

/* ------------------------------------------------------------------------------- */
/* ------------------------ caption styles --------------------------------------- */
.two_column td.captions {
	width:					144px;
	padding-left:			10px;
	font-size:				90%;
	text-align:				right;
}

.two_column td.captions div {
	margin-bottom:			5px;
}

.two_column td.captions p {
	padding:				0;
	margin:					5px 0;
}

.two_column td.captions p a {
	display:				block;
	padding:				0 2px 2px;
}

/* ------------------------------------------------------------------------------- */
/* ------------------------ Default tables nested within 2 col layout ------------ */
#content .two_column td table tr th {
	border:					0;
	font-size:				110%;
	padding:				7px 0 0;
}

#content .two_column td table tr td {
	border:					0;
	padding:				1px 0;
}

#content .two_column td div.form {
	width:					100%;
	float:					none;
}

#content .two_column td div.form table td {
	padding:				2px 0;
}


#content .two_column td div.form table td select.large {
	width:					140px;
}

#content .two_column td div.form table td input.large {
	width:					134px;
}

#content .two_column td div.form table td select.small {
	width:					40px;
}

#content div.form td {
	vertical-align:			top;
	padding:				5px 3px;
	
}

/* ------------------------------------------------------------------------------- */
/* ------------------------ Specification Table styles --------------------------- */
#content .two_column tr td .specification th {
	border:					0;
	padding:				10px 10px 0;
}

#content .two_column tr td .specification td {
	padding:				5px 5px 0 10px;
}

#content .two_column tr td .specification .label {
	width:					100px;
}


/* ************************ End Two column styles (within inner content) ********* */
/* ******************************************************************************* */


/* ******************************************************************************* */
/* ************************ Default form styles ********************************** */
#content div.form {
	padding:				0;
	margin:					0;
	float:					none;
	width:					100%;
}

#content div.form td.form_label {
	width:					130px;
}

#content div.form input, #content div.form select, #content div.form textarea {
	font-family:			Arial, Helvetica, sans-serif;
	font-size:				105%;
}

#content div.form input.large, #content div.form select.large {
	width:					204px;
}

#content div.form textarea.large {
	width:					210px;
}

#content div.form textarea.xlarge, #content div.form input.xlarge {
	width:					333px;
}

#content div.form input.small {
	width:					70px;
}

#content div.form a {
	text-decoration:		underline;
	padding:				1px 2px 2px;
}

#content div.form a:hover {
	text-decoration:		none;
}

/* ************************ End Default form styles ****************************** */
/* ******************************************************************************* */



/* ******************************************************************************* */
/* ************************ Footer styles **************************************** */

#footer {
	width:					950px;
	margin:					20px 10px 10px;
	font-family:			Arial, Helvetica, sans-serif;
	clear:					both;
}

#footer_popup {
	width:					300px;
	margin:					20px 10px 10px;
	font-family:			Arial, Helvetica, sans-serif;
	clear:					both;
	border-top-style:		solid;
	border-top-width:		3px;
}

#footer {
	border-top-style:		solid;
	border-top-width:		3px;
}

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

#footer div p {
	padding:				3px 10px;
	margin:					0;
	border:					0;
	font-size:				85%;
	font-weight:			bold;
 }

#footer ul {
	padding:				1px 0 3px;
	margin:					0;
	list-style-type:		none;
	float:					right;
}

/* Below will only apply to IE (just like majic) */
* html #footer ul {
	padding:				3px 0;
}

#footer ul li { 
	padding:				0 3px;
	font-weight:			bold;
	margin:					0;
	display:				inline;
	font-size:				85%;
}

#footer ul li a {
	padding:				4px 5px 3px;
}

/* Below will only apply to IE (just like majic) */
* html #footer ul li a {
	padding:				3px 5px 5px;
}

#footer p {
	border-top-style:		solid;
	border-top-width:		3px;
	padding:				10px 19px;
	margin:					0;
	font-weight:			bold;
}

#footer_popup div {
	border-top:				1px solid;
	border-bottom:			1px solid;
}

#footer_popup div p {
	padding:				3px 10px;
	margin:					0;
	border:					0;
	font-size:				85%;
	font-weight:			bold;
 }

#footer_popup ul {
	padding:				1px 0 3px;
	margin:					0;
	list-style-type:		none;
	float:					right;
}

/* Below will only apply to IE (just like majic) */
* html #footer_popup ul {
	padding:				3px 0;
}

#footer_popup ul li { 
	padding:				0 3px;
	font-weight:			bold;
	margin:					0;
	display:				inline;
	font-size:				85%;
}

#footer_popup ul li a {
	padding:				4px 5px 3px;
}

/* Below will only apply to IE (just like majic) */
* html #footer_popup ul li a {
	padding:				3px 5px 5px;
}

#footer_popup p {
	border-top-style:		solid;
	border-top-width:		3px;
	padding:				10px 19px;
	margin:					0;
	font-weight:			bold;
}


/* ************************ End Footer styles ************************************ */
/* ******************************************************************************* */

/* ******************************************************************************* */
/* ************************ Misc styles ****************************************** */

/* Used for accessibility hide elements */
.w3c {
	visibiity:				hidden;
	position:				absolute;
	top:					0;
	left:					-500px;
}

.full_width {
	width:					100%;
}

#structure .full_page {
	float:					none;
	width:					765px;
}

#content .right_align {
	text-align:				right;
}

.left_align {
	text-align:				left;
}

#content .lead {
	padding-top:			0;
	margin-top:				0;
	font-weight:			bold;
}

.flash_banner {
	text-align:				center;
}

.flash_banner_bottom {
	clear:					both;
	padding-top:			10px;
}

.clear {
	clear:					both;
}

/* Does what it says on the tin */
.left {
	float:					left;
}

.right {
	float:					right;
}

.section_end {
	padding-bottom:			6px;
}

.align {
	vertical-align:			middle;
}

/* OL on the canal network page its the links for the map */
ol.map_links {
	padding:				0;
	margin:					0;
	font-weight:			bold;
	list-style:				none;
}

ol.map_links li {
	float:					left;
	width:					91px;
	padding:				0 0 9px;
}


/* Used in classifieds for the boat features */
.item_features {
	font-size:				110%;
	padding-right:			10px;
}

.item_features p {
	margin-top:				0;
}

.page_nav {
	font-weight:			bold;
}

.page_nav .right {
	margin:					-6px 0 0;
}

.small_font {
	font-size:				90%;
}

div.error {
	padding:				5px 5px 5px 25px;
	font-weight:			bold;
}

.ad_tools {
	padding:				5px 0 0;
	margin:					0;
	list-style:				none;
}

.ad_tools li {
	padding:				0 2px 0 0;
	margin:					0;
	display:				inline;
}

.login_input {
	width:					170px;
}

.highlight_c {
	font-weight:			bold;
}

#content div a.help, #content a:hover.help {
	background:				#fff;
	padding:				0;
	margin:					0 0 0 10px;
	vertical-align:			middle;
	float:					right;
}

#structure th.no_border {
	border:					0;
}


/* ************************ End Misc styles ****************************************** */
/* ******************************************************************************* */

/* ************************ Pagination styles ****************************************** */
/* ******************************************************************************* */

div.pagination {
display:			  block;
height:				  25px;
padding:				4px 4px 0 4px;
}

.pagination_nav {
float:					right;
text-align:			right;
} 

.pagination_results {
display:			 	block;
width:				  130px;
float:					left;
text-align:			left;
} 

.pagination_pagenav {
float:					left;
text-align:			left;
} 

/* ************************ End Pagination styles ****************************************** */
/* ******************************************************************************* */

/* ************************ Trade Image Gallery styles *************************** */
/* ******************************************************************************* */

div.image_gallery {
  float: left;
  width: 120px;
  padding: 10px;
  }
  
div.image_gallery p {
   text-align: center;
   }
	 
/* ************************ End Trade Image Gallery styles *********************** */
/* ******************************************************************************* */