/*STRUCTURE BUILDING*/

html, body {
	margin: 0;
	padding: 0;
}

img {border: none;}

/*Body-div*/
div#body {
	/*Full screen height*/
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
}

div#container {
	position: relative;
	margin: 0 auto;	 /*Centering the container*/
	
	padding: 30px;
	width: 100%;
	max-width: 1200px;
}

div#content {
	/*Centering the container*/
	position: relative;
	margin: 50px auto;

	width: 80%;
	max-width: 800px;
	min-width: 500px;
	
	line-height: 140%;
}

img#logo {
	margin-bottom: 30px;
	width: 150px;
}

/*THE DOT MENU*/

/*Main container for the dots*/
div#dots {
	position: relative;
	margin: 0 auto;
	
	width: 707px;
	height: 169px;
}

/*Boxes with menucontent*/
div#dots > div {	
	/*Structure*/
	position: relative;
	width: 151px;
	height: 169px;
	float: left;
}

/*Boxes with dots and headline. This extra <div> makes the opacity appear on only parent*/
div#dots > div > div {
	height: 104px;	/*height + padding-top = total height*/

	/*Centering text*/
	text-align: center;
	padding-top: 65px;

	/*Dot-background - position is adjusted later*/
	background-image: url(http://www.eosweb.dk/billeder/logoprikker.png);
	background-repeat: no-repeat;

	/*Formatting*/
	font-family: "Trebuchet MS";
	font-size: 13pt;
}

div#dot1, div#dot2 {
	margin-right: 127px;	/*Placed beside each other*/
}

/*Background-positioning*/
div#dot1 div {background-position: left;}
div#dot2 div {background-position: center;}
div#dot3 div {background-position: right;}

/*Submenu:*/

/*The menu item container*/
div#dots ul {
	/*Hiding for jQuery opacity-effect*/
	opacity: 0;
	filter: alpha(opacity=0); /*For IE8 and earlier*/
	
	/*Removing list structure*/
	list-style-type: none;
	padding: 0;
	margin: 0;

	/*Positioning in the top*/
	position: absolute;
	left: -40px;
	
	text-align: left;
	width: 350px;
	z-index: 0;		/*In front of dots*/
}

div#dot1 ul {top: 0;}
div#dot2 ul {top: 0;}
div#dot3 ul {top: 50px;}

div#dots li {margin-bottom: 10px;}


/*The menu links*/
div#dots a {
	/*Formatting*/
	font-family: "Trebuchet MS", sans-serif;
	font-size: 10pt;

	/*For left-border later*/
	display: block;
	padding-left: 5px;
	
	color: black;
	text-decoration: none;
}

/*Menu link coloring*/
div#dot1 a {border-left: solid 3px #50B9BB;}
div#dot2 a {border-left: solid 3px #75B62C;}
div#dot3 a {border-left: solid 3px #308535;}
div#dot1 a:hover b {color: #50B9BB;}
div#dot2 a:hover b {color: #75B62C;}
div#dot3 a:hover b {color: #308535;}


/*CONTENT FORMATTING*/

div#content, div#footer {
	font-family: Ubuntu, "Trebuchet MS", sans-serif;
	font-size: 11pt;	
}

fieldset {
	border: solid 1px #CCC;
	border-radius: 5px;
	-moz-border-radius: 5px;

	font-size: 13px;
	width: 100%;
	margin: 20px 0;
}

.package {position: relative;}

.package .left, .package .right {
	position: relative;
	width: 47%;
}

.package .left {float: left;}
.package .right {float: right;}

legend {font-weight: bold;}

ul {
	list-style: none;
	padding-left: 25px;
}

div#content ul li {
	text-indent: -1.6em;
	margin-bottom: 15px;
	
	font-family: verdana;
	font-size: 11px;
	color: #655d5d;
	line-height: 150%;
	padding-right: 30px;
}

h2 {color: #308535;}
h3 {color: #75B62C;}

h4 {
	font-family: Ubuntu, "Trebuchet MS", sans-serif;
	font-size: 11pt;
	color: black;
	display: inline;
	font-weight: normal;
}

h4:after {
	content: "\a";
    white-space: pre;
}

h4.ellign:after {
	content: " el. lign. \a";
	font-size: 9pt;
}


div#content ul li:before {	/*Bullet*/
	content: "•";
	color: #75B62C;
	padding-right: 5px;
	font-size: 12pt;
}

q {
	display: block;
	font-style: italic;
	padding: 0 60px;
	margin: 25px 0;
	text-indent: -1.7em;
}
 
q:before {	/*Open quote*/
	position: relative;
	top: 20px;
	content: '”';
	color: #50B9BB;
	font-style: normal;
	font-family: Georgia;
	font-size: 40pt;
}

q.referencepage:before {	/*Open quote*/
	position: relative;
	top: 20px;
	content: '”';
	color: #50B9BB;
	font-style: normal;
	font-family: Georgia;
	font-size: 20pt;
}

q:after {content: '';}	/*Removing close quote*/
 
cite {
	position: relative;
	font-size: 11px;
	top: 12px;
}

/* LINK FORMATTING */

a {
	border: none;
	color: #308535;
	text-decoration: none;
}

div#content a:hover {
	color: #50B9BB;
}

/* REFERENCE PAGE*/

img.referenceimage {
	width: 300px;
	float: left;
	margin-right: 30px;
	margin-bottom: 30px;
}

/* CLEAR */

.clear { clear: both; }

/* BLOG */

div#sidebar {
	position: fixed;
	right: 50px;
	top: 300px;
}


/* FOOTER */

div#footer {
	color: #CCC;
	text-align: center;
	padding-bottom: 50px;
}

/* SOCIAL MEDIA LINKS*/

a.social {
	margin-right: 10px;
}

a.social img {
	width: 32px;
	height: 32px;
}

/***BLOG*/

div.blog li {
	font-size: 10pt !important;
	margin-bottom: auto !important;
	color: #655d5d;
}

div.blog ul li {
	text-indent: 0 !important;
}

div.blog ol {
	counter-reset: item;
}

div.blog ol li {
	display: block;
	text-indent: -1em !important;
}

div.blog ol li:before {
	content: counter(item) ".  ";
	counter-increment: item;
	color: #75B62C;
}