/*********/
/* RESET */
/*********/

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,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
/***********/
/* GENERAL */
/***********/

html	{
	height: 100%;
	margin-bottom: 1px;
	}

body {
	min-height: 100%;
	padding-bottom: 1px; /* force scroll bar */
	background: white;
	color: black;
	}

body	{
	font-size: 62.5%;
/*	background: white url(../images/background.jpg) scroll repeat top left;*/
	background: url(../../../../phpThumb/phpThumb.php?src=../assets/images/Backdrops/SkyeAlltDearg.jpg&w=1440&fltr[]=brit|96&fltr[]=crop|0|0|120|0&fltr[]=blur|1&q=55) fixed no-repeat top center;
	}
	
#container {
	position: relative;
	width: 80%;
	max-width: 1050px;
	min-width: 750px;
	margin: 0 auto;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	line-height: 1;
	color: black;
	}
	
p	{
	padding-bottom: 1em;
	}
	
ul	{
	list-style: none;
	}

em 	{
	font-style: italic;
	font-weight: normal;
	}
	
strong 	{
	font-style: normal;
	font-weight: bold;
	}
	
a:link, a:visited {
	color: #600;
	text-decoration: underline;
	}
a:hover, a:active, a:focus {
	color: #060;
	text-decoration: underline;
	}

/* link image borders */	
a:link img, a:visited img {
	outline: solid 1px black;
	}
a:hover img, a:active img, a:focus img {
	outline: solid 1px #060;
	}

input, textarea, select, button, .button {
	display: block;
	border: solid 1px black;
	background: #CCC;
	}

input[type="hidden"] { display: none !important; }

input.disabled, textarea.disabled {
	background: white;
	}

input[type="submit"], input[type="reset"], button, .button {
	cursor: pointer;
	background: #9CF;
	color: black;
	text-decoration: none;
	}
	
input[type="submit"]:hover, input[type="reset"]:hover, button:hover, .button:hover, .button:active,
input[type="submit"]:focus, input[type="reset"]:focus, button:focus, .button:focus { 
	background: #006;
	color: white;
	text-decoration: none;
	}

/* tables still need 'cellspacing="0"' in the markup */table {
	table-layout: auto;	border-collapse: separate;	border-spacing: 0;	}caption, th, td {	text-align: left;	font-weight: normal;	}
	
/**********************************/
/* Rich text typography (TinyMCE) */
/**********************************/

.richtext-container {
	/* Apply global styles to here, not to <p>
	 * NOTE: this may be more appropriate applied to #content
	 */
	}
	
.richtext-container ul {
	list-style-type: disc;
	padding-left: 2em;
	}
.richtext-container ol {
	list-style-type: decimal;
	padding-left: 2em;
	}

.richtext-container p, .richtext-container li {
	padding-bottom: 1em;
	}

.richtext-container h1, .richtext-container h2, .richtext-container h3, .richtext-container h4, .richtext-container h5, .richtext-container h6 {
	font-weight: normal;
	}
	
.richtext-container sup { vertical-align: top; font-size: 60%; }

.richtext-container sub { vertical-align: bottom; font-size: 60%; }

/*****************/
/* SITE SPECIFIC */
/*****************/

/*
  Headings
  --------
*/

#header {
	width: 60%;
	min-height: 16em;
	}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	color: #272742; /* color 1 */
	padding-bottom: 0.5em;
	}

h1	{
	padding: 1em 0 10px 0;
	font-family: "Lucida Sans Unicode", sans-serif;
	font-size: 400%;
	}
	
h1 span.strapline
	{
	display: block;
	line-height: 1;
	margin: 1em 0;
	font-size: 0.5em;
	color: black;
	}
	
h2	{ font-size: 1.7em; }
h3	{ font-size: 1.5em; }
h4	{ font-size: 1.3em; }
h5	{ font-size: 1.1em; }

.read-more {
	font-weight: bold;
	}

/* 
  Overall nav
  -----------
*/

#nav-overall {
	position: absolute;
	top: 1em;
	right: 0;
	width: 30%;
	}
	
#nav-overall img {
	float: left;
	margin: 0.15em 10px 0 0;
	border: none;
	outline: none;
	}
	
#nav-overall a:link, #nav-overall a:visited {
	display: block;
	width: 100%; /* hasLayout */
	margin-bottom: 3px;
	text-decoration: none;
	color: black;
	font-size: 1.6em;
	line-height: 1.3;
	}

#nav-overall a span {
	display: block;
	margin-left: 25px;
	}
	
#nav-overall a:hover, #nav-overall a:active, #nav-overall a:focus {
	color: #060;
	text-decoration: underline;
	}

/*
  Nav tabs
  --------
*/

#nav {
	position: relative;
	z-index: 1000;
	float: left;
	margin-left: 0.3em;
	font-size: 1.3em;
	line-height: 1.5;
	}

#nav li {
	float: left;
	margin-right: 0.3em;
	}

#nav li a, #nav li span.nav-here {
	border: solid 3px #4c4ca8;
	display: block;
	padding: 0 1em;
	white-space: nowrap;
	font-weight: bold;
	}

#nav li.active span.nav-here, #nav li.active a:link, #nav li.active a:visited {
	border-bottom: #9999ff solid 3px; /* blends with background */
	background: #9999ff;
	color: black;
	text-decoration: none;
	}

#nav a:link, #nav a:visited {
	background-color: white;
	color: black;
	text-decoration: none;
	}

#nav a:hover, #nav a:active, #nav a:focus {
	background-color: #FF0;
	color: black;
	text-decoration: none;
	}

/*
  Content
  -------
*/

#content {
	position: relative; /* define as CB */
	clear: left;
	top: -3px; /* not margin-top as the clear negates it ! */
	font-size: 1.3em;
	line-height: 1.3;
	}

.text-section {
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	display: block;
	border: solid 3px #4c4ca8; /* color 2 */
	padding: 20px;
	background: #9999ff url(../images/gradient.png) repeat-x scroll top left; /* color 3 */
	}

.text-section:after { /* contain floats */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

/*
  Portfolio List
  --------------
*/

#portfolio .richtext-container {
	width: 720px;
	}

.portfolio-list li {
	clear: left;
	padding-bottom: 30px;
	overflow: hidden;
	}

.portfolio-list .images {
	position: relative; /* define as CB */
	float: left;
	width: 220px;
	}

.portfolio-list .images a {
	display: block;
	}

.portfolio-list .images img {
	position: absolute;
	outline: none !important;
	}
		
.portfolio-list h3, .portfolio-list p, .portfolio-list .read-more {
	margin-left: 220px;
	width: 500px;
	}

/* 
  Portfolio single page
  ---------------------
*/

.portfolio-section .prev-jump-next {
	clear: left;
	font-size: 1.6em;
	line-height: 2;
	}

.portfolio-section .prev-jump-next li {
	float: left;
	width: 5em;
	text-align: center;
	}

.prev-jump-next a:link, .prev-jump-next a:visited {
	color: #600;
	text-decoration: none;
	}
.prev-jump-next a:hover, .prev-jump-next a:active, .prev-jump-next a:focus {
	color: #060;
	text-decoration: none;
	}

.portfolio-section .main-image {
	float: left;
	clear: left;
	margin: 20px 0;
	}

.portfolio-section h2, .portfolio-section .richtext-container {
	margin: 20px 0 0 520px;
	}
	
.portfolio-section ul {
	padding: 0;
	list-style-type: none;
	}

.portfolio-section .read-more {
	position: absolute;
	bottom: 20px;
	right: 30px;
	}

/*********************/
/* Table (modx info) */
/*********************/

/* tables still need 'cellspacing="0"' in the markup */
table	{
	margin: 1em 0;
	background: white;
	table-layout: fixed; 
	border-collapse: collapse;	border-spacing: 0;
	width: 100%; /* for FF3 */
	}

th	{
	font-weight: bold;
	width: 15em;
	}
	
td 	{
	font-weight: normal;
	}
	
th, td	{
	text-align: left;	border: solid 1px black;
	padding: 0.5em;
	}	

/*****************/
/* code extracts */
/*****************/
code, pre {
	display: block;
	margin: 1em 2% 1em 5%;
	border: solid 1px black;
	padding: 1em;
	background: #CCC;
	white-space: pre;
	overflow: auto;
	font-family: "Lucida Console", Monaco, monospace;
	}

/*
  Contact Form
  ------------
*/

form * { font-size: 100%; }

form div {
	margin: 1em 0;
	clear: left;
	}
	
form label {
	float: left;
	width: 140px;
	margin-bottom: 1em;
	text-align: right;
	font-weight: bold;
	}
	
form input, form textarea {
	display: inline;
	margin-left: 15px;
	}
form input { 
	width: 220px;
	}
form textarea {
	width: 400px;
	}

form .submit input { margin-left: 155px; } /* label width */
	
form .submit .button {
	padding: 0.15em 1em;
	width: auto;
	}

form p { /* notes */
        clear: left;
	margin: 1em 0 1em 155px;
	}

form .error { color: #600; }

form p.error { margin: 0.1em 0 0.5em 155px; }

/*
  reCaptcha
  ---------
*/

#recaptcha-div, #recaptcha-div div {
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	line-height: 1 !important;
	}
#recaptcha-div {
	margin-left: 155px !important; /* <<<< Site specific */
	}
#enquiry-captcha label {
	margin-top: 72px !important;
	}
#recaptcha-div {
	position: relative !important; /* define as CB */
	width: 456px !important; /* !!!! */
	background: transparent url(../captcha/logo.gif) scroll no-repeat 390px 15px !important;
	}
#recaptcha-div #recaptcha_image {
	border: solid 1px black !important;
	height: 57px !important;
	width: 300px !important;
	background: white !important;
	}
.recaptcha_audio_cant_hear_link {
	padding-left: 1.5em !important;
	font-weight: bold !important;
	}
#recaptcha-controls {
	position: absolute !important;
	top: 15px !important;
	left: 350px !important;
	}
#recaptcha-controls a:link, #recaptcha-controls a:visited {
	display: block !important;
	margin-bottom: 5px !important;
	width: 25px !important;
	}
#recaptcha-controls a img {
	outline: none !important;
	border: none !important;
	}
#recaptcha-controls a:focus, #recaptcha-controls a:active, #recaptcha-controls a:hover {
	outline: solid 2px #F00 !important;
	}
#recaptcha-controls img {
        display: block !important;
        }
#recaptcha-div #recaptcha_response_field {
	margin: 10px 0 0 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
 	width: 300px !important;
	}

/* 
  Alternative colours
  -------------------
*/

/* color 1 */
.up13 h1, .up13 h2 { color: black; }
		
/* color 2 */
.up13 #nav li.active a:link, .up13 #nav li.active a:visited,
.up13 #nav li.active a:hover, .up13 #nav li.active a:active, .up13 #nav li.active a:focus,
.up13 .text-section { background-color: #84B538; }
.up13 #nav li.active a { border-bottom-color: #84B538; }

/* color 3 */
.up13 #nav a, .up13 .text-section { border-color:  black; }

/* color 1 */
.up22 h1, .up22 h2 { color: #4d370b; }

/* color 2 */
.up22 #nav li.active a:link, .up22 #nav li.active a:visited,
.up22 #nav li.active a:hover, .up22 #nav li.active a:active, .up22 #nav li.active a:focus,
.up22 .text-section { background-color: #E5B040; }
.up22 #nav li.active a { border-bottom-color: #E5B040; }

/* color 3 */
.up22 #nav a, .up22 .text-section { border-color:  #d9681e; }

/* color 1 */
.up11 h1, .up11 h2 { color: #1C3169; }

/* color 2 */
.up11 #nav li.active a:link, .up11 #nav li.active a:visited,
.up11 #nav li.active a:hover, .up11 #nav li.active a:active, .up11 #nav li.active a:focus,
.up11 .text-section { background-color: #72ADD4; }
.up11 #nav li.active a { border-bottom-color: #72ADD4; }

/* color 3 */
.up11 #nav a, .up11 .text-section { border-color:  #2D52C1; }