<%@page buffer="none" session="false" import="java.util.*, org.opencms.frontend.templateone.*" %><%

// initialize action element to access the API
CmsTemplateStyleSheet cms = new CmsTemplateStyleSheet(pageContext, request, response);

// get the template width
String tabWidth = cms.getTemplateWidth();

// main settings
String mainFontFamily = cms.getConfigValue("main.font.family", "Verdana, Arial, Helvetica, sans-serif;");
String mainSidesBg = cms.getConfigValue("main.sides.bg", "#FFFFFF");

String mainBorder = cms.getConfigValue("main.border", "#000000");
boolean showMainBorder = true;
if (mainSidesBg.equals(mainBorder)) {
	showMainBorder = false;
}

String navFontFamily = cms.getConfigValue("nav.font.family", "Tahoma, Arial, Helvetica, sans-serif");

// head image settings
String headImgBg = cms.getConfigValue("head.img.bg", "#DDDDDD");

// head links
String headLinksBorder = cms.getConfigValue("head.links.border", "#000000");
String headLinksBg = cms.getConfigValue("head.links.bg", "#EEEEEE");

// head navigation
String headNavBg = cms.getConfigValue("head.nav.bg", "#660033");
String headNavFont = cms.getConfigValue("head.nav.font", "#FFFFFF");
String headNavBgHover = cms.getConfigValue("head.nav.bg.hover", "#000000");
String headNavFontHover = cms.getConfigValue("head.nav.font.hover", headNavFont);
String headNavBorder = cms.getConfigValue("head.nav.border", headNavBgHover);

// left navigation
String navLeftBg = cms.getConfigValue("navleft.bg", "#CCCCCC");
String navLeftFont = cms.getConfigValue("navleft.font", "#000000");
String navLeftFontSize = cms.getOptionalConfigValue("navleft.font.size", "12");
String navLeftActiveColor = cms.getOptionalConfigValue("navleft.font.color", navLeftFont);
String navLeftActiveWeight = cms.getFontWeight("navleft.font.bold", "true");

String navLeftImgBgUri = cms.getConfigValue("navleft.img.bg.uri", "");

if (!"".equals(navLeftImgBgUri)) {
	navLeftImgBgUri = cms.link(navLeftImgBgUri );
}

// content area
String contentBg = cms.getConfigValue("content.bg", "#FFFFFF");
String contentBorder = cms.getConfigValue("content.border", "#CCCCCC");
String contentFont = cms.getConfigValue("content.font", "#000000");
String contentLink = cms.getConfigValue("content.link", "#cc0033");
String contentLinkHover = cms.getConfigValue("content.link.hover", "#cc0033");
String contentLinkActive = cms.getConfigValue("content.link.active", contentLink);
String contentLinkVisited = cms.getConfigValue("content.link.visited", contentLink);

// side infoarea
String sideBg = cms.getConfigValue("side.bg", contentBg);

// page foot
String footLinksBorder = cms.getConfigValue("foot.links.border", "#000000");
String footLinksBg = cms.getConfigValue("foot.links.bg", "#EEEEEE");
String footLinksFont = cms.getConfigValue("foot.links.font", "#000000");
String footLinksFontHover = cms.getConfigValue("foot.links.font.hover", "#cc0033");
String footLinksFontActive = cms.getConfigValue("foot.links.font.active", "#000000");
String footLinksFontVisited = cms.getConfigValue("foot.links.font.visited", "#000000");

// form buttons
String formButtonBorder = cms.getConfigValue("form.button.border", headLinksBorder);
String formButtonBg = cms.getConfigValue("form.button.bg", headLinksBg);
String formButtonFont = cms.getConfigValue("form.button.font", footLinksFont);

// optional infobox configuration
String infoBoxWidth = cms.getOptionalConfigValue("infobox.width", "145");
String infoBoxModulesHeadline = cms.getOptionalConfigValue("infobox.modules.headline.size", "10");
String infoBoxModulesFont = cms.getOptionalConfigValue("infobox.modules.font.size", "8");

// optional additional CSS files
String cssUri = cms.getConfigValue("css.optional.uri", null);
String layoutPageCss = "/system/modules/org.opencms.frontend.layoutpage/resources/style.css";

%>/* old styles */
.headerwhite { font-size: 8pt; color: #ffffff; }
.headerinfo  { font-size: 8pt; text-indent: 7px; text-align: left; }	
.text8justify	{ font-size: 8pt; text-align: justify; }
.text9justify	{ font-size: 9pt; text-align: justify; }
.text10justify	{ font-size: 10pt; text-align: justify; }
.text11justify	{ font-size: 11pt; text-align: justify; }
.text12justify	{ font-size: 12pt; text-align: justify; }
.text8left	{ font-size: 8pt; text-align: left; }
.text9left	{ font-size: 9pt; text-align: left; }
.text10left	{ font-size: 10pt; text-align: left; }
.text11left	{ font-size: 11pt; text-align: left; }
.text12left	{ font-size: 12pt; text-align: left; }

/* global body settings */
body.main { text-align: center; }
body { background-color: <%= mainSidesBg %>; margin: 10px; }
body,ul,ol,li,td,p,div,span,input,textarea,select {	font-family: <%= mainFontFamily %>; font-size: 10pt; color: <%= contentFont %>; }

/* headlines */
h1 { font-size: <%= cms.getHeadlineSize(1) %>pt; color: <%= cms.getOptionalConfigValue("h1.color", contentFont) %>; <%= cms.getFontWeight("h1.bold", "true") %> }
h2 { font-size: <%= cms.getHeadlineSize(2) %>pt; color: <%= cms.getOptionalConfigValue("h2.color", contentFont) %>; <%= cms.getFontWeight("h2.bold", "true") %> }
h3 { font-size: <%= cms.getHeadlineSize(3) %>pt; color: <%= cms.getOptionalConfigValue("h3.color", contentFont) %>; <%= cms.getFontWeight("h3.bold", "true") %> }
h4 { font-size: <%= cms.getHeadlineSize(4) %>pt; color: <%= cms.getOptionalConfigValue("h4.color", contentFont) %>; <%= cms.getFontWeight("h4.bold", "true") %> }
h5 { font-size: <%= cms.getHeadlineSize(5) %>pt; color: <%= cms.getOptionalConfigValue("h5.color", contentFont) %>; <%= cms.getFontWeight("h5.bold", "true") %> }
h6 { font-size: <%= cms.getHeadlineSize(6) %>pt; color: <%= cms.getOptionalConfigValue("h6.color", contentFont) %>; <%= cms.getFontWeight("h6.bold", "true") %> }

/* common links */
a,a:link	{	color: <%= contentLink %>; <%= cms.getFontWeight("content.link.bold", "false") %> <%= cms.getFontUnderline("content.link.underline", "false") %> }
a:visited	{	color: <%= contentLinkVisited %>; <%= cms.getFontUnderline("content.link.underline", "false") %> }
a:hover		{	color: <%= contentLinkHover %>; <%= cms.getFontUnderline("content.link.underline", "false") %>; }
a:active	{	color: <%= contentLinkActive %>; <%= cms.getFontUnderline("content.link.underline", "false") %> }

/* Head navigation */
a.navtop,a.navtop:visited,a.navtop:hover { color: <%= headNavFont %>; font-family: <%= navFontFamily %>; font-size: 10px; line-height: 17px; vertical-align: middle; white-space: nowrap; padding: 2px; font-weight: normal; text-decoration: none; }
.navspacer { color: <%= headNavFont %>; font-size: 8pt; vertical-align: middle; }

/* Head navigation submenu */
div.menu, div.menu a.mI, div.menu a.mI span.mIText, div.menu a.mI span.mIArrow {
  font-family: <%= navFontFamily %>;
  font-size: 10px;
  font-style: normal;
  font-weight: normal;
}

div.menu {
  font-family: <%= navFontFamily %>;
  font-size: 10px;
  background-color: <%= headNavBg %>;
  border: 1px solid <%= headNavBorder %>;
  text-align: left;
  left: 0px;
  position: absolute;
  top: 0px;
  visibility: hidden;
  z-index: 101;
}

div.menu a.mI, div.menu a.mICurrent {
  color: <%= headNavFont %>;
  background-color: <%= headNavBg %>;
  cursor: pointer;
  display: block;
  padding: 3px 1em;
  text-decoration: none;
  white-space: nowrap;
}

div.menu a.mI:hover, div.menu a.mIHighlight, div.menu a.mICurrent, div.menu a.mI:hover span.mIText, div.menu a.mI:hover span.mIArrow {
  font-family: <%= navFontFamily %>;
  font-size: 10px;
  color: <%= headNavFontHover %>;
  background-color: <%= headNavBgHover %>;
}

div.menu a.mI span.mIText, div.menu a.mI span.mIArrow {
  font-family: <%= navFontFamily %>;
  font-size: 10px;
  color: <%= headNavFont %>;
}

div.menu a.mI span.mIArrow {
  margin-right: -.75em;
}

/* foot row links */
a.linksheadfoot,a.linksheadfoot:link { font-family: <%= navFontFamily %>; font-size: 8pt; color: <%= footLinksFont %>; font-weight: normal; text-decoration: none; }
a.linksheadfoot:visited	{ color: <%= footLinksFontVisited %>; text-decoration: none; }
a.linksheadfoot:hover	{ color: <%= footLinksFontHover %>; text-decoration: none; }
a.linksheadfoot:active	{ color: <%= footLinksFontActive %>; text-decoration: none; }

/* head row links */
a.linkshead,a.linkshead:link { font-family: <%= navFontFamily %>; font-size: 8pt; color: <%= footLinksFont %>; font-weight: normal; text-decoration: none; vertical-align: middle; }
a.linkshead:visited	{ color: <%= footLinksFontVisited %>; text-decoration: none; }
a.linkshead:hover	{ color: <%= footLinksFontHover %>; text-decoration: none; }
a.linkshead:active	{ color: <%= footLinksFontActive %>; text-decoration: none; }
.headnavspacer { 
	color: <%= footLinksFont %>; 
	font-size: 8pt;
	vertical-align: middle;
}

/* bread crumb navigation */
div.breadcrumb			{ margin: 4px 8px; }
span.breadcrumb			{ font-family: <%= navFontFamily %>; font-size: 8pt; color: <%= contentFont %>; text-decoration: none; white-space: nowrap; }
a.breadcrumb,a.breadcrumb:visited,a.breadcrumb:hover { font-family: <%= navFontFamily %>; font-size: 8pt; color: <%= contentFont %>; text-decoration: none; font-weight: normal; white-space: nowrap; }

/* head search input form */
.search { border: 1px solid <%= footLinksFont %>; color: <%= footLinksFont %>; font-family: <%= mainFontFamily %>; background-color: <%= headLinksBg %>; font-size: 8pt; }
.searchlinks { text-align: center; width: 100%; }
.searchresult { margin-bottom: 10px; }
.formbutton { font-family: <%= mainFontFamily %>; font-size: 8pt; height: 18px; background-color: <%= formButtonBg %>; color: <%= formButtonFont %>; border: 1px solid <%= formButtonBorder %>; }

/* main layout table */
table.main { padding: 0; margin: 0;	border-style: none; width: 100%; }

/* border of the head navigation row */
div.linkshead {
	width: <%= tabWidth %>px;
	border-left: 1px solid <%= headLinksBorder %>;
	border-top: 1px solid <%= headLinksBorder %>;
	border-right: 1px solid <%= headLinksBorder %>;
	background-color: <%= headLinksBg %>;
	vertical-align: middle;
	text-align: right;
	margin: 0 auto;
	padding-bottom: 1px;
	padding-top: 1px;
}

/* head image row & head editable area */
div.imagehead, div.edithead {
	width: <%= tabWidth %>px;
	background-color: <%= headImgBg %>;
	text-align: left;
	clear: both;
	margin: 0 auto;
	<% 
	if (showMainBorder) {
		out.print("border-top: 1px solid " + mainBorder + ";");
		out.print("border-left: 1px solid " + mainBorder + ";");
		out.print("border-right: 1px solid " + mainBorder + ";");
	} 	
	%>
}

/* image link block on top of background image */
span.imagelink {
	margin: 0; 
	padding: 0;
	display: block;
	width: 175px; 
	cursor: pointer;
}

/* top navigation row */
div.navtop {
	width: <%= tabWidth %>px;
	margin: 0 auto;
	background-color: <%= headNavBg %>;
	text-align: left;
	text-indent: 5px;
	<%
	if (showMainBorder) {
		out.print("border-top: 1px solid " + mainBorder + ";");
		out.print("border-left: 1px solid " + mainBorder + ";");
		out.print("border-right: 1px solid " + mainBorder + ";");
	}
	%>	
}

/* border of the foot navigation row */
div.linksfoot {
	width: <%= tabWidth %>px;
	border-left: 1px solid <%= footLinksBorder %>;
	border-bottom: 1px solid <%= footLinksBorder %>;
	border-right: 1px solid <%= footLinksBorder %>;
	background-color: <%= footLinksBg %>;
	margin: 0 auto;
	text-align: right;
}

/* block around main content row (left nav, content, infobox) */
div.main {
	width: <%= tabWidth %>px;
	margin: 0 auto;
	<% 
	
	if (showMainBorder) {
		out.print("border: 1px solid " + mainBorder + ";");
	} 
	
	%>
}

/* special width for print screen */
div.print {
	width: 100%;
}

/* content table cell */
td.content {	
	vertical-align: top;
	color: <%= contentFont %>;
	background-color: <%= contentBg %>;
}

/* content styles */

/* a single content element */
td.element {
	vertical-align: top;
	font-size: 10pt;
	text-align: justify;
	border: 1px solid <%= contentBorder %>;
}

/* a single old content element */
td.oldelement {
	font-size: 10pt;
	text-align: justify;
	vertical-align: top;
}

/* a single new content element */
div.element {
	margin: 8px;
	margin-top: 5px; 
	padding: 4px; 
	border: 1px solid <%= contentBorder %>; 
	text-align: justify; 
	clear: both;
}

div.element2 {
	margin: 5px; 
	padding: 4px; 
	border: 1px solid <%= contentBorder %>; 
	text-align: left; 
	clear: both;
}

/* infobox column */
td.infobox {
	width: <%= infoBoxWidth %>px;
	vertical-align: top;
	background-color: <%= sideBg %>;
	border-left: 1px solid <%= mainBorder %>;
}

/* left navigation column */
td.navleft {
	width: 175px;
	vertical-align: top;
	background-color: <%= navLeftBg %>;
	background-image: url(<%= navLeftImgBgUri %>);
    background-repeat: repeat-y;
    border-right: 1px solid <%= mainBorder %>;
}

/* left navigation image row */
span.navleftimage {
	display: block;
	width: 175px;
	cursor: pointer;
}

/* left navigation list */
ul.navleft { 
	margin: 0 0 0 20px;
	padding: 2px;
} 

/* left navigation list item */
li.navleftactive { 
    list-style-image: url(<%= cms.getResourcePath() %>nav_a.gif); 
} 
 
li.navleft { 
    list-style-image: url(<%= cms.getResourcePath() %>nav_i.gif);
}

a.navleft,a.navleft:link,a.navleft:visited,a.navleft:active { font-family: <%= navFontFamily %>; font-size: <%= navLeftFontSize %>px; color: <%= navLeftFont %>; text-decoration:none; font-weight: normal; }
a.navleft:hover { color: <%= navLeftFont %>; text-decoration: underline; }

a.navleftactive,a.navleftactive:link,a.navleftactive:visited,a.navleftactive:active { font-family: <%= navFontFamily %>; font-size: <%= navLeftFontSize %>px; color: <%= navLeftActiveColor %>; <%= navLeftActiveWeight %> text-decoration:none; }
a.navleftactive:hover { color: <%= navLeftActiveColor %>; text-decoration: underline; }

/* Side element styles */
div.sidelist {
	margin: 5px; 
	border: 1px solid <%= contentBorder %>; 
	text-align: left; 
	clear: both;
}

p.sidelisthead {
	font-size: <%= infoBoxModulesHeadline %>pt;
	font-weight: bold;
	margin: 0px;
	padding-left: 3px;
	padding-right: 3px;
	background-color: <%= contentBorder %>;
}

p.sidelistitem {
	font-size: <%= infoBoxModulesFont %>pt;
	margin: 5px 3px 0px;
}

a.sidelistitemhead {
	font-size: <%= infoBoxModulesFont %>pt;
	font-weight: bold;
	margin-bottom: 3px;
}

/* popup window border */
div.popup { <% 
	
	if (showMainBorder) {
		out.print("border: 1px solid " + mainBorder + ";");
	} 
	
	%>
	-moz-box-sizing: border-box;
	margin-top: 10px;
	width: 100%;  
}

h1.popup { font-size: 10pt; padding: 2px; width: 100%; background-color: <%= headNavBg %>; color: <%= headNavFont %>; }
.popupform { border: 1px solid <%= contentFont %>; width: 450px; }
span.formerror { color: <%= headNavBg %>; font-weight: bold;}

/* imprint */
table.imprint {	width: 100%; }
td.imprint { vertical-align: top; font-size: 9pt; }

/* default styles for the online forms */
input.onlineform, select.onlineform, textarea.onlineform { width: 300px; border: 1px solid <%= contentFont %>;  }
textarea.onlineform { height: 80px; }

/* default styles */
.nowrap { white-space: nowrap; }
.bold { font-weight: bold; }
<%

if (cms.getCmsObject().existsResource(layoutPageCss)) {
	String layoutStyles = cms.getContent(layoutPageCss);
	out.print(layoutStyles);
}

if (cssUri != null && cms.getCmsObject().existsResource(cssUri)) { %>
/* optional additional styles */
<%
	String additionalStyles = null;
	try {
		additionalStyles = cms.getContent(cssUri);
	} catch (Exception e) {}
	if (additionalStyles != null) {
		out.print(additionalStyles);
	}
} %>