/* 	Övergripande stil. Sätter typsnitt, storlek samt att standard för alla fält är inga marginaler.
	Sätter även bakgrundsfärgen på allt runtomkring själva innehållet till grått. */
	
body {
	font-family: 'Verdana';
	font-size: 11px;
	margin: 0; 
	padding: 0;
	/*background: #faf7f7;*/
	background: #eae7e7;
}

/*	Innesluter allt innehåll på sidan, definierar sidans bredd till 800px samt centrerar allt. */

#wrapper {
	margin: 0 auto 0 auto;
	width: 800px;
	text-align: left;
}

/*	För att skapa lite luft innan innehållet börjar överst på sidan. */

#spacertop {
	width: 800px;
	height: 30px;
}

/*	Inneslutar sidhuvudet, dvs logotypen överst samt navigeringsmenyerna. */

#header {
	width: 800px;
}

/*	Fält som innehåller logotypen. Bestämmer fältets storlek samt sätter logofilen som "bakgrund". */

#logo {
	width: 800px;
	height: 150px;
	background: #ffffff;
	background: url(images/top_banner.jpg) no-repeat top left;
}

/*	Huvudnavigeringen, fem kategorier (Home, About, Services, Career och Contact).
	Sätter bredden på navigeringsfältet till hela sidan samt dess bakgrundsfärg och höjd. */

#primarynavigation {
	width: 800px;
	height: 25px;
	background: #9ac0dc;
}

/*	Sätter standard för de fem individuella navigeringselementen. Bredden 100px, marginaler etc samt
	att varje ny knapp fyller på till höger om föregående (float). */

#primarynavigation p {
	padding: 0 3px 0 3px;
	margin: 5px 3px 0 3px;
	width: 100px;
	float: left;
	text-align: center;
}

/*	Fortsatt standard för varje navigeringsalternativ. */

#primarynavigation p a {
	width: 100px;
	height: 20px;
	display: block;
}

/*	Stilmallar för alla navigeringsalternativ. Sätter knapparna till olika bilder om
	man håller över dem eller inte, samt ändrar knappens utseende om det är den för
	tillfället aktiva länken. */

#primarynavigation p a.home {
	background: url(images/primary_home.jpg) no-repeat left bottom;
}

#primarynavigation p a.home:hover {
	background-position: left top;
}

#primarynavigation p a.activehome {
	background: url(images/primary_home.jpg) no-repeat left top;
}

#primarynavigation p a.about {
	background: url(images/primary_about.jpg) no-repeat left bottom;
}

#primarynavigation p a.about:hover {
	background-position: left top;
}

#primarynavigation p a.activeabout {
	background: url(images/primary_about.jpg) no-repeat left top;
}

#primarynavigation p a.services {
	background: url(images/primary_services.jpg) no-repeat left bottom;
}

#primarynavigation p a.services:hover {
	background-position: left top;
}

#primarynavigation p a.activeservices {
	background: url(images/primary_services.jpg) no-repeat left top;
}

#primarynavigation p a.career {
	background: url(images/primary_career.jpg) no-repeat left bottom;
}

#primarynavigation p a.career:hover {
	background-position: left top;
}

#primarynavigation p a.activecareer {
	background: url(images/primary_career.jpg) no-repeat left top;
}

#primarynavigation p a.contact {
	background: url(images/primary_contact.jpg) no-repeat left bottom;
}

#primarynavigation p a.contact:hover {
	background-position: left top;
}

#primarynavigation p a.activecontact {
	background: url(images/primary_contact.jpg) no-repeat left top;
}

/*	Samma struktur och idé som för primärlänkarna. Första delen specificerar den ram som innehåller
	alla sekundärknappar, den andra delen varje knapp var och en för sig. */

#secondarynavigation {
	width: 798px;
	height: 25px;
	background: #e8f4ff;
	border-bottom: solid 1px #9ac0dc;
	border-left: solid 1px #9ac0dc;
	border-right: solid 1px #9ac0dc;
}

#secondarynavigation p {
	padding: 0 3px 0 3px;
	margin: 5px 3px 0 3px;
	width: 100px;
	float: left;
	text-align: center;
}

#secondarynavigation p a {
	width: 100px;
	height: 20px;
	display: block;
}

#secondarynavigation p a.home {
	background: url(images/secondary_home_home.jpg) no-repeat left bottom;
}

#secondarynavigation p a.home:hover {
	background-position: left top;
}

#secondarynavigation p a.activehome {
	background: url(images/secondary_home_home.jpg) no-repeat left top;
}

#secondarynavigation p a.calendar {
	background: url(images/secondary_home_calendar.jpg) no-repeat left bottom;
}

#secondarynavigation p a.calendar:hover {
	background-position: left top;
}

#secondarynavigation p a.activecalendar {
	background: url(images/secondary_home_calendar.jpg) no-repeat left top;
}

#secondarynavigation p a.about {
	background: url(images/secondary_about_about.jpg) no-repeat left bottom;
}

#secondarynavigation p a.about:hover {
	background-position: left top;
}

#secondarynavigation p a.activeabout {
	background: url(images/secondary_about_about.jpg) no-repeat left top;
}

#secondarynavigation p a.board {
	background: url(images/secondary_about_board.jpg) no-repeat left bottom;
}

#secondarynavigation p a.board:hover {
	background-position: left top;
}

#secondarynavigation p a.activeboard {
	background: url(images/secondary_about_board.jpg) no-repeat left top;
}

#secondarynavigation p a.management {
	background: url(images/secondary_about_management.jpg) no-repeat left bottom;
}

#secondarynavigation p a.management:hover {
	background-position: left top;
}

#secondarynavigation p a.activemanagement {
	background: url(images/secondary_about_management.jpg) no-repeat left top;
}

#secondarynavigation p a.businessstr {
	background: url(images/secondary_about_businessstr.jpg) no-repeat left bottom;
}

#secondarynavigation p a.businessstr:hover {
	background-position: left top;
}

#secondarynavigation p a.activebusinessstr {
	background: url(images/secondary_about_businessstr.jpg) no-repeat left top;
}

#secondarynavigation p a.success {
	background: url(images/secondary_about_success.jpg) no-repeat left bottom;
}

#secondarynavigation p a.success:hover {
	background-position: left top;
}

#secondarynavigation p a.activesuccess {
	background: url(images/secondary_about_success.jpg) no-repeat left top;
}

#secondarynavigation p a.pressrel {
	background: url(images/secondary_about_pressrel.jpg) no-repeat left bottom;
}

#secondarynavigation p a.pressrel:hover {
	background-position: left top;
}

#secondarynavigation p a.activepressrel {
	background: url(images/secondary_about_pressrel.jpg) no-repeat left top;
}

#secondarynavigation p a.contribs {
	background: url(images/secondary_about_contribs.jpg) no-repeat left bottom;
}

#secondarynavigation p a.contribs:hover {
	background-position: left top;
}

#secondarynavigation p a.activecontribs {
	background: url(images/secondary_about_contribs.jpg) no-repeat left top;
}

#secondarynavigation p a.overview {
	background: url(images/secondary_services_overview.jpg) no-repeat left bottom;
}

#secondarynavigation p a.overview:hover {
	background-position: left top;
}

#secondarynavigation p a.activeoverview {
	background: url(images/secondary_services_overview.jpg) no-repeat left top;
}

#secondarynavigation p a.biopharmaceuticals {
	background: url(images/secondary_services_biopharm.jpg) no-repeat left bottom;
}

#secondarynavigation p a.biopharmaceuticals:hover {
	background-position: left top;
}

#secondarynavigation p a.activebiopharmaceuticals {
	background: url(images/secondary_services_biopharm.jpg) no-repeat left top;
}

#secondarynavigation p a.screen {
	background: url(images/secondary_services_screen.jpg) no-repeat left bottom;
}

#secondarynavigation p a.screen:hover {
	background-position: left top;
}

#secondarynavigation p a.activescreen {
	background: url(images/secondary_services_screen.jpg) no-repeat left top;
}

#secondarynavigation p a.hittolead {
	background: url(images/secondary_services_htl.jpg) no-repeat left bottom;
}

#secondarynavigation p a.hittolead:hover {
	background-position: left top;
}

#secondarynavigation p a.activehittolead {
	background: url(images/secondary_services_htl.jpg) no-repeat left top;
}

#secondarynavigation p a.compounds {
	background: url(images/secondary_services_compds.jpg) no-repeat left bottom;
}

#secondarynavigation p a.compounds:hover {
	background-position: left top;
}

#secondarynavigation p a.activecompounds {
	background: url(images/secondary_services_compds.jpg) no-repeat left top;
}

#secondarynavigation p a.informatics {
	background: url(images/secondary_services_inform.jpg) no-repeat left bottom;
}

#secondarynavigation p a.informatics:hover {
	background-position: left top;
}

#secondarynavigation p a.activeinformatics {
	background: url(images/secondary_services_inform.jpg) no-repeat left top;
}

#secondarynavigation p a.workinghere {
	background: url(images/secondary_career_workhere.jpg) no-repeat left bottom;
}

#secondarynavigation p a.workinghere:hover {
	background-position: left top;
}

#secondarynavigation p a.activeworkinghere {
	background: url(images/secondary_career_workhere.jpg) no-repeat left top;
}

#secondarynavigation p a.jobs {
	background: url(images/secondary_career_jobs.jpg) no-repeat left bottom;
}

#secondarynavigation p a.jobs:hover {
	background-position: left top;
}

#secondarynavigation p a.activejobs {
	background: url(images/secondary_career_jobs.jpg) no-repeat left top;
}

#secondarynavigation p a.contact {
	background: url(images/secondary_contact_contact.jpg) no-repeat left bottom;
}

#secondarynavigation p a.contact:hover {
	background-position: left top;
}

#secondarynavigation p a.activecontact {
	background: url(images/secondary_contact_contact.jpg) no-repeat left top;
}

/*	Innesluter allt datainnehåll på varje sida. */

#container {
	width: 800px;
}

/*	contentsfrontpage specar hur innehåll ska presenteras på förstasidan (Home). Detta
	skiljer sig åt från alla andra sidor eftersom informationen om upcoming events och
	recent news även ska publiceras här. 
	
	#contentsfrontpage nedan specar storleken på rutan som har allt faktiskt sidinnehåll,
	och har en hårdkodad höjd (height: 600px;) för att undvika problem med att kolumnen
	med nyheter inte ser konstig ut om sidan dras ut. Om denna höjd ändras måste även värdet
	på height under #sidebar ändras till samma värde minus fem för att det inte ska se konstigt ut. */

#contentsfrontpage {
	width: 600px;
	height: 600px;
	padding: 20px 10px 10px 10px;
	background: #ffffff;
	float: left;
	border-bottom: solid 1px #9ac0dc;
	border-left: solid 1px #9ac0dc;
}

/*	ANVÄNDS EJ! Specar utseende på sidrubriker, men eftersom dessa är i form av bilder påverkar
	värdena nedan endast för att sätta marginaler. */

#contentsfrontpage h1 {
	margin: 10px 0 20px 0;
	padding: 0;
	font-family: 'Verdana';
	font-weight: normal;
	font-size: 18px;
	color: #585858;
}

/*	Definierar utseende på underrubriker. */

#contentsfrontpage h2 {
	margin: 20px 0 5px 0;
	padding: 0;
	font-family: 'Verdana';
	font-weight: normal;
	font-size: 11px;
	font-weight: bold;
	color: #585858;
}

/*	Definierar utseende på brödtext. */

#contentsfrontpage p {
	margin: 0;
	padding: 0 0 15px 0;
	color: #585858;
	line-height: 14px;
	font-size: 11px;
}

/*	Definierar utseende på länkar. */

#contentsfrontpage a {
	color: #9ac0dc;
}

/*	Definierar utseende på länkar, när man håller musen över dem. */

#contentsfrontpage a:hover {
	text-decoration: none;
}

/*	Definierar utseende på länkar, när man klickar på dem. */

#contentsfrontpage a:active {
	text-decoration: none;
	color: #585858;
}

/*	Definierar utseende på punktlistor. */

#contentsfrontpage ul {
	margin: 0;
	padding: 0px 10px 15px 35px;
	color: #585858;
}

#contentsfrontpage ul li {
	padding: 0 0 5px 0;
}

/*	Definierar utseende på en punktlista i en annan punktlista (dvs underpunkter). */

#contentsfrontpage ul ul {
	margin: 0;
	padding: 5px 10px 5px 35px;
	color: #585858;
}

#contentsfrontpage ul ul li {
	padding: 0 0 5px 0;
}

/*	Definierar utseende på en numrerad lista. */

#contentsfrontpage ol {
	margin: 0;
	padding: 5px 10px 25px 35px;
	color: #585858;
}

#contentsfrontpage ol li {
	padding: 0 0 5px 0;
}

/*	Definierar utseendet på innehållet på alla sidor förutom förstasidan. Här finns ingen
	hårdkodad höjd på sidorna, utan de blir så långa som det behövs. */

#contents {
	width: 778px;
	padding: 20px 10px 10px 10px;
	background: #ffffff;
	float: left;
	border-bottom: solid 1px #9ac0dc;
	border-left: solid 1px #9ac0dc;
	border-right: solid 1px #9ac0dc;
}

/*	ANVÄNDS EJ! Specar utseende på sidrubriker, men eftersom dessa är i form av bilder påverkar
	värdena nedan endast för att sätta marginaler. */

#contents h1 {
	margin: 10px 0 20px 0;
	padding: 0;
	font-family: 'Verdana';
	font-weight: normal;
	font-size: 18px;
	color: #585858;
}

/*	Definierar utseende på underrubriker. */

#contents h2 {
	margin: 20px 0 5px 0;
	padding: 0;
	font-family: 'Verdana';
	font-weight: normal;
	font-size: 11px;
	font-weight: bold;
	color: #585858;
}

/*	Definierar utseende på brödtext. */

#contents p {
	margin: 0;
	padding: 0 0 15px 0;
	color: #585858;
	line-height: 14px;
	font-size: 11px;
}

/*	Definierar utseende på länkar. */

#contents a {
	color: #9ac0dc;
}

/*	Definierar utseende på länkar, när man håller musen över dem. */

#contents a:hover {
	text-decoration: none;
}

/*	Definierar utseende på länkar, när man klickar på dem. */

#contents a:active {
	text-decoration: none;
	color: #585858;
}

/*	Definierar utseende på punktlistor. */

#contents ul {
	margin: 0;
	padding: 0px 10px 15px 35px;
	color: #585858;
}

#contents ul li {
	padding: 0 0 5px 0;
}

/*	Definierar utseende på en punktlista i en annan punktlista (dvs underpunkter). */

#contents ul ul {
	margin: 0;
	padding: 5px 10px 5px 35px;
	color: #585858;
}

#contents ul ul li {
	padding: 0 0 5px 0;
}

/*	Definierar utseende på en numrerad lista. */

#contents ol {
	margin: 0;
	padding: 5px 10px 25px 35px;
	color: #585858;
}

#contents ol li {
	padding: 0 0 5px 0;
}

/*	Definierar utseendet på den sidokolumn som finns på förstasidan. */

#sidebar {
	width: 157px;
	height: 595px;
	padding: 25px 10px 10px 10px;
	background: #ffffff;
	float: left;
	border-bottom: solid 1px #9ac0dc;
	border-left: solid 1px #9ac0dc;
	border-right: solid 1px #9ac0dc;
}

/*	Definierar utseendet på fältet som rutornas rubriker står i. */

.sidebarheader {
	background: #9ac0dc;
	border: solid 1px #9ac0dc;
}

/*	Definierar utseendet på rutornas rubriktexter. */

.sidebarheader p {
	margin: 0px 5px 0px 5px;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 20px;
	font-weight: bold;
	color: #585858;
}

/*	Definierar utseendet på fältet som rutornas innehåll står i. */

.sidebarcontents {
	background: #faf7f7;
	margin: 0 0 25px 0;
	border-bottom: solid 1px #9ac0dc;
	border-left: solid 1px #9ac0dc;
	border-right: solid 1px #9ac0dc;
}

/*	Definierar utseendet på rutornas innehållstext. */

.sidebarcontents p {
	margin: 0px 5px 0px 5px;
	padding: 5px 0 5px 0;
	line-height: 15px;
	color: #585858;
	font-size: 9px;
}

/*	Definierar utseendet på länkar i rutorna. */

.sidebarcontents a {
	color: #9ac0dc;
}

/*	Definierar utseendet på länkar i rutorna, när man håller musen över dem. */

.sidebarcontents a:hover {
	text-decoration: none;
}

/*	Definierar utseendet på länkar i rutorna, när man klickar på dem. */

.sidebarcontents a:active {
	text-decoration: none;
	color: #585858;
}

/*	Definierar utseendet på det fält som innehåller sidfoten. */

#footer {
	width: 800px;
	height: 25px;
	background: #9ac0dc;
	float: left;
}

/*	Definierar utseendet på sidfotens text. */

#footer p {
	padding: 5px;
	margin: 0;
	text-align: center;
	font-size: 9px;
}

/*	För att skapa lite luft efter innehållet slutat, längst ned på sidan. */

#spacerbottom {
	width: 800px;
	height: 30px;
	float: left;
}