/****************** Ecanus.net v2 by Fallen Angel (August 2007) *******************************************/

/********* GENERAL LAYOUT ***********/
* { padding: 0; margin: 0; }
body { font-size: 72%; background-color: #fff; background-image: url(../images/grey_stripe_diag.gif); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #666; } 
.container { width: 82%; margin: 10px auto; background-color: #fff; color: #666; border: solid 1px #969696; font-size: 100%; }
.main { clear: both; width: 100%; padding-bottom: 30px; }
.navigation { float: left; width: 20%; display: inline; }
.content { float: left; display: inline; width: 75%; margin: 0 0 0 20px; overflow: visible !important /*Firefox*; overflow: hidden /*IE6*/; }
.footer {clear: both; width: 100%; height: 4.5em; padding: 1.1em 0 0; background: #E7E8EA url(../images/footer2.jpg) no-repeat; font-size: 1.0em; color: #444; overflow: visible !important /*Firefox*; overflow: hidden /*IE6*/; }

#topinclude { height: 50px; }
.special { float: left; }
/*************** HEADER *****************/
.header { clear: left; width: 100%; font-family: "trebuchet ms", arial, sans-serif; }
.headertop { width: 100%; height: 80px; background: #f0f0f0 url(../images/header_top.jpg); overflow: visible !important /*Firefox*; overflow: hidden /*IE6*/;}
.headerimage {width: 100%; height: 150px; background: #e6e6e6 url(../images/header.jpg); overflow: visible !important /*Firefox*; overflow: hidden /*IE6*/;}
.logo { width: 80px; height: 65px; position: absolute; z-index: 1; margin: 10px 0 0 5px; background: url(../images/logo.png); overflow: visible !important /*Firefox*; overflow: hidden /*IE6*/}
.name { width: 300px; height: 5em; position: absolute; z-index: 1; margin: 20px 0 0 90px; overflow: visible !important /*Firefox*; overflow: hidden /*IE6*/;}
.name h1 {font-size: 240%;}
.name h2 {margin: -4px 0 0 0; color: #7D7D7D; font-size: 120%;}
.name a { text-decoration: none; color: #7D7D7D;}
.name a:hover { text-decoration: none; color: #323232;}

.accessnav { width: 410px; height: 1%; float: right; position: absolute; right: 10%; z-index: 3; margin: 35px 0px; }
.accessnav ul {float: right; padding: 0 15px 0 0; font-weight: bold; }	
.accessnav li {display: inline; list-style:none; }
.accessnav li a {display: block; float: left; padding: 2px 5px 2px 5px; color: #7D7D7D; text-decoration: none; font-size: 120%;}
.accessnav a:visited {text-decoration:none; color: #7D7D7D; }
.accessnav a:focus, .accessnav a:hover, .accessnav a:active {text-decoration: none; color: #323232; }

/*********** MAIN CONTENT **************/
.one_column { margin-bottom: 10px;}
.two_column_left {float: left; width: 49%; margin-bottom:10px !important /*Non-IE6*; margin-bottom:5px /*IE6*/;}
.two_column_right { float:right; width: 49%; margin-bottom:10px !important /*Non-IE6*; margin-bottom:5px /*IE6*/;}
.three_column_left { float: left; width: 180px; margin-bottom:10px !important /*Non-IE6*; margin-bottom:5px /*IE6*/}
.three_column_middle { float:left; margin-bottom:10px !important /*Non-IE6*; margin-bottom:5px /*IE6*/; margin-left: 185px;}
.three_column_right { float: right; width: 180px; margin-bottom: 10px !important /*Non-IE6*; margin-bottom:5px /*IE6*/;}

/*************  FOOTER SECTION  **************/
.footer { background-color: #E7E8EA; }
.footer p {line-height: 1.3em; text-align: center; color: #7d7d7d; font-weight: bold; font-size: 110%;}
.footer p.credits { font-weight: normal; }
.footer a { text-decoration: underline; color: #7d7d7d; }
.footer a:visited { color: #000;}
.footer a:hover { text-decoration: none; color: #000; }

/*************** NAVIGATION ***************/
.navlist { width: 100%; color: #467aa7; background-color: #F2F3F5; border-right: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
.navlist li { list-style: none; }
.navlist a { color: #467aa7; text-decoration: none; display: block; border-left: 1em solid #D1D8EF; border-top: 1px solid #c8c8c8; padding: 4px 8px; height: 1%; }
.navlist a:hover { border-color: #606B8B; }
.subnavlist li a { border-top: 0;  border-right: 0; border-bottom: 0; border-left: 0.8em solid #D1D8EF; padding: 3px 4px; margin: 0 0 0 10px; height: 1%; }

body#home a#homenav,
body#writing a#writingnav,
body#poems a#poemsnav,
body#stories a#storiesnav,
body#ramblings a#ramblingsnav,
body#web a#webnav,
body#shops a#shopsnav,
body#books a#booksnav,
body#code a#codenav,
body#tutorials a#tutorialsnav,
body#graphics a#graphicsnav,
body#backgrounds a#backgroundsnav,
body#graphics2 a#graphics2nav,
body#photos a#photosnav,
body#smileys a#smileynav,
body#links a#linksnav,
body#about a#aboutnav,
body#accessibility a#accessibilitynav,
body#sitemap a#mapnav,
body#contact a#contactnav {
	color: #27587F;
	background-color: #A6BEFA;
	border-color: #606B8B; }

/************** MAIN CONTENT ******************/
.content h1.block {clear: both; margin: 1.0em 0 0em 0; padding: 2px 0 2px 2px; background: #BEBEBE; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #fff; font-weight:bold; font-size:220%;}
.main-navigation h1 {clear: both; margin: 1.0em 0 0.5em 0; color: #505050; font-weight: normal; font-size: 210%;}
h2 {clear: both; margin: 1.0em 0 0.5em 0; font-family: "trebuchet ms",arial,sans-serif; color: #505050; font-weight: normal; font-size: 170%;}
h3 {clear: both; margin: 1.0em 0 0.5em 0; font-family: "trebuchet ms",arial,sans-serif; color: #505050; background-color: #fff; font-weight: normal; font-size: 210%; }
h2.title { margin-bottom: 0.4em; padding-bottom: 7px; border-bottom: solid 7px #e1e1e1; font-family: "trebuchet ms", arial, sans-serif; color: #646464; font-weight:bold; font-size: 220%; }

p.subhead { clear: both; margin: -1.0em 0 0.5em 0; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #7d7d7d; font-weight:normal; font-size:130%; }


.content h4 {margin: 1.5em 0 1.0em 0; color: #505050; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 170%;}
.content h5 {margin: 1.5em 0 1.0em 0; color: #505050; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 140%;}
.content h6 {margin: 1.5em 0 1.0em 0; color: #505050; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 140%;}
.h7 {margin: 1.5em 0 1.0em 0; color: #505050; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 110%;}

.content p {margin:0 0 1.0em 0; line-height: 1.5em; font-size:120%;}
.navigation p { margin: 0 0 1.0em 1em; line-height: 1.5em; font-size:120%; }
.navigation h5.navtitle { clear: both; margin: 1px 0px 0px 0px; padding: 1px 20px 3px 20px; background-color: #606B8B; color: #fff; font-weight: bold; font-size:150%; border-top: 3px solid #fff; }
.navigation h4 {margin: 1.5em 0 1em 1em; color: #505050; font-weight: bold; font-size:170%; }
.content p.center {text-align:center;}
.content p.right {text-align:right;}
.content p.details {clear: both; margin: -0.25em 0 1.0em 0; line-height: 1.0em; font-size:110%;}
.content blockquote {clear: both; margin: 0 30px 0.6em 30px; font-size: 90%;}
.bold { font-weight: bold; }
.small { font-size: 50%; }
.under { text-decoration: underline; }
.under_dot { border-bottom: 1px dotted #444; cursor: help; }
.italic { font-style: italic; }
.red { color: #ff0000; font-weight: bold; }
.green { color: #009933; font-weight: bold; }
code { font-size: 90%; font-family: Courier, monospace; }
.external, .external a:link { background: url(../images/externallink.gif) no-repeat right; padding-right: 10px; }
.floatleft { float: left; }

.content ul { list-style: none; margin: 0.5em 0 1.0em 0;}
.content ul li {margin: 0 0 0.2em 2px; padding: 0 0 0 12px; background: url(../images/square_bullet.gif) no-repeat 0 0.5em; line-height: 1.4em; font-size: 120%;}
.content ol { margin: 0.5em 0 1.0em 20px !important;}
.content ol li {list-style-position: outside; margin: 0 0 0.2em 0; line-height: 1.4em; font-size: 120%;}

.main img {clear: both; float: left; margin: 3px 10px 7px 0; padding: 1px; border: 1px solid #969696;}
.main img.center { clear: both; float: none; margin: 0; padding:1px; border: 1px solid #969696;}
.main img.right { clear: both; float: right; margin: 3px 0 7px 10px; padding: 1px; border: 1px solid #969696;}
img.titleimage { float: left; margin: 0 10px 5px 5px; padding-bottom: 5px; border: 0; }

.main a {color: #467AA7; font-weight: bold; text-decoration: none; }
.main h1 a {color: #467AA7; font-weight: normal; text-decoration: none; }
.main a:link { color: #2A5A8A; text-decoration: none; }
.main a:visited {color: #2A5A8A; text-decoration: none; }
.main a:focus, .main a:hover, .main a:active {color: #2A5A8A; text-decoration: underline; }

.links a {color: #467AA7; font-weight: bold; text-decoration: underline; }
.links a:link { color: #2A5A8A; text-decoration: underline; }
.links a:visited {color: #2A5A8A; text-decoration: none; }
.links a:focus, .links a:hover, .links a:active {color: #2A5A8A; text-decoration: none; }

.linksbt { clear: both; }

.main a img { border: solid 1px #969696; }
.main a:hover img { border: solid 1px #DCDCDC; }

abbr, acronym { cursor: help; border-bottom: 1px dotted #444; } 
.pre { font-family: Courier, monospace; font-size: 120%; }
/************** SITE MAP *******************/
.content ul.l2 { list-style: none; }
.content ul.l2 li { background: url(../images/arrow_bullet.gif) no-repeat 0 0.5em; font-size: 110%;}

/************* PROSE PAGES *******************/

#storyscroll, #smileyscroll { border: solid 2px #A6BEFA; background: #fff; color: #000; padding: 4px; width: 90%; height: 440px; overflow: auto; }
img.noborder, a img.noborder, a:visited img.noborder, a:focus img.noborder, a:hover img.noborder, a:active img.noborder  { border: 0; }
#copys { margin-top: 50px; }

/************** SMILEY PAGES ********************/

#smileyscroll { clear: both; }
#smileyscroll img.smileys { float: left; clear: none; margin: 5px; border: 0; }

.smileylist { display: inline; list-style-type: none; margin: 5px; border: 0; }
#Which { text-align: center; width: 480px; padding-bottom: 5px; }
#address { width: 350px; margin: 5px; padding: 5px; }
.smileys { margin: 5px; }
.biglink, .biglink a { text-align: center; border: 0; margin: 0 auto; }
.biglink, .biglink a { text-align: center; border: 0; margin: 0 auto; }
.big { font-size: 140%; }
#bigtitle { margin-top: 30px; }
.sectiontitle { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 160%; color: #7993A2; font-weight: bold; text-align: left; padding: 10px 0px 0px 10px; }
.smiletop, .toplink, .photostop { clear: both; }

/**************** Background images Page table styling ***********************/


#Summary, #caption {
	font-family: "trebuchet ms",arial,sans-serif; font-weight: bold; font-size: 120%; margin: 0 auto; text-align: center;
}

.tableStyle { width: 90%; margin: 1em 0 1em 5%; border-collapse: collapse; }
td.tableStyle { margin-left: 7px; }
.tableStyle th { border: 1; padding: 0.2em; text-align: left; }

.xhtmltable { width: 90%; margin: 1em 0 1em 5%; border: 1px solid #444; }
.xhtmltable td { font-size: 110%; border: 1px solid #444; }
.xhtmltable th { border: 1px solid #444; padding: 0.2em; text-align: left; }
td.namecol { width: 100px; border: 1px solid #444; }

/********* Tiled examples of background images *****************/

.tiled1 { background: url(../backgrounds/black_stripe_2.gif); }
.tiled2 { background: url(../backgrounds/blu_tri_check.gif); }
.tiled3 { background: url(../backgrounds/white_stripe.gif); }
.tiled4 { background: url(../backgrounds/blue_bricks.gif); }
.tiled5 { background: url(../backgrounds/grey_bricks.gif); }
.tiled6 { background: url(../backgrounds/grey_diag_bg.gif); }
.tiled7 { background: url(../backgrounds/grey_on_black_diag.gif); }
.tiled8 { background: url(../backgrounds/grey_square.gif); }
.tiled9 { background: url(../backgrounds/grey_stripe.gif); }
.tiled10 { background: url(../backgrounds/ibgg_binary.gif); }
.tiled11 { background: url(../backgrounds/ibgg_binary_grey.gif); }
.tiled12 { background: url(../backgrounds/neon_check.gif); }
.tiled13 { background: url(../backgrounds/red_bricks.gif); }
.tiled14 { background: url(../backgrounds/tech_net.gif); }
.tiled15 { background: url(../backgrounds/techno_blind.gif); }
.tiled16 { background: url(../backgrounds/tri_check.gif); }
.tiled17 { background: url(../backgrounds/blue_tile.gif); }
.tiled18 { background: url(../backgrounds/orange_stripe.gif); }
.tiled19 { background: url(../backgrounds/orange_stripe_2.gif); }
.tiled20 { background: url(../backgrounds/orange_stripe_3.gif); }

img.lbox { float: left; clear: none; margin: 20px; padding: 10px; }

/************* LINKS PAGE **********************/

.delicious-posts { margin: 1em; border: 2px solid #ddd; padding: 0.5em; width: 55%; font-family: sans-serif; }
.delicious-posts ul, .delicious-banner { margin: 0; padding: 0; list-style-type: none; }
.delicious-posts li { margin: 0; padding: 0; list-style-type: none; }
.delicious-post { border-top: 1px solid #eee; padding: 0.25em; font-size: 80%; }
.delicious-odd { background-color: #f8f8f8; }
.delicious-banner a { font-size: 80%; }
.delicious-posts a:hover { text-decoration: underline; }
.delicious-posts a { text-decoration: none; color: #a15426; display: block; padding: 0.3em; }
.delicious-post a { color: #04a1ff; }

/************** WEB DESIGN **********************/

.code { font-family: Courier, monospace; padding: 7px; margin: 8px; color: #666; background-color: #F2F3F5; border: 4px solid #D1D8EF; line-height: 2.3em; }
img.example_image {display: inline; border: 0; padding: 5px; }