/*  CSS leses fra topp til bunn. Det som treffer sist gjelder */

/*  If you write one rule with and one rule without the element
    type in the selector, the rule that uses the element type will
    have higher specificity. */

/*  The following CSS rule:
    div.whatever{clear: both} 
    is equivalent to the following:
    div.whatever{float: left; width: 100%} */

/*  Reset the styles for most elements */
html,body,div,p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,li,dl,dt,dd,td,form,fieldset,a,img,button{
    margin:0;
    padding:0;
    border:0;
    }
body {
	font-size:80%;              /* scale the text in the whole body */
	font-family:Arial, Helvetica, sans-serif;
    }
hr {
	margin: 0px;                /* fixes xhtml N6 bug where the hr sits to the left*/
	color: #ccc;                /* for ie */
	background-color: #ccc;     /* for everyone else */
	height: 1px;
	margin: 2em 0em;
}

h1, h2, h3, h4, h5, h6 {color:#0B550B;}

/* Typographics styles adapted from http://www.thenoodleincident.com/tutorials/typography/ */
h1  {
	margin-bottom:0.5em;
	font-size: 1.7em;
	font-weight: normal;
    }
h2  {
	margin:0.5em 0;
	font-size: 1.6em;
	font-weight: normal;
    }
h3  {
	margin: 0.5em 0;
	font-size: 1.4em;
	font-weight: normal;
    }
h4  {
    clear:left;
	margin: 0.5em 0;
	font-size: 1.2em;
	font-weight: bold;
    }
h5  {
	margin: 0.5em 0;
	font-size: 1.0em;
	font-weight: bold;
    }
h6  {
	margin: 0.5em 0;
	font-size: 0.8em;
	font-weight: bold;
    }
p   {
    margin: 1.5em 0;
    line-height:1.4em;
    }
a   {
	text-decoration:underline;
    }
                

/* ============================================================================ */
/* ============================================================================ */
/* Grid setup for alle grids */
.Grid {Color:#333333; margin-bottom:25px;}
Table.Grid {border-style:solid; border-collapse:collapse; border-spacing:0px;}
Table.Grid Table {border-style:none; border-collapse:collapse; border-spacing:0px;}
Table.Grid TD {border-style:none; white-space:nowrap; padding-left:2px; padding-right:2px;padding-top:2px; padding-bottom:2px; font-size:12px;}
.GridHeader {font-size:13px; white-space:nowrap; background-color:#008000; color:white; height:20px; text-align:left; padding-left:2px; padding-right:2px;}
TR.GridHeader TH {border-style:none; white-space:normal; border-collapse:collapse; vertical-align:bottom; padding-bottom:5px; padding-left:2px; padding-right:2px;}
/* TR.GridHeader TH.Vertical{writing-mode:tb-rl; filter:flipv fliph; text-align:left; vertical-align:middle; padding:5px;} */
TR.GridHeader TH a {color:white;}
.GridFooter {background-color:#5D7B9D; color:White; font-weight:bold;}
.GridRow {background-color:#F7F6F3; color:#333333;}
.GridEditRow {background-color:#999999; color:White;}
.GridSelectedRow {background-color:#E2DED6; color:#333333; font-weight:bold;}
.GridAlternatingRow {background-color:White; color:#284775;}
.GridPager {color:White; text-align:left;}
TR.GridPager Table TD {font-size:16px; padding-left:3px; padding-right:3px;}
TR.GridPager Table TD span {color:White}
TR.GridPager Table TD a {color:white}
TR.GridPager {background-color:#008000;}

/* Must be below Grid setup */
.Tekstbryting {white-space:normal; }
.Sentrert {vertical-align:middle; text-align:center;}
.Top {vertical-align:top;}
.Utsolgt {padding-left:3px;padding-right:3px;background-color:Red;color:White;text-decoration:blink;font-size:18px;}

/* Slider setup */
.PagerStyle {
	width: 450px;
    margin-top:3px;
    height: 36px;
    background-color:Gray;
    }

.PagerButtons {
    height:30px;
    width:30px;
    }


/* Hidden DIV and buttons */
/* .SmallButton {height:0px; border:0px; border-collapse:collapse; margin:0px;} */
.HiddenButton {display:none;}
.HiddenPanel {display:none;}
.HiddenTextbox {display:none}

/* ============================================================================ */
/* ============================================================================ */
/* copied from http://positioniseverything.net/articles/sidepages/pie-calc.php?fixed=752&maxsite=1350&maxwin=1400 */
/* Jello -- start copying here * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body {
	padding: 0 500px 0 500px;
	margin: 0;
	text-align: center;
	/* background: gray; */
}
		
#sizer {
	margin: 0 auto 0 auto;
	padding: 0;
	width: 87%;
	max-width: 350px;  /* version for IE is at the bottom of this style block */
}

#expander {
	/* background: white; */
	margin: 0 -500px 0 -500px;
	min-width: 1000px; /* Critical Safari fix! */
	position: relative;
}

/* Holly hack for IE \*/
* html #expander { height: 0; }
/* */

/* helps IE get the child percentages right. */
#wrapper { width: 100%; } 


/* * --- stop copying, but be sure to grab IE's max-width, just above the body-tag --- * * * * * * * * * * * * * * */
/* End of Jello */

/* ============================================================================ */
/* ============================================================================ */
/* override some of the settings from jello mold */

body {
    background-color:#005200;
    background-image:url(Images/gradients/008000005200120sinusoidal.png);
    background-repeat:repeat-x;
    }
#expander{
    background-color:Transparent;	
    }
#wrapper { 
	text-align:left;
	background-color:Transparent;	
    }

/* ============================================================================ */
/* ============================================================================ */
/* Specific pages */

/* Setup of text and image in the plantesortiment top info */
.KategoriBilde {                        /* div with category image plantesortiment top right */
    float:right;
    width:28%;
    margin-bottom:5px;                  /* space to table below */
    }
.imgTable {width:100%;}
.imgTopInfo {                           /* imgage inside div. Unfortunately % sizes inside the table rendered by formview does not work properly */
    margin-top:3px;                     /* adjustment for picture border */
    border:3px inset gray !important;   /* must add the important override to fix asp:image inline tag for style border */
    width:200px;                        /* size in % not possible since IE bugs with % inside table */
    text-align:right;                   /* will adjust image position in combination with block display */
    display:block;
    float:right;                        /* needed for FF */
    }
.KategoriTekst {float:left; width:70%; margin-bottom:10px;}

/* Søkefilter for plantesortiment top */
.KategoriSoekeFilterDiv {float:left; width:70%; margin-bottom:8px;}
#KategoriSoekTable {border-collapse:collapse; margin-top:10px;}
#KategoriSoekTable TD {padding-left:4px;}

/* Tabell med planteutvalg */
#KategoriSortimentTabell {
    clear:both;
    overflow-y:hidden;                  /* only works in IE */
    overflow:auto;
    margin:0px;
    margin-bottom:5px;
    width:100%;
    }
    
.overflow {
    clear:both;
    overflow-y:hidden;                  /* only works in IE */
    overflow:auto;
    margin:0px;
    margin-bottom:5px;
    width:100%;
    }
    
/* forside */
.viktigmelding {
    background-color:#FFFACD;  /* lemonchiffon yellow */
    padding:0px 5px;
    margin-bottom:5px;
    }

/* List items i hardførhet og klimasone side */
.klimasone b {margin-right:15px;}

/* Bestilling veiviser tabell */
.BestWizard TR {vertical-align:top;}
.BestWizard TD {padding-top:1px; padding-bottom:1px; padding-right:5px;}

.imgDetaljerInfo {top:10px; left:10px; position:absolute; text-align:left;}

/* ============================================================================ */
/* ============================================================================ */
/* Bedforslag */
.BedBilde {
    width:50%;
    float:left;
    margin-right:1%;    
    }
.BedImg {
    width:99%;  /* leave 1% for padding and border of image */
    border:3px inset gray !important;  /* must add the important override to fix asp:image inline tag for style border */
   /* float:right;
    display:inline; */
    }

.BedInfo {
    float:left; 
    width:49%;
    }

.BedValg {
    float:left;
    width:49%;
    margin-right:1%;    
    }
    
.drpVelgBed {
    font-size:16px;
    }

/* ============================================================================ */
/* ============================================================================ */
/* Master page setup */

.clearfix:after {       /* http://positioniseverything.net/easyclearing */
    content: "."; 
    display: block; 
    height: 0; 
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-table;}

/* Hides from IE-mac, don't change \*/
* html .clearfix {height: 1%;}  
.clearfix {display: block;}          
/* End hide from IE-mac. */

/* ============================================================================ */
/* ============================================================================ */
/* Header and menu setup */

#header {
	position:relative;  /* needed */
	height:120px;
    width:99%;
	margin:2px 0px 0px 0px;
	border:1px solid #0B550B;
    background-color:white;
	background-image:url(Images/GrytøySix40H.jpg);
	background-repeat:no-repeat;
	background-position:top left;
    }
#CompanyLogo{
    position:absolute;
    top:19px;
    width:20%;
    text-align:right;
    }
#CompanyLogo img{
    float:right;
    display:block;
    height:80px;
    text-align:right;
    }
#CompanyName {
    position:absolute;
    left:20%;           /* same size as leftcolumn + 1% */
    top:20px;
    }
#CompanyName h1 {
    margin:0px;
    font-family:Times New Roman;
    font-size:34px;
    font-style:italic;
    color:#004200;
    }
#CompanySlogan {
    position:absolute;
    right:10px;
    top:30px;
    }
#CompanySlogan h2 {
    margin:0;
    font-family:Times New Roman;
    font-size:24px;
    font-style:italic;
    color:#004200;
    }
#breadcrumb{
    position:absolute;
    top:0px;
    right:5px;
    text-align:right;
    padding:2px 5px;
    }

/* Styling of main menu div in center top */
#mainnav {
    position:absolute;
    right:0;
    bottom:0;
    padding:0px;
    border:0px;
    margin:0px;
	background-color:Transparent;	
    }
/* html>body #mainnav {height:21px;} */


/* Menu main layout */
/* Settings for width and overflow on the main menu Table element directly breaks both IE8 and FF

/* Menu static layout */
.StaticMenu tr td {vertical-align:middle; padding:0px;}
.StaticItem {
    text-decoration:none;       /* firefox compability */
    display:block !important;   /* firefox compability, also makes whole cell clickable */
    background-color:white;
	color:#0B550B;
    border:0px;
    margin:0px;
    text-align:left;
	padding: 0px 5px 0px 5px;   /* Padding for text buttons */
	font-size:1.2em;
	font-weight:bold;
	border-style:solid;
    border-color:#005200;
    border-width:2px 1px 1px 5px;
	}
.StaticHover {background-color:#21FF21;}
.StaticSelected {background-color:#21FF21;}

/* Menu dynamic (dropdown) layout */
.DynamicMenu {
    z-index:100;   /* z-index set to fix problem with ie8 */
    }
.DynamicItem {
  /*  display:block; */         /* Breaks opera and FF clicable cell concept */
    text-decoration:none;       /* firefox compability */
    background-color:white;
	color:#0B550B;
    margin:0px;
    text-align:left;
	padding: 0px 5px 0px 5px;   /* Padding for text buttons */
	font-size:1.2em;
	font-weight:bold;
 	border-style:solid;
    border-color:#005200;
    border-width:1px;
    border-left-width:5px;
    border-top-width:1px;
    overflow:hidden;            /* If not set, due to padding, cell will overflow and ruin right side border */ 
	}
.DynamicItem a {
    display:block;              /* Don't set any width:100% here, or right side border of Opera will fail! */
    }
.DynamicHover{
    background-color:#21FF21;
    }

.DynamicSelected{background-color:#21FF21;}
html:first-child .DynamicItem {margin-right: 6px;}      /* Opera hack, fixes border width issue of 1px +5px = 6px */
* html #mainnav .DynamicItem {width:100%;}              /* IE6- fix for mainnav dynamic width */
*:first-child+html #mainnav .DynamicItem {width:100%;}  /* IE7 only, fix for mainnav dynamic width */

#skiptocontent{
	position:absolute;
	margin-left:-1000px;
    }

/* ============================================================================ */
/* ============================================================================ */
/* left column setup */

#leftcolumn{
    width:18%;
	float:left;
/*	margin-right:-3px;       */       /* IE5/6 3px display bug fix (in conjunction with the rule following below)*/
	background-color:Transparent;	
	font-size:0.9em;
    overflow:hidden;
    }

html>body #leftcolumn{margin-right:0;}  /* IE5 hack, IE6 don't need this */

#leftbarcontainer{
	margin:2px 2px 2px 0px;         /* don't touch if not sure what your are doing */
	margin-right:0px;
	padding:15px;
	border:1px solid #0B550B;
	background-color:white;
    }
    
#shoppingcart{
	background-color:#FFFACD;
	color:#6D584D;
    padding:5px;
    margin-top:3px;                 /* adjust to come equal to header in maincontent */
    margin-bottom:5px;
	border:1px solid #0B550B;
    }
#kampanje{
	background-color:#FFFACD;
	color:#6D584D;
    padding:5px;
    margin-top:3px;                 /* adjust to come equal to header in maincontent */
    margin-bottom:5px;
	border:1px solid #0B550B;
    }
#subnav{
	padding-bottom:1em;
	overflow:hidden;
    }

#subnav a {}

#subnav a:hover{text-decoration:underline;}

.leftbaritem{padding:2em 0.5em;}

.Adrotator{
    border:1px inset gray !important;   /* must add the important override to fix asp:image tag added automatic for style border */
    width:99%;
    text-align:center;                  /* will center image in combination with block display */
    display:block;
    }

/* ============================================================================ */
/* ============================================================================ */
/* center column setup */

#centercolumn{
    float:left;
    width:81%;
	height:1%;
	margin:0;
	background-color:Transparent;	
    }
html>body #centercolumn{
	height:auto;
	margin-left:2px;
	margin-right:0px;
    }

#maincontent{
	margin:2px 0px 2px 2px;
	padding:15px;
	border:1px solid #0B550B;
	background-color:white;
    }

/* :before and :after only works in non-IE browsers like FF */
/* #maincontent h2:before{padding-right:5px; content:url(Images/magnolia_small.gif);} */
    
#maincontent fieldset {
    position: relative;                 /* might fix some opera bug but overlays the popup if used in FF */
    border: 1px dotted #0B550B;
    margin-top:10px;                    /* space above fieldset */
    margin-bottom:10px;                 /* to avoid legend being hidden */
    margin-left:2px;                    /* compensate for border */
    padding: 15px 10px 10px 10px;
    /* padding-top:1.2em;
    padding-bottom:1.2em; */
    
    /* margin: 5px auto; */             /* fixed in the outside div rather than in fieldset */
	color:#573922;
    background-color:#FFFACD;
    /* -moz-border-radius: 10px; */
    }

#maincontent legend{
    position:absolute;
    top: -0.7em;
    /* left: 1em; */                /* FF seems to ignore this one */
    margin-left: 15px;
    padding: 0px 10px;              /* keep the text separated from the fieldset border .... */
    /* border: 1px solid #fff; */
    background-color:white; 
    /* -moz-border-radius: 10px; */
    }

#maincontent label{line-height:2em;} 

#maincontent .txtBox {
    border:1px solid #DDD1C4;
    font-size:1em;
    background-color:#F5F2EF;
    }
html>body #maincontent .txtBox{font-size:1em;}

#maincontent .drpDown {
    border:1px solid #DDD1C4;
    font-size:1em;
    background-color:#F5F2EF;
    }

#maincontent .txtBox:focus {background-color:white;}

/* used for ajax watermarked textboxes */
#maincontent .watermarked {
    border:1px solid #DDD1C4;
    font-size:1em;
    background-color:#F5FFEF;
    color:Gray;
    width:300px;
    }

#maincontent caption {
    text-align:left; 
    font-weight:bold;
    }

/* ordered and unordered lists in main content column */
#maincontent ol {margin-left:25px;}
#maincontent ul {margin-left:25px;}
#maincontent li {margin-top:5px;}

/* extra wrapper for plantesortiment siden */
#contentwrap {  
    width:100%;
    }

#footer {
    color:White;
    margin:2px;
    padding:0em 0.5em;
    font-size:12px;
    }

#footer a {padding:0em 0.5em;}

#footerleft {float:left;}
#footerright {float:right; text-align:right;}

/* ============================================================================ */
/* ============================================================================ */
/* General setup for images and buttons */

.button {
    border:1px solid #0B550B;
    color:#6D584D;
    font-size:13px;
    }

.imgfloatright {
	float:right;
	display:inline;
    width:100%;
	margin: 0.25em 0 0.25em 1em;
    }

.imgfloatleft {
	float:left;
	display:inline;
	margin: 0.25em 1em 0.25em 0;
    }

.imgcentered {
    float:right;
    text-align:center;                  /* will center image in combination with block display */
    display:block;
    }

/* ============================================================================ */
/* ============================================================================ */
/* Setup for the image thumbnail and the popup                                  */

/* Thumbnail settings */
.ImgThumb {border:1px solid blue; vertical-align:middle; margin-bottom:1px; margin-top:1px;}

/*  Panel used by popup
    Do NOT use display:none on panel class since this will hide the popup permanently.
    Adding it to the style tag directly works though, this is a limitation of AJAX.
    Size should be set to maintain setting correctly.*/
.Detaljer {position:relative; width:720px; height:500px; z-index:99; background-color:transparent; overflow:visible;}    /* panel som viser detaljinfo om hver plante ved hover */

.popuplarge{                    /* inner div setup, this contains enlarged image and text */
    direction:ltr;              /* reset direction on popup in case thumb uses rtl */
    width: 100%;
    /* padding: 5px; */
    border: 3px solid gray;
    background-color: #FFFACD;  /* lemonchiffon yellow */
    min-height:400;
    }

.popuptitle{                    /* title header to popup */
    padding:5px;
    width:710px;                /* 720 - 2x5px padding */
    font-size:14px;
    font-weight:bold;
    margin-bottom:5px;
    background-color:Green;
    color:white;
    }

.popuptable {                   /* Table with details content about flower */
    color: #060F40;
    background: #FFFACD;
    }
.popuptable TH {text-align:left;}

.popuplargerightcolumn{         /* right bar div setup */
    padding: 5px;
    width: 200px;
    float: right;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    border: 1px dashed gray;
    }

.popuplargeleftcolumn{          /* left bar div setup */
    width: 480px;               
    margin-left: 5px;
    margin-bottom: 5px;
    }

.popuplargeimg{                 /* large image setup */ 
    padding: 0px;
    /* width: 477px; */         /* this is now set in the codebehind to scale to max heigth and width contraints */
    float: none;
    border: 3px inset gray;
    }

/* ============================================================================ */
/* ============================================================================ */
/* Validation summary layout 
 Assumes bulletlist displaymode */
 .errors {               /* General and div layout */
    border: 2px solid red;
    color: black;
    margin: 5px 0px;
    padding: 15px;
    font-weight:bold;
    padding-left: 50px;    /* At least size of image */
    background: #fff url(images/Exclamation.gif) no-repeat 10px 50%;
    }
.errors ul {            /* Bullet list items layout */
    margin: 0;
    color: red;
    padding: 0;
    font-weight:normal;
    margin-left: 30px;     /* Ident for bullet list */
    list-style: square;
    }

/* ============================================================================ */
/* ============================================================================ */

/* Custom setup for printing */

@media print {	
	body {
		margin:0;
		padding:0;
		font-size:11pt;
		line-height:13pt;
		background:#FFFFFF !important;
	}
	#sizer {
		margin:0;
		width:auto !important;
	}
	#expander {
		margin:0 !important;
		background: none;
	}	
	#wrapper {
		border-bottom-style:none;
		background:none;
	}	
	a {
		color:#666666; 
		text-decoration:underline;
	}
	
	#leftcolumn, #rightcolumn, #maincontent h2:before {display:none;}	
	
	#centercolumn {
		width:100%;
		margin:0 !important;
		background:none;
	}
	#centercoltop {
		height:auto;
		background:none;
	}
	#header {
		margin:0; 
		border:none;
		height:auto;
		background:none;
	}
	
	/* If the logo is a transparent gif it will look rather unsightly on paper, 
	so you can turn it off here. */
	#header img {display:none;}
	
	#maincontent {
		margin:0; 
		border:none;
		background:transparent;
	}
	
	#maincontent fieldset {border:none;}
	
	#maincontent .txtBox {background:none;}
	
	#noprint {display:none; visibility:hidden;}
}