<!DOCTYPE html>
<html manifest="phi.appcache" lang="en">
<head>
<meta charset="utf-8" />
<title>Phi (FI) - The FlightGear User Interface</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Phi (FI)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="manifest" href="manifest.json">
<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="images/FI_logo-57.png" sizes="57x57">
<!-- non-retina iPad vor iOS 7 -->
<link rel="apple-touch-icon" href="images/FI_logo-72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="images/FI_logo-76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="images/FI_logo-114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="images/FI_logo-120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="images/FI_logo-144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="images/FI_logo-152.png" sizes="152x152">
<!--Android-->
<link rel="shortcut icon" href="images/FI_logo-196.png" sizes="196x196">

<link rel="stylesheet" type="text/css" href="/Fonts/LiberationFonts/LiberationFonts.css">
<link rel="stylesheet" href="3rdparty/leaflet-0.7.7/leaflet.css" />
<link rel="stylesheet" href="3rdparty/clockpicker/jquery-clockpicker.min.css" />
<link id="ui-theme" rel="stylesheet" href="3rdparty/jquery-ui-themes-1.11.2/themes/smoothness/jquery-ui.min.css" />

<style>
* {
	font-family: 'Liberation Sans';
}

html, body, #wrapper {
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
}

#toolbar {
	background: url('images/FI_logo.svg') no-repeat left #427ebf;
	height: 75px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	padding-left: 100px;
	color: white;
}

#content {
	position: absolute;
	top: 75px;
	bottom: 14pt;
	width: 100%;
}

#widgetarea {
    overflow-y: auto;
	position: fixed;
	top: 104px;
	right: 0;
	width: 220px;
	bottom: 14pt;
}

#statusbar {
	background-color: gray;
	position: fixed;
	width: 100%;
	height: 14pt;
	bottom: 0;
	text-align: center;
}

#statusbar a {
        color: black;
	font-weight: bold;
	text-decoration: none;
	padding: 1px;
}

#statusbar a:active {
	color: black;
}

#statusbar a:visited {
	color: black;
}

#statusbar a:hover {
        color: black;
	padding: 0;
        border: 1px dotted silver;
}

.htabs {
	position: absolute;
	width: 100%;
	top: 0px;
	height: 29px;
	background: #427ebf;
}

.htabs ul {
	list-style: none;
	text-align: left;
	margin: 0;
	padding: 0 0 0 100px;
}

.htabs ul li {
	background-color: #bbb;
	background-image: linear-gradient(180deg, #fff, #bbb);
	float: left;
	width: 6em;
	height: 25px;
	margin-left: 2px;
	margin-right: 2px;
	border-left: 2px solid #888;
	border-right: 2px solid #888;
	border-top: 2px solid #888;
	border-bottom: 2px solid #888;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: #888;
	padding: 5px;
	text-align: center;
}

.htabs ul li a, .htabs ul li a:visited {
	text-decoration: none;
	width: 100%;
	height: 100%;
	display: block;
	color: #888;
}

.htabs ul li:hover {
	color: #444;
	font-weight: bold;
	cursor: pointer;
}

.htabs ul li.selected {
	background-color: #eee;
	background-image: linear-gradient(180deg, #fff, #eee);
	border-bottom: 2px solid #eee;
	color: #444;
	font-weight: bold;
}

.htabs ul li a {
	position: relative;
	display: inline-block;
	width: 100%;
	font-size: 18px;
	padding-top: 1px;
	text-align: center;
}

#htabs-content {
	position: absolute;
	top: 29px;
	left: 0;
	right: 0;
	bottom: 0;
	background: #eee;
	padding: 10px 230px 10px 10px;
}

.vtabs {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 100px;
	background-color: #eee;
	height: 100%;
}

.vtabs ul {
	list-style: none;
	text-align: center;
	margin: 0px;
	padding: 0px;
}

.vtabs ul li {
	background: #427ebf;
	background-image: linear-gradient(to bottom, #d3d9e0, #427ebf);
	border-radius: 10px;
	box-shadow: 0px 7px 9px #666666;
	color: #eee;
	font-size: 18px;
	padding: 5px 7px 5px 7px;
	margin: 10px 0;
	text-decoration: none;
}

.vtabs ul li:hover {
	cursor: pointer;
	color: #000;
	background-image: linear-gradient(to bottom, #fcfcf4, #fbfc46);
}

.vtabs ul li.selected {
	background-image: linear-gradient(to bottom, #fcfcf4, #fbfc46);
	color: #000;
}

#vtabs-content {
	margin-left: 140px;
	padding: 5px;
	overflow: auto;
	height: 100%;
}

.right-floating {
	float: right;
}

.switcher_container {
	padding-right: 5px;
	float: right;
}

.switcher_list {
}

.switcher_label {
	display: none;
}
</style>

</head>

<body>
    <div id="wrapper">
        <div id="toolbar">
            <h1>Phi - The FlightGear User Interface</h1>
        </div>
        <div id="content">
            <div class="tabs htabs">
                <ul data-bind="foreach: topics">
                    <li
                        data-bind="text: $data,
                   css: { selected: $data == $root.selectedTopic() },
                   click: $root.selectTopic">
                    </li>
                </ul>
                <div class="right-floating" data-bind="buttonset: {}">
                    <button data-bind="button: { icons: { primary: 'ui-icon-refresh' }, text: false }, click: refresh" title="Refresh Page"></button>
                    <button data-bind="button: { icons: { primary: 'ui-icon-pause' }, text: false}, click: doPause" title="Pause"></button>
                    <button data-bind="button: { icons: { primary: 'ui-icon-play' }, text: false}, click: doUnpause" title="Play"></button>
                    <div id="ui-theme-switcher"></div>
                </div>
            </div>
            <div id="htabs-content" data-bind="component: { name: selectedTopic, params: { topic: selectedSubtopic } }"></div>
        </div>
        <div id="widgetarea" data-bind="foreach: widgets">
              <sidebarwidget params="widget: $data">
              </sidebarwidget>
        </div>
        <div id="statusbar">
            <span>FlightGear. Fly free, be happy. <a href="http://www.flightgear.org/">http://www.flightgear.org/</a></span>
        </div>
    </div>
</body>
<script type="text/javascript" async="async" data-main="./main" src="3rdparty/require/require.js"></script>

</html>