/* This is the complex / CSS2 layout for www.scrapbook.melb.net as of February 2003
 while in the most part it was designed by myself, credit must go to the following ....

First and foremost Mark Newhouse for his article Practical CSS @ A List Apart 
(http://www.alistapart.com/stories/practicalcss/) that got me thinking about the whole
CSS layout thing to begin with, and also his article Taming Lists (www.alistapart.com/stories/taminglists/)
that provided some interesting possibilities of expressing navigation bars as lists.

Blue Layout for providing sample layouts (http://bluerobot.com/web/layouts/layout2.html)
of which a fair portion of this layout is based on, definitely saved me a lot of time.
The helpful folk at css-discuss (www.css-discuss.org) for pointing out various problems
and hacks I needed to implement.

Lastly in  regards to the graphics thanks must go out to  Mr Frisk for creating the font
Depressionist Three (http://fontz.ch/browse/ex/depressionistthree) used in the header image,
and lastly www.myjanee.com/tuts/torn/torn.htm for the torn paper tutorial.

matt attlee (matt at scrapbook dot melb dot net)
*/



.backforward {
	font-weight: bold;
}

a {
	color : #336699;
	background-color : inherit;
	text-decoration : none;
}

a:visited {
	color : #996699;
	background-color : transparent;
}

a:hover {
	color : #8B0000;
	background-color : transparent;
	text-decoration : underline;
}


body {
	/* set the padding and margin to zero */
	margin : 0;
	padding : 0;
	
	color : black;
	background-color : white;
	
    /* should be using keywords for font-size, but this solution from www.thenoodleincident.com works
	great as the size is consistent between ie, opera and mozilla which is a godsend*/	
	font-family : verdana, arial, helvetica, sans-serif;
	font-size : 74%;
}


h2 {
	font-size : 1.6em;
}

h3 {
	font-size : 1.4em;
	font-style : italic;
}




label {
   font-weight: bolder;
}


ul {
	list-style-type : square;
}

ul.alphabet {
	padding : 0;
	margin : 0;
	display : inline;
}

ul.alphabet li {
	padding : 0;
	margin : 0;
	display : inline;
	text-transform : uppercase;
	letter-spacing : 0.2em;
}

.searchword {
	background-color : White; 
	color : Red;
	font-style: italic;
	border-bottom: 1px dotted Red;
}





#Header {
	margin : 0;
	padding : 0 2em 0 0;
	
	color : #D4CFCA;
	background-color : #603913;
	background-image : url(/layout/default/header_bg.jpg);
	background-repeat : no-repeat;
	background-position : left top;
	
	height : 80px;
}

#Header h1 {
	float : right;
	margin : 0;
	padding : 0;
	font-size: 2em;
}

#Header h1 span.title {
	display : none; 
}



#Navbar {
	margin : 0;
	padding : 0px 5px 20px 25px;
	
	color : White;
	background-color : #737373;
	background-image : url(/layout/default/navbar_bg.jpg);
	background-repeat : no-repeat;
	background-position : bottom right;
	
	font-size : 1.2em;
	font-weight : bold;
	font-family : sans-serif;
   font-variant : small-caps;
}


#Navbar ul {
	margin : 0;
	padding : 0;
	display : inline;
	list-style : none;
}



#Navbar ul li {
	margin : 0;
	padding : 0;
	display : inline;
	list-style : none;
	
	border-left: 2px solid #A9A9A9;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

#Navbar ul li.first, #Navbar ul li:first-child  {
	border-left: none;	
	padding-left: 0;
}

#Navbar a, #SubMenu a {
	color : #83BBEA;
	background-color: transparent;
}

#SubMenu {
	margin : 0;
	padding : 0px 8px 60px 15px;
	
	color : white;
	background-image : url(/layout/default/submenu_bg.jpg);
	background-repeat : no-repeat;
	background-color : #737373;
	background-position : bottom left;

   overflow : hidden;	
	position : absolute;
	/* right should really be 0px but hey here's another hack 15px scrollbar problem in Mac IE5 */
	right: 15px;
	margin-right: -15px;
	/* now here begins the IE5 box model width / height hack */
   width: 160px; /* the fake width for IE 5 */
	
	/* The horrible hack to overcome IE5's bad box model,  */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:137px; /* the correct width */
}

/* I've heard this called the "be nice to Opera 5" rule */
body>#SubMenu {width:137px;}


#SubMenu input, #SubMenu select{
	background : #603913;
	color : #E6E6E6;
}

#SubMenu .fb {
	border : 1px solid #B4B4B4;		
}

#SubMenu ul {
	padding : 0;
	margin : 0;
	padding-left : 0;
	margin-left : 1.5em;
	list-style-position : outside;
	color : Silver;
	background-color: transparent;
}

#SubMenu ul.alphabet {
  margin: 0;
  padding: 0;
}

#SubMenu ul li {
	padding : 0;
	margin : 0;
}

#SubMenu ul li .selected {
	color: #EEEEEE;
	font-weight: bolder;
	background-color: transparent;
}

#SubMenu h3 {
   padding-right: 2px;

   border-bottom : 2px dotted #A9A9A9;
   border-right : 2px dotted #A9A9A9;
   
   color : #DAA520;
	background-color: transparent;   

   font-weight: bold;
   text-align : center;
}



#Content {
	padding : 1em 1em 1em 3em;
	margin : 0;
	margin-right: 170px;
	
	color: Black;
	background-color : White;
}

#Content ul {
	color : #DCDCDC;
	background-color : inherit;
	margin-left: 2em;
	padding-left: 0;
}

#Content ul li .licon {
  color: Black;
  background-color : inherit;
}

#Content dl dd {
	margin-left : 1em;
	margin-bottom : 0.5em;
	padding : 4px;
}

#Content h2 {
	margin-left : -1em;
	margin-top : 0;
	margin-bottom : 0;
}

#Content h3 {
	margin-left : -0.5em;
}

#Content input, #Content select, #Content textarea, #Content form .fb {
	background : #D4D4D4;
	color : Black;
	border : 1px solid #262626;
}

#Content p.copyright {
	font-size : 0.92em;
	font-style : italic;
	text-align : center;
}