/* CSS Document */

.html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
}

table, caption, tbody, tfoot, thead, tr, th, td {
	vertical-align: top;
}



/* remember to define focus styles! */

:focus {
	outline: 0;
}

ol, ul {
	list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,

q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

div, a {overflow: hidden;} /*consider these to get around IE itallics bug, also solves strings and urls too long for their containers */

input.button {overflow:visible} /* resolves padding issues on IE submit buttons - must have class button otherwise messes up input fields in ie6!!*/


body {
	background: url(../_images/template/bkgTop.jpg) 0 0 repeat-x #fff;
	font-family: Helvetica;
	font: 62.5% Helvetica, sans-serif; /*creates a 10px base which allows all subsequent font sizes to be easily calculated*/
}

#uberContainer {
	width: 100%;
}

#content {
	background: url(../_images/template/bkgUber.gif) 0 0 repeat-x #fff;
	width: 100%;
}

h2 span {
	visibility: hidden;
}

.clearFloat {
	clear: both;
	display: block;
	margin: 0;
	padding: 0;
	height: 0;
	line-height: 1px;
	font-size: 1px;
	visibility: hidden;
}

.noMargin {margin: 0!important;}

.marginTop20 {
	margin-top: 20px;
}
.marginBottom10, .marginBottom {margin-bottom: 10px;}
.marginBottom40 {margin-bottom: 40px;}

.horizList li {
	float: left;
	background-image: none;
	padding-left: 0;
	margin: 0;
	}

.horizList li a {
	float: left;
	display: block;
	}	

strong {font-weight: 700;}

#mainCol {
	background: #fff;
	width: 720px;
	float: left;
	padding: 20px 0 20px 30px;
	display: inline;
	margin: 2px 0 20px 0;
	border-left: 2px solid #ccc;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
}

#header {
	margin: 0 auto;
	width: 810px;
}

/* footer */

#footer {
	margin: 0 auto 20px 0;
	width: 810px;
}

#footer p {
	color: #ccc;
}



#contentPosition {
	margin: 0 auto;
	width: 814px;
}

/* xcol */

#xCol {
	width: 60px;
	/*background: url(../_images/floral.png) 0 0 no-repeat;*/
	float: left;
	height: 296px;
	margin-top: 2px;
}

#xCol ul {
	width: 36px;
}

#xCol ul li {
	margin-bottom: 20px;
}

#xCol ul li a span {
	visibility: hidden;
}

#xCol ul li a {
	width: 36px;
	height: 32px;
	display: block;
	float: left;
	text-decoration: none;
	margin: 0 0 10px 10px;
}

#xCol ul li.twitter a {background: url(../_images/icons/iconTwitter.png) 0 0 no-repeat;}
#xCol ul li.flickr a {background: url(../_images/icons/iconFlickr.png) 0 0 no-repeat;}
#xCol ul li.delicious a {background: url(../_images/icons/iconDelicious.png) 0 0 no-repeat; margin-left: 13px;}
#xCol ul li.lastFM a {background: url(../_images/icons/iconLastFM.png) 0 0 no-repeat;}
#xCol ul li.skype a {background: url(../_images/icons/iconSkype.png) 0 0 no-repeat;}
#xCol ul li.linkedin a {background: url(../_images/icons/iconLinkedin.png) 0 0 no-repeat; margin-left: 12px;}

/* logo */
#logo {
	margin: 4px 0;
}

#logo span {
	visibility: hidden;
}

#logo a {
	text-decoration: none;
	background: url(../_images/template/siteLogo2.png) 0 0 no-repeat;
	width: 475px;
	height: 54px;
	display: block;
}

/* --- mainNav --- */

#mainNav {
	margin: 0;
}

#mainNav ul li {
	margin: 0 15px 0 0;
	font-size: 1.8em;
}

#mainNav ul li a {
	text-decoration: none;
	color: #fff;
	font-weight: 700;
}

#mainNav ul li a:hover, #mainNav ul li a.on {
	color: #B2CBE6;
}

/* --- banner --- */

#banner {
	clear: both;
	margin-bottom: 30px;
}

/* --- about --- */

#aboutBox {
	clear: both;
	float: left;
	background: url(../_images/aboutBG.gif) 0 0 repeat-x;
	width: 206px;
	height: 300px;
	padding: 11px 12px;
	margin-bottom: 30px;
}

#aboutBox h2 {
	background: url(../_images/h2BGAbout.gif) 0 0 no-repeat;
}

/* --- module -- */

.content {
	margin-bottom: 20px;
}

.content a {
	color: #95ABC4;
	text-decoration: none;
}

.content a:hover {
	background-color: #B7CEE7;
	text-decoration: none;
	color: #fff;
}

.content p {
	color: #666;
	font-size: 1.2em;
	margin: 0 50px 10px 0;
	clear: both;
}

.folioModule {
	margin-bottom: 20px;
	clear: both;
	width: 683px;
}

.folioModule img {
	float: left;
	width: 400px;
	margin-right: 15px;
}

.folioModule p, .folioModule div {
	float: left;
	color: #666;
	width: 250px;
	font-size: 1.2em;
}

.folioModule div h3 {
	margin-bottom: 4px;
	font-size: 1.4em;
}

.folioModule div h3 span{
	font-size: .7em;
}

.folioModule div p {
	float: none;
	color: #666;
	width: auto;
	font-size: 1em;
	margin-bottom: 8px;
}

.folioModule div ul li {
	padding-left: 10px;
	background: url(../_images/bullet.gif) 0 4px no-repeat;
	margin-bottom: 4px;
}

/* warning in W3C validator, but this is fine, the text also 
changes colour in each state so doesnt blend with BG colour */
.folioModule div a, .errorPage a {
	color: #81A7CF;
}

.folioModule div a:hover, .folioModule div a:active, .errorPage a:hover, .errorPage a:active {
	background: #81A7CF;
	color: #fff;
	text-decoration: none;
}

.outline {
	width: 685px;
}

.outline img {
	border: 1px solid #B2CBE6;
}

/* photography */

.photography a img {
	margin: 0!important;
	padding: 0!important;
	width: 115px;
	float: left;
}

.photography img.empty {
	margin: 0!important;
	padding: 0!important;
	width: 115px;
	float: left;
	border: 4px solid #fff;
}

.photography a {
	border: 4px solid #fff;
	margin: 0!important;
	display: block;
	float: left;
	padding: 0!important;
}

.photography a:hover {
	text-decoration: none!important;
	background-color: #000;
	border: 4px solid #b7cee7;
}


/* form */

#form {
	margin-top: 20px;
	}

.frmRow {
	clear: both;
	margin-bottom: 12px;
}

.field {
	border: 1px solid #e0e0e0;
	width: 300px;
	font: 1.2em "Arial";
	height: 16px;
	float: left;
	}
	
#form label {
	width: 8em;
	display: block;
	font-size: 1.2em;
	float: left;
	text-align: right;
	padding-right: 5px;
	}

#form .button {
	border: none;
	background: #B7CEE7;
	color: #fff;
	height: 18px;
	line-height: 18px;
	margin-left: 102px;
	padding-left: 4px;
	padding-right: 4px;
	}
	
#form .button:hover {
	border: none;
	background: #333;
	color: #fff;
	height: 18px;
	line-height: 18px;
	}

.red {
	color:#FF0000!important;
	}
	
textarea {
	height: 200px!important;
	float: left;
	}
	
#infoArea {
	/*background: #e2ebf5;*/
	background: #f0f5fa;
	padding: 10px 10px 5px 10px;
	color: #666;
	/*border: 3px solid #98b4d2;*/
	border: 3px solid #cbd9e8;
	margin-bottom: 20px;
	width: 660px;
	font-size: 1.2em;
}

#infoError {
	background: #f6c9d5;
	padding: 10px 10px 5px 10px;
	color: #fff;
	border: 3px solid #d8023e;
	margin-bottom: 20px;
	width: 660px;
	font-size: 1.2em;
}

#infoError h2 {
	margin-bottom: 8px;
	font-weight: 700;
}

#infoCorrect {
	background: #bdefc6;
	padding: 10px 10px 5px 10px;
	color: #666;
	border: 3px solid #36a548;
	margin-bottom: 20px;
	width: 660px;
	font-size: 1.1em;
}

#infoError a {
	color: #d8023e;
}

#infoError a:hover {
	color: #fff;
	background:#d8023e;
}

#infoArea p, #infoError p, #infoCorrect p {
	margin-bottom: 5px;
}

.copy {
	color: #ccc;
}

#infoArea a {
	color: #666;
	text-decoration: underline;
}

#infoArea a:hover {
	color: #fff;
	text-decoration: none;
	background: #666;
}

/* error pages */

.errorPage p {
	font-size: 1.2em;
}

/* gallery */

#galleryHolder {
	width: 400px;
	margin-right: 10px;
}

#galleryHolder img {
	margin-bottom: 5px;
	border: 2px solid #ccc;
	width: 395px;
}

#imageGallery img {
	width: 125px;
	margin: 0!important;
	padding: 0!important;
	border: 2px solid #ccc;
}

#imageGallery {
	width: 400px;
}

#imageGallery {
	margin: 5px 0 0 0!important;
}

#imageGallery li {
	float: left;
	margin: 0 6px 0 0;
	background: none;
	padding: 0!important;
}

#imageGallery li.last {
	margin-right: 0!important;
}

.newGallery {
	width: 210px;
	height: 83px;
	display: block;
	background: url(../_images/galleryPopup.gif) 0 0 no-repeat;
	padding: 10px 10px 10px 30px;
	margin-top: 82px;
}

/* flickr gallery */

.leftGallery {
	float: left;
	margin-right: 15px;
}

.rightGallery {
	width: 440px;
	float: left;
}

.rightGallery h1 {
	margin-bottom: 10px;
}

.rightGallery p {
	font-size: 1.2em;
	margin-bottom: 10px;
}

#images {padding:0; margin:0 0 10px 0; overflow: hidden;}
#images img { border: 2px solid #B2CBE6;}

.leftGallery a, .rightGallery a {
	color: #B2CBE6;
}

.leftGallery a:hover, .rightGallery a:hover {
	color: #fff;
	background: #B2CBE6;
	text-decoration: none;
}

#prev, #next {
	margin-right: 20px;
	font-size: 1.4em;
}