/****************************
   default.css
   (C) Mangrove 2010
   Default style properties
*****************************/

html { font:100%/16px 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial; background: #00607c; padding: 0; margin: 0; }
body { font-size: 12px; color: #000; margin: 0; padding: 0; position: relative; }

/* parent elements - standard */

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; color: #000; font-family: Arial, Tahoma, Verdana; }
h1 { background: url('/images/logo.png') no-repeat 20px top; width: 240px; height: 100px; position: absolute; top: 29px; left: 44px}
h1 a { display: block; width: 240px; height: 100px; }
h1 span { height: 0; overflow: hidden; position: absolute; }
h2 { font-size: 22px; margin: 0 0 10px; }
h3 { font-size: 22px; line-height: 24px }
h4 { font-size: 14px; }
p { line-height: 22px; margin: 0 0 10px; padding: 0; }
a:link, a:visited { color: #0099b5; text-decoration: none; }
a:hover, a:active {	color: #005767; text-decoration: none; }
img { border: 0; }
hr { height: 0; border: 0; border-top: 1px solid gray; }

.title { background: url(/images/bg_title.png) repeat-x bottom; padding: 0 0 14px; overflow: hidden; color: #fff; letter-spacing: -0.08em; } 
.bar { background: url(/images/bg_title.png) repeat-x bottom; padding: 0 0 14px; margin: 0 0 7px }

/* parent elements - exceptions */

.clear { float: none; clear: both; }
.left { float: left; }
.right { float: right; }
.hidden { height: 0; overflow: hidden; position: absolute; padding: 0; margin: 0; }

a.readmore:link, a.readmore:visited, a.readmore:hover, a.readmore:active { font-weight: bold; background: url(/images/bg_readmore.png) no-repeat right center; padding-right: 18px; }

/* main & grid elements */

.wrapper { background: #f5f5f0; overflow: hidden; }
.header { background: url(/images/bg_header.png) no-repeat center bottom; height: 130px; min-width: 980px; }
.content { width: 980px; margin: 0 auto; padding: 40px 3px; overflow: hidden; }
.header-content { margin: 0 auto; width: 980px; height: 150px; position: relative; }
.footer-content { margin: 0 auto; width: 960px; padding: 20px 10px; }
.footer { background: url(/images/bg_footer.png) no-repeat center top; min-width: 980px; }

.primary { width: 660px; float: left; position: relative; }
.secondary { width: 300px; padding: 10px 0 20px 20px; overflow: hidden; float: left; }

/* menu elements */

.menu { position: absolute; padding: 0; margin: 0; left: 300px; top: 75px; list-style: none; }
.menu li { float: left; margin-left: 10px; font-size: 20px; text-transform: lowercase; font-weight: bold; text-transform: -0.08em; }
.menu li a:link, .menu li a:visited { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #fff; display: block; height: 34px; line-height: 32px; padding: 0 10px; min-width: 60px; color: #0099b5; text-align: center; letter-spacing: -0.08em; }
.menu li a:hover, .menu li a:active, .menu li.active a:hover, .menu li.active a:active { color: #002d47; background-color: #fcfcfb;}
.menu li.active a:link, .menu li.active a:visited { color: #005767; }

/* detail elements */

.primary-content { background: #fff; overflow: hidden; padding: 25px 20px 20px 0; -webkit-box-shadow: 0 0 3px #bbb; -moz-box-shadow: 0 0 3px #bbb;}

.post { min-height: 260px; overflow: hidden; padding:40px 0 0 20px ; background: transparent url(/images/bg_blogpost.png) no-repeat -20px 0}
.post h2 { text-transform: lowercase; line-height: 24px; letter-spacing: -0.08em;}
.post h2 a:link, .post h2 a:visited { color: #000; } 
.post h2 a:hover, .post h2 a:active { color: #005767; }

.nofold { background: none; padding-top: 2px }

.post-content { width: 460px; padding: 0; float: right; }

.post-content ul { padding: 0 0 0 20px; }
.post-content ul li { padding: 2px 0; }

.post-info { width: 140px; padding: 0 20px 0 0; float: left; }
.post-info .date { background: url(/images/bg_line.png) repeat-x bottom; padding: 0 0 16px; font-weight: bold; text-align: right; line-height: 24px; font-size: 22px; margin: 0 0 15px; overflow: hidden; color: #bfbfbf; letter-spacing: -0.08em;}
.post-info .channel { float: left; width: 60px; text-align: center; }
.post-info p{ margin-bottom: 5px;}

.channel a:link .channel-icon, .channel a:visited .channel-icon, .channel a:hover .channel-icon, .channel a:active .channel-icon { background: url(/images/bg_channel_icon.png) no-repeat center top; display: block; font-size: 26px; text-transform: lowercase; width: 60px; height: 38px; padding-top: 12px; margin: 5px 0; font-weight: bold; color: #fff; }
.channel a:hover .channel-icon, .channel a:active .channel-icon { background: url(/images/bg_channel_icon.png) no-repeat center bottom; }

.post-info .author { float: right; width: 60px; text-align: center; }
.post-info .author img { display: block; }

.post-info-interact { background: url(/images/bg_line.png) repeat-x top; padding: 20px 0 0 0; overflow: hidden; float: none; clear: both; }
.post-info-interact a:link, .post-info-interact a:visited, .post-info-twitter span { min-width: 80px; background: #f3f3ee; display: inline-block; padding: 2px 10px; float: right; clear: both; text-align: right; margin-bottom: 10px; }
.post-info-interact a:hover, .post-info-interact a:active { background: #f8f8f6; }

.post-info-twitter span { }

.comments { padding: 20px; }

.secondary .title { color: #bfbfbf; text-transform: lowercase; clear: both; padding-top: 20px; }
.secondary h3 { padding: 5px 0; color: #0099b5; }

.author-detail img { float: left; width: 120px; height: 120px; padding: 5px 0 6px; display:block;}
.author-detail-info { float: left; padding: 6px 0 0 20px; width: 160px; }
.author-detail-bio { float: none; clear: both; color: #616161;}
.author-detail-info h3 { color: #000; text-transform: lowercase; letter-spacing: -0.08em;}
.author-detail p{ margin-bottom: 0;}

.blog-intro {  padding: 5px 0 0 180px; }
.blog-intro h2 { color: #bfbfbf; font-weight: bold; text-transform: lowercase; clear: both; letter-spacing: -0.08em; margin-bottom: 0px }
.blog-intro h2 span { color: #005767; }

.pagination { padding: 20px 0}
.pagination a { display: inline-block; padding: 4px 10px; background-color: #00607c; color:#fff;}
.pagination .next { float: right;}
.pagination .previous { float: left;}

.footer h2.title { color: #0099b5; background-image: url(/images/bg_line_footer.png);  }
.footer-content .column { padding: 0 10px; float: left; width: 300px; }

/* banners */

p.banner-sxsw { overflow: hidden; height: 120px; width: 300px; position: relative; letter-spacing: -0.08em; }
p.banner-sxsw a:link, p.banner-sxsw a:visited, p.banner-sxsw a:hover, p.banner-sxsw a:active { background: url(/images/banners/sxsw.png) repeat; overflow: hidden; display: block; font-size: 18px; text-transform: lowercase; width: 190px; height: 100px; color: #fff; padding: 10px 20px 10px 90px; }

/* social elements */

.flickr_div { overflow: hidden; margin: 0 0 20px; }
.flickr_div .flickr_badge_image { float:left;}
.flickr_div img { display: block;}

.blog-recent { list-style: none; padding: 0; margin: 0 0 20px; }
.blog-recent li { margin: 0; line-height: 24px;}
.blog-recent a:link, .blog-recent a:visited { color: #0099B5; }
.blog-recent a span { color:#bfbfbd;}

.mangrove-tweet { list-style: none; padding: 0; margin: 0 0 20px; }
.mangrove-tweet li { line-height: 24px;}
.mangrove-tweet .publishdate { color: #bfbfbd; display: block;}
.mangrove-tweet a:link, .mangrove-tweet a:visited { color: #616161;}

.latest-comments { list-style: none; padding: 0; margin: 0 0 20px; }
.latest-comments li { line-height: 24px; margin: 0 0 10px; }
.latest-comments a:link, .latest-comments a:visited { color: #616161; }
.latest-comments span { color: #bfbfbd; display: block;}

/* footer */

.footer ul {  list-style: none; padding: 0; margin: 0 0 20px;}
.footer ul li { line-height: 16px; margin: 0 0 8px}
.footer ul a:link, .mangrove-news a:visited { color: #fff; }

.footer address { line-height: 24px; color: #fff; font-style: normal;}
.footer address a:link, .footer address a:visited { color: #fff}

.footer a:hover{ text-decoration: underline; }

