/*
Theme Name: Collective Conversation
Theme URI: http://blogs.hillandknowlton.com/
Description: Collective Conversation is the official theme for http://blogs.hillandknowlton.com/
Version: 0.1
Author: Ed Merritt
Author URI: http://www.edmerritt.com/
Tags: custom header, custom colours, fixed width, two columns, three columns, widgets
*/


/*  reset
--------------------------------------------------------------------------------------*/
* {font-size: 100%; margin: 0; padding: 0; line-height: 1.3em;}
body {position: relative; background: #fff; font: 75% Verdana, Helvetica, Arial, sans-serif; color: #000; text-align: center;}
* {behavior: url(iepngfix.htc);}

/*  structure
--------------------------------------------------------------------------------------*/
#wrapper {width: 1000px; margin: 0 auto; text-align: left;}
#header {position: relative; min-height: 120px; background: url(images/bgBody.jpg) bottom center no-repeat #c60001; padding-bottom: 8px; z-index: 99;}
#page {float: left; width: 1000px; background: url(images/pageBkg.png) 530px 0 no-repeat; position: relative; z-index: 6;}
#content {float: left; width: 440px; margin: 30px 60px 0 60px;}
#sidebar {position: relative; float: left; width: 380px; margin-top: -40px;}
.blogText #sidebar {top: 20px;}
.sidebar {float: left; font-size: 95%; width: 380px;}
/*.col2 {display: none;}*/
#sidebar.twoCols .sidebar {width: 175px; margin: 0 30px 0 0;}
#sidebar.twoCols .col2 {display: block; margin: 0;}
#footer {display: block; width: 1000px; clear: both; padding-top: 30px; background: url(images/sepHorSoft.jpg) top repeat-x;}

/*  header
--------------------------------------------------------------------------------------*/
#header .navSite {float: left; background: url(images/bgSubNav_left.png) no-repeat top left; margin: 0 0 0 60px; padding: 0 0 0 15px; }
#header .navSite li {float: left; display: inline;}
#header .navSite .lastLi {background: url(images/bgSubNav_right.png) no-repeat top right;}
#header .navSite a {font-size: 10pt; float: left; color: #fff; background: url(images/bulletSubtle.png) no-repeat left; padding: 7px 16px 9px 10px;}

#header #searchform {text-align: right; margin: 0 60px 0 0; padding-top: 5px;}
#header #searchform label {font-size: 0.9em; color: #fff;}
#header #s {width: 12em; }
#header .searchSubmit {margin-bottom: -8px;}

#hkLogo {display: block; width: 201px; height: 45px; background: url(images/logoHK.png) no-repeat; margin: 25px 0 0 80px; text-indent: -9999px;}
.ccInfo {position: absolute; z-index: 3; top:7.5em; float: left; display: block; width: 550px; padding: 20px 0 20px 60px; background: url(images/ccInfoDivider.png) top left no-repeat; margin-top: 20px;}
.blogText .ccInfo {display: none;}
#ccLogo {float: left; display: block; width: 230px; height: 50px; background: url(images/ccLogo.png) bottom no-repeat; margin: 0 20px 0 0; text-indent: -9999px;}
#ccLogo:hover {background-position: top;}

#nav {position: absolute; top: 50px; right: 60px; z-index: 10;}
#nav li span {float: left; background: url(images/navTR.gif) top right no-repeat;}
#nav li span span {background: url(images/navTL.gif) top left no-repeat;}
#nav li span span span {background: url(images/navBR.gif) bottom right no-repeat;}
#nav li span span span span {background: url(images/navBL.gif) bottom left no-repeat; padding: 6px 42px 9px 25px; font: 2.1em "Trebuchet MS"Verdana, Helvetica, Arial, sans-serif; color: #fff;}
#nav ul {position: absolute; display: none; background: url(images/bgDropdown.gif) top no-repeat; border-bottom: 1px solid #ccc; width: 182px; top: 47px; right: 0; padding: 14px 15px 10px; z-index: 10;}
#nav li:hover ul {display: block; }
#nav ul li {padding: 4px 0; background: url(images/sepHorSoft.jpg) bottom repeat-x;}
#nav ul li a {background: url(images/bulletDiscRedOnWhite.jpg) left no-repeat; font-size: 85%; padding-left: 10px; color: #000;}


#blogHeader {position: relative; height: 129px; overflow: hidden; z-index: 5;}
.blogHome #blogHeader {height: 223px;}
#blogHeaderImg {position: absolute; top: 0; left: 0; width: 1000px; height: 175px; overflow: hidden; z-index: 1;}
#blogHeaderImg img {float: right;}
#blogHeaderOverlay {position: absolute; bottom: 0; z-index: 2; background: url(images/header01b.png) 100% 100% no-repeat; display: block; width: 1100px; height: 223px; overflow: hidden;}
.blogHome #blogHeaderOverlay {width: 1000px;}

.blogHome .headerCollapse {display: none;}
.headerCollapse {position: absolute; z-index: 5; top: 0; right: 0; display: block; width: 82px; height: 47px; opacity: 0.6;}
.headerCollapse:hover {text-decoration: none; cursor: pointer;}
.headerCollapse span {display: block; background: url(images/headerCollapse.png) top left no-repeat; width: 82px; height: 47px;}
.headerCollapse span:hover {background-position: top right;}
.headerCollapse em {display: none; background: url(images/headerCollapse.png) bottom left no-repeat; width: 82px; height: 47px;}
.headerCollapse em:hover {background-position: bottom right;}

#tabsList {position: relative; display: block; float: left; width: 100%; padding-left: 15px;}
#tabsList h2 {position: relative; float: left; background: url(images/tabsBkg.png) 0 0 no-repeat; padding: 0.4em 0 0.25em 1em; height: 1.3em; margin: 0 1em 0 0; font-size: 1.3em;}
#tabsList h2 .inner {position: absolute; top: 0; right: -1em; height: 1.9em; width: 1em; background: url(images/tabsBkg.png) right 0 no-repeat;}
#tabsList h2.activeTab {padding-bottom: 0.4em;}
#tabsList h2.activeTab .inner { height: 2.05em;}
#sidebarTabs {position: relative; background: url(images/tabsBkg.png) 0 2.3em no-repeat; z-index: 100;}
#sidebarTabs ul {margin-bottom: 40px; padding-top: 0.5em; position; relative}
#sidebarTabs ul ul {margin-bottom: 0; padding-top: 0;}
#sidebarTabs ul .inner {position: relative; top: 15px; height: 15px; background: url(images/tabsBkg.png) bottom no-repeat; zoom: 1;}
#sidebarTabs li.widget {margin: 0 1.5em; padding: 0; position: relative; top: 1em; clear: left;}

/*  typography
--------------------------------------------------------------------------------------*/
.blogLogo {position: absolute; z-index: 3;}
h1 {display: block; padding: 25px 0 5px 60px; font: 2.5em "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; width: 520px;}
h1 a {color: #fff; line-height: 0.9em;}
h2 {font: 2.2em "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;}
.entry h2 {font-size: 1.6em;}
h3 {font: 1.5em "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;}
h4 {font: 1.4em "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;}
h5 {font: 1.3em "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;}
h2, h3, h4, h5 {color: #006666;}
.post h2 {margin: 0 0 0.5em 0;}
.post h2:first-child {background: url(images/postBottom.gif) 310px 100% repeat-x; padding: 0.3em 0 0.2em 0;}
.entry h2, .entry h3, .entry h4, .entry h5 {margin: 1.2em 0 0.5em 0;}
.entry p, .entry ul, .entry ol, .entry em, .entry li, .entry i, .entry span {line-height: 1.7em;}
.sidebar h2 {font-size: 1.5em; margin: 30px 0 10px 0;}
.sidebar .widgettitle {border-bottom: 1px solid #e5e5e5; padding-bottom: 0.2em;}
#browse h2 {font-size: 1.5em; margin: 0 0 10px 0;}
.archivePage h2 {margin-bottom: 1em;}
.archivePage h3 {margin-bottom: 0.5em;}
h3#comments, h3#respond {margin: 3em 0 1em 0}
p, pre {margin: 0 0 1em;}
.description {padding: 0 0 0 60px; color: #fff; opacity: 0.6; width: 430px; line-height: 1.1em; font-size: 95%;}
ul, ol {list-style: none;}
ul ul, ul ol, ol ol, ol ul, #sidebar ul ul ul, #sidebar ul ul ol, #sidebar ul ol ul, #sidebar ul ol ol {margin-bottom: 0;}
#content ul, #sidebar ul ul {margin: 0 0 1em 2.5em; list-style: disc;} 
#content ol, #sidebar ul ol {margin: 0 0 1em 2.5em; list-style: decimal;}
code, pre {font: 1em "Courier New", Courier, monospace; color: #964000;}
pre {color: #579541;}
blockquote {border-left: 4px solid #ddd; background: #f5f5f5; margin: 1em 0 1em 0; padding: 1em 1em 1em 1em; font: italic 1em Georgia, serif; color: #444;}
blockquote blockquote {border-left: 4px solid #ccc; background: #ebebeb}
.hidden {display: none;}
.entry dt {font-weight: bold; margin: 0 0 0.3em;}
.entry dd {margin: 0 0 1em 0.5em;}
.entry {margin-bottom: 1.7em;}

a {text-decoration: none; color:#666;}
h2 a, .commentsLink a {color: #990000;} 
a:hover {text-decoration: underline;}
a:focus {outline: none;}


.post {position: relative; padding: 0 0 4px; margin-bottom: 40px; background: url(images/postBottom.gif) bottom no-repeat; border-left: 1px solid #e5e5e5; padding-left: 29px;}
.archivePage .post {margin-bottom: 1.5em;}
.post img {padding: 4px; border: 0px solid #dedec6; margin-right: 1em; float: left; background: none;}

.imgLeft, img[align="left"], .alignleft {float: left; margin-right: 1em;}
.imgRight, img[align="right"], .alignright {float: right; margin-left: 1em;}
.wp-caption {padding: 4px; border: 1px solid #dedec6; margin-bottom: 0.8em; background: #eee;}
.wp-caption img {margin-bottom: 0.5em;}
.wp-caption-text {margin: 0 0.5em 0.5em 0.5em; font-style: italic; font-family: georgia; color: #666;}

.commentsLink {text-align: right; font: 1em Georgia, serif;}

.postmetadata {border: 1px solid #e5efef; background: #f2f7f7; padding: 8px 8px 4px 8px; color: #999; margin: 0 0 1em;}
.blogHome .postmetadata, .archivePage .postmetadata {margin: 0;}
.postmetadata a {color: #7fb2b2;}
.postmetadata p {font-size: 0.9em; margin: 0 0 0.5em 0;}
.postmetadata p.date {font-size: 1em;}

.dateBox {position: absolute; top: -10px; left: -61px; width: 60px; padding: 10px 0 50px; font: 1em Helvetica, Arial, sans-serif; text-align: right; color: #888;}
.dateBox span {display: block; clear: both; line-height: 1.1em; background: #f2f7f7; padding: 0 5px;}
.dateBox .d1 {font-size: 3em; line-height: 0.9em; height: 33px; padding-top: 5px; color: #abcdcd;}
.dateBox .d2 {font-size: 0.8em; height: 13px;}
.dateBox .d3 {font-size: 0.9em; padding-bottom: 5px;}

.navigation {float: left; display: block; width: 100%; margin-bottom: 80px; background: url(images/postTop.gif) top no-repeat; padding-top: 4px;}
.navigationInner {float: left; display: block; width: 100%; background: url(images/postBottom.gif) bottom no-repeat; padding-bottom: 4px;}

.alignright {float: right;}
.navigation a {float: left; display: block; padding: 10px;}

#browse, #commentform {background: #eee; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 1em; border: 1px solid #e5e5e5; border-bottom: 1px solid #ccc;}
#browse select {font: 1em Verdana, Helvetica, Arial, sans-serif; width: 356px; padding: 3px;}
#browse select option {padding: 0 3px;}
.or {width: 100%; text-align: center; border-top: 1px solid #ddd; margin: 1em 0 0;}
.or span {position: relative; top: -0.8em; margin-top: -1em; background: #eee; text-transform: uppercase; font-size: 0.8em; padding: 0 2em; color: #888;}
#browse #s {font: 1em Verdana, Helvetica, Arial, sans-serif; padding: 3px; width: 275px;}
#browse #searchsubmit {padding: 1px 3px; font-size: 1.1em;}

#commentform p {display: block; clear: both; margin: 0 0 0.5em;}
#commentform label {float: left; display: block; width: 120px; font-size: 0.9em; position: relative;  top: 0.4em;}
#commentform input {font-size: 1.2em; padding: 3px; width: 200px;}
#commentform textarea {width: 256px; padding: 3px; font: 1.1em Verdana, Helvetica, Arial, sans-serif;}
#commentform #submit {padding: 1px 3px; font-size: 1.1em; margin-left: 120px; width: auto;}
#commentform small {font-weight: bold; color: #990000;}

.commentlist {position: relative; color: #555; margin: 0 !important;}
.commentlist li {position: relative; display: block; clear: both; list-style: none; min-height: 110px; padding: 0 0 1.5em 130px; background: url(images/postBottom.gif) bottom no-repeat; margin-bottom: 1.5em;}
.commentDetails {position: absolute; top: 0; left: 0; margin-right: 10px; font-size: 0.9em; width: 120px;}
.commentmetadata {display: block; margin: 5px 0 0 0;}
.commentDetails cite {font-weight: bold; font-style: normal; color: #000;}

#wp-calendar {width: 100%;}
#wp-calendar td {border-top: 1px solid #eee;}
#wp-calendar a {font-weight: bold; color: #660000;}



/*  footer
--------------------------------------------------------------------------------------*/
#footer {float: left; font-size: 0.9em; color: #666; padding: 0; margin: 30px 0;}
#footer p {float: right; margin-right: 60px; padding: 5px 0;}
#footer ul {float: left; margin-left: 60px;}
#footer a {color: #333;}

#footer li {float: left;display: inline; border-right: 1px solid #ddd; padding: 5px 10px 0;}
#footer li.last, #footer li:last-child {border: none; padding-right: 0;}
#footer li:first-child {padding-left: 0;}




/*  colour schemes
--------------------------------------------------------------------------------------
design01 - turquoise (#006666)
design02 - green (#999900)
design03 - purple (#330066)
design04 - brown (#cccc99)

*/
/*  header pics */
.default1 #blogHeaderOverlay {background-image: url(images/header01b.png);}
.default2 #blogHeaderOverlay {background-image: url(images/header02b.png);}
.default3 #blogHeaderOverlay {background-image: url(images/header03b.png);}
.default4 #blogHeaderOverlay {background-image: url(images/header04b.png);}
/*  headings - 100% */
.default1 h2, .default1 h3, .default1 h4, .default1 h5 {color: #006666;}
.default1 .sidebar h2, .default1 #sidebarTabs h2 {color: #408c8c;}
.default1 h2.postTitle {color: #003838;}
.default2 h2, .default2 h3, .default2 h4, .default2 h5 {color: #999900;}
.default2 .sidebar h2, .default2 #sidebarTabs h2 {color: #b3b340;}
.default2 h2.postTitle {color: #6b6b00;}
.default3 h2, .default3 h3, .default3 h4, .default3 h5 {color: #330066;}
.default3 .sidebar h2, .default3 #sidebarTabs h2 {color: #66408c;}
.default3 h2.postTitle {color: #140038;}
.default4 h2, .default4 h3, .default4 h4, .default4 h5 {color: #cc9966;}
/*.default4 .sidebar h2, .default4 #sidebarTabs h2 {color: #d9b38c;}*/
.default4 h2.postTitle {color: #ad6b38;}
/*  headings - 10%, 5%, 50% */
.default1 .postmetadata {border: 1px solid #e5efef; background: #f2f7f7;}
.default1 .postmetadata a {color: #7fb2b2;}
.default2 .postmetadata {border: 1px solid #ebebcc; background: #f5f5e5;}
.default2 .postmetadata a {color: #b3b340;}
.default3 .postmetadata {border: 1px solid #eae5ef; background: #f5f2f7;}
.default3 .postmetadata a {color: #997fb2;}
.default4 .postmetadata {border: 1px solid #f5ebe0; background: #faf5ef;}
.default4 .postmetadata a {color: #cc9966;}
/*  headings - 10%, 5%, 50% */
.default1 .dateBox span {background: #f2f7f7;}
.default1 .dateBox .d1 {color: #abcdcd;}
.default2 .dateBox span {background: #f5f5e5;}
.default2 .dateBox .d1 {color: #cccc7f;}
.default3 .dateBox span {background: #f5f2f7;}
.default3 .dateBox .d1 {color: #bcabcd;}
.default4 .dateBox span {background: #faf5ef;}
.default4 .dateBox .d1 {color: #ddbb98;}
/*  headings - 10%, 5%, 50% */
.default1 h2 a, .default1 .commentsLink a, .default1 .navigation a {color: #990000;} 
.default2 h2 a, .default2 .commentsLink a, .default2 .navigation a {color: #006666;} 
.default3 h2 a, .default3 .commentsLink a, .default3 .navigation a {color: #ff9900;} 
.default4 h2 a, .default4 .commentsLink a, .default4 .navigation a {color: #999900;} 
.default1 .navigation a:hover {color: #fff; background-color: #990000; text-decoration: none;} 
.default2 .navigation a:hover {color: #fff; background-color: #006666; text-decoration: none;} 
.default3 .navigation a:hover {color: #fff; background-color: #ff9900; text-decoration: none;} 
.default4 .navigation a:hover {color: #fff; background-color: #999900; text-decoration: none;}


/* Site homepage */
.mainHome h1 {background: url(images/ccLogoHome.png) top left no-repeat; text-indent: -9999px; margin: 30px 0 10px 56px;}
.mainHome .description {width: 450px; font-size: 1.2em;}
#homecol, #homecol2 {display: block; float: left; width: 205px; min-height: 0;}
#homecol {padding-right: 15px;}
#homecol2 {padding-left: 15px;}
#homecol h3, #homecol2 h3, .mainHome .row h2 {font-size: 1.2em; color: #888; margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: 1px solid #ccc;}
#homecol h2, #homecol2 h2 {font-size: 1.5em; margin-bottom: 0.5em;}
#homecol .author, #homecol2 .author {padding: 0.5em; background: #f5f5f5; border: 1px solid #e5e5e5; color: #666; font-style: italic; font-family: Georgia, serif;}
#homecol.design01 h2 a, #homecol2.design01 h2 a, #allBlogs .design01 h3 a {color: #006666;}
#homecol.design02 h2 a, #homecol2.design02 h2 a, #allBlogs .design02 h3 a {color: #999900;}
#homecol.design03 h2 a, #homecol2.design03 h2 a, #allBlogs .design03 h3 a {color: #330066;}
#homecol.design04 h2 a, #homecol2.design04 h2 a, #allBlogs .design04 h3 a {color: #CC9966;}
.row {float: left; clear: both; margin-top: 3em;} 
#content #latestPosts {list-style: none; margin: 0;}
#content #latestPosts li {display: block; float: left; width: 440px; border-bottom: 1px dotted #ccc; min-height: 0; padding-top: 10px;}
#content #latestPosts li, #content #latestPosts li + li + li, #content #latestPosts li + li + li + li + li {margin-right: 0px; margin-left: 0;}
#content #latestPosts li + li, #content #latestPosts li + li + li + li, #content #latestPosts li + li + li + li + li + li {margin-right: 0; margin-left: 0;}
#latestPosts h3 {font-size: 1em; font-family: Verdana, Helvetica, Arial, sans-serif;}
#latestPosts .date {font-size: 0.9em; color: #666;}
#latestPosts h3 a {color: #006666;}

#content #allBlogs {list-style: none; margin: 0;}
#content #allBlogs li.allBlogsOpen {padding: 1em 10px;; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-top: -1px;}
#content #allBlogs li.allBlogsClosed {padding: 0.3em 10px; border-bottom: 1px solid #e5e5e5; background: #f5f5f5; font-size: 0.85em;}
#content #allBlogs li.allBlogsClosed .rss, #content #allBlogs li.allBlogsClosed .desc, #content #allBlogs li.allBlogsClosed ul, #content #allBlogs li.allBlogsClosed .blogUrl, #content #allBlogs li.allBlogsOpen .fakeUrl, #content #allBlogs li.allBlogsClosed p {display: none;}
#content #allBlogs li.allBlogsOpen .blogUrl {display: block;}
#allBlogs .rss {float: right; display: block; width: 12px; height: 12px; background: url(images/rssMini.gif) top left no-repeat; text-indent: -9999px; margin: 6px 0 0 1em;}
#allBlogs .desc {font-size: 0.9em;}

.ad {margin-top: 30px;}

.mainHome #sidebar .widget_categories ul li {font-weight: bold; color: #000;}
.mainHome #sidebar .widget_categories ul li li {font-weight: normal; margin-bottom: 0; color: #666;}
.mainHome #sidebar .widget_categories ul {margin-left: 0; list-style: none;}

.mainHome #sidebar .widget_categories ul ul {margin: 0 0 1em 2.5em; list-style: disc; margin-top: 0.5em;}
.mainHome #blogHeaderImg {background: #539a9a !important}

.mainHome .entry {margin-bottom: 1em;} 

div.sociable { margin: 16px 0; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	border: 1px solid #ccc;
	color: black;
	line-height: 1.25em;
}
.sociable span {
	display: block;
}
.sociable ul {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}
.sociable ul li {
	background: none;
	display: inline !important;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

.sociable-hovers {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity=40);
}
.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}