
/* column layout */
body{
	font-family: "Times New Roman", Times, Serif;
	background:#ebebeb;
	margin:0;
	padding:0;
	text-align:center;
	color:#7e7f81;
	/*font-size:62.5%;*/
    font-size:100%;
    line-height:1.125em;
}
#wrapper{
	margin:0 auto;
	background:#ffffff;
	text-align:left;
	width:990px;
}
#main{
	width:710px;
	float:left;
}
#lateral{
	width:280px;
	float:right;
}
#ribbons{
	margin-top:20px;
	background:#FFFFFF url(/images/ribbons-side.gif) repeat-y 0px 170px;
}
#content{
	background:url(/images/ribbons-top.gif) no-repeat left top;
	padding:60px 65px 0 60px;
}
#footer {
	clear:both;
}

/* general rules */
img {
	border:medium none;
}


/* top menu*/
#menu{
	width:512px;
	width:615px;
	margin:0 auto;
	padding:20px 0;
	list-style:none;
	list-style-type: none;
	overflow: hidden;
}
#menu li{
	float:left;
}
#menu li a{
	background:url(/images/menu.gif) no-repeat left top;
	display:block;
	text-indent:-1000px;
	overflow:hidden;
	height:24px;
}
#menu li.home a{ width:66px; background-position: 0 0;}
#menu li.home a:hover{ background-position: 0 -24px;}
#menu li.about a{ width:96px; background-position: -66px 0;}
#menu li.about a:hover{ background-position: -66px -24px;}
#menu li.clients a{	width:121px; background-position: -162px 0;}
#menu li.clients a:hover{ background-position: -162px -24px;}
#menu li.work a{ width:103px; background-position: -283px 0;}
#menu li.work a:hover{ background-position: -283px -24px;}
#menu li.people a{ width:115px; background-position: -386px 0;}
#menu li.people a:hover{ background-position: -386px -24px;}
#menu li.contact a{ width:114px; background-position: -501px 0;}
#menu li.contact a:hover{ background-position: -501px -24px;}


/* header */
h1, h2 {margin:0; padding:0;}
h1 img,
h2 img {display:block; margin:0 auto; padding:0;}


/* typografy */
h3{
	color:#c02135;
	/*
	font-size:2.2em;
	margin:1em 0 0.2em;
	*/
	font-size:1.375em;
	margin:0.625em 0 0.125em;
}
h4 { 
	/* margin:2em 0 0.4em; */
	margin:1.25em 0 0.25em;
}
p {
	/*font-size:1.4em;*/
	font-size:0.875em;
}
a {
	color:#7e7f81;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}



/* posts */
#content span.author {
	float:left;
}
#content span.pubdate {
	float:right;
}
#content div.bottom,
#content div.footer {
	width:100%;
}
#content div.bottom p,
#content div.footer p {
	/* margin:0.2em 0; */ 
	margin:0.125em 0;
	font-style:italic;
}
#content p.tags,
#content p.bookmarks {
	float:left;
}

.text a, .text a:link, .text a:visited
{
	color: #c02135;
	font-weight:bold;
	text-decoration: none;
}

#content p.categories,
#content p.services{
	float:right;
}
#content div.hr { height: 40px; background: #fff url(/images/divider.gif) no-repeat scroll bottom;}
#content div.hr hr { display: none; }


/* lateral */
#lateral div.hr { height: 20px; background-color: #eaeaea;}
#lateral div.hr hr { display: none; }

#searchbox {
	/*
	font-size:1.4em;
	margin:0.4em 1em 1em 0.2em;
	padding:0.4em;
	*/
	font-size:0.875em;
	margin:0.25em 0.625em 0.625em 0.125em;
	padding:0.25em;
	
	background-color: #eaeaea;
}
#searchbox label{
	font-size:0.857em;
}
#monthList,
#monthList ul {
	list-style:none;
	margin:0;
	padding:0;
}
#monthList {
	/*
	font-size:1.4em;
	margin:0.4em 0 1em 0.2em;
	*/
	font-size:0.875em;
	margin:0.25em 0 0.625em 0.125em;
	
	color:#9b3b40;
}
#monthList ul {
	/* margin-left:1em; */
	margin-left:0.625em;
}
#monthList li{
	font-weight:bold;
	/*margin:0.2em 0;*/
	margin:0.125em 0;
}
#monthList li li{
	font-weight:normal;
	margin:0;
}

#categorylist {
	/*
	font-size:1.4em;
	margin:0.4em 0 1em 0.2em;
	*/
	font-size:0.875em;
	margin:0.25em 0 0.625em 0.125em;
	padding:0;
	list-style:none;
}
#categorylist li{
	/*margin:0.2em 0;*/
	margin:0.125em 0;
}
#categorylist img{
	/*margin-right:0.4em;*/
	margin-right:0.25em;
}


/* specific */
table.clients td { border:#999999 1px solid; height: 130px; }

#people  {
    list-style-type:none;
    width:570px;
    display:block;
    overflow:hidden;
    margin:0 auto;
    padding:0;
}
#people li {
    border:#666666 1px solid;
    background-color:#999999;
    float:left;
    margin:5px 11px;
    width:90px;
    height:119px;
    display:inline;
	overflow:hidden;
}
#people li img{
    display:block;
}
#tooltip {
    position:absolute;
    z-index:1;
    width:420px;
    height:220px;
    background:#cccccc url(/images/tooltip-shadow-red.png) no-repeat top left;
    text-align:center;
    color:#EEE7B9;
}
#tooltip h3,
#tooltip div {
    margin:10px 30px;
    color:inherit;
    line-height:1.2em;
    font-size:14px;
}
#tooltip h3 {
    margin-top:65px;
    color:#EEE7B9;
}
#tooltip div {
    font-size:13px;
    color:#EEE7B9;
}
#tooltip.red { background:transparent url(/images/tooltip-shadow-red.png); color:#EEE7B9; }
#tooltip.blue { background:transparent url(/images/tooltip-shadow-blue.png); color:#EEECDD; }
#tooltip.white { background:transparent url(/images/tooltip-shadow-white.png); color:#828488; }
#tooltip.grey { background:transparent url(/images/tooltip-shadow-grey.png); color:#EEECDD; }

#tooltip.red h3, #tooltip.red div { color:#EEE7B9; }
#tooltip.blue h3, #tooltip.blue div { color:#EEECDD; }
#tooltip.white h3, #tooltip.white div { color:#828488; }
#tooltip.grey h3, #tooltip.grey div { color:#EEECDD; }



/*----------------------------
				Recent posts
----------------------------*/

#recentPosts {
	/*font-size:1.4em;
	margin:0.4em 0 1em 0.2em;*/
	font-size:0.875em;
	margin:0.25em 0 0.625em 0.125em;
	padding:0;
	list-style:none;
}

#recentPosts li{
	/*margin:0.2em 0;*/
	margin:0.125em 0;
}

ul.recentPosts li span{
	display: block;
	text-transform: none;
	font-style:italic;
	color:#c02135;
	font-weight: bold;
}

/*----------------------------
			Administration
----------------------------*/

#ctl00_Menu1_ulMenu
{
	font-size:0.875em;
	margin:0.25em 0 0.625em 0.125em;
	padding:0;
	list-style:none;
}

#ctl00_Menu1_ulMenu li span
{
	font-weight: bold;
}
/*----------------------------
			Related Posts
----------------------------*/

#relatedPosts div {
	background: white;
	padding: 5px 10px 5px 5px;
	/*border: 1px solid silver;*/
}

#relatedPosts h1 {
	margin: 0 0 10px 0;
}

#relatedPosts a {
	display: block;
	margin-top: 5px;
	font-weight:bold;
}

#relatedPosts span {
	color: #666666;
	text-indent: 0px;
	font-size: 12px;
	
}



/*----------------------------
			Recent comments
----------------------------*/

ul.recentComments li{
	padding-bottom: 10px;
	text-transform: none;
}

ul.recentComments li a.postTitle{
	font-weight: bold;
}



/* rating */

.rating{
	margin-bottom: 10px;
}

.rating p{
	display: inline;
	position: relative;
	top: 14px;
	left: 55px;
}

.star-rating{position:relative;width:125px;height:25px;overflow:hidden;list-style:none;margin:0;padding:0;background-position:left top}
.star-rating li{display:inline}
.star-rating a,.star-rating .current-rating{position:absolute;top:0;left:0;text-indent:-1000em;height:25px;line-height:25px;outline:none;overflow:hidden;border:none}
.star-rating a:hover,.star-rating a:active,.star-rating a:focus{background-position:left bottom}
.star-rating a.one-star{width:20%;z-index:6}
.star-rating a.two-stars{width:40%;z-index:5}
.star-rating a.three-stars{width:60%;z-index:4}
.star-rating a.four-stars{width:80%;z-index:3}
.star-rating a.five-stars{width:100%;z-index:2}
.star-rating .current-rating{z-index:1;background-position:left center}
.small-star{width:50px;height:10px}
.small-star,.small-star a:hover,.small-star a:active,.small-star a:focus,.small-star .current-rating{background-image:url(/images/star-small.gif);line-height:10px;height:10px}





/* hax 
   commented: OJ, now at bottom of CSS file.

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	zoom: 1;
}
*/

/*----------------------------
					Comments
----------------------------*/

.comment {
	border: 1px solid silver;
	background-color: white;
	padding: 3px 10px;
	margin-bottom: 10px;
}

.comment .date {
	font-size: 10px;
	color: #666666;
	text-align: right;
	margin: 0;
	padding: 3px 0px;
	border-bottom: 1px dashed silver;
}

.comment .author {
	margin: 0;
	padding: 3px 0px;
}

.self {
	border: 1px solid black;
}

.comment .gravatar {
	float: left;
	clear: both;
	margin: 5px 10px 5px 0;
}

.comment .gravatar img {
	height: 80px;
	width: 80px;
}

.comment .content {
	min-height: 50px;
	margin: 5px;
	margin-left: 0px;
	width: 560px;
	border-bottom: 1px dashed silver;
}

.comment cite{
	font-family: Monospace;
	font-style: normal;
}

.comment img.flag {
	position: relative;
	top: 2px;
}

.commentForm {
	padding: 5px;
}

.commentForm label {
	float: left;
	display: block;
	width: 80px;
	margin-top: 4px;
}

.commentForm input {
	width: 300px;
}

.commentForm textarea {
	width: 100%;
	height: 150px;
	border:1px solid silver;
}

#commentMenu{
	padding: 0;
	margin:0;
	clear:both;
}

#commentMenu li{
	float:left;
	border:1px solid silver;
	border-bottom: transparent;
	margin:0;
	list-style:none;
	margin-right:5px;
	padding: 3px 8px;	
	cursor:pointer;
	position:relative;
	top: 2px;
	background:#d8d8d8;
}

#commentMenu li.selected{
	background:white;
	border-bottom:1px solid white;
}

#commentPreview{
	display:none;
	clear:both;
	min-height: 150px;
}

.success {
	color: green;
	font-weight: bold;
}

.commentForm .bbcode {
    font-size:10px;
    float:right;
    position:relative;
    top:20px;
    padding: 3px;
}

.bbcode a {
    margin: 1px;
    padding: 1px 3px 1px 3px;
    background: #fff;
    border: 1px solid #ccc;
}

/*----------------------------
		      Featured Posts
----------------------------*/
.featured-thumbnail 
{
    float: left;
    width: 114px;
    height: 84px;
}
.featured-thumbnail a img 
{
    padding: 1px;
    border: solid 1px #eaeaea;
}
.featured-thumbnail a:hover img 
{
    border-color: #c02135;
}

.featured-link 
{
    float: left;
    width: 152px;
    height: 84px;
    padding-left: 5px;
}
.featured-rating 
{
    position: relative;
    width: 50px;
    height: 15px;
    overflow: hidden;
    background: #fff url("/images/star-small.gif") 0 5px repeat-x;
}
.featured-rating-score 
{
    position: absolute;
    top: 5px;
    left: 0;
    height: 10px;
    z-index: 100;
    background: #fff url("/images/star-small.gif") 0 -20px repeat-x;
}
.featured-rating-score span { visibility: hidden; }


/*----------------------------
					Archive
----------------------------*/

#archive {
	background-color: white;
	border: 0px solid silver;
	padding: 10px;
}

#archive h1 {
	margin: 0;
	border-bottom: 1px dashed silver;
	padding-bottom: 9px;
}

#archive h4 {
	border-bottom: 1px solid silver;
	/*padding-bottom: 4px;*/
	font-size: 16px;
	/*margin-bottom: 10px;*/
}

#archive h4 img {
	margin-right: 5px;
}

#archive ul {
	list-style-type: square;
	margin: 0 10px;
	padding: 10px;
}

#archive ul li {
	margin-right: 20px;
}

#archive table{
	width: 100%;	
	border-collapse: collapse;
}

#archive table td, #archive table th{
	text-align:left;
}

#archive table td{
	text-align:left;
	border-bottom: 1px solid #D8D8D8;
	padding: 2px 0;
}

#archive .date{
	width: 100px;
}

#archive .comments{
	width: 70px;
	text-align: center;
}

#archive .rating{
	width: 70px;
	text-align: center;
}


/*----------------------------
			Search on search
----------------------------*/

#searchonsearch {
	background: white;
	padding: 5px 10px;
	margin-bottom: 20px;
	border: 1px solid silver;
}

#searchonsearch h3 {
	margin: 3px;
	font-size: 13px;
}

#searchonsearch ol li {
	margin: 2px 0;
}

/*----------------------------
				Search page
----------------------------*/

#searchpage{
	margin-bottom: 30px;
}

#searchpage input#q{
	width: 300px;
}

#searchpage input#comment{
	clear: both;
}

.searchresult{
	margin-bottom: 20px;
}

.searchresult a{
	font-weight: bold;
}

.searchresult span.text{
	clear: both;
	display: block;
	margin: 3px 0;
}

.searchresult span.type{
	display: block;
}

.searchresult span.url{
	color: Gray;
}

.searchpage ul.paging{
 list-style-type: none;
 margin:0px;
 margin-bottom: 20px;
 padding:0px;
}

.searchpage ul.paging li{
 display: inline;
 border: 1px solid gray; 
 background: #f1f1f1;
 margin-right: 5px;
}

.searchpage ul.paging li a{
 padding: 5px 8px;
}

.searchpage ul.paging li.active{
 background: #f1f1f1;
 border: 1px solid black;
}

/*----------------------------
			Syntax highlighter
----------------------------*/

.code
{
	font-size: 12px;
	color: black;
	font-family: Consolas, "Courier New", Courier, Monospace;
	background-color: #F1F1F1;
  line-height: normal;
}

.code p{
	padding: 5px;
}

.code .rem { color: #008000; }

.code .kwrd { color: #0000ff; }

.code .str { color: #006080; }

.code .op { color: #0000c0; }

.code .preproc { color: #0000ff; }

.code .asp { background-color: #ffff00; }

.code .html { color: #800000; }

.code .attr { color: #ff0000; }

.code .alt {	background-color: #f4f4f4; }

.code .lnum { color: #606060;}

/*----------------------------
					XFN tags
----------------------------*/

div.post .text a[rel] {
	padding-right:11px;
	background-repeat: no-repeat;
	background-position: right center;
}
div.post .text a[rel="me"] {	
	background-image:url('../../pics/xfn/me.gif');
}

/*-------- [ These should cascade to pick the correct icon for the contact ]--*/

/*-------- [ Normal contacts ]--*/
div.post .text a[rel~="contact"] ,
div.post .text a[rel~="acquaintance"],
div.post .text a[rel~="friend"] {
	background-image:url('../../pics/xfn/contact.gif');
}
/*-------- [ Normal contacts youve met ]--*/
div.post .text a[rel~="contact"][rel~="met"] ,
div.post .text a[rel~="acquaintance"][rel~="met"] ,
div.post .text a[rel~="friend"][rel~="met"] {
	background-image:url('../../pics/xfn/contactMet.gif');
}

/*-------- [ Colleague and co worker icon more important than contact ]--*/
div.post .text a[rel~="colleague"] ,
div.post .text a[rel~="co-worker"] {
	background-image:url('../../pics/xfn/colleague.gif');
}
/*-------- [ Colleague and co worker icon when met ]--*/
div.post .text a[rel~="colleague"][rel~="met"] ,
div.post .text a[rel~="co-worker"][rel~="met"] {
	background-image:url('../../pics/xfn/colleagueMet.gif');
}

/*-------- [ Sweethearts are more important than work!!! ]--*/
div.post .text a[rel~="muse"] ,
div.post .text a[rel~="crush"] ,  
div.post .text a[rel~="date"] ,
a[rel~="sweetheart"] {
	background-image:url('../../pics/xfn/sweet.gif');
}
/*-------- [ ...and if youve met them thats even better ]--*/
div.post .text a[rel~="muse"][rel~="met"] ,
div.post .text a[rel~="crush"][rel~="met"] ,  
div.post .text a[rel~="date"][rel~="met"] ,
div.post .text a[rel~="sweetheart"][rel~="met"] {
	background-image:url('../../pics/xfn/sweetMet.gif');
}

#postnavigation{
	margin-bottom: 10px;
	text-align: center;
	color: Gray;
	background: white;
	padding: 3px;
}

/* Client Work overlay */

#overlay
{
    display: none;
    z-index: 10000;
    background-color: transparent;
    width: 750px;
    height: 547px;
    position: relative;
}
/*
#overlay .close
{
    z-index: 10002;
    position: absolute;
    right: 75px;
    top: 60px;
    height: 12px;
    width: 78px;
    cursor: pointer;
}*/

#overlayContent
{
    z-index: 10001;
    position: relative;
    background: transparent url(/images/overlay-close.gif) no-repeat top left;
    top: 48px;
    left: 48px;
    width: 800px;
    height: 600px;
}

#overlayContent .clientpanes
{
    position: absolute;
    top: 101px;
    left: 89px;    
    overflow: hidden;
    width: 626px;
    height: 415px;
    background-color: #fff;
}

#overlayContent .clientpanes .items
{
    width: 20000em;
    position: absolute;
    clear: both;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

#overlayContent .clientpanes .items div
{
    float: left;
    width: 626px;
    height: 415px;
    background-color: #fff;
}

#overlay #overlayContent .prev
{
    position: absolute;
    top: 286px;
    left: 74px;
    display: block;
    width: 15px;
    height: 28px;
    background-image: url(/images/scroller-prev.gif);
    cursor: pointer;
}

#overlayContent .disabled
{
    visibility: hidden;
}

#overlayContent .next
{
    position: absolute;
    top: 286px;
    left: 715px;
    display: block;
    width: 15px;
    height: 28px;
    background-image: url(/images/scroller-next.gif);
    cursor: pointer;
}

#overlayContent h2
{
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    position: absolute;
    top: 25px;
    color: #000;
}

#overlayContent .overlayTop
{
    width: 702px;
    height: 46px;
    position: absolute;
    left: 50px;
    top: 55px;
  }

#overlayContent .overlayBottom
{
    width: 702px;
    height: 44px;
    position: absolute;
    left: 50px;
    top: 515px;
    background-color: transparent;
}

/* ------------------------------------------------------ */ 
#tabs-container 
{
    position: relative;
    width:750px;
    padding-top: 40px;
}
/* container for slides */
.images {
	background: url('/images/work-background5.png') no-repeat 0 0;
	position:relative;	
	height:664px;	
	width:828px;
	cursor:pointer;	
	text-align: center;
}

/* single slide */
.images div {
	display:none;
	position:absolute;
	top:65px;
	left:40px;	
	width:690px;
	height:420px;
	font-size:20px;
	text-align: center;
	overflow: hidden;	
}
.images div img { margin: auto 0; }

/* header */
.images h3 {
	font-size:22px;
	font-weight:normal;
	margin:0 0 20px 0;
	color:#456;
}

/* tabs (those little circles below slides) */

.tabs 
{
	position: absolute;
	width: 100%;
	left: 10px;
	bottom: 105px;
    text-align: center;
}
/* single tab */
.tabs a {
	margin:0 10px;
	font-size:1px;		
}

.tabs a img { border: 1px solid #ccc; }

/* mouseover state */
.tabs a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.tabs a.current {
	background-position:0 -16px;     
} 	

/* next */
.next
{ 
    position: absolute;
    height: 11px;
    width: 92px;
    right: -10px;
    top: 65px;
	background: transparent url(/images/client-work/sprite_next.png) no-repeat 0 0;
	cursor:pointer;
	font-size:1px;
}
.next:hover 		{ background-position: 0 -10px; } 


/* prev */
.prev
{ 
    position: absolute;
    height: 13px;
    width: 91px;
    left: 36px;
    top: 65px;
	background: transparent url(/images/client-work/sprite_previous.png) no-repeat 0 0;
	cursor:pointer;
	font-size:1px;
}
.prev:hover 		{ background-position: 0 -13px; }

.close
{ 
    position: absolute;
    height: 10px;
    width: 265px;
    left: 282px;
    bottom: -90px;
	background: transparent url(/images/client-work/sprite_close.png) no-repeat 0 0;
	cursor:pointer;
	font-size:1px;
}
.close:hover 		{ background-position: 0 -10px; }

/* disabled navigational button. is not needed when tabs are configured with rotate: true */
.disabled {
	visibility:hidden !important;		
}

#libertine-staff-container {
    position: absolute; 
    

	width: 1080px;
    height: 690px;
	padding: 10px 0 0 1px;
	background: transparent url(/staff/staff-background.png) no-repeat top left;
    
    /* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;	
}
#libertine-staff-inner { margin: 0 0 0 -70px; }

#libertine-staff-container div.close { display:none; visibility: hidden; }
/* ------------------------------------------------------ */ 
/* HELPER CLASSES */

.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%;
}