/* 
neelo= blue in nepalese 
By Shiva, Oct. 2006
Adapted from
culture shock: voodoo dolly v1.0
pogy366: http://www.raykdesign.net
Oct. 2005 

The layout goes as follows
page consists of stacked #top, #wrapper, and #bottom each 780px wide 

page elements
#top with adjustible margins and height
#wrapper that wraps the #header, #navbar #container, and #footer
#bottom 

#wrapper sub-elements
#header is 780px wide * 150px tall (use absolute positioning within this)
---flashing background images 780px wide * 150px tall
---#banner_top line with top margin of 2px and arbitrary text
---#header_logo 105px wide by 110px tall floating at left @2px,15px from #header origin
---#name_block with further sub-elements after logo @110px, 15px from #header origin
---#banner_bottom_line floating right @top=150-15=135px from #header origin

#container sub-elements
#column_left 
#column_mid
---#box_right as a floating text box for whatever rocks our world


#footer


also note that in order for an element to start a new line, use display: block;

*/



/* general page structure and layout */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em; 
color: #000000; 
margin: 1px 0 0 1px;
padding: 0 0 0 0; 
background: #eaebec; 
text-align: center;
}

#top {
margin: 0 auto;
padding: 0 0 0 0;
width: 780px;
height: 11px;
/* background:#ffffff url(img/page_top.jpg) no-repeat; */
background: #eaebec;
}

#wrapper {
/* includes the header, main body content and the footer */
margin: 0 auto;
padding: 0 0 0 0;
width: 780px; 
background: #eaebec;
text-align:center;
}

#header {
position:relative;
padding: 0 0 0;
margin: 0 0 0 ;
width: 780px;
height: 130px; 
/* for background image use path relative to CSS */
background: #eaebec url(../media/headerTiles/van01.gif) no-repeat;
text-align:center; 
font-weight: bold; 
color: #eaebec; 
}

#banner_top_left {
font-size: 0.85em; 
font-style: italic;
/* background-color: #fdf8f2; */
margin: 0;
padding: 2px 0 0 10px;
/* border-top: 1px solid #b9d2e3; */
border-bottom: 1px solid #dddddd;
float: left;
}

#banner_top_right {
font-size: 0.85em; 
font-style: italic;
margin: 0;
padding: 2px 5px 0 0 ;
border-bottom: 1px solid #dddddd;
float: right;
}

#header_logo {
/* since i dont know the precise width of earlier banner element, so use absolute */
position: absolute;
left: 2px;
top: 15px; 
/*
width: 105px; 
height: 110px; 
*/
margin: 0 0 0 0; 
padding: 0 0 0 0;
float: left;
}

#header_name_block { 
position: absolute; 
left: 110px;
/* 
top: 15px; 
width: 670px;
height: 110px; 
*/
padding: 20px 20px 0 20px; 
background: transparent;
text-align: center;
color: #eaebec;
}
#header_name_block h1 {
color: #f5f500;
font-size: 1.5em;
letter-spacing: 0.1em;
text-transform: capitalize;
margin: 0 0 0 0;
padding: 20px 0 0 0;
}

#banner_bottom_right {
position: relative; 
font-size: 0.85em;  
font-style: italic;
/* Adjust the following to align it on the rightmost side, right margin = width of header_top_right */
margin: 0 -80px 0  0;
/* top: 110px; */
padding: 110px 5px 2px 0 ;
border-top: 1px solid #dddddd;
float: right;
}

#navbar {
position: relative;
top: 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 780px !important;
height: 20px;
text-align: center;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}

#navbar ul {
list-style: none;
margin-left: 0;
padding: 1px 0;
border-bottom: 1px solid #999999;
font: bold 12px Verdana, sans-serif;
}

#navbar ul li {
margin: 0;
display: inline;
}

#navbar ul li a {
padding: 1px 0.5em;
margin-left: 3px;
border: 1px solid #999999;
border-bottom: none; 
background: #dadada;
text-decoration: none;
}

#navbar ul li a:link {
color: #4169e1;
}

#navbar li a:visited {
color: #800000;
}

#navbar ul li a:hover, li a:focus {
color: #c0c0c0;
background: #ff69b4;
border-color: #191970;
}

#navbar ul li a.current {
background: #eaebec;
border-bottom: 1px solid #eaebec;
}

#vertmenu {
top: 0;
margin: 0 0 130px 0;
padding: 0 0 0 0;
width: 130px;
text-align: left;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
}

#vertmenu h3 {
display: block;
padding: 0 0 5px 3px;
margin: 0px;
width:120px;
color: #800000;
}

#vertmenu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
font: bold 11px Verdana, sans-serif;
}

#vertmenu ul li {
list-style: none;
margin: 0;
padding: 0;
}

#vertmenu ul li a {
display: block;
width: 120px;
padding: 5px 0 2px 4px;
margin-top: 1px;
border-bottom: 1px dashed #c39c4e;
text-decoration: none; 
}

#vertmenu ul li a:link {
color: #4169e1;
}

#vertmenu li a:visited {
color: #800000;
}

#vertmenu ul li a:hover, li a:focus {
color: #c0c0c0;
background: #ff69b4;
border-color: #191970;
}

#vertmenu ul li a.current {
background: #eaebec;
border-bottom: 1px solid #999999;
}

#container {
margin: 10px 0 0 10px;
padding: 0 0 0 0;
width: 780px !important; 
background: transparent;
text-align: left;
border-bottom: 1px dashed #222222; 
}

#column_left {
float: left;
width: 140px;
margin: 0 0 0 0;
padding: 0 4px 0 0;
background: transparent;
font-size: 0.9em;
color: #6e312a;
border-right: 1px solid #999999;
}

#column_left a {
color:#000000;
text-decoration:underline;
}

#column_left a:hover {
color: #999999;
text-decoration:none;
}

#column_mid {
width: 595px;
margin: 0 0 0 151px;
padding: 0 0 0 10px; /*
border-left: 1px solid #999999; */
}

#box_right {
float: right;
width: 150px;
margin: 0 0 3px 10px !important; 
padding: 2px 5px 2px 10px;
background: #eeeeee;
border: 1px solid #cccccc;
text-align: left;
color: #616161;
font-size: 0.9em;
}

#footer {
position: relative; 
margin: 0 0 0 0;
padding: 10px 0 0 0; 
width: 780px; 
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #6e312a;
background: transparent;
text-align: center;
}

#footer_logo {
position: relative;
float: right;
margin: 0 0 15px 15px;
padding: 0 0 0 0;
}

#footnote {
/* since the bottom logo image is 50 px, place it midway */
top: 25px;
/* aligns the text to the middle of the footer, in relation to the logo 
vertical-align: -250%; */
}

#bottom {
margin: 0 auto;
padding: 0 0 0 0;
width: 780px;
height: 11px;
background: #eaebec; /*
background: #eaebec url(img/page_bottom.jpg) no-repeat top; */
}

#box_right h3 {
color:#6E312A;
margin:2px 0 -10px 0;
}

#box_right h3:after {
color: #6E312A;
content: "\0020 \00BB";
}

.briefer {
/* div to contain teaser of stories and events etc with the structure as follows:
note that use li (not ul tho) for item briefs :
<div class="briefer>
	<li>
		<h3>little heading </h3>
		<img (if any)>
		<p> short story or teaser </p>
		<p><a>More...</a></p>
	</li>
	...
	...
	<li>
	...
</div> */
}

.briefer li {
list-style: none;
font-size: 0.9em; 
display: inline; 
}

.briefer li h3 { 
margin: 12px 0 0 0;
color: #444444; 
text-decoration: underline; /*
padding-bottom: 0.8em; 
border-bottom: 1px solid #b9d2e3; */
}
.briefer img {
/* will affect only those images which are under item_brief li */
float: left;
margin: 5px 5px 5px 0; /*
width: 67px;
height: 50px; */
}
.briefer p {
margin: 2px 0 0 2px;
padding: 2px 0 0 2px;
}
.briefer a:link, .briefer a:visited {
color: #1e4c82; 
padding-left: 10px; 
padding-right: 10px;
}
p.intro {
font-style: oblique;
}


/* fonts and colors of NORMAL CONTENT */
h2 {
color: #000000;
font-size: 1.2em;
text-transform: capitalize;
font-weight: bold;
padding: 10px 0 0 0;
margin: 0 0 0px 0;
}

h2:after {
color: #000000;
content: "\0020 \00BB";
}

h3 {
color:#000000;
font-size: 1.1em;
text-transform: capitalize;
font-weight: bold;
padding: 0 0 0 0;
margin: 0 0 0px 0;
}

h3:after {
color: #000000;
content: "\0020 \00BB";
}

a {
color: #6e312a;
text-decoration: underline;
}

a:hover {
color:#999999;
text-decoration:none;
}


li {
list-style: circle outside;
margin-left: 15px;  
}

li li {
list-style: disc outside;
margin-left: 15px;  
font-size: 0.9em;
}

/* images */
img {
border:none;
}

.left {
float:left;
margin:0 0 0 0;
padding:0 0 0 0;
}

.right {
float:right;
margin:0 0 0 0;
padding:0 0 0 0;
}


/* workarounds and hacks */
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */