/* CSS Document */
/* This CSS file will cover the basic design of the website, such
 * as divs, tables, text, forms and images that is part of the design.
 * (Text below is in Swedish)
 *
 * |  Färger
 * --------------------------------------------
 * | Ljusblå till bakgrundsfärg     | #CFD6E6 |
 * | Mörkblå till toppen            | #7387A3 |
 * | Mörkblå till vänstersidan      | #7387A3 |
 * | Ljusblå till meny-länk (hover) | #CFD6E6 |
 * | Röd text till länkar			| #C01F25 |
 * | Ljusblå till <th> (bg)			| #859CBC |
 * |-------------------------------------------
 */
 
@import "text.css";

html {
	height:100%;
	background:#CFD6E6 url(../Images/design/bg_stripe.jpg) top left repeat-x;
	padding:0;
	margin:0;
}

body {
	height:100%;
	text-align:center;/*Centrerar i IE*/
	margin:0;
	padding:0;
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	color:#000000;
}

/* div tag which contains and center the whole page */
#center {
	margin:0 auto;/*Centrerar i bra webbläsare*/
	z-index:100;
}

/* Table which build the differnt part of the page;
 * The top, left side, content and bottom */
#main_table {
	width:800px;
}

/* div tag for a small empty space, used in the top and bottom of page */
.space {
	width:100%;
	height:20px;
	font-size:0;
	line-height:0;
	clear:both;
}

/* Delimiters, <hr> tags */
.hr, .hr_small, .hr_tiny, .hr_large {
	width:100%;
	clear:both;
	background-color:#000000;
	height:1px;
	border:0;
	padding:0;
	line-height:0;
	font-size:1px;
}
.hr {
	margin:20px auto;
}
.hr_small {
	margin:7px auto;
}
.hr_tiny {
	margin:0;
}
.hr_large {
	margin:50px auto;
	height:2px;
}
.hr_dashed, .hr_dashed_thick {
	width:100%;
	clear:both;
	margin:15px auto;
	border-bottom:1px dashed #000000;
}
.hr_dashed {
	height:1px;
}
.hr_dashed_thick {
	height:2px;
	border-top:1px dashed #000000;
}

/* To not get double rows with a new paragraph */
p {
	margin-top:0;
	margin-bottom:0;
}

pre {
	margin:0;
	font-size:14px;
}

/* table cell which shows the top banner/logo */
.bannertop {
	width:800px;
	height:120px;
	background:url(../Images/design/top.jpg) #7387A3 left top no-repeat;
	padding:0;
	border-top:1px solid #000000;
	border-right:1px solid #000000;
	border-left:1px solid #000000;
}

/* Appearance for left side */
.left_side {
	width:159px;
	background:url(../Images/design/top_small.jpg) #7387A3 left top no-repeat;
	padding:30px 0 0 0;
	text-align:left;
	color:#FFFFFF;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
}

/* To get the Google ad under the content centered, two table cells is used.
 * The left one, right under the left side, should be empty but have the
 * correct background color */
.left_side_ad {
	width:159px;
	background-color:#7387A3;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
}

/* ### Menu classes ### */

/* <ul> tag */
.menu {
	list-style:none;
	padding:16px 6px 20px 20px;
	margin:40px 0 0 0;
}

/* <li> tags, and their appearance as links */
.menu li {
	background:url(../Images/design/dot_paw.gif) no-repeat center left;
	padding-left:14px;
	font-family:"Courier New", Courier, mono;
}
.menu li a {
	color:#FFFFFF;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	margin-top:1px;
	margin-bottom:1px;
}
.menu li a:hover {
color:#CFD6E6;
}
/* img tag for Diploma (SVERAK) */
#diplomering {
	margin:0 auto;
	display:block;
}

/* Right side, where content is */
.content {
	width:600px;
	text-align:left;
	vertical-align:text-top;
	padding:30px 20px;
	color:#000000;
	background-color:#FFFFFF;
	border-top:1px solid #000000;
	border-right:1px solid #000000;
}

/* All links in content (in paragraphs), if nothing else is specified */
.content p a {
	color:#000000;
	text-decoration:underline;
	background:url(../Images/design/link_arrow_black.gif) no-repeat center left;
	padding-left:9px;
}
.content p a:hover {
	color:#C01F25;
	text-decoration:none;
}

/* table cell for Google ad, beneath the content */
.content_ad {
	width:600px;
	padding:0;
	color:#FFFFFF;
	background-color:#FFFFFF;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
	text-align:center;
}
/* <div> tag which the ad itself lies in */
.ad {
	margin:5px auto;
	padding:0;
}
/* The Google ad places itself in an iframe */
iframe {
	margin:0;
	padding:0;
}


/* To be able to center the admin login link within the bottom left side
 * the bottom is also divided into two table cells, left and right. */
.bottom_left {
	text-align:center;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
}
.bottom_right {
	text-align:right;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
}
/* For both the left and right side */
.bottom_left, .bottom_right {
	background-color:#7387A3;
	padding:5px 15px;
	color:#FFFFFF;
	font-family:"Courier New", Courier, mono;
}
.bottom_left a, .bottom_right a {
	color:#FFFFFF;
	font-size:14px;
	text-decoration:none;
}
.bottom_left a:hover, .bottom_right a:hover {
	color:#C01F25;
}

/* icons */
.icon {
	border:0;
	margin:0 1px;
	valign:middle;
}

/* male/female icon */
.male_icon, .female_icon {
	border:0;
	margin:0 3px;
	height:30px;
	valign:bottom;
}
.male {
	width:27px;
}
.female {
	width:20px;
}

/* <p>, number of queries and total loading time (Admin) */
.queries,
.load_time {
	font-size:12px;
	font-weight:bold;
	margin:1px 0 1px 15px;
	color:#FFFFFF;
}

/* <fieldset>, for login page */
.login {
	width:400px;
	margin:20px 0 10px 50px;
}
.login legend {
	color:#000000;
	font-weight:bold;
}
.login p {
	margin:5px 0 5px 50px;
}


/*===============================================================*/
/*=====     Everything beneath this point handles forms     =====*/
/*===============================================================*/

form div {
	margin:10px 30px;
}

/* table cell for field's name/description */
.td_text {
	padding:0 5px;
	vertical-align:text-top;
}

/* Extra formatting if field is not filled correctly (not same as .td_error) */
.error {
	font-weight:bold;
	color:#CC0000;
}
.success {
	font-weight:bold;
	color:#00CC00;
}

/* table cell where the actual form field is */
.td_input, .updated {
	padding:0;
	vertical-align:top;
}

/* Extra formatting if the field has been updated */
.updated {
	padding:1px;
	background-color:#CCFFCC;
}

/* table cell for  error messages (to the right of the field) */
.td_error {
	padding:0;
	vertical-align:text-top;
	font-size:12px;
	font-weight:bold;
}

/* Regular text field */
/*.text {background-color:#FFFFFF; border:1px solid #000000; padding:1px; width:160px;}*/
.text {
	background-color:#EDF2FF;
	font-size:14px;
	font-family:"Courier New", Courier, mono;
	padding:1px;
	border-left:1px solid #333333;
	border-top:1px solid #333333;
	border-right:1px solid #DDDDDD;
	border-bottom:1px solid #DDDDDD;
}

/* Text area */
/*.textarea {background-color:#FFFFFF; border:1px solid #000000; padding:2px 1px; width:300px; height:150px;}*/
.textarea {
	width:320px;
	height:140px;
	background-color:#EDF2FF;
	font-size:14px;
	font-family:"Courier New", Courier, mono;
	padding:1px;
	border-left:1px solid #333333;
	border-top:1px solid #333333;
	border-right:1px solid #DDDDDD;
	border-bottom:1px solid #DDDDDD;
}

/* Select/Drop down */
.select {
	background-color:#EDF2FF;
	font-size:14px;
	font-family:"Courier New", Courier, mono;
	padding:0;
	border-left:1px solid #333333;
	border-top:1px solid #333333;
	border-right:1px solid #DDDDDD;
	border-bottom:1px solid #DDDDDD;
}

/* Options in drop down */
.select option {
	padding:0 1px;
}

/* Radio buttons */
.radio {
}

/* Check boxes */
.checkbox {
}

/* File, for uploading images */
.file {
}

/* Submit button */
.button_submit {
	background:url("../Images/design/bg_button.gif") #6F849E center left repeat-x;
	color:#FFFFFF;
	border:1px solid #000000;/*2px outset #859CBC;*/
	padding:2px 5px;
	margin:0;
	font-size:12px;
	font-weight:bold;
	font-family:"Courier New", Courier, mono;
}

/* Reset button */
.button_reset {
	background-color:#859CBC;
	color:#FFFFFF;
	border:2px outset #859CBC;
	padding:1px 3px;
	margin:0 5px;
	font-size:12px;
	font-weight:bold;
}

/* Cancel button */
.button_cancel {
	background-color:#859CBC;
	color:#FFFFFF;
	border:2px outset #859CBC;
	padding:1px 3px;
	margin:0 5px;
	font-size:12px;
	font-weight:bold;
}

/* Delete/Remove button */
.button_delete {
	background-color:#859CBC;
	color:#FFFFFF;
	border:2px outset #859CBC;
	padding:1px 3px;
	margin:0 5px;
	font-size:12px;
	font-weight:bold;
}
