/* 
=================================================================================
Title:				Valmadre Constructions
Author URI: 		www.smallsilences.com.au
--
Description:		Sets layout and presentation for screen media
--
Updated:			17.03.2010
=================================================================================
COLOURS
--
Darkest blue:		#427790 - old #2C3 A51
Royal blue:			#559cbe  - old #002675
--
Dark grey:			#595959
Mid grey: 			#8c8c8c
Pale grey:			#cdd1d6
Palest grey:		#ecedef / darker variant #e2e2e3
--
White:				#FFFFFF
--
================================================================================= */

/* ============================================================================== */
/* RESET & BASIC SETUP - LEVELS PLAYING FIELD ACROSS BROWSERS */
/* ============================================================================== */
html, body, form, fieldset { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; }
li, dd, blockquote { margin-left: 1.8em; }
a, button, label { cursor: pointer; }
img { vertical-align: middle; }
input, select, textarea, th, td { font-size: 1em; font-family: inherit; }
fieldset { border: none; }
q:before, q:after { content:''; }

/* ============================================================================== */
/* TOOLBOX - USEFUL CLASSES */
/* ============================================================================== */

/* GENERIC */
.hide { display:none; }
.show { display:block; }
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.clear { clear: both; }

/* CLEARFIX HACK */
.clearfix:after {content: " "; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; font-size: 0; }
.clearfix {display: inline-block;}
/* Start Holly Hack \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Holly Hack */

/* FIX FOR IE6 LIST ITEM WHITESPACE BUG */
/* Start Holly Hack \*/
* html ul li {height: 1%;}
/* End Holly Hack */

/* ============================================================================== */
/* BASIC ELEMENTS */
/* ============================================================================== */

* { 
}
html {
	height: 100%;
}
body {
	position: relative;
	margin: 0;
	padding: 20px;
	background: #427790 url(../images/ui/body_bg.jpg) top left repeat-x;
	color: #cdd1d6;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 71%;				/* Font sizing in ems beyond this point. Original default 76%. 62.5% makes 1em=10px. 68.75% makes 1em=11px */
	line-height: 1.8em; 			/* General line-height and also acts as IE 6 Peekaboo bug hack */
	text-align: center;				/* IE6> centering - reset to align left in container */
}

/* ------------------------------------------ */
/* LINKS */
/* ------------------------------------------ */
a {
	color: #559cbe;
	text-decoration: none;
}
a:hover {
	color: #427790;
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
}
a:visited {
}
a:active {
}
a:focus {
}

/* ------------------------------------------ */
/* HEADINGS */
/* ------------------------------------------ */
h1 {
	font-size: 1.5em;
	margin: 1.5em 0em 1.5em 0em;
	padding: 0;
	letter-spacing: -0.07em;
	color: #8c8c8c;
	font-weight: normal;
	text-align: center;
}
h2 {
	font-size: 1.3em;
	margin: 0.5em 0em 0.5em 0em;
	padding: 0;
	letter-spacing: -0.05em;
	color: #8c8c8c;
	font-weight: normal;
}
h3 {
	font-size: 1.15em;
	margin: 0.5em 0em 0.5em 0em;
	padding: 0;
	letter-spacing: -0.05em;
	color: #8c8c8c;
	font-weight: normal;
}
h4, h5, h6 {
	font-size: 1em;
	font-weight: bold;
	margin: 0em 0em 0.5em 0em;
	padding: 0;
	color: #8c8c8c;
}

/* ------------------------------------------ */
/* PARAGRAPHS, QUOTES & TEXT */
/* ------------------------------------------ */

/* PARAGRAPHS */
p {
	margin: 0.5em 0;
}

/* QUOTES */
blockquote {
}
blockquote p {
}
cite {
}
blockquote cite {
}
q {
}

/* ADDRESS */
address {
	font-style: normal;
	margin: 0.5em 0 1em 0;
}

/* TEXT FORMATTING */
strong {
}
em {
}
b {
}
i {
}

/* ------------------------------------------ */
/* LISTS */
/* ------------------------------------------ */

/* ORDERED/UNORDERED */
ol {
}
ul {
}
ol li {
}
ul li {
}
ul ul, ul ol, ol ol, ol ul { margin: 0; }

/* DEFINITIONS */
dl {
}
dt {
}
dd {
}

/* ------------------------------------------ */
/* IMAGES */
/* ------------------------------------------ */
img {
	border: none;
}
a img {
	border: none;
}

/* ------------------------------------------ */
/* OTHER ELEMENTS */
/* ------------------------------------------ */

/* HR */
hr {
	border: none;
	height: 2px;
	border-top: 1px dotted #cdd1d6;
	clear: both;
}
/* Start Holly Hack \*/
* html hr { height: 1px; border-top: 1px solid #cdd1d6; }
*:first-child+html hr { height: 1px; border-top: 1px dotted #cdd1d6; }
/* End Holly Hack */

/* CODE */
pre, code, samp, kbd {
	font-size: 1.2em;
	background-color: #cdd1d6;
	padding: 2px;
}

/* EDITS */
ins {
	text-decoration: none;
	background-color: #ecedef;
}
del {
	text-decoration: line-through;
}

/* ------------------------------------------ */
/* TABLES */
/* ------------------------------------------ */
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 1em;
	text-align: left;
}
caption {
	font-style: italic;
}
/* tbody */
tbody {
}
tr {
}
tr.alt {
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
}
th {
	padding: 0.5em;
	vertical-align: top;
}
td {
	padding: 0.5em;
	vertical-align: top;
}
/* thead */
thead {
	text-align: left;
}
thead tr {
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
	border-bottom: 1px solid #e2e2e3;
}
thead th, thead td {
}
/* tfoot */
tfoot {
	text-align: left;
}
tfoot tr {
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
	border-top: 1px solid #e2e2e3;
}
tfoot th, tfoot td {
}

/* ------------------------------------------ */
/* FORMS */
/* ------------------------------------------ */
form {
}
fieldset {
	margin: 5px 0;
	padding: 5px;
	border: 1px dotted #cdd1d6;
}
legend {
	color: #8c8c8c;
	font-size: 1.1em;
	font-weight: normal;
	letter-spacing: -0.05em;
}
label {
	font-weight: bold;
}
input {
}
textarea {
}
input, textarea {
}
select {
}
optgroup {
}
option {
}
/* BUTTONS */
button, .button, .submit {
	font-size: 11px;
	line-height: 16px;
	margin-left: 0;
	padding: 0px 5px;
	color: #FFFFFF;
	cursor: pointer;
	border: 1px solid #3a465c;
	background: #427790; 
}
button:hover, .button:hover, .submit:hover, button:focus, .button:focus, .submit:focus {
	border: 1px solid #595959;
	background: #535e70; 
}
button:active, .button:active, .submit:active {
	border: 1px solid #3a465c;
	background: #535e70; 
}
/* BUTTONS - DISABLED */
.disabled, .button.disabled, .submit.disabled {
	color: #CCCCCC;
	background: #8C8C8C;
	border: 1px solid #8c8c8c;
}
.disabled:hover, .button.disabled:hover, .submit.disabled:hover {
	color: #CCCCCC;
	background: #8C8C8C;
	border: 1px solid #8c8c8c;
	cursor: default;
}

/* ------------------------------------------ */
/* STYLED FORM */
/* ------------------------------------------ */
.styled-form {
	padding-bottom: 5px;
}
.styled-form p {
	clear: both;
	margin: 0;
	padding: 2px 0;
}
.styled-form label {
	display: block;
	float: left;
	clear: left;
	padding: 2px 0;
	width: 105px;
}
.styled-form input, .styled-form textarea {
	width: 180px;
	padding: 2px;
	border: 1px solid #e2e2e3;
}
.styled-form input:focus, .styled-form textarea:focus {
	background-color: #FFFCDE;
	background-image: none;
}
/* RADIO AND CHECK */
.styled-form input.radio, .styled-form input.check {
	border: none;
	padding: 0;
	width: auto;
}
.styled-form label.radio-label,.styled-form label.check-label {
	clear: none;
	display: inline;
	float: none;
	width: auto;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

/* ============================================================================== */
/* LAYOUT */
/* ============================================================================== */
#container {
	position: relative;
	width: 750px;
	margin: 0 auto;
	padding: 0;
	background-color: #FFF;
	color: #595959;
	text-align: left;
	overflow: hidden;
}

/* ------------------------------------------ */
/* MASTHEAD */
/* ------------------------------------------ */
#masthead {
	position: relative;
	padding: 10px;
}
#masthead h2 {
	margin: 0;
	padding: 0;
	line-height: 50px;
	font-weight: normal;
	color: #FFFFFF;
}
#masthead .logo {
	display: block;
	width: 240px;
	height: 90px;
	background: transparent url(../images/ui/logo.gif) 0 0 no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}
#masthead a:hover, #masthead a:focus{
	border: none;
}

/* ------------------------------------------ */
/* NAVIGATION */
/* ------------------------------------------ */
#nav {
	position: absolute;
	top: 43px;
	right: 10px;
	font-size: 1.2em;
}
#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav ul li {
	float: left;
	margin: 0;
	padding: 0 5px;
}
#nav ul li a {
	display: block;
	padding: 3px 10px;
	float: left;
	color: #559cbe;
	text-transform: uppercase;
	font-weight: bold;
}
#nav ul li a:hover  {
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
}
#nav ul li a:focus	{
	color: #595959;
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
}

/* Set specific icons via class */
body#home #nav ul li a.home {
	color: #595959;
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
}
body#gallery #nav ul li a.gallery {
	color: #595959;
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
}
body#contact #nav ul li a.contact {
	color: #595959;
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
}

/* ------------------------------------------ */
/* CONTENT AREA */
/* ------------------------------------------ */
#content {
	position: relative;
	margin: 0 10px;
	padding: 10px 10px 0 10px;
	min-height: 362px;							/* min-height hack for IE6 */
	height:auto !important;						/* ... */
	height: 362px;								/* min-height hack for IE6 */
	background: #FFF url(../images/ui/tile_stripes.gif) 0 0 repeat-x;
	border-top: 1px solid #e2e2e3;
	border-bottom: 1px solid #e2e2e3;
}

#content-footer {
	margin: 0 10px 10px 10px;
	padding: 5px 10px;
	min-height: 40px;							/* min-height hack for IE6 */
	height:auto !important;						/* ... */
	height: 40px;								/* min-height hack for IE6 */
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
}

/* ------------------------------------------ */
/* FOOTER */
/* ------------------------------------------ */
#footer {
	clear: both;
	overflow: hidden;
	min-height: 60px;							/* min-height hack for IE6 */
	height:auto !important;						/* ... */
	height: 60px;								/* min-height hack for IE6 */
	padding: 5px 10px;
	font-size: 0.9em;
	color: #cdd1d6;
	background: #427790 url(../images/ui/footer_bg.jpg) 0 0 repeat-x;
}
#footer .copyright {
	float: left;
	margin: 0;
}
#footer .credits {
	float: right;
	margin: 0;
}
#footer .credits a.altier {
	display: block;
	height: 16px;
	width: 65px;
	text-indent: -9000px;
	overflow: hidden;
	background: transparent url(../images/ui/site_by_altier.gif) 0 0 no-repeat;
}
#footer .credits a.altier:hover {
	text-decoration: none;
}

/* ============================================================================== */
/* UI ELEMENTS & OBJECTS */
/* ============================================================================== */

/* ------------------------------------------ */
/* HOME SLIDESHOW */
/* ------------------------------------------ */
#home #content {
	padding: 0;
}
#home .slideshow {
}

/* ------------------------------------------ */
/* GALLERY */
/* ------------------------------------------ */
ul.gallery {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
ul.gallery li {
	position: relative;
	display: -moz-inline-box;	/* Moz - FF2 doesn't support inline-block (doh, this invalidates css) */
								/* Be careful to specify '-moz-inline-box' NOT '-moz-inline-block', which renders differently */
	display: inline-block;		/* Op, Saf, IE (<=IE7 needs HasLayout set from hack below) \*/
	vertical-align: top;
	margin: 0 20px 20px 0;
	padding: 0;
	width: 190px;
}
/* HACK FOR INLINE BLOCK <= IE7 */
*:first-child+html ul.gallery li { display: inline } * html ul.gallery li { display: inline }
/*END HACK */

ul.gallery li div.gallery-thumb {
	position: relative;
	padding: 3px;
	color: #FFF;
	background: #427790 url(../images/ui/panel_bg.jpg) center bottom no-repeat;
	border: 1px solid #427790;
}
ul.gallery li div.gallery-thumb a {
	color: #A8B8CF;
	background: transparent;
}
ul.gallery li div.gallery-thumb a:hover {
	color: #FFFFFF;
}

/* SLIDESHOW LINK */
/* NOTE: Doesn't work in I6 and lower due to the li inline-block thing going on from above. Yay IE */
ul.gallery li div.gallery-thumb a.launch-slideshow {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 162px;
	text-indent: -9000px;
	overflow: hidden;
	background: transparent url(../images/ui/view-gallery.png) 0 -200px no-repeat;
}
ul.gallery li div.gallery-thumb a.launch-slideshow:hover {
	background-position: 140px 3px;
}
ul.gallery li div.gallery-thumb a.launch-slideshow:focus {
	outline: none;	
}
/* IE6 will just have to make do with plain gif. */
* html ul.gallery li div.gallery-thumb a.launch-slideshow {
	background: transparent url(../images/ui/view-gallery.gif) 0 -200px no-repeat;
}
* html ul.gallery li div.gallery-thumb a.launch-slideshow:hover {
	background-position: 148px 5px;
}

/* This here is a catch-all for the sake of IE6 */
ul.gallery li div.gallery-thumb a img {
	border: 1px solid #A8B8CF;
}
ul.gallery li div.gallery-thumb a:hover img {
	border: 1px solid #FFF;
}

/* CAPTION */
ul.gallery .caption {
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	margin:0;
	padding: 5px 0 2px 0;
	text-align: center;
	color: #FFF;
}

/* ------------------------------------------ */
/* COLUMNS */
/* ------------------------------------------ */
.col-left, .col-mid, .col-right {
	float: left;
	width: 206px;
	padding: 0 15px;
	min-height: 200px;							/* min-height hack for IE6 */
	height:auto !important;						/* ... */
	height: 200px;								/* min-height hack for IE6 */
}
.col-left, .col-mid {
	border-right: 1px solid #e2e2e3; 
}

/* ------------------------------------------ */
/* CONTACT PAGE DEFINITION LIST */
/* ------------------------------------------ */
dl.contact {
	float: left;
	clear: both;
	width: 100%;
	margin: 0em 0 1em 0;
}
dl.contact dt {
	font-weight: bold;
	width: 40px;
	float: left;
	clear: left;
	margin: 0;
}
dl.contact dd {
	float: left;
	margin: 0 0 0 10px;
}
* html dl.contact dd { float: none; } /* IE6 just places all these on a single line if they're floated */
*:first-child+html dl.contact dd { float: none; } /* IE7 does too */


/* ------------------------------------------ */
/* PANEL */
/* ------------------------------------------ */
.panel {
	padding: 10px;
	min-height: 40px;							/* min-height hack for IE6 */
	height:auto !important;						/* ... */
	height: 40px;								/* min-height hack for IE6 */
	background: #ecedef url(../images/ui/tile_stripes.gif) 0 0 repeat;
}