/*******************************************************************************
	
	This is the stylesheet used for the Nida website.
	
	Feel free to tweak/play around with it as much as you like...
	but be careful when messing around too much with the layout, as some things
	(like the navigation tabs), are VERY finely balanced!

	There are two main colors used in this file:
		
		#0055AA				- A dark blue.
		rgb(0, 145, 208)	- A nice light blue.
			
*******************************************************************************/

body {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	margin-top: 0px;
	padding-top: 0px;
	border-collapse: collapse;
}

body * {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
}

/*******************************************************************************

	First of all, some default styles for html elements.  These are used
	regularly within the jsp template files, but also within generated JSPWiki
	pages.
	
*******************************************************************************/

h2 {
	background-color: #0055AA;
	border: 1px black solid;
	font-weight: bold;
	color: white;
	font-size: 1.2em;
	padding: 1px 5px 2px 5px;
	margin-bottom: 1em;
	clear: both;
	white-space: nowrap;
}

h2 a {
	font-weight: bold;
	color: white;
}

h2 a:hover {
	font-weight: bold;
	color: rgb(0, 145, 208);
	text-decoration: none;
}

h3 {
	font-size: 1.2em;
	margin: 0.8em 0.25em 0.8em 0.25em;
	font-weight: bold;
	clear: left;
}

h4 {
	font-size: 1em;
	font-weight: bold;
	margin: 0.5em 1em 0.5em 1em;
	clear: left;
}

h4 img.inline {
	margin-top: 0;
}

pre {
	font-family: monospace;
	font-size: 1.25em;
}

p {
	margin: 0.5em 1em 1em 1em;
}

a {
	color: #900;
	/*text-decoration: none;*/
}

a:hover {
	text-decoration: underline;
}

a img {
	border: 1px white solid;
}

strong {
	font-weight: bold;
	font-style: normal;
}

ul, ol {
	margin: 0.5em 1em 1em 2em;
	list-style: inside;
}

li {
	/*font-size: 1em;*/
}

dl {
	margin: 1em 1em 1em 2em;
}

dt {
	margin-right: 1em;
	font-weight: bold;
}

dd {
	margin: 0.5em 0em 0.5em 2em;
}

hr {
	border: none;
	border-top: 1px #0055AA solid;
	margin: 1em 1em;
	clear: both;
}

table {
	margin: 1em 2em;
	border: 1px black solid;
}

td {
	vertical-align: middle;
	text-align: center;
	padding: 0.5em 1em;
	border-bottom: 1px black solid;
}

th {
	color: white;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	padding: 0.5em 1em;
	background: #0055AA;
	border-bottom: 1px black solid;
}

th a {
	color: white;
}

img {
	float: left;
	clear: left;
	margin-top: 0.5em;
	margin-right: 10px;
	margin-bottom: 20px;
}

b
{
	color: #900;
}

/*******************************************************************************

	Here we define a couple of custom formatting divs, used to help separate
	the page into well-defined chunks.  These are used within the jsp template
	files, but may also be invoked within JSPWiki source code using the
	following syntax.
	
	%%myStyle
	
	%%
	
	The following custom divs classes are currently implemented:
	
		frame		- Puts a black border around an area of text
		panel		- A frame with a blue background and white, centered text
		leftColumn	- A frame that is positioned as a box to the left of the page
		rightColumn	- A frame that is positioned as a box to the right of the page
		navigation	- A secondary navigation bar
		indent		- Indents the contents by 60px, allowing images to be put
					  in the margin.
		error		- Indents the text and adds emphasis, for use in error
					  messages.
	
	In addition, a few custom spans can also be used to position images.  This
	allows their default behaviour (float: left), to be overridden.
	
		left		- Floats the image to the left (default)
		right		- Floats the image to the right
		none		- The image is displayed inline with the text.

*******************************************************************************/

div.indent {
	margin-left: 90px;
}

div.indent img, div.indent hr {
	margin-left: -90px;
}

div.indent div.indent img, div.indent div.indent hr {
	margin-left: -180px;
}

div.indent div.indent div.indent img, div.indent div.indent div.indent hr {
	margin-left: -270px;
}

div.indent div.indent div.indent div.indent img, div.indent div.indent div.indent div.indent hr {
	margin-left: -360px;
}

/* Used to put some page content in a frame */
div.frame, div.leftColumn, div.rightColumn {
	border: 1px black solid;
	margin: 0px 0px 1% 0px;
	padding: 5px 10px 0px 10px;
	overflow: hidden;
}

div.frame h2, div.panel h2, div.leftColumn h2, div.rightColumn h2 {
	border: none;
	border-bottom: 1px black solid;
	margin-top: -5px;
	margin-left: -10px;
	margin-right: -10px;
	text-align: center;
}

/* Generates a navigation bar in the page */
div.navigation {
	float: right;
	border: 1px black solid;
	margin: 0px 0px 10px 5px;
}

div.navigation h2 {
	margin: 0px;
	border: none;
	text-align: center;
}

/* Links in a navigation bar should be wrapped in an unordered list */
div.navigation ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
}

div.navigation li {
	margin: 0px;
	padding: 0px;
	border-top: 1px black solid;
	display: block;
	position: relative;
	line-height: 0px;
}

div.navigation li a {
	display: block;
	position: relative;
	margin: 0px;
	padding: 0px;
	line-height: 1em;
	font-weight: bold;
}

div.navigation li a:hover {
	padding: 5px 10px;
	background: rgb(0, 145, 208);
	color: white;
	text-decoration: none;
}

/*
div.navigation li a div.tl
{
	width: 100%;
	height: 100%;
	padding: 5px 10px;
	background-repeat: no-repeat;
	background-position: top left;
	background-image: url(../../../tab_off_tl.png);
}

div.navigation li a * div
{
	width: 100%;
	height: 100%;
	background: none;
}
*/

/* A left-hand column */
div.leftColumn {
	width: 46%;
	float: left;
	clear: left;
}

/* A right-hand colum */
div.rightColumn {
	width: 46%;
	float: right;
	clear: right;
}

/* Used to put a blue background on some text */
div.panel {
	border: 1px black solid;
	margin: 0px 0px 10px 0px;
	background: #0055AA;
	color: white;
	text-align: center;
	font-weight: bold;
	overflow: hidden;
	padding: 0px;
}

div.panel a {
	color: white;
}

div.panel * {
	margin: 5px;
}

div.panel a:hover {
	color: rgb(0, 145, 208);
}

/* Holds error messages */
.error {
	margin: 1em;
	font-weight: bold;
	font-style: italic;
	color: #0055AA;
}

/* Used to float an image to the right */
.right {
	float: right;
	clear: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

/* Used to float an image to the left */
.left {
	float: left;
	clear: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

/* Used to inline an image */
.none {
	float: none;
	margin: 0px;
}

/*******************************************************************************

	Here we define the behaviour of form controls.  These feature a lot of fancy
	rollover effects, which unfortunately do not render in IE 6 and bellow.
	
	However, while the form controls are still perfectly acceptable for IE 6,
	they are really quite pretty for IE 7+ and all other browsers in existance!

*******************************************************************************/

/* Form controls */
form 
{
	/*font-size: 1em;*/
}

/* Forces the contents of the container to display inline. Usefull for making a line of submit buttons */
div.inline 
{
	margin: 1em;
}

div.inline * 
{
	display: inline;
}

label 
{
	display: block;
	margin: 1em 2em;
	/*font-size: 1em;*/
	color: #0055AA;
}

input, select 
{
	border: 1px black solid;
	display: block;
	/*font-size: 1em;*/
	padding: 2px;
	width: 15em;
	max-width: 75%;
	margin-top: 2px;
}

input[type=hidden] 
{
	display: none;
}

input.unstyled 
{
	border: none;
	width: auto;
	display: inline;
	padding: 0px;
}

input:hover, input:focus, select:hover, select:focus 
{
	border: 2px black solid;
	padding: 1px;
}

input[type=submit] 
{
	background-color: #0055AA;
	color: white;
	font-weight: bold;
	width: auto;
}

input[type=submit]:hover 
{
	background-color: rgb(0, 145, 208);
}

input[type=submit]:active 
{
	background-color: white;
	color: black;
}

textarea 
{
	border: 1px black solid;
	display: block;
	/*font-size: 1em;*/
	padding: 2px;
	width: 30em;
	height: 20em;
	max-width: 75%;
	overflow: auto;
	margin-top: 2px;
	/*font-family: monospace;
	font-size: 1.25em;*/
}

textarea.editor 
{
	height: 40em;
	width: 90%;
	max-width: 90%;
}

textArea:hover, textArea:focus 
{
	border: 2px black solid;
	padding: 1px;
}

/*******************************************************************************

	Finally, here are the styles for the main page component blocks.  Edit them
	at your peril... as breaking the page is very easy from this point on!

*******************************************************************************/

/* Wraps the entire content of the page */
#container 
{
	font-size: 0.8em;
	/*width: 60em;*/
	min-width: 450px;
	max-width: 60em;
	text-align: left;
	margin: 0px auto;
}

/* Holds the logo and tabbed navigation bar */
#header 
{
	margin: 1em 0;
	height: 100px;
	position: relative;
	overflow: visible;
	background-color: #900;
}

#corner_top_right
{
	width: 100%;
	height: 100%;
	background-image: url(../images/red_corner_tr.png);
	background-repeat: no-repeat;
	background-position: top right;
}

/* H1 contains the logo */
h1 
{
	float: left;
}

h1 a 
{
	float: left;
}

/* The Nida logo */
h1 img 
{
	display: block;
	position: absolute;
	float: none;
	margin: 0;
	padding: 0;
	/* IE 5.2 for mac can't read this PNG from the main page, 
	   maybe it works as a background image like all the others? */
	background-image: url(../../../images/logo_flat.png);
	/*z-index: 75;*/
}

#pageActions 
{
	margin: 0;
	padding: 0.3em 0em;
	text-align: center;
	position: fixed;
	top: 0;
	z-index:200;
}

/* A navigation tab */
#pageActions li 
{
	display: inline;
	margin: 0;
	padding: 0.3em 0em;
}

/* The hyperlinks in the navigation tabs */
#pageActions li a 
{
	color: white;
	padding: 0.3em 0.6em;
	border: 1px black solid;
	white-space: nowrap;
	background-color: #888;
	text-align: center;
	text-decoration: none;
	/*z-index: 100;*/
}

/* The style for the current page tab. */
#pageActions li a.here, #pageActions li a.here:hover 
{
	color: black;
	position: relative;
	border-bottom: 1px white solid;
	background-color: white;
}

/* The hyperlinks in the navigation tabs */
#pageActions li a:hover 
{
	color: white;
	background-color: #ccc;
}

#language 
{
	margin: 0;
	padding: 0.6em;
	text-align: right;
}

#language li 
{
	padding: 0.2em 0em 0.2em 1em;
	display: inline;
	color: white;
}

#language li a 
{
	color: white;
}

/* Unorderd list that holds the edit controls 
#pageActions {
	position: absolute;
	top: 0px;
	right: 0px;
	left: 250px;
	bottom: 0px;
	list-style: none;
	margin: 0px;
}*/

/* An edit button
#pageActions li {
	float: right;
	margin: 5px 10px;
}*/

/* An edit link 
#pageActions li a {
	color: #0055AA;
	display: block;
	white-space: nowrap;
	z-index: 100;
}*/

/* Language button styling 
#language {
	color: #FF55AA;
	border: 1px black solid;
	float:free;
	padding: 1em 1em;
	position: absolute;
	top: 0px;
	right: 0px;
	left: 200px;
	bottom: 0px;
}*/

/* Holds the navigation tabs */
#navigation 
{
	position: absolute;
	left: 0px;
	bottom: 0px;
	margin: 0px;
	/*border: 1px solid white;*/
	width: 100%;
	list-style: none;
	/*font-size: 0.8em;*/
	/*border-bottom: 1px black solid;*/
	/*z-index: 100;*/
}

/* A navigation tab */
#navigation li {
	float: right;
	margin: 0.6em 0.6em 0em 0em;
	/*margin: 10px 10px 0px 0px;*/
}

/* The hyperlinks in the navigation tabs */
#navigation li a 
{
	position: relative;
	float: left;
	/*border: 1px solid #ffc;*/
	border-bottom: none;
	background-color: #722;
	padding: 0;
	text-align: center;
	color: white;
	text-decoration: none;
	white-space: nowrap;
}

/* The hyperlinks in the navigation tabs */
#navigation li a:hover 
{
	/*border: 1px solid #ffc;*/
	border-bottom: none;
	background: #ffc;
	color: black;
}

/* The style for the current page tab. */
#navigation li a.here, #navigation li a.here:hover 
{
	/*border: 1px solid #ffc;*/
	border-bottom: none;
	background: white;
	color: black;
}

#navigation li a span
{
	background-color: transparent;
	display: block;
	*display: inline-block;
	/* IE doesn't support nested block elements, but nested inline 
	   blocks works. Unfortunately it breaks Firefox, so we have to 
	   use the star hack to ensure that it's only seen by IE */
}

#navigation li a span.t
{
	background-image: url(../images/tab_yellow.png);
	background-repeat: repeat-x;
	background-position: top left;
}

#navigation li a span.l
{
	background-image: url(../images/tab_yellow.png);
	background-repeat: repeat-y;
	background-position: top left;
}

#navigation li a span.r
{
	background-image: url(../images/tab_yellow.png);
	background-repeat: repeat-y;
	background-position: top right;
}

#navigation li a span.tl
{
	background-image: url(../images/tab_off_tl.png);
	background-repeat: no-repeat;
	background-position: top left;
}

#navigation li a span.tr
{
	background-image: url(../images/tab_off_tr.png);
	background-repeat: no-repeat;
	background-position: top right;
	padding: 0.3em 0.6em;
}

#navigation li a:hover span.tl
{
	background-image: url(../images/tab_over_tl.png);
}

#navigation li a:hover span.tr
{
	background-image: url(../images/tab_over_tr.png);
}

#navigation li a.here span.tl
{
	background-image: url(../images/tab_on_tl.png);
}

#navigation li a.here span.tr
{
	background-image: url(../images/tab_on_tr.png);
}

/* Holds the page content */
#content 
{
	padding: 10px 10px 0px 10px;
	overflow: hidden;
}

/* Used to display the extra page info for users with edit privaleges */
#pageInfo {
	border: 1px #0055AA solid;
	padding: 10px;
	margin-top: 10px;
}

/* The page preview div */
#preview {
	border: 2px #0055AA dashed;
	margin: 1em 1em 2em 1em;
	padding: 10px;
	overflow: hidden;
}

/* Contains the page footer */
#footer
{
	text-align: left;
	font-size: 0.8em;
	margin: 2em 0 0 0;
	padding: 0;
	background-color: #990000;
}

#footer div
{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}	

#footer #bottom_left_corner
{
	background-image: url(../images/red_corner_bl.png);
	background-position: bottom left;
}

#footer #bottom_right_corner
{
	background-image: url(../images/red_corner_br.png);
	background-position: bottom right;
}

/* Paragraphs within the page footer */
#footer p 
{
	margin: 0;
	padding: 1em;
	color: white;
	vertical-align: middle;
}

/* Red box around photos in indented divs */

.indent img
{
	border: 1px #555 solid;
}