/*
	Stylesheet for Project Gent Sint Pieters

	@media      screen, projection
	@copyright  Netlash <http://www.netlash.com>
	@author     Johan Ronsse <johan@netlash.com>
 */

/*
	Reset
*/
body, form, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
ol, ul { list-style:none; }
img { border: 0; }
fieldset { margin: 0; padding: 0; border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }

/*
	General
*/

body {
	font: 300 62.5% Arial, sans-serif;
	background: #F5F4F5;
}

#container {
	width: 921px;
	padding: 5px 0 20px;
	margin: 0 auto;
}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}

blockquote {
	font-style: italic;
	padding: 0 0 0 20px;
}

/*
	Headings
*/

/* Image replacement of the h1 in header */

#header h1 {
	background: url(../images/projectgentsintpieters.gif) no-repeat 0 0;
	width: 221px;
	height: 76px;
	text-indent: -9000px;
	float: left;
	margin: 50px 0 0 15px;
}

#header h1 a {
	width: 221px;
	height: 76px;
	display: block;
	overflow: hidden;
}

/* Regular headings */

/* h1 in case it's used in FORK CMS */
h1 {
	font: 700 2.3em "DIN", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #E2007A;
	padding: 0 0 10px 0;
}

h2 {
	font: 700 1.9em "DIN", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #E2007A;
	margin: 0 0 10px 0;
	padding: 0 0 2px 0;
	border-bottom: 1px solid #CCC;
}

#home h2 {
	margin: 0;
	padding: 0;
	border: none;
}

h3 {
	font: 700 1.7em Arial, sans-serif;
	color: #E2007A;
	padding: 0 0 8px 0;
}

h4 {
	font: 300 1.5em Arial, sans-serif;
	color: #E2007A;
	padding: 0 0 8px 0;
}


#news h3 a {
	color: #E2007A;
	text-decoration: none;
}

span.small {
	font-size: 1.1em;
}

p {
	padding: 0 0 18px 0;
	line-height: 1.5;
	/*max-width: 475px;*/
	font-size: 1.2em;
	/*clear: both;*/
}

label {
	font-size: 1.2em;
}

ul {
	padding: 0 0 18px 18px;
}

ul li {
	line-height: 1.5;
	background: url(../images/liststyle.gif) no-repeat 3px 5px;
	padding: 0 0 0 15px;
	font-size: 1.2em;
}

ul li ul li {
	font-size: 1em;
}

ul#de_werken li div.linkbutton,
ul#de_werken2 li div.linkbutton {
	font-size: 0.84em;
}

/*
	Image classes
*/

img.left, img.alignleft {
	float: left;
	padding: 0 8px 8px 0;
}

img.right, img.alignright {
	float: right;
	padding: 0 0 8px 8px;
}

img.center, img.aligncenter, img.aligncentered {
	text-align: center;
	margin: 0 auto;
}

/*
	Links
*/

a:link {
	color: #005DBC;
	text-decoration: underline;
}

a:visited {
	color: #345A80;
	text-decoration: underline;
}

a:hover,
a:active,
a:focus {
	color: #003D7C;
	text-decoration: underline;
}

/*
	Eyecatcher (on homepage)
*/

#eyecatcher {
	background: #FFF;
	padding: 0 20px 15px 0;
	position: relative;
	bottom: 10px;
}

#eyecatcher-text {
	float: left;
	width: 390px;
	overflow: hidden;
}

#eyecatcher h2 {
	color: #262626;
	font: 300 1.8em "DIN", "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.375;
	float: left;
	margin: 28px 0 0 0;
	padding: 0 5px 0 20px;
}

/*
	Eyecatcher - alert (on homepage)
*/

#eyecatcher .alert {
	background: #262626;
	color: #FFF;
	float: left;
	line-height: 1.6;
	padding: 6px 24px 6px 12px;
	position: relative;
	left: 20px;
	margin: 15px 0 0 0;
	width: 332px;
}

#eyecatcher .alert .alert-text {
	float: left;
	width: 332px;
	line-height: 1.5;
	/* Fix duplicate characters bug*/
	_margin-right: -3px;
}


.alert span.corner {
	width: 10px;
	height: 10px;
	display: block;
	position: absolute;
}

.alert a:link,
#themes a:link {
	color: #C8C8C8;
	text-decoration: underline;
}

.alert a:visited,
#themes a:visited {
	color: #999;
	text-decoration: underline;
}

.alert a:hover,
.alert a:active,
.alert a:focus,
#themes a:hover,
#themes a:active,
#themes a:focus {
	color: #F5F5F5;
	text-decoration: underline;
}

/*
	Eyecatcher - main image (on homepage)
*/

#home-image {
	position: relative;
	width: 511px;
	height: 231px;
	float: left;
}

	#home-image img {
		display: block;
	}

#home-image span.corner {
	width: 10px;
	height: 10px;
	display: block;
	position: absolute;
}

/*
	Corners - grouped together
*/

span.topleft {
	background: url(../images/cornerswhite.png) no-repeat top left;
	top: 0; left: 0;
}

span.topright {
	background: url(../images/cornerswhite.png) no-repeat top right;
	top: 0; right: 0;
}

span.bottomleft {
	background: url(../images/cornerswhite.png) no-repeat bottom left;
	bottom: 0; left: 0;
}

span.bottomright {
	background: url(../images/cornerswhite.png) no-repeat bottom right;
	bottom: 0; right: 0;
}

/*
	News (on homepage)
*/

#home #news {
	width: 450px;
	float: left;
	padding: 0 35px 0 0;
}

.newsarticle {
	border-bottom: 1px solid #F5F5F5;
	margin: 0 0 10px 0;
}

#home .newsarticle h4 {
	padding: 0 0 2px 0;
	font-weight: 300;
	font-size: 1.2em;
}

.newsarticle h3 {
	padding: 0 0 2px 0;
	font-size: 1.5em;
}

.newsarticle span.date {
	padding: 0 0 10px 0;
}

#home .newsarticle span.date {
	padding: 0 0 4px 0;
}

#rightsection {
	width: 390px;
	float: left;
}

span.date {
	color: #ACACAC;
	font: 300 1.1em Arial, sans-serif;
	display: block;
	padding: 0 0 11px 0;
}

.upped {
	position: relative;
	top: -8px;
}

#respond {
	overflow: hidden;
	margin: 0 0 20px 0;
}

#respond #contact {
	float: left;
	width: 185px;
	padding: 0 10px 0 0;
}

#respond #newsletter {
	float: left;
	width: 185px;
}

/*
	FAQ
*/

dl#categories dt {
	float: left;
	width: 177px;
	clear: left;
	padding: 5px;
	min-height: 18px;
	height: auto !important;
	height: 18px;
	font-size: 1.2em;
}

dl#categories dd {
	float: left;
	width: 474px;
	padding: 5px;
	min-height: 18px;
	height: auto !important;
	height: 18px;
	font-size: 1.2em;
}

dl#categories dt.odd,
dl#categories dd.odd {
	background: #F5F4F5;
}

dl#categories dd {
	float: left;
	width: 474px;
	padding: 5px;
}

dl.faq dt,
dl.faq dd {
	width: 100%;
	padding: 0 0 8px 0;
}

dl.faq dt {
	font-weight: 700;
	padding: 0 0 2px 0;
	font-size: 1.2em;
}

/*
	Contact and newsletter (on homepage)
*/

#contact h2, #newsletter h2 {
	font-size: 1.5em;
	border-bottom: 1px solid #CCC;
	padding: 0 0 7px 0;
	margin: 0 0 10px 0;
}

#contact .titlebox h2 {
	border-bottom: none;
	margin: 0 0 2px;
	padding: 0;
}

#faq h2 {
	font-size: 1.5em;
}

#contact p {
	font-size: 1.1em;
	color: #8b8b8b;
	padding: 0 0 12px 0;
}

#contact p strong {
	color: #4a4949;
}

#newsletter p {
	color: #4a4949;
	font-size: 1.1em;
}

#newsletter input {
	display: block;
}

#newsletter input.input-text {
	width: 96%;
	color: #ABABAB;
}

#newsletter input.input-text:focus {
	color: black;
}

/*
	Sponsors (on every page)
*/

#sponsors {
	float: right;
	margin: 80px 20px 0 0;
	padding: 0;
}

#sponsors li {
	height: 43px;
	text-indent: -9000px;
	float: left;
	background: url(../images/sponsors_new.gif) no-repeat 0 0;
	padding: 0;
}

#sponsors li a {
	display: block;
	height: 45px;
	overflow: hidden;
}

#sponsors li#sponsor1,
#sponsors li#sponsor1 a {
	width: 95px;
	background-position: 0 0;
}

#sponsors li#sponsor2,
#sponsors li#sponsor2 a {
	width: 88px;
	background-position: -95px 0;
}
#sponsors li#sponsor3,
#sponsors li#sponsor3 a {
	width: 109px;
	background-position: -183px 0;
}
#sponsors li#sponsor4,
#sponsors li#sponsor4 a {
	width: 42px;
	background-position: -292px 0;
}
#sponsors li#sponsor5,
#sponsors li#sponsor5 a {
	width: 83px;
	background-position:  -334px 0;
}
#sponsors li#sponsor6,
#sponsors li#sponsor6 a {
	width: 62px;
	background-position: -418px 0;
}

/*
	Pagination
*/

div.pagination ul {
	float: right;
}

div.pagination ul li {
	float: left;
	background: #F5F5F5;
	margin: 0 5px 0 0;
	padding: 2px 4px;
	border: 1px solid #CCC;
	font-weight: 700;
}

div.pagination ul li a:link,
div.pagination ul li a:visited,
div.pagination ul li a:hover,
div.pagination ul li a:active {
	font-weight: 300;
	text-decoration: none;
}

div.pagination ul li.page-previous {
	margin: 0 20px 0 0;
}

div.pagination ul li.page-next {
	margin: 0 0 0 15px;
}

/*
	Header (on every page)
*/

#header {
	background: #E2007A url(../images/headerbg.gif) no-repeat 0 0;
	height: 140px;
	width: 921px;
	position: relative;
}

/*
	Search (on every page)
*/

#searchForm {
	padding: 0;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 300px;
	float: right;
}

#searchForm form,
#searchForm fieldset {
	float: right;
}

#content #searchForm {
	float: left;
	width: 100%;
	padding: 0 0 10px 0;
}

#searchForm #searchKeyword {
	width: 150px;
	background: #c8006c url(../images/input_bg.png) repeat-x;
	border: 1px solid #9f0056;
	font-size: 11px;
	_padding: 1px 2px;
	_height: 16px;
	_position: relative;
	_bottom: 2px;
}

	#searchForm #searchKeyword.focus,
	#searchForm #searchKeyword.keepFocus {
		background: #FFF url(../images/input_bg_hover.png) repeat-x;
	}

	#searchForm #searchKeyword:focus {
		background: #FFF url(../images/input_bg_hover.png) repeat-x;
	}

	#searchForm #searchSubmit {
		background: #53002d url(../images/submit_bg.png) repeat-x;
		border: 1px solid #630036;
		color: #FFF;
		font-weight: 700;
		font-size: 11px;
	}

		#searchForm #searchSubmit.focus,
		#searchForm #searchSubmit:focus {
			background: #9b0656 url(../images/submit_bg_hover.png) repeat-x;
		}

input, textarea, select {
	font-size: 1.2em;
	font-family: Arial, sans-serif;
}

div.searchresults {
	clear: both;
	padding-top: 12px;
}

/*
	Main
*/

#main {
	background: #FFF url(../images/contentbottom.png) no-repeat bottom center;
	padding: 0 0 40px 0;
	min-height: 300px;
	height: auto !important;
	height: 300px;
}

#home #main {
	background: #FFF;
	padding: 0;
}

/*
	Content
*/

#content {
	background: white;
	float: left;
	padding: 40px 0 0 110px;
	width: 671px;
	overflow: hidden;
	line-height: 1.5;
}

#home #content {
	background: white url(../images/contentbottom.png) no-repeat bottom center;
	clear: both;
	padding: 0 20px 10px;
	margin: 0 0 10px 0;
	width: auto;
	float: none;
}

/*
	Foto
*/

#foto {
	background: #FFF;
	overflow: hidden;
}

#foto img {
	float: left;
}

/*
	Titlebox
*/

.titlebox {
	border-bottom: 1px solid #CCC;
	margin: 0 0 10px 0;
	padding: 2px 0;
}

.titlebox h2 {
	float: left;
}

.titlebox div.linkbutton {
	float: right;
}

/*
	Titlebox - werken
 */

.werken_titlebox {

}

.werken_titlebox h3 {
	float: left;
	font: 700 1.4em "DIN", Arial, sans-serif
}

.werken_titlebox div.linkbutton {
	float: right;
}

/*
	De werken - corners rond img
*/

#de_werken, #de_werken2 {
	padding: 0;
}

#de_werken li a.img,
#de_werken2 li a.img {
	text-decoration: none;
	position: relative;
	height: 88px;
	width: 98px;
	display: block;
	float: left;
}

#de_werken li a span.corner,
#de_werken2 li a span.corner {
	width: 8px;
	height: 8px;
	display: block;
	position: absolute;
}

/*
	Linkbutton
*/

div.linkbutton span.corner {
	width: 8px;
	height: 8px;
	display: block;
	position: absolute;
	font-size: 1px;
	line-height: 1;
}

div.linkbutton a:link,
div.linkbutton a:visited {
	color: white;
	text-decoration: none;
	background: #717171;
	font-size: 1.1em;
	padding: 0 9px 0 10px;
	position: relative;
	bottom: 0;
	height: 19px;
	line-height: 19px;
	float: left;
	display: block;
}

div.linkbutton a:hover,
div.linkbutton a:active {
	background: #E2007A;
}

/*
	Linkbutton -alt
*/

div.linkbuttonalt span.topleft {
	background: url(../images/cornersgrey.png) no-repeat top left;
	top: 0; left: 0;
}

div.linkbuttonalt span.topright {
	background: url(../images/cornersgrey.png) no-repeat top right;
	top: 0; right: 0;
}

div.linkbuttonalt span.bottomleft {
	background: url(../images/cornersgrey.png) no-repeat bottom left;
	bottom: 0; left: 0;
}

div.linkbuttonalt span.bottomright {
	background: url(../images/cornersgrey.png) no-repeat bottom right;
	bottom: 0; right: 0;
}

div.linkbuttonalt a:link,
div.linkbuttonalt a:visited,
#themes div.linkbuttonalt a:link,
#themes div.linkbuttonalt a:visited {
	color: #717171;
	background: white;
	top: 0;
}

div.linkbuttonalt a:hover,
div.linkbuttonalt a:active,
#themes div.linkbuttonalt a:hover,
#themes div.linkbuttonalt a:active {
	background: #4a4a49;
	color: white;
}

/*
	Calendar
*/

#calendar table {
	width: 100%;
	margin: 0 0 18px 0;
}

table span.date {
	padding: 0;
}

#calendar tr.odd {
	background: #f5f4f5;
}

#calendar td {
	padding: 4px 8px;
	font: 300 1.2em/1.5 Arial, sans-serif;
	color: #4a4a4a;
}

#calendar td.border {
	border-bottom: 1px solid #EEE;
}

/*
	Newslettersignup
*/

#newsletterSignup li {
	list-style: none;
	background: none;
	padding: 0;
}


/*
	Themes
*/

#themes {
	background: url(../images/themesbg.gif) no-repeat 0 0;
	padding: 16px 20px 12px 20px;
	height: 136px;
}

#themes a:link {
	text-decoration: none !important;
	color: #EEE;
}

#themes a:visited {
	text-decoration: none !important;
	color: #DDD;
}

#themes a:hover {
	color: #FFF;
}

#themes .titlebox {
	border: none;
}

#themes .titlebox a {
	text-decoration: none;
}

#themes h2 {
	color: white;
}

#de_werken h3 a,
#de_werken2 h3 a {
	color: #E2007A;
	text-decoration: none;
}

h3.werken_ondertitel {
	font-size: 1.3em;
	font-weight: 300;
	color: #525252;
	background: #F5F5F5;
	position: relative;
	padding: 6px 3px;
	top: -10px;
	margin: 0 0 10px 0;
}

#themes ul {
	padding: 0;
}

#themes ul li {
	float: left;
	font-size: 1.1em;
	width: 71px;
	text-align: center;
	margin: 0 9px 0 0;
	padding: 0;
	background: none;
	line-height: 1;
}

#themes ul li a.img {
	text-decoration: none;
	position: relative;
	height: 64px;
	width: 71px;
	display: block;
	margin: 0 0 4px 0;
}

#themes ul li a span.corner {
	width: 10px;
	height: 10px;
	display: block;
	position: absolute;
}

#themes ul li a span.topleft {
	background: url(../images/cornersgrey.png) no-repeat top left;
	top: 0; left: 0;
}

#themes ul li a span.topright {
	background: url(../images/cornersgrey.png) no-repeat top right;
	top: 0; right: 0;
}

#themes ul li a span.bottomleft {
	background: url(../images/cornersgrey.png) no-repeat bottom left;
	bottom: 0; left: 0;
}

#themes ul li a span.bottomright {
	background: url(../images/cornersgrey.png) no-repeat bottom right;
	bottom: 0; right: 0;
}

/*
	Back to top
*/

p.backtotop {
	background: url(../images/arrowgreyup.jpg) no-repeat top center;
	text-align: center;
	padding: 15px 0 0 0;
	font-size: 1.1em;
}

/*
	De Werken
*/

div.boxcontent img {
	float: left;
}

#de_werken ul,
#de_werken2 ul {
	padding: 10px 0;
}

#de_werken li,
#de_werken2 li {
	padding: 0;
	background: none;
	width: 685px;
	overflow: hidden;
	padding: 0 0 12px 0;
}

#de_werken li ul,
#de_werken2 li ul {
	padding: 0;
}

#de_werken li ul li,
#de_werken2 li ul li {
	background: url(../images/liststyle.gif) no-repeat 3px 5px;
	padding: 0 0 0 15px;
	width: 515px;
}

div.boxcontentcontent {
	padding: 0 0 0 20px;
	float: left;
	width: 528px;
	overflow: hidden;
}

#de_werken2 div.boxcontentcontent {
	width: 636px;
}

div.boxtop {
	background: url(../images/werkenboxtop.gif) no-repeat 0 0;
	height: 12px;
}

div.boxcontent {
	background: url(../images/boxcontent.gif) repeat-y;
	padding: 3px 15px;
}

div.boxbottom {
	background: url(../images/werkenboxbottom.gif) no-repeat 0 0;
	height: 12px;
}

dl#messagesnews {
	padding: 0 0 18px 0;
}

dl#messagesnews dt,
dl#messagesnews dd {
	padding: 0 0 3px 0;
	float: left;
	line-height: 1.5;
	border-bottom: 1px solid #F5F5F5;
}

dl#messagesnews dt {
	clear: left;
	width: 110px;
	font-size: 1.1em;
	color: #ABABAB;
}

dl#messagesnews dd {
	width: 550px;
	font-size: 1.2em;
}

/*
	Footer
*/

#footer {
	padding: 0 20px 20px 0;
	margin: 22px 0 0 0;
}

#home #footer {
	margin: 0;
}

#footer ul {
	float: right;
	padding: 0;
}

#footer ul li {
	float: left;
	padding: 0 8px;
	border-right: 1px solid #DCDBDC;
	background: none;
	position: relative;
}

#footer ul li.last {
	border: none;
	padding-right: 0;
}

#footer ul li.last a {
	display: block;
	width: 33px;
}

#footer ul li.last img {
	position: absolute;
	top: -6px;
}

#footer a:link {
	color: #747474;
}

#footer a:visited {
	color: #999;
}

/*
	Success/error
*/

span.form-error {
	color: red;
	font-size: 1.1em;
	display: block;
	clear: both;
}

p.form-succes {
	border: 1px solid #EEE;
	padding: 5px 10px;
	background: #404040;
	font-weight: 700;
	margin: 0 0 20px 0;
	color: white;
}

/**
 * = Gallery
 */

.galleryalbum {
	width: 200px;
	float: left;
	text-align: center;
	margin: 0 15px 15px 0;
	min-height: 175px;
}

.galleryalbum p {
	padding: 0;
}

.galleryalbum a {
	text-decoration: none;
}

#content .galleryalbum span.description {
	color: #808080;
	font-size: 11px;
}

.galleryalbum img, .insidealbum img {
	padding: 5px;
	border: 1px solid #EEE;
}

.insidealbum ul {
	padding: 0;
	list-style: none;
}

.insidealbum ul li {
	float: left;
	margin: 0 15px 15px 0;
	padding: 0;
	background: none;
	font-size: 1em;
	text-align: center;
}
.insidealbum ul li a {
	text-decoration: none;
}

#content img {
	max-width: 671px;
}



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

#content #galleryimage ul {
	position: relative;
	padding: 0;
	margin: 15px 0 20px;
}

#content #galleryimage ul li {
	background: none;
	border: 1px solid #DDD;
	padding: 3px 6px;
}

.insidealbum p.backlink {
	width: 200px;
	text-align: center;
	border: 1px solid #DDD;
	padding: 3px 6px;
	margin: 0 auto 12px;
}

#content #galleryimage ul li.previousimage {
	position: absolute;
	left: 0;
	top: 0;
}

#content #galleryimage ul li.nextimage {
	position: absolute;
	right: 0;
	top: 0;
}

#content #galleryimage ul li.currentimage {
	margin: 0 auto;
	width: 140px;
	text-align: center;
}

/**
 * Clearfix
 * @see http://www.positioniseverything.net/easyclearing.html
 * @see http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/
 * @see http://www.stuffandnonsense.co.uk/archives/clearing_floats_without_structural_markup_in_ie7.html
 */

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





/*
    Forms
*/

/* Modify input[type="text"] and textareas */

.input-text,
.inputPassword,
textarea,
input[type="text"],
input[type="password"] {

	background: #FFF url(../images/ds.png) repeat-x;
	border: 1px solid #BBB;
	border-color: #888 #BABABA #BABABA #CDCDCD;
	font-family: Arial, sans-serif;
	font-size: 12px;

	/* @inc .rc */
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;

	/* Transition */
	-webkit-transition: background-color 0.28s linear;

}

/* Repeat font statement since IE6 does not "get" previous selector */
textarea {
	font-family: Arial, sans-serif;
}

/* Disabled fields */
input.input-text[disabled="disabled"],
input.inputPassword[disabled="disabled"],
input.disabled {
	background: #EEE;
	color: #666 !important;
}

.input-text,
input[type="text"],
.inputPassword,
input[type="password"] {
	padding: 3px 2px;
	color: #202020;
}

	/* Fix alignment in Chrome/Saf */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		.input-text,
		input[type="text"],
		.inputPassword,
		input[type="password"] {
			height: 14px;
		}
	}

	.input-text:focus,
	input[type="text"]:focus,
	.inputPassword:focus,
	input[type="password"]:focus,
	textarea:focus,
	.input-text.focus,
	input[type="text"].focus,
	.inputPassword.focus,
	input[type="password"].focus,
	textarea.focus {
		color: #000;
		border-color: #6BA1CB;

		/* @inc .boxShadow */
		box-shadow: 0 0 3px #6BA1CB;
		-moz-box-shadow: #6BA1CB 0 0 3px;

	}

/*
	Inputs with a .code class get a monospaced font
*/

input.code,
textarea.code {
	font-family: "Menlo", "Monaco", "Courier New", monospace;
	font-size: 11px;
}

/* Selects should be left alone (not stylable without troubles) */
select {
	/* Nothing */
	font-family: Arial, sans-serif;

}

/* Input type file should be left alone */
.inputFile {
	font-size: 11px;
}

/* Input submit gets replaced by a button, yet some styles here for better buildup */

.input-submit,
input[type="submit"] {
	font-family: Arial, sans-serif;
	border: 1px solid #999;
	background: #ececec url(../images/button_bg.png) repeat-x;
	color: #202020;
	padding: 0 6px;
	font-size: 1.1em;

	/* @inc .rc */
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;

	/* Firefox */
	height: 22px;
	padding-bottom: 2px;
	vertical-align: middle;

}

input[type="submit"]:hover,
input[type="submit"]:focus {
	border-color: #6BA1CB;
	color: #005DAB;

	/* @inc .boxShadow */
	box-shadow: 0 0 3px #6BA1CB;
	-webkit-box-shadow: 0 0 3px #6BA1CB;
	-moz-box-shadow: #6BA1CB 0 0 3px;
}

	/*
		Focus outline; Mozilla specific since Safari implements this right
	*/
	@-moz-document url-prefix() {

		.input-text,
		.inputPassword {
			height: 14px;
			line-height: 14px;
		}

	}

form p {
	margin: 0 0 12px 0;
	clear: both;
}

	/* Act as <p> e.g. for wrapping label+textarea */
	form div.section {
		margin: 0 0 12px 0;
		clear: both;
	}

	form p,
	form div.section {
		zoom: 1;
	}

	form p:after,
	form div.section:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

.helpTxt {
	display: block;
	font-size: 11px;
	color: #808080;
}

	.helpTxt a {
		font-weight: 700;
	}

form .inputList {
	padding: 0;
}

	form .horizontal .inputList {
		float: left;
	}

form .inputList li {
	position: relative;
	padding: 0 0 4px 24px;
	_right: 24px;
}

	form .inputList li li {
		padding-left: 0;
	}

form .horizontal .inputList label {
	float: none;
	width: auto;
}

	form .inputList li .inputRadio,
	form .inputList li .inputCheckbox,
	form .inputList li input[type="radio"],
	form .inputList li input[type="checkbox"] {
		position: absolute;
		left: 0;
		top: 0;
	}

/*
	Input widths by ID
*/

#name { width: 200px; }
#home #email { width: 168px; margin: 0 0 5px; }
#email { width: 300px; }
#message { width: 400px; }
#streetno { width: 30px; }
#phone { width: 150px; }
#address { width: 270px; }
#postcode { width: 50px; }

/*
	Presentational classes
*/

.mute {
	color: #808080;
}

/*
	The Magic One Liner
	----
	General method to wrap form and other elements on one line
	Gets cleared see clearing section of this css file
*/

.oneLiner p,
.oneLiner .buttonHolder,
.oneLiner .floater {
	float: left;
	margin-right: 2px;
}

	.section .oneLiner {
		float: left;
	}

	.oneLiner p {
		padding-bottom: 0;
		margin-bottom: 0;
		line-height: 22px;
		clear: none;
		width: auto;
		/* Same height as button height */
	}

		.horizontal .oneLiner .helpTxt {
			padding: 0 !important;
		}

	.oneLiner select {
		margin-top: 1px;
		margin-right: 3px;
	}

/* "Fake" label */
form p.label {
	padding-bottom: 0;
	border: none;
}

form p label {
	display: block;
}

form textarea {
	width: 300px;
	display: block;
}

form .horizontal textarea {
	width: auto;
}

form ul .helpTxt {
	padding: 0 0 0 24px;
}

form .horizontal p label {
	display: inline;
}
form .horizontal .helpTxt { display: block; padding: 1px 0 1px 106px; }

form .labelWidthLong .helpTxt { padding: 1px 0 1px 145px; }

form .horizontal label,
form .horizontal p.label { float: left; width: 105px; padding-right: 10px; line-height: 17px; padding: 2px 0;}

	/* Alternate label widths */

	form .labelWidthLong label,
	form .labelWidthLong p.label {
		width: 145px;
	}

form .horizontal p.label {
	margin: 0;
}

form .spacing,
form .horizontal span.formError {
	padding-left: 105px;
}

form .labelWidthLong span.formError  {
	padding-left: 145px;
}

form abbr { cursor: help; }

form .block { display: block !important; }
form p:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
form p { zoom: 1; }

/*
	Breadcrumb
*/

#breadcrumb {
	font-size: 1.1em;
	color: #666;
	margin: 0 0 6px;
}

/*
	Navigation
*/

#navigation {
	clear: both;
	padding-top: 20px;
	height: 54px;
	background: #FFF url(../images/navbg.gif) no-repeat 0 0;
	position: relative;
	z-index: 24;
}

.sf-menu,
#navigation ul * {
	margin: 0;
	padding: 0;
	list-style: none;
}

#navigation ul {
	line-height: 1;
	position: relative;
	padding: 0 0 0 20px;
}

#navigation ul ul {
	position: absolute;
	top: -999em;
	width: 200px;
	padding: 0;
}

#navigation ul ul li {
	width: 100%;
}

#navigation ul li:hover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}

#navigation ul li {
	float: left;
	position: relative;
}

#navigation ul a {
	display: block;
	position: relative;
}

#navigation ul li:hover ul,
#navigation ul li.sfHover ul {
	z-index: 9;
	left: 0;
	top: 32px; /* match top ul list item height */
	*top: 33px; /* IE gets "lesser" version */
}

#navigation ul li:hover li ul,
#navigation ul li.sfHover li ul {
	top: -999em;
}

#navigation ul li li:hover ul,
#navigation ul li li.sfHover ul {
	left: 199px; /* match ul width */
	top: -1px;
}

#navigation ul ul li li:hover ul,
#navigation ul ul li li.sfHover ul {
	left: 200px; /* match ul width */
	top: 0;
}

#navigation ul li li:hover li ul,
#navigation ul li li.sfHover li ul {
	top: -999em;
}

#navigation ul li li li:hover ul,
#navigation ul li li li.sfHover ul {
	left: 10em; /* match ul width */
	top: 0;
}

/* Demo skin */

#navigation ul {
	float: left;
}

/* Level 1 */

/* Regular */
#navigation ul a:link,
#navigation ul a:visited {
	line-height: 1;
	font-size: 14px;
	padding-left: 13px;
	float: left;
	text-decoration: none;
	font-weight: 700;
	color: #555;
	background: url(../images/pgsp_nav.png) no-repeat 0 0;
}

#navigation ul a:link b,
#navigation ul a:visited b {
	background: url(../images/pgsp_nav.png) no-repeat top right;
	display: block;
	padding: 10px 13px 9px 0;
}

	#navigation b b {
		padding: 0 !important;
	}

/* Hover when there is no subnav (e.g. for home)*/
#navigation ul a:hover,
#navigation ul li:hover a:link,
#navigation ul li:hover a:visited,
#navigation ul a.sfHover,
#navigation ul li.sfHover a:link,
#navigation ul li.sfHover a:visited {
	background: #FFF;
	outline: 0;
	background: url(../images/pgsp_nav.png) no-repeat 0 -33px;
}

#navigation ul a:hover b,
#navigation ul li:hover a:link b,
#navigation ul li:hover a:visited b,
#navigation ul a:hover b,
#navigation ul li.sfHover a:link b,
#navigation ul li.sfHover a:visited b {
	background: url(../images/pgsp_nav.png) no-repeat right -33px;
}

/* Selected state @todo */
#navigation ul li.selected a:link,
#navigation ul li.selected a:visited {
	color: #E2007A;
}

/* Hover when there is a subnav */
#navigation ul a.sf-with-ul:hover,
#navigation ul li:hover a.sf-with-ul:link,
#navigation ul li:hover a.sf-with-ul:visited,
#navigation ul li.sfHover a.sf-with-ul:link,
#navigation ul li.sfHover a.sf-with-ul:visited {
	background: #FFF;
	outline: 0;
	background: url(../images/pgsp_nav.png) no-repeat 0 -66px;
}

#navigation ul a.sf-with-ul:hover b,
#navigation ul li:hover a.sf-with-ul:link b,
#navigation ul li:hover a.sf-with-ul:visited b,
#navigation ul li.sfHover a.sf-with-ul:link b,
#navigation ul li.sfHover a.sf-with-ul:visited b {
	background: url(../images/pgsp_nav.png) no-repeat right -66px;
}

/* 2nd level */
#navigation ul li.sfHover a.sf-with-ul {
	z-index: 100;
}

#container #navigation ul ul {
	border-top: 1px solid #9C9C9C;
}

#container #navigation ul ul {
	z-index: 50;
	-moz-box-shadow: 1px 10px 15px rgba(99,104,133,0.37);
	-webkit-box-shadow: 1px 10px 15px rgba(99,104,133,0.37);
	-o-box-shadow: 1px 10px 15px rgba(99,104,133,0.37);
	box-shadow: 1px 10px 15px rgba(99,104,133,0.37);
}

#container #navigation ul ul li a:link,
#container #navigation ul ul li a:visited {
	float: none;
	line-height: 1.2;
	color: #005DBC;
	border: none;
	background: url(../images/pgsp_nav_2.png) 0 0;
	display: block;
	cursor: pointer;
}

#container #navigation ul ul li a:link b,
#container #navigation ul ul li a:visited b {
	background: url(../images/pgsp_nav_2.png) top right;
	display: block;
	padding: 10px 13px 10px 0;
}

#container #navigation ul li li a:hover,
#container #navigation ul li li.sfHover a {
	background: url(../images/pgsp_nav_2.png) 0 -99px;
}

	#container #navigation ul li li a:hover b,
	#container #navigation ul li li.sfHover a b {
		background: url(../images/pgsp_nav_2.png) right -99px;
	}

		#container #navigation ul ul li a:link b b,
		#container #navigation ul ul li a:visited b b {
			background: none;
		}

/* Ender */
#navigation ul li .ender {
	display: block;
	height: 22px;
	padding: 0;
	line-height: 1px;
	font-size: 1px;
	background: url(../images/ender.png);
}

/* 3rd level */

#container #navigation ul ul ul li a:link,
#container #navigation ul ul ul li a:visited {
	background: url(../images/pgsp_nav_2.png) 0 0;
}

#container #navigation ul ul ul li a:link b,
#container #navigation ul ul ul li a:visited b {
	background: url(../images/pgsp_nav_2.png) top right;
	font-size: 12px;
	font-weight: 400;
	padding-top: 6px;
	padding-bottom: 6px;
}

#container #navigation ul ul ul li a:hover {
	background: url(../images/pgsp_nav_2.png) 0 -198px;
}

#container #navigation ul ul ul li a:hover b {
	background: url(../images/pgsp_nav_2.png) right -198px;
	color: #FFF;
}

#navigation ul li {
	background: none;
	margin-right: 2px;
}

#navigation ul li li {
	background: #FFF;
	margin: 0;
}

#navigation ul li li li {
	background: #9AAEDB;
}

/* Arrows */
#navigation ul a.sf-with-ul {
	min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}

ul .sf-sub-indicator {
	width: 0;
	height: 0;
	display: block;
	text-indent: -999em;
	display: none;
}

ul ul .sf-sub-indicator {
	position: absolute;
	display: block;
	right: .75em;
	top: 1.05em; /* IE6 only */
	width: 10px;
	height: 10px;
	text-indent: -999em;
	overflow: hidden;
	background: url(../images/arrows-000000.png) no-repeat -10px -100px;
	/* Gif alternative */
	_background: url(../images/arrows-000000.gif) no-repeat -10px -100px;
}

a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top: .8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}

/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
#navigation ul ul .sf-sub-indicator { background-position:  -10px 0; }
#navigation ul ul a > .sf-sub-indicator { background-position:  0 0; }

/* apply hovers to modern browsers */
#navigation ul ul a:focus > .sf-sub-indicator,
#navigation ul ul a:hover > .sf-sub-indicator,
#navigation ul ul a:active > .sf-sub-indicator,
#navigation ul ul li:hover > a > .sf-sub-indicator,
#navigation ul ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}