@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: local(Roboto Regular), local(Roboto-Regular),
         url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Italic-webfont.eot');
    src: local(Roboto Italic), local(Roboto-Italic),
         url('fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold-webfont.eot');
    src: local(Roboto Bold), local(Roboto-Bold),
         url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BoldItalic-webfont.eot');
    src: local(Roboto BoldItalic), local(Roboto-BoldItalic),
         url('fonts/Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-BoldItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

body {
	font-family: 'Roboto', Arial, sans-serif;
	/*font-family: Lucida Sans Unicode, Helvetica, Arial;*/
	font-size: 18px;
	color: #000000;
	background-color: #FFFFFF;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-width: 970px;
}

div#header-logo {
	position: relative;
	margin-top: 16px;
	margin-left: auto;
	margin-right: auto;
	width: 970px;
	height: 205px;
	background: url('../layout/menu-base_logo-final.jpg');
}

div#header-menu {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 970px;
	height: 70px;
	z-index: 97;
}

div#header-menu div.item {
	position: absolute;
	top: 0px;
	height: 60px;
	z-index: 98;
}

div#header-menu div.selected {
	position: absolute;
	top: -3px;
	height: 71px;
	z-index: 99;
}

div#header-menu:hover div.selected {
	/*visibility: hidden;
	* doesnt work nice
	*/
}

div#header-bottom {
	position: absolute;
	left: 0px;
	top: 60px;
	width: 100%;
	height: 10px;
	background: url('../layout/menu-base_bottom.png');
}

div#header-menu-left {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 41px;
	height: 60px;
	background: url('../layout/menu-base_left.jpg');
}

div#header-menu-right {
	position: absolute;
	left: 929px;
	top: 0px;
	width: 41px;
	height: 60px;
	background: url('../layout/menu-base_right.jpg');
}

div#header-menu-home, div#header-menu-home-selected {
	left: 41px;
	width: 110px;
	background: url('../layout/menu-base_home.jpg');
}

a:hover div#header-menu-home {
	background: url('../layout/menu-mouseover_home.jpg');
}

div#header-menu-home-selected {
	left: 35px;
	width: 122px;
	background: url('../layout/menu-selection_home.jpg');
}

div#header-menu-about,
div#header-menu-about-selected {
	left: 151px;
	width: 116px;
	background: url('../layout/menu-base_about.jpg');
}

a:hover div#header-menu-about {
	background: url('../layout/menu-mouseover_about.jpg');
}

div#header-menu-about-selected {
	left: 145px;
	width: 128px;
	background: url('../layout/menu-selection_about.jpg');
}

div#header-menu-download,
div#header-menu-download-selected {
	left: 267px;
	width: 172px;
	background: url('../layout/menu-base_download.jpg');
}

a:hover div#header-menu-download {
	background: url('../layout/menu-mouseover_download.jpg');
}

div#header-menu-download-selected {
	left: 261px;
	width: 184px;
	background: url('../layout/menu-selection_download.jpg');
}

div#header-menu-devices,
div#header-menu-devices-selected {
	left: 439px;
	width: 141px;
	background: url('../layout/menu-base_devices.jpg');
}

a:hover div#header-menu-devices {
	background: url('../layout/menu-mouseover_devices.jpg');
}

div#header-menu-devices-selected {
	left: 433px;
	width: 153px;
	background: url('../layout/menu-selection_devices.jpg');
}

div#header-menu-how-to,
div#header-menu-how-to-selected {
	left: 580px;
	width: 129px;
	background: url('../layout/menu-base_how-to.jpg');
}

a:hover div#header-menu-how-to {
	background: url('../layout/menu-mouseover_how-to.jpg');
}

div#header-menu-how-to-selected {
	left: 574px;
	width: 141px;
	background: url('../layout/menu-selection_how-to.jpg');
}

div#header-menu-faq,
div#header-menu-faq-selected {
	left: 709px;
	width: 77px;
	background: url('../layout/menu-base_faq.jpg');
}

a:hover div#header-menu-faq {
	background: url('../layout/menu-mouseover_faq.jpg');
}

div#header-menu-faq-selected {
	left: 703px;
	width: 89px;
	background: url('../layout/menu-selection_faq.jpg');
}

div#header-menu-contact,
div#header-menu-contact-selected {
	left: 786px;
	width: 143px;
	background: url('../layout/menu-base_contact.jpg');
}

a:hover div#header-menu-contact {
	background: url('../layout/menu-mouseover_contact.jpg');
}

div#header-menu-contact-selected {
	left: 780px;
	width: 155px;
	background: url('../layout/menu-selection_contact.jpg');
}

div#container {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-top: 25px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 30px;
	width: 890px;
	height: auto;

	background: url('../layout/page_background.png');
}

div#container-inner {
	position: relative;
	width: 100%;
	height: auto;
}

div#footer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 970px;
	height: auto;
	text-align: center;

	background: url('../layout/page_background.png');
}

div#footer span#note {
	font-size: 12px;
}

div#footer-bottom {
	position: relative;
	font-size: 1px;
	width: 970px;
	height: 16px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;

	background: url('../layout/page_bottom.png');
}

a,
a:link,
a:active,
a:visited,
a:hover {
	color: #425160;
	font-weight: bold;
	text-decoration: underline;
}

a:visited {
	color: #425160;
}

a:hover {
	color: #000000;
}

div.box-small {
	width: 310px;
	height: auto;
}

div.box-small-top {
	position: relative;
	width: 284px; /* + 13 + 13 = 310 */
	height: 33px; /* + 16 = 49 */
	padding-top: 16px;
	padding-left: 13px;
	padding-right: 13px;
	font-weight: bold;
	font-size: 22px;
	background: url('../layout/box-small_01.png');
}

div.box-small-middle {
	position: relative;
	width: 284px; /* + 13 + 13 = 310 */
	height: auto;
	padding-top: 4px;
	padding-left: 13px;
	padding-right: 13px;
	background: url('../layout/box-small_03.png');
}

div.box-small-bottom {
	position: relative;
	width: 310px;
	height: 10px;
	background: url('../layout/box-small_05.png');
}

.justify {
	text-align: justify;
}

.clear {
	clear: both;
}

.notice {
	color: #FF0000;
}

div.collapsable {
	margin-top: 18px;
}

div.collapsable div.title {
	font-weight: bold;
}

div.collapsable div.clickable {
	color: #425160;
	text-decoration: underline;
	cursor: pointer;
}