@import url('forms.css');

/* Body
----------------------------------------------------------------------------------------------------*/
body {
    background-color: #a1a0a1;
	text-align: center;
	margin: 0;
}

body, h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
}

/* Container
----------------------------------------------------------------------------------------------------*/
.container {
    background-color: #fff;
	width: 816px;
	height: 489px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -244px;
	margin-left: -408px;
	text-align: left;
}

/* Content
----------------------------------------------------------------------------------------------------*/
.content-container {
	width: 766px;
	height: 396px;
	margin: 24px auto 0 auto;
	position: relative;
	background-color: #aaa;
	background-position: top left;
}

    .content-container h1 a {
    	position: absolute;
    	left: 340px;
    	top: 80px;
    	display: block;
    	text-decoration: none;
    	width: 408px;
    	height: 38px;
    }

        .content-container h1 a span {
        	visibility: hidden;
        }

    .content {
    	position: absolute;
    	top: 215px;
    	left: 30px;
    	width: 718px;
    	height: 170px;
    	display: block;
        font-size: 14px;
        line-height: 17px;
        color: #fff;
    }

        .content .left {
        	width: 342px;
        	float: left;
        	display: inline;
        }

        .content .right {
        	width: 342px;
        	float: right;
        	display: inline;
        	margin-left: 34px;
        }

        .content h2 {
        	margin: 40px 0 6px 0;
        	font-size: 24px;
        	line-height: 28px;
        }

        .content a, .content a:hover {
        	color: #fb9604;
        	text-decoration: none;
        }

        .content p {
        	margin: 0 0 1em 0;
        }

        .content p + ul {
            margin-top: -0.5em;
        }

        .content table p {
            margin: 0;
        }

        .content p.error {
        	position: absolute;
        	top: -25px;
        }

        .content span.text-small {
            font-size: 12px;
            line-height: 16.5px;
        }

        .content span.text-big {
            font-size: 16px;
            line-height: 28px;
        }

        .content .visuals {
        	position: absolute;
        	top: -40px;
        	left: 360px;
        	width: 360px;
        	height: 210px;
        }

            .visual {
            	width: 175px;
            	height: 98px;
            	float: left;
            	margin-left: 5px;
            	display: inline;
            	margin-bottom: 5px;
            }

                .visual img {
                	margin: 0;
                	padding: 0;
                	border: 0;
                }

/* Navigation
----------------------------------------------------------------------------------------------------*/
.nav {
	width: 766px;
	height: 33px;
	margin: 27px auto 0 auto;
}

    .nav h2 {
        display: inline-block;
    }

        .nav h2 a {
        	float: left;
        	width: 284px;
        	height: 33px;
        	background: url(../img/general/logo-roeland.gif) no-repeat;
        	margin-left: 27px;
        	display: inline;
        	text-decoration: none;
        }

            .nav h2 a:hover, .nav h2 a.active {
            	background: url(../img/general/logo-roeland-hover.gif) no-repeat;
            }

            .nav h2 a span {
            	visibility: hidden;
            }

    .nav ul {
    	float: right;
    	display: inline;
    	margin-top: 14px;
    }

        .nav ul li {
        	float: left;
        	height: 12px;
        	margin-right: 13px;
        	display: block;
        	text-transform: lowercase;
            font: bold 14px/18px 'Myriad pro', Verdana, Geneva, sans-serif;
        }

            .nav ul li.last {
                margin-right: 0;
            }

            .nav ul li a {
            	height: 13px;
            	display: block;
            	color: #FB9604;
            	text-decoration: none;
            }

                .nav ul li a:hover, .nav ul li a.active {
                    color: #C57706;
                }

.submenu ul {
	position: absolute;
	top: -5px;
	left: 376px;
	margin: 0;
	list-style: none;
	text-transform: lowercase;
}

    .submenu ul li {
    	height: 38px;
    	display: block;
        font: bold 32px/36px 'Myriad pro', Verdana, Geneva, sans-serif;
    }

        .submenu ul li a {
        	display: block;
        	text-decoration: none;
            color: #FB9604;
        }

            .submenu ul li a:hover, .submenu ul li a.active {
                color: #C57706;
            }

.submenu-home ul {
	position: absolute;
	top: -47px;
	left: 24px;
	margin: 0;
	list-style: none;
	text-transform: lowercase;
}

    .submenu-home ul li {
    	float: left;
    	height: 33px;
    	display: inline;
        font: 33px/36px 'Myriad pro', Verdana, Geneva, sans-serif;
        padding: 0 18px 0 25px;
    	background: url(../img/backgrounds/bg-home-submenu-li.gif) no-repeat left 22px;
    }

        .submenu-home ul li.first {
            padding-left: 0;
            background-image: none;
        }

        .submenu-home ul li a {
        	display: block;
        	text-decoration: none;
            color: #fff;
        }

            .submenu-home ul li a:hover, .submenu ul li a.active {
                color: #cdcbcb;
            }