<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel='stylesheet' href='css/bootstrap.min.css'>
    <link rel='stylesheet' href='css/ionicons.min.css'>
    <link rel="stylesheet" type="text/css" href="css/download.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/downStyle.css">
    <style>
          
@media only screen and (max-width: 767px) {
    
}
@media only screen and (max-width: 480px) {
    
}
body{
            padding:0px;
            margin:0px;
        }
         .table thead {
            background-color: #F8F8F8;
             box-shadow: 2px 2px 2px #C0CDD1;
             font-size:1.2em;
             padding:1% .10%;
            color:#333;
        }
        .table{
            border:none;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
            border-top:none;
        }
        .header-upper{
            background:#55a79a;
            position:relative;
            padding:5px 0px;
            font-family:sans-serif;
            color:#fff;
        }
        .head{font-size:3.2em; border-bottom:1px solid #55a79a;padding:20px 0px 15px 0px;font-family:sans-serif;}
        .head-right{color:#1b1b1b;}
        .head-middle{color:#55a79a}
        .head-left{color:#1b1b1b;font-weight:400;}
/*
        .content-title{
            padding:20px 0px 0px 0px;
            line-height: 20px;
            color:rgba(51,51,51,.8);
        }
*/
        .download-box{
            border-radius:5px;
            border:1px solid #e3e3e3;
        }
        .download{
            
        }
      .mytable{
            font-size:.8em;
        }
        body{
            padding-bottom:100px;
        }
        .aside-menu{
            background:#2a2a2a;
            color:rgba(255,255,255,.7);
            width:20%;
            height:100vh;
            display: inline-block;
            font-size:1em;
            float:left;
        }
        .aside-menu ul{
          list-style: none;
            width:100%;
            margin:0;
            padding:0;
        }
        .aside-menu ul li{
            text-align: left;
            padding: 4% 4% 4% 10%;
            margin: 1% 1%;
        }
        .aside-menu ul li:hover{
            background:#2f2f2f;
        }
        .aside-menu ul li a{
            color:#fff;
            text-decoration: none;
        }
         .aside-menu ul li a:link,
          .aside-menu ul li a:visited{
            color:#fff;
            text-decoration: none;
           color:rgba(255,255,255,.8);
        }
          .aside-menu ul li a:active,
          .aside-menu ul li a:hover{
             color:rgba(255,255,255,1);
        }
        .container{
        }
        #main-content{
            width:60%;
            display: inline-block;
            float:left;
        }
        .menu-heading{
            padding-left:10%;
            color:rgba(255,255,255,.8);
        }
        .menu-heading h3{
            font-size:140%;
        }
        .aside-right{
            float:right;
            width:20%
        }
        .menu-summary{
            padding-left:10%;
        }
        .icon-big{
            font-size:300%
        }
        .info-1 i{
            transition: all .1s ease-in;
            color:#00B1E1;
        }
        .info-1 i:hover{
            color:#00F8FF;
        }
         .info-2 i{
            transition: all .1s ease-in;
            color:#91C854;
        }
        .info-2 i:hover{
            color:#CBFF76;
        }
         .info-3 i{
            transition: all .1s ease-in;
            color:#ED5466;
        }
        .info-3 i:hover{
            color:#FF768F;
        }
        .icon-medium{
            font-size:1.4em;
            float:left;
            text-align: center;
            line-height: 10px;
            padding-right:1em;
            height:10px;
        }
        .icon-small{
            font-size:2em;
        }
        .main-info{
            width:80%;
            float:right;
            background:#5E6060;
            color:#fff;
            padding:.4% 1%;
        }
        .main-info .main-info-head{
            font-weight: 600;
            font-family: sans-serif;
            font-size:1.8em;
            margin-bottom: 0;
        }
        .main-info .main-info-para{
            font-size:1em;
        }
        .main-info .main-info-para i{
            color:#fff;
            font-size:1.2em;
        }
        .box{
            box-shadow: 2px 2px 2px #C0CDD1;
        }
        .none{
            display: none;
        }

    </style>
   <script>
     
    </script> 
</head>

<body>
    <div class="header-upper ">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    AECS NARORA ESSENTIAL DOWNLOADS SECTION
                </div>
            </div>
         </div>
    </div>
    <div class="head">
        <div class="container">
           <div class="row">
                <div class="col-md-6">
                     <span class="head-left">Essential</span><span class="head-middle"> Downloads</span><span class="head-right">.</span>
                  </div>
                <div class="col-md-2 col-md-offset-4">
               </div>
            </div>
        </div>
    </div>
<!--
    <div class="container">
        <h1 class="content-title">Downloads</h1>
        <a class="btn btn-primary" href="downloads2.php">Primary</a>
        <a class="btn btn-primary" href="downloads.php">Secondary</a>
        <a class="btn btn-primary" href="downloads3.php">Others</a>
    </div>
-->
   
    <div class="main-container">
        
            <div class="aside-menu">
                <div class="menu-heading">
                  <h3>Main Menu</h3>  
                </div>
                <ul>
                    <li><a href="#" onclick="senior()"><div class="ion-man icon-medium"></div>Senior</a></li>
                    <li><a href="#" onclick="junior()"><div class="ion-ios-person icon-medium"></div>Junior</a></li>
                    <li><a href="#" onclick="others()"><div class="ion-cube icon-medium"></div>Miscellaneous</a></li>
                    <li><a href="../tc/tc.php"><div class="ion-cube icon-medium"></div>TC</a></li>
                    <li><a href="../downloads/worksheet/downloads.php"><div class="ion-ios-book icon-medium"></div>Worksheet</a></li>
                </ul>
                <div class="menu-summary">
                  <h4>Summary</h4>  
                    <div class="info-1">
                        <i class="ion-stats-bars icon-big"></i>
                    </div>
                    <div class="info-2">
                        <i class="ion-stats-bars icon-big"></i>
                    </div>
                    <div class="info-3">
                        <i class="ion-stats-bars icon-big"></i>
                    </div>
                </div>
            </div>
            <div class="main-info">
                <h3 class="main-info-head">Senior Secondary</h3>
                <p class="main-info-para"><i class="ion-information-circled"></i>Downloads are Currently being updated on daily basis</p>
            </div>
<!--        table       -->
            <div class="container" id="main-content">
                    <div id="snip1">
                        <?php include('snipDatabase.php'); ?>
                    </div>
                 <div id="snip2">
                        <?php include('snipDatabase2.php'); ?>
                    </div>
                 <div id="snip3">
                        <?php include('snipDatabase3.php'); ?>
                    </div>
           </div>
        
            <div class="aside-right">
            </div>
        <div class="clearfix"></div>
    </div>
    
    

     <footer class="navbar navbar-default navbar-fixed-bottom ">
        <div class="container">
                <p id="footer" class="navbar-text pull left">
                    AECS NARORA &bull; COPYRIGHT 2017 
                </p>
                <a class="navbar-btn btn-sm btn-primary pull-right" href="http://aecsnarora.ac.in/">Home</a>
        </div>
    </footer>
</body>    
</html>
<script>
      var snip1 = document.querySelector("#snip1");
       var snip2 = document.querySelector("#snip2");
       var snip3 = document.querySelector("#snip3");
        snip2.classList.add("none");
  	     snip3.classList.add("none");
     function senior(){
         snip2.classList.add("none");
  	     snip3.classList.add("none");
         if(snip1.classList[0] == 'none'){
               snip1.classList.remove("none");
           }
       }
       function junior(){
        snip1.classList.add("none");
  	     snip3.classList.add("none");
           if(snip2.classList[0] == 'none'){
               snip2.classList.remove("none");
           }
       }
       function others(){
         snip1.classList.add("none");
  	     snip2.classList.add("none");
           if(snip3.classList[0] == 'none'){
               snip3.classList.remove("none");
           }
       }
</script>