/* 
Title: TetraPak.com
Author: First Flight Communication, Sweden
Updated: 2008-02-10
*/

 
/* DEFAULT 
--------------------------------------------------- */

html { 
	margin: 0; padding: 0;
	height: 100%;
}

body { 
	margin: 0; padding: 0;
	height: 100%;
}

body { /* BACKGROUND */
	background-color: #fff;
}

body { /* TEXT */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color: #000;
}

body a {
	color: #000;
	text-decoration: none;
}

body a:hover {
	color: #444;
	text-decoration: underline;
}

div, span, form, tabel,
a, p, em, h1, h2, h3, h4,
ul, li, ol {
	margin: 0; padding: 0;
}

img {
	border: 0;
}


/* BACKGROUND 
--------------------------------------------------- */

body {
	background-color: #dcdfe4/*#E1E2E6 #dcdfe3*/;
}


/* LAYOUT
--------------------------------------------------- */

/* DEBUG border: 1px dashed #000; */
	
#Layout {
	margin-left: -480px;
	width: 960px; height: 590px;
	left: 50%; top: 0;
	position: absolute;
	z-index: 1;
}

#TopNav {
	width: 100%;
	height: /*80px*/80px;
	position: absolute;
	left: 0px; top: 0px;
	overflow: visible;
	z-index: 40;
}

#Content {
	width: 930px; 
	height: 395px;
	position: absolute;
	top: 80px; left: 15px;
	overflow: hidden;
	z-index: 50;
}

#VisualNav {
	width: 960px; height: 485px;
	position: absolute;
	left: 0px; top: 80px;
	z-index: 40;
	overflow: hidden;
}

#Footer {
	width: 930px; height: 11px;
	position: absolute;
	top: 565px; 
	left: 15px;
	overflow: visible;
	z-index: 40;
}

#Search {
	position: absolute;
	top: 10px; right: 15px;
	z-index: 99;
}


/* TOPNAV
--------------------------------------------------- */

#LogoLink {
	width: 60px; height: 60px;
	position: absolute;
	left: 8px; top: 10px;
}

#LogoLink img {
	width: 60px; height: 60px;
}

#LogoLink a {
	border-bottom: 0;
}

#LogoLink:hover {
	cursor: pointer;
}

/* MENUITEMS --------------- */

#MenuItems { /* TopLevel DIV */
	position: absolute;
	top: 20px; 
	left: 150px;
	z-index: 65;
	width: 100%;
}

#MenuItems ul { /* TopLevel UL */
	list-style-type: none;
}

#MenuItems ul li { /* TopLevel LI */
	position: relative;
	float: left; /* alt: display: inline; */ 
	/* STYLE */
	font-size: 14px;
	line-height: 12px;
	padding: 10px 5px;
	height: 6px; /* 38px */
}

#MenuItems ul li:hover { /* TopLevel LI:HOVER */
	/* STYLE */
}

#MenuItems ul li:hover a { /* TopLevel LI:HOVER A */
	/* STYLE */
	color: #fff;
}

#MenuItems ul li a { /* TopLevel A */
	/* STYLE */
	font-size: 12px;
	font-variant: small-caps;
	line-height: 12px;
	color: #999;
	text-decoration: none;
	border-bottom: 0;
}

#MenuItems ul li a:hover { /* TopLevel A:HOVER */
	/* STYLE */
	color: #fff;
	text-decoration: underline;
	border-bottom: 0;
}

/* MENUITEMS - SUBMENU --------------- */

#MenuItems ul li table { /* for IE */
	border-collapse: collapse; 
}

#MenuItems ul li ul { /* SubMenu HIDDEN */
	font-variant: normal;
	visibility: hidden; 
	position: absolute; 
	height: 0; 
	overflow: hidden;
}

#MenuItems ul li:hover ul { /* SubMenu VISIBLE */
	visibility: visible;
	height: auto;
	overflow: visible;
	z-index: 66;
	/* STYLE */
	left: 0px; top: 26px;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 5px;
}

#MenuItems ul li ul li { /* SubMenu LI */
	float: left;
	/* STYLE */
	width: 175px;
}

#MenuItems ul li ul li a { /* SubMenu A */
	/* STYLE */
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
	margin-bottom: 4px;
	color: #fff;
}

/* MENUITEMS - COLORS & ACTIVE --------------- */

#MenuItems li:hover,
#MenuItems li:hover ul li:hover,
#MenuItems li ul,
#MenuItems li ul li,
#MenuItems li.Active:hover,
#MenuItems li.Active:hover ul li:hover,
#MenuItems li.Active ul,
#MenuItems li.Active ul li {
	background-color: #aaa;
}

#MenuItems li.Blue:hover,
#MenuItems li.Blue:hover ul li:hover,
#MenuItems li.Blue ul,
#MenuItems li.Blue ul li,
#MenuItems li.ActiveBlue:hover,
#MenuItems li.ActiveBlue:hover ul li:hover,
#MenuItems li.ActiveBlue ul,
#MenuItems li.ActiveBlue ul li {
	background-color: #5891d4;
}

#MenuItems li.Red:hover,
#MenuItems li.Red:hover ul li:hover,
#MenuItems li.Red ul,
#MenuItems li.Red ul li,
#MenuItems li.ActiveRed:hover,
#MenuItems li.ActiveRed:hover ul li:hover,
#MenuItems li.ActiveRed ul,
#MenuItems li.ActiveRed ul li {
	background-color: #b91f17;
}

#MenuItems li.Orange:hover,
#MenuItems li.Orange:hover ul li:hover,
#MenuItems li.Orange ul,
#MenuItems li.Orange ul li,
#MenuItems li.ActiveOrange:hover,
#MenuItems li.ActiveOrange:hover ul li:hover,
#MenuItems li.ActiveOrange ul,
#MenuItems li.ActiveOrange ul li {
	background-color: #f34d14;
}

#MenuItems li.Green:hover,
#MenuItems li.Green:hover ul li:hover,
#MenuItems li.Green ul,
#MenuItems li.Green ul li,
#MenuItems li.ActiveGreen:hover,
#MenuItems li.ActiveGreen:hover ul li:hover,
#MenuItems li.ActiveGreen ul,
#MenuItems li.ActiveGreen ul li {
	background-color: #19972c;
}

#MenuItems li.Active {
	background-color: #aaa;
}

#MenuItems li.ActiveBlue {
	background-color: #5891d4;
}

#MenuItems li.ActiveRed {
	background-color: #b91f17;
}

#MenuItems li.ActiveOrange {
	background-color: #f34d14;
}

#MenuItems li.ActiveGreen {
	background-color: #19972c;
}

#MenuItems li.Active a,
#MenuItems li.ActiveBlue a,
#MenuItems li.ActiveRed a,
#MenuItems li.ActiveOrange a,
#MenuItems li.ActiveGreen a {
	color: #fff;
}

/* MENUITEMS - LAYOUTS --------------- */

#Layout.FirstPage #MenuItems li.Blue,
#Layout.FirstPage #MenuItems li.ActiveBlue,
#Layout.FirstPage #MenuItems li.Red,
#Layout.FirstPage #MenuItems li.ActiveRed,
#Layout.FirstPage #MenuItems li.Orange,
#Layout.FirstPage #MenuItems li.ActiveOrange,
#Layout.FirstPage #MenuItems li.Green,
#Layout.FirstPage #MenuItems li.ActiveGreen {
	height: 39px;
}

/* BREADITEMS --------------- */

#BreadItems { /* TopLevel DIV */
	position: absolute;
	width: 790px; height: 25px;
	top: 54px; left: 90px;
	z-index: 61;
}

#BreadColor {
	width: 790px; height: 25px;
}

#BreadItems ul { /* TopLevel UL */
	list-style-type: none;
	padding-left: 4px;
}

#BreadItems ul li { /* TopLevel LI */
	position: relative;
	float: left; /* alt: display: inline; */ 
	/* STYLE */
	font-size: 10px;
	line-height: 12px;
	color: #fff;
	height: 13px; /* 38px */
	padding: 5px;
}

#BreadItems ul li:hover { /* TopLevel LI:HOVER */
	/* STYLE */
}

#BreadItems ul li:hover a { /* TopLevel LI:HOVER A */
	/* STYLE */
	color: #fff;
}

#BreadItems ul li a { /* TopLevel A */
	/* STYLE */
	font-size: 10px;
	line-height: 12px;
	color: #fff;
	text-decoration: none;
	border-bottom: 0;
}

#BreadItems ul li a:hover { /* TopLevel A:HOVER */
	/* STYLE */
	color: #fff;
	text-decoration: underline;
	border-bottom: 0;
}

/* BREADITEMS - SUBMENU --------------- */

#BreadItems ul li table { /* for IE */
	border-collapse: collapse; 
}

#BreadItems ul li ul { /* SubBread HIDDEN */
	visibility: hidden; 
	position: absolute; 
	height: 0; 
	overflow: hidden;
}

#BreadItems ul li:hover ul { /* SubBread VISIBLE */
	visibility: visible;
	height: auto;
	overflow: visible;
	z-index: 62;
	/* STYLE */
	left: -4px; top: 25px;
	padding-top: 0px;
	padding-left: 4px;
	padding-bottom: 5px;
}

#BreadItems ul li ul li { /* SubBread LI */
	float: left;
	/* STYLE */
	width: 150px;
	height: auto;
}

#BreadItems ul li ul li a { /* SubBread A */
	/* STYLE */
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
	margin-bottom: 4px;
	color: #fff;
}

/* BREADITEMS - COLORS & ACTIVE --------------- */

#BreadItems .Blue,
#BreadItems .Blue ul,
#BreadItems .Blue ul li,
#BreadItems .Blue ul li:hover,
#BreadItems .Blue ul li:hover ul {
	background-color: #5891d4;
}

#BreadItems .Red,
#BreadItems .Red ul,
#BreadItems .Red ul li,
#BreadItems .Red ul li:hover,
#BreadItems .Red ul li:hover ul {
	background-color: #b91f17;
}

#BreadItems .Orange,
#BreadItems .Orange ul,
#BreadItems .Orange ul li,
#BreadItems .Orange ul li:hover,
#BreadItems .Orange ul li:hover ul {
	background-color: #f34d14;
}

#BreadItems .Green,
#BreadItems .Green ul,
#BreadItems .Green ul li,
#BreadItems .Green ul li:hover,
#BreadItems .Green ul li:hover ul {
	background-color: #19972c;
}

/* BREADITEMS - LAYOUTS --- */

#Layout.FirstPage #BreadItems {
	position: absolute;
	visibility: hidden;
}


/* SEARCH
--------------------------------------------------- */

#SearchInputText {
	margin: 0; padding: 0;
	padding-left: 4px;
	padding-top: 4px;
	width: 50px; height: 12px;
	font-size: 10px;
	line-height: 10px;
	color: #999;
	border: 1px solid #ccc;
	border-left-color: #333;
	border-top-color: #333;
}

#SearchInputSubmit {
	margin: 0; padding: 0;
	width: 25px; height: 18px;
	font-size: 10px;
	line-height: 10px;
	color: #777;
	background: #fff;
	border: 1px solid #333;
	border-left-color: #ccc;
	border-top-color: #ccc;
}


/* FOOTER
--------------------------------------------------- */

#Footer { /* TYPE */
	font-size: 9px;
	line-height: 9px;
	font-weight: normal;
	color: #999;
	text-transform: uppercase;
	letter-spacing: -0px;
}

#FooterCenter {
	text-align: center;
}

#FooterLeft {
	float: left;
	padding-top: 2px;
}

#FooterRight {
	float: right;
	padding-top: 2px;
}

#Footer a {
	color: #999;
}

#Footer a:hover {
	color: #059;
}

#Footer .Active {
	color: #059;
}


/* VISUALNAV
--------------------------------------------------- */

#VisualNavBack {
	width: 940px; height: 90px;
	position: absolute;
	left: 10px; top: 474px;
	background-image: url(../images/panelback.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	border:1px;
}

#PanelBack {
	width: 940px; height: 90px;
	position: absolute;
	left: 10px; top: 394px;
	background-image: url(../images/panelback.jpg);
	background-repeat: no-repeat;
	z-index: 1;
}

#PanelItems {
	width: 930px; height: 76px;
	position: absolute;
	left: 15px; top: 402px;
	overflow: hidden;
	z-index: 2;
}

#PanelBackTo {
	width: 135px; height: 76px;
	float: left;
	margin-right: 5px;
}

#PanelScroll {
	width: 790px; height: 78px;
	overflow: auto;
	overflow-y: hidden;	float: left;
}

#PanelLinks {
	width: 130px; height: 76px;
	float: right;
}

#PanelItems .Item {
	width: 130px; height: 76px;
	background-repeat: no-repeat;
	background-position: center -6px;
	display: block;
	margin-right: 1px;
}

#PanelItems .Label {
	display: block;
	padding: 2px;
	text-align: center;
}

#PanelItems a {
	width: 100px; height: 15px;
	font-size: 9px;
	line-height: 10px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	border: 0;
}

#PanelItems a:hover {
	color: #ccc;
	text-decoration: underline;
	cursor: pointer;
}

#PanelItems .Links {
	width: 120px; height: 76px;
	display: block;
	text-align: center;
	padding: 5px;
}

#PanelItems .Links a {
	font-size: 12px;
	line-height: 14px;
}

#PanelItems .Links p {
	margin-top: 2px;
	margin-bottom: 5px;
}

#PanelItems .Active {
	color: #ccc;
	text-decoration: underline;
}

#PanelItems .Active {
	padding-top: 6px;
	padding-bottom: 8px;
}

/* VISUALNAV - COLORS --- */

#PanelItems .Black {
	background-color: #000;
}

#PanelItems .Blue {
	background-color: #5891d4;
}

#PanelItems .Red {
	background-color: #b91f17;
}

#PanelItems .Orange {
	background-color: #f34d14;
}

#PanelItems .Green {
	background-color: #19972c;
}

/* VISUALNAV - LAYOUTS --- */

#Layout.FirstPage #PanelBackTo,
#Layout.FirstPage #PanelLinks {
	position: absolute;
	visibility: hidden;
}

#Layout.FirstPage #PanelScroll {
	width: 930px;
}

#Layout.FirstPage #PanelScroll .Item {
	width: 131px;
}

#Layout.FirstPage #VisualNavBack {
	visibility: hidden;
}

#Layout.VisualLinks #PanelScroll {
	width: 650px;
}

#Layout.VisualLinks #PanelScroll .Item {
	width: 129px;
}

#Layout.VisualOff #VisualNav,
#Layout.VisualOff #VisualNavBack {
	height: 0;
	position: absolute;
	overflow: hidden;
	visibility: hidden;
}

#Layout.VisualOff #Footer {
	top: 482px;
}


/* IMAGE PREVIEW
--------------------------------------------------- */

#ImagePreview {
	position: absolute;
	width: 960px; height: 576px;
	left: 0; top: 0;
	z-index: 1;
    margin: 0 auto;
    visibility: hidden;
}

#LightBox {
	margin: 0 auto;
	text-align: center;
	margin-top: 100px;
}

#LightBox table {
	margin: 20px auto;
	border-collapse: collapse;
	border: 8px solid #000;
	border-bottom: 4px solid #000;
	background: #000;
	text-align: center;
}

#LightImage {
	margin-bottom: 2px;
}

#LightClose {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dotted #fff;
}

#LightClose:hover {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #fff;
}