<!DOCTYPE html>
<!--[if IE 7 ]>   <html lang="en" class="ie7 lte8"> <![endif]--> 
<!--[if IE 8 ]>   <html lang="en" class="ie8 lte8"> <![endif]--> 
<!--[if IE 9 ]>   <html lang="en" class="ie9"> <![endif]--> 
<!--[if gt IE 9]> <html lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head><!--[if lte IE 9 ]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->

<!-- iPad Settings -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
<!-- iPad Settings End -->

<title>Emeras - Dorcas Ministry</title>

<link rel="shortcut icon" href="favicon.ico">

<!-- iOS ICONS -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="touch-startup-image.png">
<!-- iOS ICONS END -->

<!-- STYLESHEETS -->

<link rel="stylesheet" href="css/reset.css" media="screen" />
<link rel="stylesheet" href="css/grids.css" media="screen" />
<link rel="stylesheet" href="css/ui.css" media="screen" />
<link rel="stylesheet" href="css/forms.css" media="screen" />
<link rel="stylesheet" href="css/device/general.css" media="screen" />
<link rel="stylesheet" href="css/customStyles.css" media="screen" />
<!--[if !IE]><!-->
<link rel="stylesheet" href="css/device/tablet.css" media="only screen and (min-width: 768px) and (max-width: 991px)" />
<link rel="stylesheet" href="css/device/mobile.css" media="only screen and (max-width: 767px)" />
<link rel="stylesheet" href="css/device/wide-mobile.css" media="only screen and (min-width: 480px) and (max-width: 767px)" />
<!--<![endif]-->
<link rel="stylesheet" href="css/jquery.uniform.css" media="screen" />
<link rel="stylesheet" href="css/jquery.popover.css" media="screen">
<link rel="stylesheet" href="css/jquery.itextsuggest.css" media="screen">
<link rel="stylesheet" href="css/themes/lightblue/style.css" media="screen" />



<style type = "text/css">
    #loading-container {position: absolute; top:50%; left:50%;}
    #loading-content {width:800px; text-align:center; margin-left: -400px; height:50px; margin-top:-25px; line-height: 50px;}
    #loading-content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; }
    #loading-graphic {margin-right: 0.2em; margin-bottom:-2px;}
    #loading {background-color:#abc4ff; background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #abc4ff, #87a7ff 100%); background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #abc4ff, #87a7ff 100%); background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #abc4ff, #87a7ff 100%); background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #abc4ff, #87a7ff 100%); background-image: radial-gradient(50% 50%, ellipse closest-side, #abc4ff, #87a7ff 100%); height:100%; width:100%; overflow:hidden; position: absolute; left: 0; top: 0; z-index: 99999;}
</style>

<!-- STYLESHEETS END -->

<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script type="text/javascript" src="js/selectivizr.js"></script>
<![endif]-->

</head>
<body style="overflow: hidden;">
    <div id="loading"> 

        <script type = "text/javascript"> 
            document.write("<div id='loading-container'><p id='loading-content'>" +
                           "<img id='loading-graphic' width='16' height='16' src='images/ajax-loader-abc4ff.gif' /> " +
                           "Loading...</p></div>");
					
        </script> 

    </div> 

    <div id="wrapper">
        <header>
            <h1>Emeras</h1>
            <nav>
                <div class="container_12">
                    <div class="grid_12">
							<ul class="toolbar clearfix fl">
							
                        <?php 
							if($session->isAdmin())
							{
						?>
                            <li>
                                <a href="#" title="Activity" class="icon-only" id="activity-button">
                                    <img src="images/navicons-small/77.png" alt=""/>
                                    <span class="message-count">1</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Notifications" class="icon-only" id="notifications-button">
                                    <img src="images/navicons-small/08.png" alt=""/>
                                    <span class="message-count">3</span>
                                </a>
                            </li>
						<?php } ?>
                            <li>
                                <a href="#" title="Settings" class="icon-only" id="settings-button">
                                    <img src="images/navicons-small/19.png" alt=""/>
                                </a>
                            </li>
                        </ul>
                        <a href="process.php" title="Logout" class="button icon-with-text fr"><img src="images/navicons-small/129.png" alt=""/>Logout</a>
                        <div class="user-info fr">
                            Logged in as <a href="#"><?php echo $session->username; ?></a>
                        </div>
                    </div>
                </div>
            </nav>
        </header>