/*
Theme Name: Margaret Hanson Design 
Theme URI: http://margarethansondesign.ca/
Description: New Margaret Hanson Design theme designed by <a href="http://angelseacreative.com/">Angelsea Creative</a>, development by <a href="http://driftindustries.ca/">Drift Industries</a>.
Version: 1.0
Author: Anthony Clark
Author URI: http://driftindustries.ca/
*/



/******************************************/ 
/* HEADER
/*******************************************/
html, body { width: 100%; height: 100%; background-color: #f3f2f2; text-align: left;}
#header {height: 130px; margin-top: 10px; margin-bottom: 20px; background: url(assets/img/header.png) top center no-repeat; position: relative;}

.nav {position: absolute; left: 0px; top: 90px;}
#address{position: absolute; left: 0px; top: 55px; color: #818181; font-size: 10px;}
#contact {position: absolute; right: 0px; top: 55px; font-size:12px;}
#contact span#email a {color: #fc9d22; padding-right:5px;}

#social 			{position: absolute; right: 0px; top: 86px;}
#social a 			{display: block; float: right; height: 16px;margin-left: 22px;}
#social a#linkedin 	{width: 67px; background: url(assets/img/linkedin.png)}
#social a#twitter 	{width: 59px; background: url(assets/img/twitter.png)}
#social a#facebook 	{width: 73px; background: url(assets/img/facebook.png)}

ul.nav			{margin:0 0 1.5em 0; padding:0;}	
ul.nav li		{margin:0; padding:0 10px 0 0; line-height:1em; float:left; list-style:none;}
ul.nav li a		{float:left;}
a:hover, a:active, a:link, a:visited { outline: none; }

/******************************************/ 
/* HOMEPAGE 
/*******************************************/
h1#unique-divider {margin-top: 20px; width: 940px; height: 23px; text-indent: -9999px; background: url(assets/img/unique-divider.png);}

#bottom-content {margin-top: 40px;}
#home-content {width: 460px; float: left; font-size:12px;}
.intro {text-transform: uppercase; font-size:13px;} /*first paragraph is in all caps*/

#testimonial-quote,
#twitter-quote {width: 220px; padding:15px 0 0 0; font-size: 11px; float: right; background: url(assets/img/quote-top.png) top center no-repeat; line-height: 1.5; visibility: hidden;}
#twitter-quote {margin-left: 20px;}
#testimonial-quote p {margin: 0px; padding: 0 10px 10px 10px; background: #ebe9e9 url(assets/img/quote.png) bottom right no-repeat;}
#testimonial-quote p strong {display: block; margin-top:6px; font-size:11px;}
#testimonial-quote p:last-child {display: block; position: relative; height:38px; background: url(assets/img/quote-bottom.png) top center no-repeat;}
#testimonial-quote p:last-child a {position: absolute; top: 10px; right: 0px; font-size: 11px;}

#twitter-quote p {margin: 0px; padding: 0 10px 38px 10px; background: #ebe9e9 url(assets/img/twitter-bg.png) bottom right no-repeat;}
#twitter-quote p:last-child {display: block; position: relative; height:38px; background: url(assets/img/quote-bottom.png) top center no-repeat;}
#twitter-quote p:last-child a {position: absolute; top: 10px; right: 0px; font-size: 11px;}

#footer {border-top: 2px solid #aaa9a9; margin-top: 50px;}
#footer p {margin-top: 10px; color: #818181; font-size: 11px;}

/* Most common stuff you'll need to change */

.coda-slider-wrapper {position: relative;}
.coda-slider {}

/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider {overflow: auto !important;}

/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel {width: 940px; height: 218px;} 
.panel-wrapper {height: 218px;}

/* Panel */
.coda-slider .panel-wrapper {background: url(assets/img/slider-bg.png) top right no-repeat; position: relative; margin-right: 1px;}
.coda-slider .panel-wrapper img {float: left;}
.coda-slider .panel-wrapper h2 {border:0!important;}
.coda-slider .panel-wrapper h2 a {margin-top: 25px; color: #fff; float: right; width: 270px; text-align: left; text-transform:uppercase; padding-right: 30px; margin-left:-1px; line-height:1.2; font-size:1.0em; font-family:Arial, sans-serif; font-weight:bold;}
.coda-slider .panel-wrapper a.view-project {position: absolute; top: 150px; left: 650px; color: #fff; font-size: 11px; font-weight: bold;}
.coda-slider .panel-wrapper a.view-all {position: absolute; top: 170px; left: 650px; color: #de810a; font-size: 11px; font-weight: bold;}

/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }

#coda-nav {height: 19px; width: 940px; position: absolute; top: 200px; left: 0px; background: url(assets/img/slider-bottom.png);}
#coda-nav ul {position: absolute; top: 5px; left: 368px; margin: 0px; padding: 0px; width: 200px;}
#coda-nav ul li {list-style-type: none; float: left; margin: 0px; padding: 0px; width: 20%; text-align: center;}
#coda-nav ul li a {padding: 3px 5px; color: #000;}
#coda-nav ul li a.current {background-color: #fc9d22;}

#coda-nav #coda-nav-left-1 a {position: absolute; top: -10px; left: 330px; width: 47px; height: 47px; text-indent: -9999px; background: url(assets/img/left-arrow-trans.png);}
#coda-nav #coda-nav-right-1 a {position: absolute; top: -10px; left: 560px; width: 47px; height: 47px; text-indent: -9999px; background: url(assets/img/right-arrow-trans.png);}

/* Don't change anything below here unless you know what you're doing */
	
/* Miscellaneous */
.coda-slider-wrapper {clear: both;}
.coda-slider {overflow: hidden; position: relative }
.coda-slider .panel {display: block; float: left }
.coda-slider .panel-container {position: relative }
.coda-nav-left, .coda-nav-right {float: left }
.coda-nav-left a, .coda-nav-right a {display: block; text-align: center; text-decoration: none }


/******************************************/ 
/* PORTFOLIO 
/*******************************************/

#sidebar p {color: #555555;}
a#back-gallery {display: block; font-size: 13px; background-color: #fc9d22; text-align: center; padding: 3px;}

#sidebar h3 {font-size: 11px; color: #202020; margin: 30px 0 10px 0;}

form#searchForm 	{margin:0; padding:2px 0px; border: 1px solid #9a9a9a; position: relative;}		
#searchForm .field 	{padding: 2px 0px; width:130px; border: none; background-color: transparent;}		
#searchForm button 	{position: absolute; right: 0px; top: 2px; background: url(assets/img/search.png) center center no-repeat; border:none; height:17px; width:17px; line-height:0px; margin: 2px 0 0 0; padding: 0px;}	

ul#recently {margin: 0px; padding: 0px;}
ul#recently li {margin: 0px; padding: 0px; list-style-type: none; border-bottom: 1px solid #9a9a9a;}
ul#recently li p {padding: 7px 0; margin: 0px; line-height: 1.4; font-size:10px;}
ul#recently li span {font-weight: bold; text-transform: uppercase; color:#000; padding-right:4px;}

ul#archives {margin: 0px; padding: 0px;}
ul#archives li {margin: 0px; padding: 0px; list-style-type: none; border-bottom: 1px solid #9a9a9a;}
ul#archives li p {padding:10px 0 0 0; margin: 0px; text-transform:uppercase; font-size:11px;}
ul#archives li span {font-weight: bold; float: right;}

#content{border-right: 1px solid #aaa9a9; padding-right: 59px;}
img.portfolio-img {padding: 5px; border: 1px solid #000;}

.gallery {width: 220px; float: right; margin-left: 20px !important; background: url(assets/img/img-gallery-bg.png) top left no-repeat; padding-top: 30px;}			
.gallery-icon img {width: 100px; height: 100px;}
#gallerypost {margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px;}
#gallerypost img { border: 1 px double #0000FF;} 
.gallery-list {margin-bottom: 20px; padding: 10px; background-color: #ccc;}
.gallery-list .entrytitle img {float: left; margin-right: 20px;}
.gallery-list h2 {font-size: 20px;}
.gallery-item {margin: 0px;}


.attachment-single-post-banner {border: 1px solid #000; padding: 4px; margin-bottom:15px;}

.portfolio-item {margin-bottom: 30px; }
ul#portfolio-pages {margin: 0 0 10px 0; padding: 5px; background-color: #f6e8c6;}
ul#portfolio-pages li {list-style-type: none; float: left; color: #000;}

.img-container {width: 220px; height: 115px; overflow: hidden; margin-bottom: 5px;}
.portfolio-caption {background-color: #000; padding: 5px; height: 75px; position: relative;}
.portfolio-caption h6 a {color: #fff; font-size: 11px;}
a.read-more {color: #fc9d22; position: absolute; left: 5px; top: 60px; font-weight:bold; font-size:12px;}
a.portfolio-comments {color: #fc9d22; position: absolute; right: 5px; top: 60px; font-size: 11px;}
	
/* Blog Categories / Archives */
.post-readmore {text-transform: uppercase; font-weight: bold; font-size:11px;}

/* Begin Images */
p img {padding: 0; max-width: 100%;}
img.centered {display: block;margin-left: auto;margin-right: auto;}
img.alignright {padding: 4px;margin: 0 0 2px 7px;display: inline;}
img.alignleft {padding: 4px;margin: 0 18px 10px 0;display: inline; border:1px solid #460f0f;}
.alignright {float: right;}
.alignleft {float: left;}
/* End Images */

/* Begin Comments*/
.alt {margin: 0;padding: 10px;}
.commentlist {padding: 0;text-align: justify;}
.commentlist li {margin: 15px 0 10px;padding: 5px 5px 10px 10px;list-style: none;}
.commentlist li ul li { margin-right: -5px;margin-left: 10px;}
.commentlist p {margin: 10px 5px 10px 0;}
.children { padding: 0; }
#commentform p {margin: 5px 0;}
.nocomments {text-align: center;margin: 0;padding: 0;}
.commentmetadata {margin: 0;display: block;}
/* End Comments */

/* Captions */
.aligncenter,
div.aligncenter {display: block;margin-left: auto;margin-right: auto;}
.wp-caption {border: 1px solid #ddd;text-align: center;background-color: #f3f3f3;padding-top: 4px;margin: 10px;}
.wp-caption img {margin: 0;padding: 0;border: 0 none;}
.wp-caption p.wp-caption-text {font-size: 11px;line-height: 17px;padding: 0 4px 5px;margin: 0;}
/* End captions */