/*background-color:Transparent;
    is set in all custom tags to more easily insert images/color where wanted*/



/*Sets the outer background image and/or color, and defines padding/margin to 0 to ensure no browser default defines body differently.

background-repeat:repeat; sets the the background-image to repeat both vertically and horizontally. repeat-x would set it
to repeat only horizontally, repeat-y vertically. no-repeat is self-explanitory.

text-align:center; centers the page in IE. text-align must be set to left in lower tags, where necessary*/
body
{	
    padding: 0;
    margin: 0;
	width:100%;
	vertical-align:top; 
	text-align:center;
	background-color:#b0d3bb;
    background-image:url(outerbackGranvin.jpg);
    background-repeat:repeat-x;
}


/* #main defines the next level under body. A combination of body and #main is used to define the width and general design of the page itself,
and the space left over outside it. Can set margin-left and -right to the same amount (0, 10, 100, etc.),instead of setting the width specifically, for the page
to stretch with the size of the browser, while still being centered.

margin:0 auto; centers the page (left-to-right) in non-IE browsers
margin-top:26px; pushes the entire page 26px from the top edge of the browser
text-align:left; overrides text-align:center; from body, to set this as the default for all other tags within main (i.e. everything that isn't in the body)

width in the following tags can be left undefined, and they should be 1024px by default for being within #main. But for now, to be on the safe side, 
almost all are set to 1024px or a smaller value for those within #horizontals*/
#main
{
    height:100%;
    margin:0 auto;
    /*margin-top:26px;*/ /*Gj�r at sida flikker*/
    text-align:left;
}

/*Can be used when it's necessary to code differently for IE and other browsers (this tag overrides the above for most browsers except IE.
So use the above tag for IE-specific code, and this tag to override that code in other browsers. Code that isn't specific for either browser, only 
needs to be in the first one. You can use the same technique with the other tags.

In this case, IE does not read min-height, but reads height as other browsers read min-height (minimum height of a tag/cotainer, which otherwise adjusts with content)

Also, DNN seems to override the height definiton for IE, i.e. the page stretches to the set height locally, but not on the server. Still don't
know where to override this*/
html>body #main
{
    height:auto;
    min-height:100%;
}

/*If a background-image is used, the width should normally be set to the same as the as the image. But using no-repeat prevents it
from overflowing in the case that the container is wider than the image.

Use padding to position text further down within the container.
padding + width or padding + height equals total width or height, so subtract padding when necessary (doesn't work the same way in IE,
but background-repeat:no-repeat might be taking care of the potential problem)

text-align:right combined with the current padding, positions the text in the lower-right corner of the logo,
slightly off (15px) from the right edge. Change either as needed*/

html>body #logo
{
	height:185px;/*height:200px; could be used instead, if padding-top was 0px or not set*/
	text-align:right;
	vertical-align:bottom;
    background-image:url(header.jpg);
    background-repeat:no-repeat;
}
#logoIE
{
    width:937px;
	height:185px;/*height:200px; could be used instead, if padding-top was 0px or not set*/
	text-align:right;
	vertical-align:bottom;
    background-image:url(header.jpg);
    background-repeat:no-repeat;
}
html>body #logoIE
{
    height:0;
	width:0;
    background-image:none;
}   


#behindbackground
{
    background-image:url(innerbackGranvinCutRepeatable.png);
    background-repeat:repeat-y;
}




/*Contains all of the page except the logo, and can be used to set the background for the rest of the page. Can otherwise be left alone.*/
#background
{
    background-color:Transparent;
    background-image:url(innerbackGranvinCut.png);
    background-repeat:no-repeat;
    /*background-image:url(innerbackGranvinCutRepeatable.png);
    background-repeat:repeat-y;*/
    
}

/*Contains dnn:MENU, and a general background for it can be set here, if not more specifically in the .MainMenu_ tags*/
#menuContainer
{
    background-color:Transparent;
}

/*Breadcrumb style. May contain page-titles/paths*/
#breadcrumbContainer
{
    color:#000000;
    font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size:11px;
    padding-top:7px;
    height:13px;
    font-style:normal;
    font-weight:bold;
    text-decoration:none;
    text-align:center;
    background-color:Transparent;
    background-image:none;
    background-repeat:no-repeat;
}

/*Empty .breadcrumb style which overrides a DNN style that would otherwise bar the above definition from working
Utilizing this class directly does not seem to work*/
.breadcrumb
{
    
}

/*Contains the central parts of the page, LeftPane, ContentPane, RightPane.
height was determined by "trial and fail", in an attempt to always have the
background/page extend to the bottom of the screen. Should be defined differently if possible, in order to accomodate different resolutions, etc.

The background image here usually covers most of the page that isn't covered by the #logo.

width should be the same as #logo*/
#horizontals
{
    position:relative;
    float:left;
    vertical-align:top;
    background-color:Transparent;
    padding:7px 5px;/*top-bottom and left-right*/
}

/*Same problem as in #main.

width + left-right padding should be the same as #logo
*/
html>body #horizontals
{
}

/*Defines what is currently the left part of #horizontals. Must be placed first in html to be to the left of #contentContainer

The width of #leftContainer + #contentContainer + rightContainer must not be more than the width + padding in #horizontals, but should be as close to it
as possible to avoid the next elements placing themselves to the right of these, instead of below (unless you intend to add
something to the right of them, in which case all 4 should make up the width of #main. If you remove RightPane from the page, increase the width of
leftContainer and/or contentContainer accordingly).*/
#leftContainer
{
    position:relative;
    float:left;
    /*margin-top:7px;*/
    /*margin-left:5px;*/
    /*margin-bottom:7px;*/
    
    color:#000000;
    font-style:normal;
    font-family:Verdana;
    font-size:10px;
    font-weight:bold; 
    
    height:624px;
    background-color:Transparent;
}
html>body #leftContainer
{
    height:auto;
    min-height:624px;
}

/*Defines what is usually the largest part of the page, the content area. Width should be as instructed in #leftContainer*/
#contentContainer
{
    margin-left:5px;
    margin-right:5px;
    margin-top:43px;
    /*margin-top:7px;*/
    /*margin-bottom:7px;*/
    position:relative;
    float:left;
    
    height:624px;
    background-color:Transparent;
}
html>body #contentContainer
{
    height:auto;
    min-height:624px;
}

/*Currently identical to #leftContainer, except margin-right:5px; instead of margin-left:5px;*/
#rightContainer
{
	margin-top:43px;
    position:relative;
    float:left;
    /*margin-top:7px;*/ 
    /*margin-right:5px;*/
    /*margin-bottom:7px;*/
    
    color:#000000;
    font-style:normal;
    font-family:Verdana;
    font-size:10px;
    font-weight:bold; 
    
    height:624px;
    background-color:Transparent;
}
html>body #rightContainer
{
    height:auto;
    min-height:624px;
}


/*Defines the bottom part of the page, the footer. Generally contains Copyright, and links to ToS, Privacy Statement, Contact information, etc.

At a point it was necessary to add the background image to this, in addition to #main, because otherwise it would cut off just before
the BottomPane in some browsers. Not sure what the problem was, but it might occur again. 

Width should be the same as #main, #logo, #horizontals*/
#BottomPane
{
    text-align:center;
    padding-right:15px;
    padding-left:0px;
    padding-top:0px;
    padding-bottom:0px;
    background-color:Transparent;
    background-image:none;
    background-repeat:no-repeat;
}


/* ================================
    CSS STYLES FOR DotNetNuke
   ================================
*/   


/* Main Menu */

.MainMenu_MenuContainer 
{
    /*Width:159 to fit in leftpane height:auto to expand when new elements in rootmenu*/
    width:159px;
    height:auto;
    /*Border put in as image since the browsers doesn't seem to read border in MainMenu_RootMenuItem repeats downward for each new menuitem*/
    background-image:none;
    background-repeat:repeat-y;
    /*border-top-style:solid;
    border-top-width:1px;
    border-top-color:#89a1d1;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#89a1d1;*/
    
    margin-top:50px;
}

.MainMenu_MenuBar {
    
}
/*Items in the menu*/
.MainMenu_MenuItem 
{
    
    
	border-top-style:solid;
    border-top-color:Black;
    border-top-width:1px;
    /*There is set an automatic border for menuitem, this changes the color to the same
     *as the background;*/
    border-bottom-color:Black;
	color:Black;
    font-style:normal;
    font-family:Verdana;
    font-size:10px;
    font-weight:normal;
    height:21px;
}
/*Fixes problems with width of menu items. If width is set in .MainMenu_MenuItem the width doubles when the mouse hovers over the item
 *the menu item consists of two tds so width of a menu item should be 92*2=184px*/
.MainMenu_MenuItem td
{
    
}

/*Overrides .MainMenu_MenuItem for rootmenuitems. If border is put here it doesn't work. Putting borders in .MainMenu_MenuItem  also has no
 *effect on rootitems even do other rules have effect*/
.MainMenu_RootMenuItem
{
    background-position: left;
	background-image: url(RundDot.png);
	background-repeat: no-repeat;
    /*border-top-style:solid;
    border-top-color:#89A1D1;
    border-top-width:1px;
    border-bottom-color:#C9D4E8;*/
	color:Black;
    font-style:normal;    
    font-family: Verdana;
	font-size: 11px;
	font-weight: bold;
    height:21px;
} 

.MainMenu_RootMenuItem td
{
    padding-left:5px;    
}

.MainMenu_RootMenuItemSelected td
{
    padding-left:5px;    
}

.MainMenu_RootMenuItemActive td
{
    padding-left:5px;    
}


/*Icon in front of menuitems.It is not showing at the moment*/
.MainMenu_MenuIcon 
{
	display: none;
	background-color: Transparent;
	background-image: none;
	border: none;
	padding: 0px;
	background-repeat: no-repeat;
}

/*Puts background color in and border around an entire submenu */
.MainMenu_SubMenu 
{
    background-color:White;
    border-color:Black;
    border-width:1px;
    border-style:solid;
    /*No border on top because each menu item has a top border*/
    border-top-style:none;
}

.MainMenu_MenuBreak 
{
    
	
}


/*Arrows for menu items with submenu*/
.MainMenu_MenuArrow 
{
    /*Put arrow to the right*/
    text-align:right;

	padding: 0px;
	/*Border on top same as in menu item*/
	border-top-style:solid;
    border-top-color:Black;
    border-top-width:1px;
    /*Hides the automatic border right and bottom*/
    border-bottom-color:Black;
    border-right-color:Black;
	
}


/*Menu item when the mouse hovers over*/
.MainMenu_MenuItemSel 
{
    
    
	/*Changes mouse to a hand*/	
    cursor: pointer;   
    background-color:White;
	color:#FF6600;
	font-style:normal;
    font-family:Verdana;
    font-size:10px;
    font-weight:normal;
    border-top-style:solid;
    border-top-color:Black;
    border-top-width:1px;
    height:21px;
}

/*Root menu items when selected. Needs to be after menuitemsel to override it*/
.MainMenu_RootMenuItemSelected
{
    background-image: url(dotoff.png);
	background-repeat: no-repeat;
	background-position: left center;
    
    font-family: Verdana;
	font-size: 11px;
	font-weight: bold;
    
    background-color:Transparent;
    color: #FF6600;
}

/*sub menu item that belongs to the page your currently on. Overrides .MainMenu_MenuItem if put after */
.MainMenu_SubMenuItemActive
{
    color: #FF6600;
}

/*root menu item that belongs to the page your currently on. Overrides .MainMenu_MenuItem*/
.MainMenu_RootMenuItemActive
{
    background-image: url(dotoff.png);
	background-repeat: no-repeat;
	background-position: left center;
    
    font-family: Verdana;
	font-size: 11px;
	font-weight: bold;
    
    background-color:Transparent;
    color: #FF6600;	
}
/*Arrow in rootmenu*/
 .MainMenu_RootMenuArrow 
{
    /*Fixes problem where background image starts over again in the td of the arrow*/
    background-color:Transparent;
    background-image:none;
    width:22px;
}




/*============================*
 *       UNUSED STUFF         *
 *============================*/

/* Login Styles */
.LoginPanel{}.LoginTabGroup{}.LoginTab{}.LoginTabSelected{}.LoginTabHover{}.LoginContainerGroup{}.LoginContainer{}

/* Module Title Menu */
.ModuleTitle_MenuContainer{}.ModuleTitle_MenuBar{}.ModuleTitle_MenuItem{}.ModuleTitle_MenuIcon{}.ModuleTitle_SubMenu{}.ModuleTitle_MenuBreak{}
.ModuleTitle_MenuItemSel{}.ModuleTitle_MenuArrow{}.ModuleTitle_RootMenuArrow{}

/* GENERIC */
H1{}H2{}H3{}H4{}H5,DT{}H6{}TFOOT,THEAD{}TH{}A:link{}A:visited{}A:hover{}A:active{}SMALL{}BIG{}BLOCKQUOTE,PRE{}UL LI{}UL LI LI{}UL LI LI LI{}OL LI{}OL OL LI{}
OL OL OL LI{}OL UL LI{}HR {}

/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */
.HeadBg{}

/* background color for the content part of the pages */
Body{}

.ControlPanel{}

/* background/border colors for the selected tab */
.TabBg{}

.LeftPane{}

/* text style for the selected tab */
.SelectedTab{}

/* hyperlink style for the selected tab */
A.SelectedTab:link{}
A.SelectedTab:visited{}
A.SelectedTab:hover{}
A.SelectedTab:active{}

/* text style for the unselected tabs */
.OtherTabs {}
    
/* hyperlink style for the unselected tabs */
A.OtherTabs:link {}
A.OtherTabs:visited{}
A.OtherTabs:hover{}
A.OtherTabs:active{}

/* GENERAL */
/* style for module titles */
.Head{}

/* style of item titles on edit and admin pages */
.SubHead{}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead{}

/* text style used for most text rendered by modules */
.Normal{}

/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox{}

.NormalRed{}
.NormalBold{}

/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton{}
    
/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link{}
A.CommandButton:visited{}
A.CommandButton:hover{}    
A.CommandButton:active{}

/* button style for standard HTML buttons */
.StandardButton{}

/* MODULE-SPECIFIC */
/* text style for reading messages in Discussion */    
.Message{}   

/* style of item titles by Announcements and events */
.ItemTitle{}