@import "basic.css";

body{margin-bottom:30px; color:#000; behavior:url("http://www.life-is-simple.co.uk/csshover.htc");} /*Whatever:hover for IE6*/
img, div{behavior: url(iepngfix.htc)} /*PNG trasparency IE fix*/

em{color:#090; font-size:1.1em;}
h2.sub{color:#666; font-size:85%; margin-top:0.5em; padding-bottom:2em; border-top:3px solid #8DD835;}
a:link, .link, #nav a{color:#55c;}
/*
#articles,#portfolio{text-decoration:line-through;}
#articles a,#portfolio a{text-decoration:none!important;}
*/

#desc, #tooltip, #side-content, #nav, #secondary, .hide-top, #posting-detail, .blogger-labels, #what-next a, #what-next ul, #footer
{font-family:'Lucida Grande','Lucida Sans Unicode',Arial,sans-serif;}

#image{clear:both; height:200px; background:url(../img/00.jpg) no-repeat 50% 0;}
#desc{display:none; font-size:85%; position:absolute; margin:170px 10px 0;
/*	filter:alpha(opacity=85);
	-moz-opacity : .85;
	opacity : .85;*/
} 
#image:hover #desc{display:block;}
#desc-bg{background-color:#fff; padding:0 4px;}
#container{margin:0 auto; text-align:left;}
/*#nav{margin:8px 0 15px; font-size:85%;}*/
#nav{padding:8px 0 15px; font-size:85%;}
#nav a{text-decoration:none;}
#nav a:hover{text-decoration:underline;}
#nav li{display:inline; margin-right:15px;}
#nav .right a{display:block; padding-right:20px; background:url(../img/feed.gif) no-repeat 100% 50%;}
#nav-collapse{height:35px;}
#nav-bg{background-color:#8DD835; text-align:center;}
#nav-link{display:block; height:20px; width:20px; margin:auto; background:url(../img/arrow-down.gif) 50% 50% no-repeat; overflow:hidden; position:relative;}
#nav-link2{position:relative; display:block; height:20px; margin-bottom:-22px;}
#body{padding-top:35px;}
#main-content{text-align:justify;}

#what-next{font-size:95%; background:url(../img/what-next-bg.jpg) no-repeat -25px -25px; border:1px solid #8DD835; text-align:left!important;}
#what-next .bg{padding-left:192px;}
#what-next .classic{margin-bottom:0; margin-left:2em; margin-top:0!important;}
#what-next a, #what-next ul{font-size:85%;}
#what-next h2{color:#000; margin:15px 0 0 1em;}
#what-next p{margin:1em 0;}
#side-content{margin:15px 0 0 3em;}
#side-content h3{color:#090; font-size:85%; font-weight:bold; text-transform:lowercase;}
#side-content li{display:block; float:left; width:130px; padding-bottom:10px!important; margin-right:1.5em;}


/*.side{margin-top:1.3em; float:left; text-align:right; border-right:4px solid #98B6FE; padding-right:8px;}*/
.hide-top{font-size:85%;}
.hide{background-color:#DAF2FF; padding:0.1em 1em; font-size:85%; margin-top:0.5em;}
.hide h2{padding-top:1em;}
.hide-inside{background-color:#fff; border:1px solid #BCD4E8; margin:1em 0; padding:0 1em;}
#footer{margin-top:1em; text-align:right; padding:1em 90px 0 0; font-size:75%; background:url(../img/decoration-leaf.gif) no-repeat 100% 75%;}

/* Fading Tooltips By Dustin Diaz*/
#tooltip{position:absolute; z-index:1000; width:249px; color:#000; font-size:75%; line-height:135%;}
#tooltip-top{background:url(../img/tooltip-top.png) no-repeat; height:22px;}
#tooltip .center{background:url(../img/tooltip-bg.png) repeat-y!important; overflow:hidden;}
#tooltip-bottom{background:url(../img/tooltip-bottom.png) no-repeat; height:11px;}
#tooltip p{text-align:justify; padding:0 14px; margin:0;}
#tooltip p em{display:block; margin-top:1em; color:#090; text-align:left; font-style:normal!important; font-size:100%;}
body div#tooltip p em .accessk{text-align:right; display:block; margin-top:0.5em;}

.image a{display:block; border:1px solid #fff;}
.image span{display:none;}
.image a:hover{background-image:url(x)!important; border:1px solid #BCD4E8; background-color:#fdfdff!important;}
.image a:hover span{display:block; padding:10px;}

/*need to create this version for the JS hiding function*/
/* This it makes the navigation become 
#head #nav{visibility:hidden;}
#head:hover #nav{visibility:visible;}
*/
/*Blogger class for post*/
#posting-detail{font-size:75%; margin-bottom:5em;}
#posting-detail a{background:url(../img/comment.gif) no-repeat 100% 0.25em; padding-right:20px;}
#posting-detail .right a{background:url(../img/permalink.gif) no-repeat 100% 0.15em; padding-right:20px;}
.blogger-labels{font-size:75%!important; color:#090; font-weight:bold; margin-bottom:0;}
.blogger-labels a{font-weight:normal;}

#value{display:none;} /*To check which random css is loaded*/
#tags{display:block; padding:5px;}
#tags ul{display:none; position:absolute; z-index:1; background-color:#fff; margin:22px 0 0 -62px;}
#tags #labels{padding:0 13px 0 2px; background:url(http://www.life-is-simple.co.uk/img/pull-down-arrow.gif) no-repeat 94% 55%;}
#tags:hover #labels{text-decoration:none; color:#000; background-color:#DAF2FF;}
#tags:hover ul{display:inline; border:1px solid #BCD4E8;}
#tags li{display:block; width:125px; padding:3px 7px;}

/*I want to see how visualise the info with only the essential stuff*/
/*
#side-content, #what-next, #posting-detail, .blogger-labels{display:none}
*/
/*#tags{display:none!important;} To remove this when I fix the pulldown menu for IE7 and IE6*/