<!doctype html>
<html>
<head>
	<title>Expertise</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="img/favicon.ico">
	<link type="text/css" rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" media="screen" href="css/bootstrap-slider.min.css" />
	<link type="text/css" rel="stylesheet" media="screen" href="css/accurator.css" />
</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarDivMenu">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
				 </button>
				 <a class="navbar-brand" href="intro.html">
				 	<img id="navbarImgLogo" src="img/accurator.png" alt="Accurator">
				 </a>
			</div>
			<div class="collapse navbar-collapse" id="navbarDivMenu">
				<ul class="nav navbar-nav navbar-right navbarLstFlag">
	          	</ul>
				<ul class="nav navbar-nav navbar-right navbarLstUser">
				</ul>
			</div>
		</div>
	</nav>

	<div class="container">
		<!-- Header -->
		<div class="row">
			<div class="col-md-11 col-md-offset-1">
				<h2 id="expertiseTxtHeader">
					<small id ="expertiseTxtSubHeader">
					</small>
				</h2>
			</div>
		</div>

		<!-- Expertise Form -->
		<div class="row" class="expertiseDiv">
			<div class="col-md-6 col-md-offset-3" id="expertiseDivExpertiseMaster">
			</div>
		</div>
		<div class="row" class="expertiseDiv">
			<div class="col-md-6" id="expertiseDivExpertiseLeft">
			</div>
			<div class="col-md-6" id="expertiseDivExpertiseRight">
			</div>
		</div>

		<!-- Buttons -->
		<div class="row bottomButtons" id="expertiseDivButtonsExpertise">
			<div class="col-md-4 col-md-offset-1">
				<button class="btn btn-primary" id="expertiseBtnSubmit">
				</button>
				<button class="btn btn-link" id="expertiseBtnSkip">
				</button>
			</div>
		</div>

		<!-- Logos -->
		<div class="footerDivRelative">
			<div class="logo col-md-2 col-xs-4">
				<a href="http://commit-nl.nl/">
					<img src="img/logos/commit.png" class="footerImgLogo" id="footerImgCommitLogo" alt="Logo of ">
					</img>
				</a>
			</div>
			<div class="logo col-md-2 col-xs-4">
				<a href="http://www.cwi.nl">
					<img src="img/logos/cwi.png" class="footerImgLogo" alt="Logo of CWI">
					</img>
				</a>
			</div>
			<div class="logo col-md-2 col-xs-4">
				<a href="http://www.tudelft.nl">
					<img src="img/logos/tud.png" class="footerImgLogo" alt="Logo of TU Delft">
					</img>
				</a>
			</div>
			<div class="logo col-md-2 col-xs-4">
				<a href="http://vu.nl/">
					<img src="img/logos/vu.png" class="footerImgLogo" alt="Logo of VU University Amsterdam">
					</img>
				</a>
			</div>
			<div class="logo col-md-2 col-xs-4">
				<a href="http://rijksmuseum.nl">
					<img src="img/logos/rma.png" class="footerImgLogo" id="footerImgRijksmuseumLogo" alt="Logo of Rijksmuseum">
					</img>
				</a>
			</div>
			<div class="logo col-md-2 col-xs-4">
				<a href="http://www.naturalis.nl/">
					<img src="img/logos/naturalis.png" class="footerImgLogo" alt="Logo of Naturalis">
					</img>
				</a>
			</div>
		</div>
	</div>

	<!-- Login modal -->
	<div class="modal fade" id="loginDivLogin">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" id="loginBtnClose">&times;</button>
					<h4 id="loginHdrTitle">
					</h4>
				</div>
				<div class="modal-body">
					<form role="form">
						<div class="form-group">
							<label id="loginLblUsername" for="loginInpUsername">
							</label>
							<input type="text" class="form-control" id="loginInpUsername">
								</div>
						<div class="form-group">
							<label id="loginLblPassword" for="password">
							</label>
							<input type="password" class="form-control" id="loginInpPassword">
								</div>
						<p class="text-warning" id="loginTxtWarning">
						</p>
					</form>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" id="loginBtnLogin">
					</button>
					<button class="btn btn-link" id="mdlBtnIntro">
					</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/lib/bootstrap-slider.min.js"></script>
	<script type="text/javascript" src="js/lib/laconic.js"></script>
	<script type="text/javascript" src="js/components/utilities.js"></script>
	<script type="text/javascript" src="js/expertise.js"></script>
	<script>expertiseInit();</script>
</body>
</html>