body { margin:0; padding:0; font-family:Helvetica, Arial, Verdana, sans-serif; font-size:100%; color:#333; background:#dbdbdb }

h1 { margin:0; font-size:250%; color:#55a900; letter-spacing:-0.05em }
h2 { margin:10px 0 25px; padding:0; font-size:140%; letter-spacing:-0.05em; color:#55a900 }
h2 a { color:#55a900; text-decoration:none }
h2 a:hover { color:#ffc600 }
h3 { margin:25px 0 5px; padding:0; color:#55a900 }

a { color:#55a900 }
a:hover { color:#ffc600 }
img { padding:5px; border:1px solid #ccc }
blockquote { color:#567880; margin:0 35px 10px 18px; padding-left:8px; border-left:8px solid #CFDCDF }
figure { margin:0; padding:0 }


/* --- Flex Slider --- */
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline:none }
.slides, .flex-control-nav, .flex-direction-nav { margin:0; padding:0; list-style:none }

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider { margin:0; padding:0 }
.flexslider .slides > li { display:none; -webkit-backface-visibility:hidden }
.slides:after { content: "."; display:block; clear:both; visibility:hidden; line-height:0; height:0 }

html[xmlns] .slides { display:block }
* html .slides { height:1% }
.no-js .slides > li:first-child { display:block }

/* Direction Nav */
.flex-direction-nav { *height:0; display:none }
.flex-direction-nav a { display:block; width:38px; height:38px; margin:0; background:url(/graphics/arrow-previous.png) no-repeat; position:absolute; top:39%; z-index:10; cursor:pointer; text-indent:-9999px; opacity:1 }
.flex-direction-nav .flex-next { background:url(/graphics/arrow-next.png) no-repeat; right:-18px }
.flex-direction-nav .flex-prev { left:-18px }
.flexslider:hover .flex-next { opacity:1; background:url(/graphics/arrow-next-active.png) no-repeat }
.flexslider:hover .flex-prev { opacity:1; background:url(/graphics/arrow-previous-active.png) no-repeat }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity:1 }
.flex-direction-nav .flex-disabled { opacity:.3!important; filter:alpha(opacity=30); cursor:default }

/* Control Nav */
.flex-control-nav { width:auto; height:30px; position:absolute; bottom:0; text-align:center; right:0; display:block; z-index:10000; background:url(/graphics/curve03.png) no-repeat top left; padding:8px 8px 0 8px; display:none }
.flex-control-nav li { margin:0 2px; display:inline-block; zoom:1; *display:inline }
.flex-control-paging li a { width:16px; height:16px; display:block; background:url(/graphics/bullet01.png) no-repeat; text-indent:-99999px }
.flex-control-paging li a:hover { background:url(/graphics/bullet02.png) no-repeat }
.flex-control-paging li a.flex-active { background:url(/graphics/bullet02.png) no-repeat }
.flex-control-thumbs { margin:5px 0 0; position:static; overflow:hidden }
.flex-control-thumbs li { width:25%; float:left; margin:0 }
.flex-control-thumbs img { width:100%; display:block; opacity:.7; cursor:pointer }
.flex-control-thumbs img:hover { opacity:1 }
.flex-control-thumbs .flex-active { opacity:1; cursor:default }



/* Header */
.header { background:url(graphics/header/bg.jpg) 0 0 repeat-x }

.headercontent { position:relative; width:960px; margin:0 auto; padding:25px 0 0 0; color:#fff }
.headercontent .logo { display:inline-block; margin:0; font-family:Helvetica, Arial, Verdana, sans-serif; font-size:300%; font-weight:bold; letter-spacing:-0.06em; /* IE Hack for inline-block */ zoom:1; *display:inline }
.headercontent .logo a { text-decoration:none }
.headercontent .tagline { float:right; margin:24px 15px 0 0; padding:0; font-size:180%; letter-spacing:-0.05em; color:#fff; font-weight:normal; line-height:80%; text-align:right }
.headercontent a { color:#fff }
.headercontent a:hover { color:#ffc600 }
.headercontent img { padding:0 5px 10px; border:0; background:none; vertical-align:bottom }

.mainmenu { clear:left; margin:25px 0 20px 4px; font-size:95% }
.option { display:inline-block; margin-right:3px; cursor:pointer; vertical-align:top; /* IE Hack for inline-block */ zoom:1; *display:inline }
.option .left { float:left; width:3px; height:31px; background:url(/graphics/mainmenu/bg-left.png) 0 0 no-repeat }
.option .right { float:left; width:3px; height:31px; background:url(/graphics/mainmenu/bg-right.png) 100% 0 no-repeat }
.option .middle { float:left; height:31px; background:url(/graphics/mainmenu/bg.png) 0 0 repeat-x }
.option p { margin:0; padding:6px 10px 0 }
.option a { text-decoration:none }
.option a:hover, .option:hover a { color:#ffc600 }

.option.on .left { background:url(/graphics/mainmenu/bg-on-left.png) 0 0 no-repeat }
.option.on .right { background:url(/graphics/mainmenu/bg-on-right.png) 100% 0 no-repeat }
.option.on .middle { background:url(/graphics/mainmenu/bg-on.png) 0 0 repeat-x }
.option.on a { color:#404040 }
.option.on a:hover, .option.on:hover a { color:#404040 }


/* Layout */
.layout { width:980px; margin:0 auto; padding:10px 0 5px }
.main { float:left; width:728px; font-size:90% }


/* Boxes */
.box .top .left { float:left; width:7px; height:7px; background:url(/graphics/boxes/tl.png) 0 0 no-repeat }
.box .top .right { float:right; width:7px; height:7px; background:url(/graphics/boxes/tr.png) 100% 0 no-repeat }
.box .top .middle { height:7px; margin:0 7px; background:url(/graphics/boxes/top.png) 0 0 repeat-x }
.box .bottom .left { float:left; width:7px; height:8px; background:url(/graphics/boxes/bl.png) 0 100% no-repeat }
.box .bottom .right { float:right; width:7px; height:8px; background:url(/graphics/boxes/br.png) 100% 100% no-repeat }
.box .bottom .middle { height:8px; margin:0 7px; background:url(/graphics/boxes/bottom.png) 0 100% repeat-x }
.box .mainleft { background:url(/graphics/boxes/left.png) 0 0 repeat-y }
.box .mainright { background:url(/graphics/boxes/right.png) 100% 0 repeat-y }

.box .content { margin:0 7px; padding:20px; background:#fff }
.box .content a { color:#333 }
.box .content a:hover { color:#ffc600 }

.box.headed { margin-bottom:20px }
.box.headed .heading .left { background:url(/graphics/boxes/headed-left.png) 0 0 repeat-y }
.box.headed .heading .right { background:url(/graphics/boxes/headed-right.png) 100% 0 repeat-y }
.box.headed .heading .middle { margin:0 5px; padding:7px 12px; color:#fff; background:#3e7a01 url(/graphics/boxes/heading-bg-green.gif) 0 0 repeat-x }
.box.headed .bottom .left { float:left; width:5px; height:5px; background:url(/graphics/boxes/headed-bl.png) 0 100% no-repeat }
.box.headed .bottom .right { float:right; width:5px; height:5px; background:url(/graphics/boxes/headed-br.png) 100% 100% no-repeat }
.box.headed .bottom .middle { height:5px; margin:0 5px; background:url(/graphics/boxes/headed-bottom.png) 0 100% repeat-x }
.box.headed .mainleft { background:url(/graphics/boxes/headed-left.png) 0 0 repeat-y }
.box.headed .mainright { background:url(/graphics/boxes/headed-right.png) 100% 0 repeat-y }
.box.headed .content { margin:0 5px; padding:15px 20px; background:#fff }


/* Posts */
.post { padding-bottom:15px }

.post .date { margin:0 0 20px; font-size:120% }
.post p { margin:0 0 20px; padding:0 }
.post li { margin-bottom:10px }

.blog-images { float:right; width:362px; margin:0 0 10px 30px }
.blog-images a { color:#333; text-decoration:none }
.blog-image { margin:0 0 20px }
.blog-image img { width:100% }

.post .summary { margin-bottom:30px }
.post .summary h2 { margin:0 }
.post .summary h2 a { color:#55a900 }
.post .summary h2 a:hover { color:#ffc600 }
.post .summary .date { margin:0 0 10px; font-size:110% }
.post .summary img { float:right; margin:0 0 10px 10px }
.footlinks { clear:both; margin-top:20px; padding:10px 0; font-size:80%; border-top:1px solid #ccc; border-bottom:1px solid #ccc  }


#blog-footer { padding:5px 5px 8px 20px; background: url(http://www.selfbuildblog.org/themes/site_themes/trendy_blue/trendy_header_bg.jpg) repeat-x; border-top:1px solid #666; border-bottom:1px solid #ccc;
text-size:10px; margin:0 34px }



.sidebar { float:right; width:240px; font-size:80% }
.sidebar ul { padding:0; margin:0; list-style-type:none }
.sidebar li { margin-bottom:8px }
.sidebar li a { color:#333 }
.sidebar li a:hover { color:#ffc600 }

#sidebar img { padding:0; border:0 }

#sidebar-top #nav { font:bold 11px arial, verdana, sans-serif; padding:3px 2px 0 7px }

#sidebar h3.sidebar-header, #sidebar li.sidebar-header { font-weight:bold; margin:0; margin-bottom:5px }

#sidebar-content ul { margin-bottom:15px }
#sidebar-content ul li { padding-left:14px; margin-bottom:2px }
#sidebar-content .flexslider ul li { padding-left:0; margin-bottom:0 }
#sidebar-content h3.sidebar-header { margin-top:15px }
#sidebar-content h3.first { margin-top:5px }
#sidebar-content p { margin:0 }
#sidebar-content a { color:#333; font-weight:normal }
#sidebar-content a { color:#ffc600; font-weight:normal }



/* post-summary = index page ; post-body = comments page */
.post-summary, post-summary p, .post-body, .post-body p { line-height:150% }
.post-summary p, .post-body p { margin-top:0; margin-bottom:10px }

.post-details { margin-top:10px; margin-bottom:10px }
.post-details, .post-details a { padding-top:3px }


/* comments */
#comments-wrapper { border-top: 1px solid #ccc; padding-top:10px; margin-top:20px }
#comments-wrapper h4, #comments-wrapper h4 a { font: bold 14px  arial, verdana, sans-serif; letter-spacing:-0.05em }
.comment { padding:10px }
.comment p { margin:10px 0 }

.one { background-color:#EFF3F4 }
.two {} /* alternate colour/styling if nec. */

.comment-details { font-size:80% }

#post-comment { border-top: 1px solid #ccc; padding-top:10px; margin-top:10px }
#post-comment h4 {  }



/* --- Ads --- */
.advertise-here { margin-bottom:20px; padding:10px; font-size:90%; text-align:center; border:1px solid #aaa; cursor:pointer }
.advertise-here a { color:#aaa; text-decoration:none }
.advertise-here a:hover { color:#666 }

.advertise-here.halfbanner { width:214px; height:40px }

.advertise-here.leaderboard { width:708px; height:70px }
.advertise-here.leaderboard p { padding-top:10px }



/* footer */
#blog-footer { text-align:center }

.footer { font-size:80%; text-align:center }
.footer a { color:#333; margin:0 10px }

.footer .credit { margin-top:15px; font-size:80% }
.footer .credit a { color:#333; margin:0 }



/* #sidebar-content .about img { float:left; margin-right:10px; padding:5px; background-color:#fff; border:1px solid #ccc } */


/* --- Pagination --- */
.pagination { width:100%; padding:5px; text-align:center }
.pagination ul { margin:0; padding:0 }
.pagination li { display:inline-block; margin:0; padding:0 5px }
.pagination li a { padding:3px 6px 3px; color:#888; text-decoration:none }
.pagination li a:hover { color:#00aeef }
.pagination li a.active { color:#fff; background:#888 }
.pagination li a.active:hover { color:#fff; background:#00aeef }
.pagination li.totalpages { color:#bbb }
/*.paginate { padding:10px 6px 10px 4px }*/



/* --- Gallery --- */
.thumb { display:inline-block; width:190px; margin:0 20px 20px 0; font-size:90%; vertical-align:top; /* IE Hack for inline-block */ zoom:1; *display:inline }
.thumb a, .med_thumb a { text-decoration:none }



/* Forms */
form { margin:0 0 20px }
label { float:left; width:100px }
input, textarea { float:left; width:300px; margin:0 0 10px }
textarea { height:100px }
input[type=submit] { width:auto; margin-right:10px }
input[type=button] { width:auto; margin-left:100px }
input[type=checkbox] { width:auto; margin-right:10px }



/* --- Misc --- */
.floatleft { float:left }
.floatright { float:right }
.leftalign { text-align:left }
.rightalign { text-align:right }
.centeralign { text-align:center }

.clear { clear:both; height:0; line-height:0; font-size:1%; /*for IE*/ }
.clear_left { clear:left; height:0; line-height:0; font-size:1%; /*for IE*/ }
.clear_right { clear:right; height:0; line-height:0; font-size:1%; /*for IE*/ }

#trace, .trace { border:solid 1px #ff0000 }