/* ============================================================================== 
   File: screen.css
	- Stylesheet for Agent Provocateur 
	- created: 03.MAY.2007
	- Author: Daniel Hugentobler
	
	The following blocks exist:
   	- HTML-ELEMENTS		(1 point +)
   	- CLASSES		(10 points +)
   	- PSEUDO-CLASSES 	(10 points +)
   	- NAMED-ELEMENTS	(100 points +)
	- NAVIGATION-ELEMENTS
   ============================================================================== */

/* -------------
   HTML-ELEMENTS
   ------------- */
/* initial calibration of all elements */
* { 
	padding: 0;
	border: none;
	margin: 0;
}

a {
	text-decoration: none; 		/* do NOT underline, better use a border-bottom for readability */
	outline: none;
	cursor: pointer;		/* Hand */
	border-bottom: none;
}

body {
	color: white;
	background-color: silver; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	vertical-align: top; 
	text-align: left;
}

div {
	vertical-align: top; 
}

/* temporary makeshift only... until reserached why tables fail to inherit correctly */
/* --------------------------------------------- */
table {
	color: black;
	background-color: #FFDCDC;		/* light red */
	font-size: small;
}
/* --------------------------------------------- */

/* prevent horizontal scrollbars ! */
#tblDisplay {
	width: 96%;
}

th, 
td
 {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid #FFDCDC;		/* light red */
	vertical-align: middle;
}


th {
	text-align: center;			/* dft */
	color: white; 
	background-color: #800000; 		/* dark red */
}

td {
	text-align: left;			/* dft */
	color: black;
	background-color: #FF9696;		/* medium red */
}

td.center {
	text-align: center;
}

th.right,
td.right {
	text-align: right;
}

th.left {
	text-align: left;
}

/* merge cells: erase border-color with table's background color */
/* NOTE: different colors for <td> and <th> ! */
/* please take also a look at the links in <td>/<th> below */
/* ------------------------------------------------------------- */
td.merge_center,
td.merge_leftmost {
	border-right: 1px solid #FF9696;	/* medium red */
}
td.merge_center, 
td.merge_rightmost {
	border-left: 1px solid #FF9696;		/* medium red */
}
th.merge_center,
th.merge_leftmost {
	border-right: 1px solid #800000; 	/* dark red */
}
th.merge_center, 
th.merge_rightmost {
	border-left: 1px solid #800000; 	/* dark red */
}

em {
	font-weight: normal;
	font-style: italic;
}


h1 {
	font-size: 200%;
	font-variant : small-caps;
	margin-top: 0; 
	margin-bottom: 0.6em; 
}

h2 {
	font-size: 120%;
	margin-top: 1em; 
	margin-bottom: 0.6em; 
}

hr {
	width: 100%;
}

img {
	padding: 0;
	border: none;
	margin: 1px;
	margin-right: 5px;
}

input,
textarea {
	cursor: default;			/* no Hand ! */
	background-color: #eee;
	color: black;
	margin-bottom: 1em;
/* specific borders */
/*border: 2px outset gray;*/
/*	border-top: 2px outset gray;
	border-right: 2px outset silver;
	border-bottom: 2px outset silver;
	border-left: 2px outset gray;*/
}

noscript {
	color: red;
}

textarea {
	width: 73%;
	height: 180px;
}

label {
	cursor: pointer;			/* Hand */
	vertical-align: top;
	width: 25%;
	font-weight: bold;
	padding-right: 3px;
}

label.passive {
	cursor: default;
	margin-bottom: 1em;
}

/* input fields & buttons */
/* ---------------------- */
input[type=button],
input[type=submit],
input[type=reset] {
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
	border: 2px outset gray;
	margin-right: 10px;
	cursor: pointer;			/* hand, 26.OCT.2007 */
}

textarea,
select,
input[type=text],
input[type=password],
input[type=checkbox] {
	border: 2px inset gray;
}

ol, ul {
/*	margin-top: 5px;
	margin-bottom: 5px; 			=> inactive, else strange effects in navi_main upon a:hover in text_main ! */
}

ol li {
	list-style:decimal inside; 
	margin-top: 8px;
	margin-bottom: 8px;
}

ul li {
	list-style: disc inside; 
	margin-top: 8px;
	margin-bottom: 8px;
}

/* indent for nested lists */
ul ul,
ol ol,
ul ol,
ol ul {
	margin-left: 2em;
}

/* no list-style for listed icons */
.iconlist li {
	list-style: none; 
}

p {
	margin-bottom: 10px;
}


strong {
	font-weight: bold;
}


/* -------
   CLASSES
   ------- */
.banner {
	background-image:url("../logo/ap_small_red.gif");
	background-repeat:repeat-x;
	height: 8px;
}

.buffer {
	margin: 10px; 
}

.buffer_side {
	margin-right: 10px;
	margin-left: 10px;
}

.cmd {
	cursor: pointer;			/* hand */
}

.collapse_expand {
	margin: 0;
	cursor: pointer;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.float_clear {
	clear: both;				/* forces box to begin below a floated element; BEWARE OF GLOBAL CLEARING !*/
}

.hide {
	display: none;
}

.icon {
	background-color: #800000; 		/* dark red */
}

/* for links-page */
.links {
	padding-top: 5px;
}
#page_links div div p {
	margin-left: 22px;	
}

.news {
	color: red;
	font-weight: bold;
}

.show {
	display: block;
}

.skiplink {
	position: absolute;
	top: -2000px;
	left: -3000px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
}

.user_input {
	color: black;
	background-color: white;
	padding-top: 10px;
	padding-right: 8px;
	padding-bottom: 10px;
	padding-left: 8px;
	border: 1px solid silver;
	margin-top: 4px; 
}

/* --------------
   PSEUDO-CLASSES
   -------------- */
a:link {
	color: red;
}

a:visited {
	color: #FF9696;				/* medium red */
}

a:hover, a:focus {
	color: black;
	background-color: #FF9696;		/* medium red */
}

a:active {
	color: white;
	background-color: red;
}

input:focus,
textarea:focus {
	background-color: #FFDCDC;		/* light red */
	color: black;
}

/* different coloring within tables ! */
#text_main td a:link {
	color: black;
	background-color: #FF9696;		/* medium red */
}
#text_main td a:visited {
	color: #800000; 			/* dark red */
	background-color: #FF9696;		/* medium red */
}

#text_main td a:hover, 
#text_main td a:focus {
	color: white;
	background-color: #FF9696;		/* medium red */
}

#text_main td a:active {
	color: white;
	background-color: red;			/* bright red */
}

#text_main th a:link,
#text_main th a:visited  {
	color: red;
	background-color: #800000; 		/* dark red */
}
#text_main th a:hover, 
#text_main th a:focus {
	color: white;
	background-color: #800000; 		/* dark red */
}

#text_main th a:active {
	color: white;
	background-color: red;			/* bright red */
}


/* --------------
   NAMED-ELEMENTS
   -------------- */
#wrapper {
/*	background-image:url("../logo/logo_back.gif");*/
	background-image:url("../logo/ap_back_red.gif");
	background-repeat:repeat; 
	margin: 10px;
	padding: 10px;
	color: white;
	background-color: #800000; 		/* dark red */
}

#logo {
	float: left;
	background-image:url("../logo/logo_sqr_red.gif");
	width: 122px;
	height: 87px;
}

#header,
#text_main,
#footer {
	position: relative; 			/* as a relation-point for subsequent elements to be positioned, if any */
	padding: 10px;				/* common padding to get text alignment for light-red area of text_main surrounded by dark-red wrapper-area */
}

#header{
}
	#header h1 {
		color: red;
/*		background-color: #800000;*/ 	/* dark red - leave to get it transparent */
		border-bottom:solid 3px red; 
	}
	#header h2,
	#footer h2,
	#navi_main h2 {
		color: white;
		background-color: #800000; 	/* dark red */
	}


#text_main {
	overflow: auto;				/* float-container */
	color: black;
	background-color: #FFDCDC;		/* light red */
	border-right: 1px solid silver;
	border-bottom: 1px solid silver;
	border-left: 1px solid silver;
}
	#text_main h2 {
		color: #800000; 		/* dark red */
		background-color: #FFDCDC;	/* light red */
	}

	#text_main a {
		color: red;
		background-color: #FFDCDC;	/* light red */
	}
	#text_main a:visited {
		color: #800000;			/* dark red */
		background-color: #FFDCDC;	/* light red */
	}
	#text_main a:hover,
	#text_main a:focus {
		color: black;
		background-color: #FF9696;	/* medium red */
	}
	#text_main a:active {
		color: white;
		background-color: red;
		border: 1px solid silver;	
	}

#footer {
}

/* ---------------
   COLUMNAR-LAYOUT
   --------------- */
#column_left {
	float: left;
	overflow: auto;
	width: 25%;
}

#column_right {
	float: right;
	overflow: auto;
	width: 74%;
}


/* -------------------
   NAVIGATION-ELEMENTS
   ------------------- */
#breadcrumb {
	text-align: left;
	padding: 0;
	border-bottom: 1px solid silver;
	margin: 0;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
	#breadcrumb li {
		display: inline; 		/* horizontal */
		list-style-type: none; 		/* no bullets */
		margin: 0;
		padding: 0;
	}
	#breadcrumb a {
		color: black;
		background-color: #FFDCDC; 	/* light red */
		padding: 2px;
		border: 1px solid #FFDCDC;
	}
	#breadcrumb a:visited {
		color: #800000;			/* dark red */
		background-color: #FFDCDC; 	/* light red */
	}
	#breadcrumb a:focus,
	#breadcrumb a:hover {
		color: black;
		background-color: white;
		border: 1px solid silver;
	}
	#breadcrumb a:active {
		color: black;
		background-color: #DCDCDC; 	/* silverish */
		border: 1px solid silver;
	}

#navi_profile {
	text-align: left;
	padding: 0;
	margin: 0;
}
	#navi_profile li {
		display: inline; 		/* horizontal */
		list-style-type: none; 		/* no bullets */
		padding: 0;
		margin: 0;
	}
	#navi_profile a {
		color: black;
		background-color: #EcEcEc; 	/* light gray */
		padding: 4px 10px 4px 10px;	/* 10px to align with rest of page-elements */
		border: 1px solid silver;
	}
	#navi_profile a:visited {
		color: black;
		background-color: #EcEcEc; 	/* light gray */
		border: 1px solid silver;
	}
	#navi_profile a:hover,
	#navi_profile a:focus {
		color: black;
		background-color: white;
		border: 1px solid silver;
	}
	#navi_profile a:active {
		color: black;
		background-color: #FFDCDC; 	/* light red */
		border: 1px solid silver;
	}

#navi_sitemap, 
#navi_provocations {
	text-align: left;
	padding: 0;
	margin: 0;
}
	#navi_sitemap li,
	#navi_provocations li {
		display: block;
		list-style-type: none; 		/* no bullets */
		list-style-position: outside;
		padding: 0;
		margin: 0;
		margin-top: 6px; 		/* ADJUST ! */
	}
	#navi_sitemap a,
	#navi_provocations a {
		color: black;
		background-color: #FFDCDC; 	/* light red to match with the text_main background */
		padding: 2px;
		border: 1px solid #FFDCDC;	/* "invisible" border to prevent "shivering" on a:hover/focus */
	}
	#navi_sitemap a:visited,
	#navi_provocations a:visited {
		color: #800000;			/* dark red */
		background-color: #FFDCDC; 	/* light red */
		border: 1px solid #FFDCDC;	/* "invisible" border */
	}
	#navi_sitemap a:hover,
	#navi_sitemap a:focus,
	#navi_provocations a:hover,
	#navi_provocations a:focus {
		color: black;
		background-color: white;
		border: 1px solid silver;	/* visible border */
	}
	#navi_sitemap a:active,
	#navi_provocations a:active {
		color: black;
		background-color: #DCDCDC; 	/* silverish */
		border: 1px solid silver;	/* visible border */
	}

/* -------- */
/* TOOLBARS */
/* -------- */
#user_toolbar {
	position: absolute;
	top: 10px;
	right: 20px;
}

/* right-aligned => move margin to the left (override img: margin-right) */
#user_toolbar img {
	margin-left: 5px;
}

#widescreen_toolbar {
	padding-left: 10px; 
	padding-bottom: 10px;
}

#user_toolbar, 
#toolbar {
	text-align: left;
	padding: 0;
	margin: 0;
}
	#user_toolbar li,
	#toolbar li {
		display: inline; 		/* horizontal */
		list-style-type: none; 		/* no bullets */
		padding: 0;
		margin: 0;
	}


#navi_main {
	padding-right: 10px;
	padding-left: 10px;
/*	padding-bottom: 4px;
	border-bottom: 1px solid silver;*/
	margin-bottom: 5px;			/* THIS IS ONLY A MAKESHIFT UNTIL PADDING-BOTTOM ISSUE RESOLVED ! ! ! 5px, not 4px, beacuse border was dropped */
}
	#navi_main li {
		display: inline; 		/* horizontal */
		list-style-type: none; 		/* no bullets */
		padding: 0;
		margin: 0;
	}
	#navi_main a {
		color: black;
		background-color: #FF9696; 	/* medium red */
		padding: 4px 10px 4px 10px;	/* 10px to align with rest of page-elements */
		border: 1px solid silver;
	}
	#navi_main a:hover,
	#navi_main a:focus {
		color: black;
		background-color: #FFDCDC;	/* light red */
/*background-color: white;*/
		border-bottom-color: silver;
	}
	#navi_main a:active {
		color: black;
		background-color: #DCDCDC; 	/* silverish */
	}

/* show current page in navi_main register-tab: body-ID & li-ID */
/* ------------------------------------------------------------ */
#page_default #nav_item_default a,
#page_forgot #nav_item_logon a, 
#page_logon #nav_item_logon a, 
#page_logon #nav_item_logoff a, 
#page_sitemap #nav_item_sitemap a, 
#page_chgpwd #nav_item_profile a, 
#page_chgusrnm #nav_item_profile a, 
#page_chgemail #nav_item_profile a, 
#page_chgemladm #nav_item_profile a, 
#page_regi #nav_item_regi a, 
#page_intro #nav_item_intro a, 
#page_rules #nav_item_rules a, 
#page_legal #nav_item_legal a, 
#page_links #nav_item_links a 
{
	color: black;
	background-color: #FFDCDC;
	border-bottom-color: #FFDCDC;
}

/* show current page in navi_profile register-tab: body-ID & li-ID */
/* --------------------------------------------------------------- */
#page_chgpwd #nav_item_chgpwd a, 
#page_chgusrnm #nav_item_chgusrnm a, 
#page_chgemail #nav_item_chgemail a,
#page_chgemladm #nav_item_chgemladm a {
	color: black;
	background-color: white;
	border-bottom-color: white;
}

/* page to be displayed within an Iframe-element */
/* --------------------------------------------- */
#page_text,
#page_empty {
	color: black;
	background-color: #FFDCDC;		/* light red */
}

/* text_main displayed in an Iframe: */
/* --------------------------------- */
#page_empty #text_main,
#page_text #text_main
{
	padding-top: 0;
	border-top: 1px solid silver; 
	margin-top: 0; 
}