/* 	NOTE TO MAINTAINER:
	please document changes
/*

/* 
	CSS for Arifu tours website prototype; subject to extensive revision. 
	Aside from anything else the colours are quite completely appalling...
	As usual, caveat emptor.
*/


/* overall styling */

/* to do, 26. december 2005:
	*	design colour scheme
	*	refine the index page layout to get rid of odd padding thing
	
*/
	
body
{
	margin: 0;
	padding: 0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	line-height: 1.4em;
	font-size: small;
	background-color: #CC9;
}

/* the container div, which allows a modicum of window behaviour control */

div#container
{
	background-color: #cc6;
	border: 3px #ff0000 double;
	width: 80%;
	position: absolute;
	left: 10%;
	right: 10%;
	top: 5%;
}

/* head and footer */

/*
	note to self from original revision of css:
	either create a gif head image, figure out MSIE's 
	stupid alpha image loader or create a browser-sniffing script 
	which returns a short-bus-browser friendly version of the css,
	preferably without weird css hacks
*/

/*
	note to self, 26. december 2005:
	to do:
	*	style colours;
	*	design background image;
	
*/

div#head
{
	padding: 2%;
	text-align: center;
	background-color: #FF0;
	color: #930;
	background-image: url(images/head_back.jpg);
	background-repeat: repeat-x;
	height: 89px;
}

/* 
	the code below is known not to work *at all* in MSIE due to an array of 
	display bugs too extensive to list here, and none of which i feel like
	hacking workarounds for at this stage.
	
	it calls a background image for the <h1> element, and with a suitable text 
	indent which moves the text version of the header off-screen (unless your 
	screen is phenomenally huge) 'replaces' the text with the image. google
	likes it because there's a proper header, people like it 'cause it looks
	the shit. msie hates it because they can't find it in themselves to 
	implement web standards which were defined as early as 1998.
	
	uncomment it sometime and behold its awesomeness, and then comment it out 
	again to suit morons and their browser.
	
*/
/*
#head h1 {
	text-indent: -99cm;
	text-align: center;
	background-image: url(images/arifu_header.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 645px;
	height: 89px; 
	}
*/

div#footer
{
	padding: 2%;
	text-align: center;
	clear: both;
	background-color: #cc6;
	color: #000;
	font-size: 90%;
	font-style: italic;
}

#footer a
{
	text-decoration: none;
	font-weight: bold;
	color: #ff0000;
}

/* main content */
div#main
{
	padding: 2%;
	text-align: justify;
	margin-left: 24%;
	background-color: #CC6;
	color: #993333;
}

#main h2
{
	text-align: center;
	border-bottom: 1px #009900 dotted;
}

#main a:link, #main a:visited
 { color: #933; font-weight: normal; text-decoration: none; text-transform: none }

#main a:hover
{
	font-weight: bold;
	text-transform: none;
	text-decoration: none;
	color: red;
}

/* 
	main legalese  -- kleingeschrieben fŸr die AGB 
	falls erwŸnscht, auskommentieren oder entfernen, um den text zur 
	normalen groesse zu bringen; falls wir's *arschklein* haben wollen, den 
	wert auf 80 oder gar 70% setzen...
*/

p.legalese {
font-size: 90%; }

.center { text-align: center; }


div#index_main
{
	background-image: url(images/background.jpg);
	height: 768px;
	padding: 100px 0px 0px 0px;
	background-repeat: no-repeat;
}


/* main menu */

/*
	the menu is an unordered list styled to look like a block-menu;
	we use the :hover property to create almost code-less rollover effects.
	it might be broken in some form of MSIE; i'd have to check.
	
	with a suitable piece of javascript (which i have somewhere; just ask)
	it can be turned into a very neat, almost codeless dropdown menu system.
	not called for at this time since you don't have multilevel menus, but 
	still: i've laid the foundations in case things change...
*/

div#menu
{
	padding: 2%;
	float: left;
	text-align: right;
	background-color: #cc6;
	color: #000000;
	width: 20%;
}

#menu ul { padding: 0 3px 0 3px; }
#menu ul li { list-style-type: none; }

#menu ul li a:link, #menu ul li a:visited
{
	padding-right: 3px;
	display: block;
	text-decoration: none;
	font-weight: bold;
	color: #333;
	border: 1px #cc6 solid;
}

#menu ul li a:hover
{
	padding-right: 3px;
	display: block;
	text-decoration: none;
	font-weight: bold;
	color: #FF0;
	border: 1px #333 solid;
	background-color: #ff0000;
}

#menu p
{
	margin: 3px;
	color: #333;
}