/*-----------------------------------------------------------------
File: layout.css
Version: 1.0
Date: 17/01/07
Author: Michael Van Dorth
Email: m.vandorth@iberianmedia.com
Description: This is the main layout style sheet that contains all
of the layout rules for the website. It is also the main CSS file
that is called in directly from the XHTML markup and calls in all
other sub CSS files.
-----------------------------------------------------------------*/


/* IMPORT EXTERIOR CSS FILES
-----------------------------------------------------------------*/
@import url(typography.css);
@import url(colors.css);
@import url(languages.css);


/* NORMALIZE BROWSER ELEMENTS
-----------------------------------------------------------------*/
/* Normalize margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	margin : 0; padding: 0;	
}
/* Normalize font-size and weight for headers */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
/* Remove list-style from lists */
ul, ol, li {
	list-style-type: none;
}
/* Normalize font-weight and font-style */
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
/* Remove browser based table border spacing */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Remove borders from images */
img {
	border: 0;
}
/* Left align text in caption and th */
caption, th {
	text-align: left;
}
/* Remove quotation marks from q */
q:before, q:after {
	content: '';
}


/* BASIC LAYOUT RULES
-----------------------------------------------------------------*/

#wrapper {
	width: 70%;
	/* HACK: IE6 Dynamic Expression to set the width */
	width: expression(document.body.clientWidth < 940 ? "640px" : document.body.clientWidth > 1250 ? "870px" : "70%");
	margin: 0px auto 0px auto;
	min-width: 640px;
	max-width: 870px;
}
.clear {
	clear: both;
}

/* BRANDING */
#branding {
	width: 100%;
	float: left;
	position: relative;
}
#branding #logo {
	text-indent: -9999px;
}
#branding #tagLine {
	text-indent: -9999px;
}
#branding #languageList {
	position: absolute;
	top: 0px;
	right: 0px;
}
#branding #languageList li {
	float: left;
	margin-left: 1px;
	background-image: url(../graphics/generic/tab_background.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#branding #languageList li a {
	display: block;
	padding: 0px 19px 0px 19px;
	line-height: 22px;
	background-image: url(../graphics/generic/tab_cap.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#branding #image {
	border-style: solid;
	border-width: 10px;
	border-color: #FFF;
	clear: both;
	height: 186px;
	background-repeat: no-repeat;
	background-position: center center;
}
#branding #secondaryNavigation {
	position: absolute;
	left: 0px;
}
#branding #secondaryNavigation li {
	float: left;
	margin-right: 1px;
	background-image: url(../graphics/generic/tab_background.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#branding #secondaryNavigation li a {
	display: block;
	padding: 0px 15px 0px 15px;
	line-height: 22px;
	background-image: url(../graphics/generic/tab_cap.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#branding #secondaryNavigation li.selected {
	background-image: url(../graphics/generic/tab_selected_background.gif);
}
#branding #secondaryNavigation li.selected a {
	background-image: url(../graphics/generic/tab_selected_cap.gif);
}

/* PRIMARY CONTENT */
#primaryContent {
	float: left;
	overflow: hidden;
}
#primaryContent #image {
	border-style: solid;
	border-width: 10px;
	border-color: #FFF;
	clear: both;
	height: 300px;
	background-repeat: no-repeat;
	background-position: center center;
	margin-top: 40px;
}
#primaryContent h3 {
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: left top;
	height: 24px;
	margin: 20px 0px 15px 0px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
#primaryContent h3.large {
	height: 31px;
	margin: 40px 0px 15px 0px;
}
#primaryContent h3.noImage {
	text-indent: 0px;
	background-image: none;
	height: auto;
	margin: 20px 0px 15px 0px;
	border-bottom-style: none;
}
#primaryContent h4 {
	margin-bottom: 15px;
}
#primaryContent p {
	margin: 0px 0px 15px 0px;
}
#primaryContent .imageGallery {
	margin: 0px 0px 15px 0px;
	padding-bottom: 15px;
}
#primaryContent .imageGallery li {
	float: left;
	margin: 0px 5px 5px 0px;
}
#primaryContent .imageGallery li a {
	display: block;
	width: 95px;
	height: 60px;
	text-indent: -9999px;
	border-style: solid;
	border-width: 2px;
	background-repeat: no-repeat;
	background-position: center center;
}
#primaryContent .dataList li {
	margin-bottom: 10px;
}
#primaryContent .dataList li h4 {
	margin: 0px;
}
#primaryContent .dataList li.rsPaging {
	text-align: center;
	padding-top: 10px;
	border-top-style: solid;
	border-top-width: 1px;
}

/* Contact Form */
#primaryContent .contactForm {
	margin: 20px 0px 20px 0px;
	background-image: url(../graphics/generic/form_background_topLeft.gif);
	background-repeat: no-repeat;
}
#primaryContent .contactForm fieldset {
	border-style: solid;
	border-width: 1px;
	margin: 20px;
	padding-bottom: 10px;
}
#primaryContent .contactForm h4, #primaryContent .contactForm h5, #primaryContent .contactForm legend, #primaryContent .contactForm ul, #primaryContent .contactForm p {
	margin-left: 20px;
	margin-right: 20px;
}
#primaryContent .contactForm h4 {
	background-image: url(../graphics/generic/form_background_topRight.gif);
	background-repeat: no-repeat;
	background-position: right top;
	margin-right: 0px;
	padding-top: 20px;
}
#primaryContent .contactForm legend {
	padding-bottom: 10px;
}
#primaryContent .contactForm p {
	margin-bottom: 10px;
}
#primaryContent .contactForm label {
	margin-bottom: 0px;
	padding-left: 7px;
	padding-right: 7px;
	width: 96px;
	display: block;
	background-image: url(../graphics/generic/form_labelTab_default.gif);
	background-repeat: no-repeat;
	background-position: center top;
} 
#primaryContent .contactForm input {
	width: 100%;
}
#primaryContent .contactForm textarea {
	width: 100%;
	height: 200px;
}
#primaryContent .contactForm input, #primaryContent .contactForm textarea {
	border-style: solid;
	border-width: 1px;
	padding-top: 2px;
	padding-left: 2px;
	padding-bottom: 3px;
	margin-top: -1px;
}
#primaryContent .contactForm textarea {
	margin-top: -1px;
}
#primaryContent .contactForm select {
	display: block;
}
#primaryContent .contactForm input.button {
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: auto;
	border-style: none;
}
#primaryContent .contactForm h5.alert {
	line-height: 22px;
	padding-left: 27px;
	background-image: url(../graphics/generic/form_icon_alert.gif);
	background-repeat: no-repeat;
	background-position: left center;
	margin-left: 40px;
}
#primaryContent .contactForm ul.alert {
	margin-left: 67px;
}
#primaryContent .contactForm p.alert label {
	background-image: url(../graphics/generic/form_labelTab_alert.gif);
}
#primaryContent .contactForm #submissionArea {
	background-image: url(../graphics/generic/form_background_bottomLeft.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	margin: 0px;
	border: none;
	padding-bottom: 0px;
	text-align: center;
}
#primaryContent .contactForm #submissionArea p.required {
	background-image: url(../graphics/generic/form_background_bottomRight.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin-bottom: 0px;
	margin-right: 0px;
	padding-bottom: 20px;
	text-align: left;
}

/* SECONDARY CONTENT */
#secondaryContent {
	float: right;
	overflow: hidden;
	background-image: url(../graphics/generic/background_secondaryContent.gif);
	background-repeat: no-repeat;
	background-position: 1px top;
	padding-bottom: 20px;
}
#secondaryContent h3 {
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: left top;
	height: 24px;
	margin: 20px 0px 15px 0px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	clear: both;
}
#secondaryContent h3, #secondaryContent .previewList {
	margin-left: 20px;
	margin-right: 20px;
	clear: both;
}
#secondaryContent .previewList li {
	margin-bottom: 10px;
}
#secondaryContent .previewImage {
	height: 70px;
	border-style: solid;
	border-width: 2px;
	margin-bottom: 10px;
	background-repeat: no-repeat;
	background-position: center center;
}
#secondaryContent .previewList li.viewMore {
	border-top-style: solid;
	border-top-width: 1px;
	padding: 15px 0px 0px 15px;
}
#secondaryContent .previewList li.viewMore a {
	display: block;
	padding: 0px 0px 0px 40px;
	background-image: url(../graphics/generic/previewList_viewMore_Icon.gif);
	background-repeat: no-repeat;
	background-position: left center;
	height: 40px;
}
#secondaryContent .dataList {
	margin: 0px 20px 20px 20px;
	clear: both;
}
#secondaryContent .dataList li {
	padding: 0px 0px 0px 20px;
	margin-bottom: 10px;
	background-image: url(../graphics/generic/unorderedListDot.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#secondaryContent .dataList dd {
	margin-bottom: 10px;
}

/* SAWDAYS REVIEW */
#sawdays {
	margin: 20px;
	clear: both;
}

/* UK SUNDAY TIMES REVIEW */
#timesonline {
	margin: 20px;
	clear: both;
}

/* SITE INFO */
#siteInfo {
	clear: both;
	border-top-style: solid;
	border-top-width: 1px;
	text-align: center;
	padding: 20px 0px 40px 0px;
}
#siteInfo ul li {
	display: inline;
	padding: 0px 9px 0px 11px;
	border-left-style: solid;
	border-left-width: 1px;
}
#siteInfo ul li.first {
	border-left-style: none;
}


/* INDEX LAYOUT RULES
-----------------------------------------------------------------*/

.index {
	background-image: url(../graphics/generic/background_index.gif);
	background-repeat: repeat-y;
	background-position: 70% 0;
}

/* BRANDING */
.index #branding #logo {
	float: left;
	width: 256px;
	height: 58px;
	background-image: url(../graphics/generic/logo_large.gif);
	background-repeat: no-repeat;
	margin: 35px 0px 10px 0px;
}
.index #branding #tagLine {
	float: right;
	width: 261px;
	height: 27px;
	background-repeat: no-repeat;
	margin: 58px 0px 10px 0px;
}
.index #branding #primaryNavigation {
	width: 100%;
	text-align: center;
	padding-bottom: 10px;
}
.index #branding #primaryNavigation li {
	display: inline;
}
.index #branding #primaryNavigation li a {
	padding: 0px 0px 0px 23px;
	background-image: url(../graphics/generic/separator_dot_grey.gif);
	background-repeat: no-repeat;
	background-position: 10px center;
}
.index #branding #primaryNavigation li.first a {
	padding: 0px 0px 0px 0px;
	background-image: none;
}
.index #branding #secondaryNavigation {
	top: 293px;
}

/* PRIMARY CONTENT */
.index #primaryContent {
	width: 67%;
}

/* SECONDARY CONTENT */
.index #secondaryContent {
	width: 30%;
}


/* PAGE LAYOUT RULES
-----------------------------------------------------------------*/

.page {
	background-image: url(../graphics/generic/background_index.gif);
	background-repeat: repeat-y;
	background-position: 70% 0;
}

/* BRANDING */
.page #branding {
	background-image: url(../graphics/generic/background_branding.gif);
	background-repeat: repeat-x;
	background-position: 0px 56px;
}
.page #branding.page {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.page #branding #logo {
	width: 194px;
	height: 42px;
	background-image: url(../graphics/generic/logo_small.gif);
	background-repeat: no-repeat;
	margin: 35px 0px 10px 0px;
}
.page #branding #tagLine {
	width: 377px;
	height: 11px;
	background-repeat: no-repeat;
	position: absolute;
	top: 35px;
	right: 0px;
}
.page #branding #primaryNavigation {
	position: absolute;
	top: 61px;
	right: 0px;
}
.page #branding #primaryNavigation li {
	display: inline;
}
.page #branding #primaryNavigation li a {
	padding: 0px 0px 0px 13px;
	background-image: url(../graphics/generic/separator_dot_lightGrey.gif);
	background-repeat: no-repeat;
	background-position: 4px center;
}
.page #branding #primaryNavigation li.first a {
	padding: 0px 0px 0px 0px;
	background-image: none;
}

/* PRIMARY CONTENT */
.page #primaryContent {
	width: 67%;
}
.page #primaryContent h3.itemTitle {
	margin: 50px 0px 15px 0px;
}

/* SECONDARY CONTENT */
.page #secondaryContent {
	width: 30%;
}
.page #secondaryContent .previewList li {
	margin-bottom: 20px;
}
.page #secondaryContent .imageGallery {
	margin: 0px 20px 15px 20px;
}
.page #secondaryContent .imageGallery li {
	float: left;
	margin: 0px 5px 5px 0px;
}
.page #secondaryContent .imageGallery li a {
	display: block;
	width: 45px;
	height: 45px;
	text-indent: -9999px;
	border-style: solid;
	border-width: 2px;
	background-repeat: no-repeat;
	background-position: center center;
}