@charset "utf-8";
/* CSS Document */


/*******************************************************************************
*  ecospec.css (used with reset.css)
*  July 2010
*  Rendered by Bruce Peterkin
*  www.brucepeterkin.co.uk
*******************************************************************************/

/*******************************************************************************
*  body
*******************************************************************************/

body
{  
    background-color: 				#333;
    background-image: 				url(/media/img/bg-loch-broom2.jpg);
    background-repeat: 				no-repeat; 
    background-position: 			center top;
    font-family: 				Arial, Helvetica, sans-serif;
}

/********************************************
* #content: everything except the footer
********************************************/
#content {
	width: 965px;
        padding: 0 20px 40px 20px;
	margin: auto;
        background: rgb(255, 255, 255); /* Fall-back for browsers that don't
                                    support rgba */
        background: rgba(255, 255, 255, .2);
}

#topblock {
    width:                          960px;
    height:                         234px;
    border-bottom:                  4px dotted #A80000;
    margin-bottom:                  30px;
}

#header {
	display: 						block;
	width: 							960px;
}
#header h1 {
	width:							960px;
	height: 						118px;
        background:						url(/media/img/bg-h1-toms-bothy2.png) 0 0 no-repeat;
}
#header h1 strong {
    display: none;
}

/********************************************
* Top Navigation
********************************************/

#topnav {
        margin-bottom: 40px;
        background-color: #B0D5FF;
}
#topnav ul {
	display: 						block;
	list-style:						none;
	width: 							960px;
	height:                                                 49px;
}
#topnav ul li {
	display: 						inline;
        float: left;
	height: 						27px;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size:						1.4em;
	line-height:                                            1.4em;
        margin-right:                                           80px;
        font-style: italic;
}
#topnav ul li:last-child {
        margin-right: 0px;
        float: right;
        
}

#topnav li a {
	display:						block;
	height:                                                 25px;
        padding:						8px 28px 12px 28px;
        text-align: center;
        
        background-color: #B0D5FF;
        color: #333;
        border: 2px solid #B0D5FF;
}
#topnav li a:hover {
    color: #fff;
    background-color: #9CC1EE;
    border: 2px dotted #ff9;
}
#topnav li a.selected {
    color: #fff;
    background-color: #9CC1EE;
    border: 2px dotted #fff;
}





/********************************************
* Homepage - 3 main links, intro text and slideshow
********************************************/
#top-content-home {
	width:							945px;
	height:							100px;
	padding-top: 					36px;
	/*background:						url(/media/img/bg-h1-achmore.png) 0 0 no-repeat;*/
}




#page-intro,
#contact-main {
	width:							475px;	
	display: 						block;
	color: 							#333;
	font-size: 						1.125em;
	line-height: 					120%;
}
#contact-main,
#contact-main a {
	color: 							#494F4B;
}
#contact-main a:hover {
	text-decoration: 				underline;
}
#top-content-intro {
    height:                         82px;
    float:                          left;
    padding-left:                   25px;
}

#page-intro {
    width:                          556px;
    background:                     url(/media/img/bg-page-intro.gif) bottom left no-repeat;
    margin-bottom:                  20px;
    padding-bottom:                 20px;
}
a.readmore {
	color:                          #494F4B;
    padding-right:                  43px;
    background:                      url(/media/img/bg-a-more.gif) center right no-repeat;
}
a.readmore:hover {
    color:                          #87983b;
}

#slickbox {
    background:                     url(/media/img/bg-page-intro.gif) bottom left no-repeat;
    margin-bottom:                  20px;
    padding-bottom:                 20px;
}

#homepage-slideshow-top {
	position: 						relative;
	width:							960px;
	height:							341px;
	overflow: 						hidden;
}
#homepage-notice{
    border-top: 4px dotted #A80000;
	width: 							945px;
	margin: 						auto;
	padding: 						20px 30px;
	background: rgb(255, 255, 255); /* Fall-back for browsers that don't support rgba */
	background: rgba(255, 255, 255, .8);
	
}
#homepage-notice h3,
#homepage-notice p {
	text-align: center;
    padding: 4px 10px;
}
#homepage-notice td {
    vertical-align: top;
}

.hst-overlay {
	position: 						absolute;
	width:							350px;
	top: 							150px;
	right: 							0;
}
.hst-overlay h2 {
	display: 						block;
	padding: 						8px 16px;
	font-size: 						1.125em;
	font-family: 					Helvetica, Helvetica Neue, Arial, sans-serif;
	color:							#fff;
	float: 							right;
	clear: 							both;
        background: rgb(0, 0, 0); /* Fall-back for browsers that don't
                                    support rgba */
        background: rgba(0, 0, 0, .5);
}
.hst-overlay p.blurb {
	display: 						block;
	font-family: 					Helvetica, Helvetica Neue, Arial, sans-serif;
	color: 							#666666;
	font-size: 						0.875em;
        text-align:                     right;
	width: 							290px;
	min-height: 					46px;
	padding: 						10px 15px;
	float: 							right;
        background: rgb(255, 255, 255); /* Fall-back for browsers that don't
                                    support rgba */
        background: rgba(255, 255, 255, .8);
}

.hst-overlay p.more {
    display:                         block;
    clear:                           both;
}
.hst-overlay p.more a {
	
	font-family: 					Helvetica, Helvetica Neue, Arial, sans-serif;
	font-size:						1.125em;
	color: 							#333;
   	float: 							right;	
	padding: 						8px 43px 8px 13px;
	text-align: 					left;
    background:                     url(/media/img/bg-a-more.gif) center right no-repeat;
    background-color:               #fff;
}


/*******************************************************************************
*  Recent Projects on Homepage
*******************************************************************************/

#project-slider {
	display: 						block;
	width: 							987px;
	height: 						333px;
	overflow:	hidden;
}
#project-slider .slide {

}
.project {
	display: 						inline;
	float: 							left;
	width: 							287px;
	height: 						333px;
	background-color: 				#999999;
	margin-right: 					42px;
	background:						url(/media/img/bg-project-slide.gif) 0 0 no-repeat;
	position: relative;
}

.project a.img-link {
	display: 						block;
	width: 							287px;
	height: 						164px;
	padding-top: 					18px;
}
.project h3 {
	color: 							#333;
	font-size:						1.125em;
	padding-top: 					18px;
}
.project p.proj-desc {
	width:							225px;
	color:							#555555;
	font-size:						0.814em;
	padding-top: 					16px;	
}
.project a.txt-link {
	position: 						absolute;
	bottom: 						10px;
    
    
    color:                           #B3B5AF;
    font-size:                       1.125em;
    line-height:                     120%;
    
    padding-right:                  43px;
    background:                      url(/media/img/bg-a-more.gif) center right no-repeat;
}
.project a.txt-link:hover {
    color:                          #87983b;
}


/*******************************************************************************
*  Common Pages
*******************************************************************************/
h2 {
    color: #555;
    font-size: 1.2em;
}
h3 {
    color: #333;
    font-size: 1.4em; 
}
#page-top {
    padding:                        20px 0 36px 0;
    font-family:                    Helvetica, Helvetica Neue, Arial, sans-serif;
    font-size:                      1.375em;
    background: rgb(255, 255, 255); /* Fall-back for browsers that don't
                                support rgba */
    background: rgba(255, 255, 255, .75);
}
#leftcol-top {
    width:                          150px;
    padding-left:                   20px;
    float:                          left;
    color:                          #87983B;
}
#content-top {
    width:                          726px;
    float:                          left;
    padding-left:                   39px;
    color:                          #444;
}
#leftcol {
    width:                          127px;
    min-height:                     480px;
    float:                          left;
    padding-left:                   20px;
    padding-right:                  20px;
    padding-bottom:                 40px;
    border-right:                   3px solid #FFFFFF;
    font-size:                      1.1em;
    background: rgb(255, 255, 255); /* Fall-back for browsers that don't
                                support rgba */
    background: rgba(255, 255, 255, .75);
}
#leftcol li a {
    font-family:                    Helvetica, Helvetica Neue, Arial, sans-serif;
    color:                          #494F4B;
    
}
#leftcol li a:hover,
#leftcol li a.selected {
    color:                          #87983B;
}
#leftcol li a img {
    padding:                        2px;
    border:                         1px solid #fff;
}

#leftcol li a.selected img,
#leftcol li a:hover img {
    border:                         1px solid #78C9C4;
}


#leftcol li.li-project {
    margin-top:                     4px;
    margin-bottom:                  12px;
    padding-left:                   3px;
}
#leftcol ul#tob li {
    margin-top:                     12px;
    margin-bottom:                  20px;
}



/* Before and After pics in /our-work/ sections */
#before-and-after {
    position:                       relative;
    width:                          742px;
    height: 341px;
    margin-bottom: 21px;                  
}
#before-and-after img {
    float:                          left;
    border-right:                   1px solid #E6E6E6;
}
#before-and-after img.before {
    margin-right:                   6px;
}
#before-and-after p#bna-before,
#before-and-after p#bna-after {
    position:                        absolute;
    display:                         block;
    padding:                         8px 16px;
    font-size:                       1.125em;
    font-family:                     Helvetica, Helvetica Neue, Arial, sans-serif;
    color:                           #fff;
    background-color:                #000;
    line-height:                     0.8em;
}

#before-and-after p#bna-before {
    top:                            17px;
    left:                           -6px;
}
#before-and-after p#bna-after {
    bottom:                         12px;
    right:                          -6px;
}

#page-content {
    width:                          726px;
    min-height:                     480px;
    float:                          left;
    padding-left:                   39px;
    padding-right:                  30px;
    padding-bottom: 40px;
    background: rgb(255, 255, 255); /* Fall-back for browsers that don't
                                support rgba */
    background: rgba(255, 255, 255, .75);
}
#page-content p {
    font-size:                      0.875em;
    color:                          #555555;
    padding-bottom:                 18px;
}
#page-content h4 {
    color:                          #87983B;
    font-size:                      1.125em;
    padding-top:                    18px;
    padding-bottom:                 14px;
}
#page-content h5 {
    color:                          #87983B;
    font-size:                      1em;
    font-weight:                    bold;
    padding-top:                    14px;
    padding-bottom:                 10px;
}


#ttc-box {
    display: block;
    width:                          200px;
    float:                          right;
    border:                         1px solid #FFFFFF;
    margin:                         0 0 20px 20px;
}
#ttc-box h4 {
    background-color:               #FFFFFF;
    color:                          #87983b;
    font-size:                      0.875em;
    font-weight:                    bold;
    text-align:                     center;
    padding:                        6px 0;
}
#ttc-box ul {
    padding:                        3px 0 5px 6px;
    list-style:                     inside square;
    
}
#ttc-box li {
    color:                          #87983b;
}
#ttc-box li a {
    color:                          #494f4b;
    font-size:                      0.750em;
    padding-top:                    2px;
    padding-bottom:                 2px;
}
#ttc-box li a:hover {
    text-decoration:                underline;
}

ul.squares {
    padding:                        3px 0 16px 0;
    list-style:                     inside square;
    color:                          #555555;
}
ul.squares li {
    color:                          #87983b;
}


ol.enum-text {
    list-style: decimal;
    padding-left:                   30px;
    margin-bottom:                  12px;
}
ol.enum-text li {
    font-size:                      1em;
    color:                          #333;
    padding-bottom:                 12px;
}

ol.enum-links {
    list-style:                     inside decimal;
    margin-bottom:                  12px;
}
ol.enum-links li {
    font-size:                      0.875em;
    font-weight:                    bold;
    color:                          #555555;
    padding-bottom:                 3px;
}
ol.enum-links li a {
    color:                          #555555;
}
ol.enum-links li a:hover {
    color:                          #87983b;
}

/*DL, DT, DD TAGS LIST DATA*/
dl {
    margin-top:                     16px;
}

dl dt {
    background:                     #FFFFFF;
    color:                          #87983B;
    float:                          left; 
    font-weight:                    bold; 
    margin-right:                   10px; 
    padding:                        5px;  
    width:                          100px;
    border:                         1px solid #87983b;
}

dl dd {
    margin:                         4px 0; 
    padding:                        5px 0;
    border:                         1px solid #b9b9b9;
}


/* About Us - Prices*/
#prices {
    width: 282px;
    padding: 14px 20px;
    background-color: white;
    float: right;
    margin-bottom: 16px;
}
#prices table {
    margin-top: 12px;
}
#prices th {
    
}
#prices td {
    font-weight: bold;
    text-align: right;
    padding-left: 40px;
}
/*******************************************************************************
*  footer
*******************************************************************************/
#footer
{  

}

#footer-content {
        border-top: 4px dotted #A80000;
	width: 							945px;
	height: 						120px;
	margin: 						auto;
	padding: 						20px 30px 92px 30px;
        background: rgb(255, 255, 255); /* Fall-back for browsers that don't
                                    support rgba */
        background: rgba(255, 255, 255, .8);
}

#footer-content #seo-text {
	display: 						block;
	float: 							left;
	width:							411px;
        height: 105px;
	padding:						20px 25px 20px 0;
	border-right:                                           1px solid #B9B9B9;
	color:                                                  #555555;
	font-size:						0.75em;
}
#footer-content #seo-text p {
    padding-bottom:                 6px;
}


#footer-content #seo-text ul {
    list-style-type: square;
    padding: 6px 0 6px 14px;
}
#footer-content #seo-text li {
    padding-left: 6px;
}

#footer-content #seo-text a {
	color: 							#333;
}
#footer-content #seo-text a:hover {
	text-decoration: 				underline;
}

#seo-text p#lnk-built-by {
	padding-top: 					10px;
}
#seo-text p#lnk-built-by a {
	color:                          #555555;
}
#seo-text p#lnk-built-by a:hover {
	text-decoration:                underline;
}

#footer-content #contact-info {
	display: 						block;
	float: 							left;
	width:							140px;
        height: 105px;
	padding: 						20px;	
	border-right:                                           1px solid #B9B9B9;
	color: 							#555555;
	font-size:						0.75em;	
}

#footer-content #advisor {
	display: 						block;
	width: 							302px;
        height: 105px;
	float: 							left;
	padding: 						20px 0 20px 20px;
	color: 							#1B1B1B;
	font-family:					Helvetica, Helvetica Neue, Arial, sans-serif;
	font-weight:					bold;
}
#footer-content #advisor img {
	vertical-align: 				text-top;
	display: 						block;
	float: 							left;
	padding-right:                                      16px;
}
#footer-content #advisor h4 {
	float:							left;
	font-size:						1.20em;
	line-height: 					1.1;
	width: 160px;
}
#footer-content #advisor p {
	font-size:						0.70em;
	float:							left;
	padding-top:                    9px;
        line-height:                    1.4em;
        
}
#footer-content #advisor a {
    color:                          #1B1B1B;
}
#footer-content #advisor a:hover {
    text-decoration:                underline;
}

/*******************************************************************************
*  misc
*******************************************************************************/
#pix-box-rt {
    width: 342px;
    float: 							right;
}
#pix-box-rt img {
    padding: 						0 0 20px 20px;
}

#google-map-box {
    width: 322px;
    float: 							right;
    padding: 						0 0 20px 20px;
}
#google-map-box a {
    font-size: 0.8em;
    float: 							right;
    padding-top: 						12px;
    color: #333;
    padding: 4px;
    border: 1px dotted #bbb;
    margin-top: 6px;
    width: 314px;
    text-align: right;
}
#google-map-box a:hover {
    text-decoration: underline;
}

p#footer_url {
	display: 						none;
}

/*******************************************************************************
*  utility
*******************************************************************************/
.clearfix:after {
	content: 						".";
	display: 						block;
	clear: 							both;
	visibility: 					hidden;
	line-height:					0;
	height: 						0;
}
 
.clearfix {
	display: 						inline-block;
}
 
html[xmlns] .clearfix {
	display: 						block;
}
 
* html .clearfix {
	height: 						1%;
}