/*
Theme Name: Hamish Brown
Theme URI: http://hamishbrown.com
Description: The theme specific to the Hamish Brown website
Version: 1.0
Author: Paul Collins
Author URI: http://paulcollinslondon.com

========================================================================*/


/* BODY STYLES */
html, body {height:100%;}
body {margin:0; padding:0 18px; background:#FFF; color:#000; font:62.5%/1.4em Verdana,Arial,serif; text-align:center;}
img, form {border:0; margin:0; vertical-align:top;}
p {padding:0; margin:0 0 15px 0; font-size:1.1em;}
h1, h2, h3, h4, h5, h6 {margin:0 0 5px; padding:0; font-size:1.2em;}

/* LISTS */
dl, dd {margin:0; padding:0;}
ul {margin:0 0 25px 15px; padding:0;} 
ol {margin:0 0 25px 22px; padding-left:0;}
ol li {margin:0;}

/* LINKS AND ACCRONYMS */
a {color:#FFF; text-decoration:underline; cursor:pointer;}
a:hover {text-decoration:none;}

/* CLEARFIX */
div:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
.clear {clear:both;}

/* HIDDEN TEXT */
.hidden {position:absolute; left:0px; top:-10000px; width:0px; height:0px; overflow:hidden;}

/* STANDARD IMAGE REPLACEMENT */
.replace {position:relative; overflow:hidden; display:block;}
.replace em {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-repeat:no-repeat;}


/* ========= CONTAINERS ========= */

#wrapper {background:#000; width:987px; margin:0 auto -2.2em; text-align:left;}
#topNavigation {min-width:987px; background:#FFF;}
#content {color:#FFF; padding:19px 15px; clear:both; overflow:auto;}
* html #content {overflow:visible; height:1px;}
#footer {clear:both; width:987px; margin:0 auto; line-height:1.1em; font-size:1em; padding:4px 0 7px; min-height:1em; background:#FFF; text-align:right; clear:both;}
.push {clear:both; height:2.2em;}


/*========================================================================
	LOGO, TOP NAVIGATION & FOOTER
=========================================================================*/

/* SKIP NAVIGATION LINK */
#skipNavigationLink {margin:0; padding:0; text-align:center; font-size:1.4em;}
#skipNavigationLink a, 
#skipNavigationLink a:hover,
#skipNavigationLink a:visited  {position:absolute; display:block; padding:4px; border:0; background:#000; color:#FFF; left:0px; top:-500px; overflow:hidden;}
#skipNavigationLink a:active,
#skipNavigationLink a:focus {right:0; top:0; z-index:10;}

/* LOGO */
#logo {float:left; margin:0;}

/* TOP NAVIGATION */
#topNavigation {background:#FFF; padding:28px 0 0; position:relative;}
#topNavigation ul {float:right; margin:0; list-style:none;}
#topNavigation ul li {float:left; position:relative;}
#topNavigation ul li a,
#topNavigation ul li span {width:106px; height:26px; color:#000; text-align:center; position:relative; overflow:hidden; display:block;}
#topNavigation ul li a em,
#topNavigation ul li span em {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%;}
#topNavigation ul li .portfolio em {background:url(images/topNavPortfolio.gif) 0 0 no-repeat;}
#topNavigation ul li a.info em {background:url(images/topNavInfo.gif) 0 0 no-repeat;}
#topNavigation ul li a.news em {background:url(images/topNavNews.gif) 0 0 no-repeat;}
#topNavigation ul li:hover a em,
#topNavigation ul li:hover span em,
#topNavigation ul li.hover a em,
#topNavigation ul li.hover span em,
#topNavigation ul li.selected a em,
#topNavigation ul li.selected span em {background-position:0 -26px;}

/* sub navigation */
#topNavigation ul li ul {position:absolute; left:-100000px; display:block; background:#FFF; width:100%; padding-bottom:10px; width:106px;}
#topNavigation ul li ul li {padding:10px 10px 0; clear:both; display:block; width:100%;}
#topNavigation ul li ul li a {width:auto; text-decoration:none; height:auto; text-align:left; overflow:visible;}
#topNavigation ul li ul li a:hover,
#topNavigation ul li ul li a.selected {text-decoration:underline;}
#topNavigation ul li ul li.current-cat a {font-weight:bold;}

/* hover states */
#topNavigation ul li:hover ul,
#topNavigation ul li.hover ul {left:0; z-index:10000;}
#topNavigation ul li ul li ul {position:absolute; left:-100005px !important;}
#topNavigation ul li ul li:hover ul,
#topNavigation ul li ul li.hover ul {left:107px !important; top:0 !important;}


/*=======================================================================
	STYLES FOR ALL PAGES
=========================================================================*/

/* HEADINGS */
h1 {font-size:1.3em; margin-bottom:2px;}
h2 {font-size:1.1em; margin-bottom:2px;}


/*=======================================================================
	PAGE SPECIFIC STYLES
=========================================================================*/


/* ========= HOME ========= */

#home #wrapper {background:#FFF;}
#home #content {padding:0; overflow:visible;}
#home #content ul#slideshow {list-style:none; margin:0;}
#home #content ul#slideshow li {margin:0;}
#home #content img {width:100%;}


/* ========= INFO ========= */

#info .column1 {float:left; width:179px;}
#info .column2 {float:left; margin-left:22px; width:294px;}
#info .column3 {float:left; margin-left:22px; width:294px;}


/* ========= NEWS ========= */

#news #textArea {width:600px; padding:13px 18px 0; color:#000; background:#FFF url(images/iconDottedLineVertical.gif) 483px 0 no-repeat;}
#news #textArea h2 {clear:both; margin-bottom:13px;}
#news #textArea img {float:left; margin:0 15px 15px 0;}
#news #textArea a {color:#000;}

/* posts */
#news #textArea .posts {float:left; width:450px; overflow:hidden;}
#news #textArea .posts .item {margin-bottom:13px; clear:both; float:left; width:450px; background:url(images/iconDottedLineHorizontal.gif) bottom repeat-x;}
#news #textArea .posts .item:last-child {background:none;}

/* navigation */
#news #textArea .newsNavigation {float:left; margin:25px 0 0 13px; padding-left:15px;}
#news #textArea .newsNavigation h2 {padding-top:0;}
#news #textArea .newsNavigation a {text-decoration:none;}
#news #textArea .newsNavigation a:hover {text-decoration:underline;}
#news #textArea .navigation {clear:both; padding:0 0 13px;}


/* ========= PORTFOLIO ========= */

#portfolio #content {padding-left:0; padding-right:0;}

/* SLIDESHOW */
#portfolio #gallery {float:left; width:668px;}
#portfolio .placeHolder {float:left; width:668px; min-height:578px;}
#portfolio #gallery .caption {padding:8px 0 0 13px; min-height:35px; height:auto !important; height:35px;}
#portfolio #gallery .caption p {margin-bottom:0;}
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
div.content {display:none;}
 /* This should be set to be at least the height of the largest image in the slideshow */
div.slideshow-container {position:relative;	clear:both;	height:528px;}
 /* This should be set to be at least the height of the largest image in the slideshow */
div.loader {position:absolute; top:0; left:0; background:url('images/loader.gif') center no-repeat; width:668px; height:500px;}
div.slideshow span.image-wrapper {display:block; position:absolute;	top:0; left:0;}
div.slideshow a.advance-link {display:block; text-align:center;	width:668px; height:528px;}
div.slideshow a.advance-link img {max-height:528px;}

/* THUMBS */
#portfolio #thumbs {float:left; width:304px;}
#portfolio #thumbs ul {list-style:none; margin:0;}
#portfolio #thumbs ul li {float:left; margin:0 0 13px 12px; display:inline;}
#portfolio #thumbs ul li.selected {opacity:0.50 !important;}

/* pagination */
div.pagination {margin-left:10px;}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {display:block; float:left;	margin-right:2px; padding:4px 7px 2px 7px;}
div.pagination a:hover {background-color:#eee; text-decoration:none; color:#000;}
div.pagination span.current {font-weight:bold; background-color:#000; color:#fff;}
div.pagination span.ellipsis {border:none; padding:5px 0 3px 2px;}