Untitled

<body>
    <div id="header">
        <div id="headerTitle">
            <p>Project Archive</p>
        </div>
        <div id="nav">
            <ul>
                <li class="navOn"><a class="active" href="Home.php">Home</a></li>
                <li><a href="Home.php">All</a></li>
                <li><a href="Home.php">Categories</a></li>
                <li><a href="Home.php">Quote</a></li>
                <li><a href="Home.php">Support</a></li>
                <li class="dropdown">
                <a href="#" class="dropbtn">Settings</a>
                    <div class="dropdown-content">
                    <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                        <a href="#">Link 3</a>
                    </div>
                </li>
            </ul>
        </div>

    </div>
    <div id="search">
        <p>Search Your Documents...</p>
        <form action="Home.php" method="post">
            <input type="text" name="search" placeholder="search" class="tbSearch">
        </form>
    </div>

    <div id="documents">
        <div id="docGrid">
            <div id="docLeft">
                <div id="docName">
                    <p>Doc Name</p>
                </div>
                <div id="docDescription">
                    <p>This is the area where the description of the document will be displayed.</p>
                </div>
                <div id="docOpen">
                    <table class="btnOpen">
                        <tr>
                            <td>OPEN</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div id="docRight">
                <div id="docName">
                    <p>Doc Name</p>
                </div>
                <div id="docDescription">
                    <p>This is the area where the description of the document will be displayed.</p>
                </div>
                <div id="docOpen">
                    <table class="btnOpen">
                        <tr>
                            <td>OPEN</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="docGrid">
            <div id="docLeft">
                <div id="docName">
                    <p>Doc Name</p>
                </div>
                <div id="docDescription">
                    <p>This is the area where the description of the document will be displayed.</p>
                </div>
                <div id="docOpen">
                    <table class="btnOpen">
                        <tr>
                            <td>OPEN</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div id="docRight">
                <div id="docName">
                    <p>Doc Name</p>
                </div>
                <div id="docDescription">
                    <p>This is the area where the description of the document will be displayed.</p>
                </div>
                <div id="docOpen">
                    <table class="btnOpen">
                        <tr>
                            <td>OPEN</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="docGrid">
            <div id="docLeft">
                <div id="docName">
                    <p>Doc Name</p>
                </div>
                <div id="docDescription">
                    <p>This is the area where the description of the document will be displayed.</p>
                </div>
                <div id="docOpen">
                    <table class="btnOpen">
                        <tr>
                            <td>OPEN</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div id="docRight">
                <div id="docName">
                    <p>Doc Name</p>
                </div>
                <div id="docDescription">
                    <p>This is the area where the description of the document will be displayed.</p>
                </div>
                <div id="docOpen">
                    <table class="btnOpen">
                        <tr>
                            <td>OPEN</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

        <div id="docGrid">
            <div id="docLeft">
                <div id="docName">
                    <p>Doc Name</p>
                </div>
                <div id="docDescription">
                    <p>This is the area where the description of the document will be displayed.</p>
                </div>
                <div id="docOpen">
                    <table class="btnOpen">
                        <tr>
                            <td>OPEN</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div id="docRight">
                <div id="docName">
                    <p>Doc Name</p>
                </div>
                <div id="docDescription">
                    <p>This is the area where the description of the document will be displayed.</p>
                </div>
                <div id="docOpen">
                    <table class="btnOpen">
                        <tr>
                            <td>OPEN</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

@charset "utf-8";
body{
    background:#E8E8E8;
    overflow-x:hidden;
}
#header{
    width:100%;
    height:80px;
    font-weight:bold;
}
#search{
    height:115px;
    background-color:#4C66A4;
    color:#FFF;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    padding-top:10px;
}
#navTop{
    height:5px;
    margin-bottom:20px;
    background-color:#4C66A4;
}
#documents{
    width:100%;
    height:100%;
}
#docGrid{
    height:225px;
    margin-left:10%;
    margin-right:10%;
    margin-top:20px;
    margin-bottom:20px;
}
#docLeft{
    float:left;
    height:222px;
    width:45%;
    background-color:#FFF;
    border-bottom:3px solid #BEBEBE;
}
#docRight{
    float:right;
    height:222px;
    width:45%;
    background-color:#FFF;
    border-bottom:3px solid #BEBEBE;
}
#docName{
    text-align:center;
    margin-top:10px;
    margin-bottom:10px;
    font-size:16px;
    font-weight:bold;
}
#docDescription{
    text-align:center;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:5px;
    margin-right:5px;
    height:110px;
}
#docOpen{
    text-align:center;
    margin-left:17.5%;
    margin-right:17.5%;
    margin-top:10px;
    margin-bottom:10px;
}
#headerTitle{
    float:left;
    font-weight:bold;
    font-size:20px;
    text-align:center;
    width:25%;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size:12px;
    height:80px;
}
.navOn{
    border-top:3px solid #4C66A4;
    height:47px;
    padding-top:27px;
}
li {
    float: left;
    width:12%;
    height:50px;
    padding-top:30px;
    text-align:center;
}
a:visited {
    text-decoration: none;
    color:#000;
}
li a, .dropbtn {
    display: inline-block;
    color: #000;
    text-align: center;
    text-decoration: none;
}
li.dropdown {
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
    display: block;
}
.btnOpen{
    text-align:center;
    vertical-align:middle;
    height:30px;
    width:100%;
    border-radius:5px;
    background-color:#4C66A4;
    color:#FFF;
    font-size:15px;
    font-weight:bold;
}
.headerTitle{
    font-size:20px;
    text-align:center;
    vertical-align:middle;
    font-weight:bold;
}
.tbSearch{
    border: 1px solid #848484;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    outline:0;
    padding-left:10px;
    padding-right:10px;
    margin-top:0;
    margin-bottom:0;
    margin-left:12.5%;
    margin-right:12.5%;
    width:75%;
    height:25px;
    font-size:15px;
}
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
}