/* 
Hela tanken bakom den här css mallen är att jag vill ha så lite information som 
upprepar sig. Exempelvis är form1, form2 och form3 medlemmar i form. All information
som de delar har jag lagt i form. Medan den mer speciella ligger i respektive.

Det viktigaste man behöver hålla koll på är att ALLA classer ligger med i center-page
OCH att sidan är byggd uppifrån och ned. classerna utgår hela tiden från den classen
som står innan. meny2 utgår från meny1 etc. 

förhoppningsvis är den ganska logiskt uppbyggd och jag kommer att föklara varje
block av information för sig.
*/

/* tar bort länkramen som blir kring bilder */

img {
	border: 0px solid;	
}

/* Själva grund informationen för sidan och hur länkarna sköts */

* {
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
	
	/* Mozilla text size bug 
	
	font: Arial 12px !important; */
}

html, body {
	
	position:absolute;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #BBBBBB;
	
}

h2
{
	font-size: 18px;
}

h3
{
	font-size: 13px;	
}

a { 
	text-decoration: none;
	color: #333333
}

a:hover {
	color: #aa0000 
}
						


/* skapar det ljusare partiet som hela sidan ligger inbakad in, alla classar är
medlem i den här classen */

div.center-page {
	margin: auto;
	width: 700px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	
	background-image:url(../images/vastergotland.gif);
	background-repeat:no-repeat;
	/* background-position: 50% 20%; */
	
	background-position: 50% 500px; 
	
	background-color: #F9F9F9;
}

/* skapar loggbilden */

div.top {
	background: url('../images/topp_alt2.png') center no-repeat;
}

/* alla menyer tillhör den här, utom menytre som bara tillhör center-page */

div.header {
	font-size: small; 
	text-align: left;
}

div.meny1 {
	padding-left:20px;
	background-color: #FFCE4A;
}

div.meny2 {
	padding-left:30px;
	padding-bottom: 60px;
}

div.meny2b {
	padding-left:30px;
	padding-bottom: 22px;
}

div.meny3 {
	padding-left:30px;
	padding-bottom: 60px;
}

/* grundläggande information för de tables som används, det är menyerna och de tre tidningsspalterna
som påverkas av de här */

table, tr, tr.border {
	width: 100%;
}

td, tr, table {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	
	vertical-align:top;
}

th {
	text-align: left;
}

td.right {
	text-align: right;
	width:15%;
}

td.form1, td.form3 {
	width:180px;	
}

td.form2, table.meny1, table.meny2  {
	width: auto;
}

td.form2, td.form3 {
	border-width: 0px 0px 0px 1px;
	border-style: outset dotted outset outset;
	border-color: gray;
}

td.meny1, td.meny2 {
	width: auto;
	padding: 0px 20px 0px 0px;
	text-align:left;
}

td.meny3 {
	color:white;
}

/*td för nyhetsidan */

td.nyhet1 {
	width: 150px;
}

td.nyhet2, td.nyhet3 {
	width: 100px;
}

th.back {
	background-color: #F2F2F2; 
}

/* ämbetsmännens tabbel */

td.ambete1, th.ambete1 {
	width: 2%;
}

td.ambete2, td.ambete3, td.ambete5, td.ambete6, th.ambete2, th.ambete3, th.ambete5, th.ambete6 {
	width: 25%;
}

td.ambete4, th.ambete4 {
	width: 15%;	
}

th.ambete1, th.ambete2, th.ambete3,th.ambete4,th.ambete5,th.ambete6, th.nyhet
{
	background-color: #D3D3D3;
}

/* har hand om det lilla kalendariet */

div.shortKallendarium {
	margin-left:2%;
	padding-left:20px;
	margin-bottom: 30px;
	color: #333333;
	background-color: #F2F2F2;
	width:90%;
	font-size: x-small;
}

/* de följande har hand om de tre spalterna på sidan */

div.form {
	font-size: x-small;
	
	width:100%;
	margin-bottom: 20px;
}

/* Bild fliken på vänster sida */

div.form1 {
	margin-top:12px;	
	padding-right: 10px;
	padding-left: 30px;
}

div.ambete {
	width:95%;
	margin-left: 30px;
}
	
img.left {
	margin-bottom: 10px;	
	width:125px;
}

/* center fliken och högra*/

div.form2, div.form3 {
	padding-left: 10px;	
	padding-right: 10px;
	padding-top: 0px;
}

/* fliken på höger sida */

div.form3 {
	/*	background-color: #FFCE4A; 	*/
}

/* informationen längst ned på sidan */

div.footer {
	border-top: 1px solid;
	border-color: #808080;
	font-size: x-small;
	margin-left:7%;
	padding-bottom: 2%;
	width:80%;
}

/* Kalendarie rutorna */

td.formK1, td.formK3 {
	padding-left: 10px;	
	padding-right: 10px;
	padding-top: 0px;
	width: 50%;
}

table.kalTable
{
	margin: 0px;
	padding: 0px;
	
	width: 200px;
	
	color: #000000;
}

th.kal, td.kal, th.today, th.dark, th.old, td.red, tr.dagar, td.less, td.more
{
	height: 16px;
	width: 25px;
	

	color: black;
}

th.dark
{
	background-color: #686868;
	font-weight:bolder;
}

th.light
{
	background-color: 	#888888;
	font-weight:bolder;
}

th.today
{
	background-color: #C80000;
}

th.none
{
	background-color: #E8E8E8;
}

th.old
{
	color: #808080;	
	background-color: #E8E8E8;
}

td.red
{
	color: #DC143C;
}

th.both
{
	background-color: #505050;
}

th:hover
{	
	background-color: #D3D3D3;
}	

tr.dagar
{
	background-color:  #D3D3D3;
	
	text-align: center;
}

#less
{
	text-align: left;	
}

#less1
{
	text-align: left;	
	
	width: 60px;
}

#more
{
	text-align: right;
}

#cent, th.light, th.dark, th.old, th.none, th.today, th.both
{
	text-align: center;
}

/* mer kalender */

table.datum
{
	width: auto;	
}

#datum
{
	width: 120px;	
}

td.datumW, th.datumW
{
	width: 250px;
}

tr.datum
{
	background-color: #D3D3D3;
}