III: Grievances

<!DOCTYPE html>

<!---------------


        III: GRIEVANCES by DOMINICWRITES
        Rules and Regulations:
        #1: Please DO NOT commit thievery and steal this theme/page. I've  worked hard on in so I'd appreciate if you didn't.

        #2: DO NOT redistribute this theme/page,

        #3: You can customize to your liking, just make sure that your theme/page is readable and credible for your viewers.


        ---------------->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>{Title}</title>

    <meta charset="utf-8">

    <meta name="description" content="{MetaDescription}" />

    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}"/>

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800,900,500' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<script src="http://use.edgefonts.net/londrina-sketch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>


</head>
<style type="text/css">
body {
    margin: 0px;
    list-style: none;
    background-image:url('http://static.tumblr.com/kamm2qy/zkZn2vh8f/squairy_light.png');
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 10px;
    color: #877b76;
}

a {
    text-decoration: none;
    color: #0195ab;
}

b,i,strong,em {
    color: #cbd165;
}

::-webkit-scrollbar-thumb:vertical {
    background-color: #a94c00;
    height: 10px;
    }
::-webkit-scrollbar-thumb:horizontal {
    background-color: #a94c00;
    height: 7px!important;
    }
::-webkit-scrollbar {
    background-color: #FFF;
    height: 10px;
    width: 2px;
    border: 5px solid #FFF;
    }

content {
    margin: auto;
    width: 100%;
    height: 100%;
    overflow: auto;
    position: fixed;
    background-color: transparent;
}

#all {
    margin: auto;
    text-align: center;
    width: 600px;
    height: 100%;
    padding: 15px;
    margin-bottom: 10px;
    margin-top: 30px;
}

#header {
    width: 100%;
    margin-bottom: 20px;
    height: auto;
    margin: auto;
}

.himg {
    width: 100%;
    height: auto;
}

.himg img {
    width: 600px;
    height: 250px;
    background-color: #bbb;
}

.htitle {
    position: absolute;
    font-family: arial;
    font-style: italic;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -2px;
    display: block;
    padding: 20px;
    color: #FFF;
    margin-top: 170px;
}

.htitle:first-letter {
    color: #a94c00;
}

#navtag {
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: block;
}

#column1 {
    width: 275px;
    display: inline-block;
    float: left;
    height: auto;
    padding: 10px;
}

#column2 {
    width: 275px;
    display: inline-block;
    float: right;
    height: auto;
    padding: 10px;
}

.box {
    width: 275px;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.btitle {
    display: block;
    padding: 5px;
    font-family: arial;
    font-style: italic;
    background-color: #a94c00;
    color: #eee;
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 700;
    text-align: left;
}

.box a {
    display: block;
    padding: 3px;
    background-color: #eee;
    color: #a94c00;
    font-family: trebuchet ms;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    text-align: right;
    margin-bottom: 5px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.box a:first-letter {
    color: #a94c00;
}

.box a:hover {
    color: #202020;
    letter-spacing: 3px;
    font-style: italic;
}

.credit {
    margin-top: 15px;
    bottom: 15px;
    left: 15px;
    padding: 5px;
    text-align: center;
    font-family: arial;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 50px;

}

.credit a {
    color: #a94c00;
    font-family: arial;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    letter-spacing: 3px;
}


</style>
<body>
<content>
<div id="all">
    <div id="header">
    <div class="htitle">grievances</div>
    <div class="himg"><img src="http://static.tumblr.com/kamm2qy/dthn2vf5q/spn408_0366.png" /></div>

    </div>
    <div id="navtag">

    <!-- FIRST COLUMN -->
    <div id="column1">

        <div class="box">
        <div class="btitle">Section One</div>
        <a href="#">Link One</a>
        <a href="#">Link Two</a>
        <a href="#">Link Three</a>
        <a href="#">Link Four</a>

        </div>

        <div class="box">
        <div class="btitle">Section Two</div>
        <a href="#">Link One</a>
        <a href="#">Link Two</a>
        <a href="#">Link Three</a>
        <a href="#">Link Four</a>
        <a href="#">Link Five</a>
        <a href="#">Link Six</a>

        </div>


    </div>

    <!-- SECOND COLUMN -->
    <div id="column2">
    <div class="box">
        <div class="btitle">Section One</div>
        <a href="#">Link One</a>
        <a href="#">Link Two</a>
        <a href="#">Link Three</a>

        </div>

        <div class="box">
        <div class="btitle">Section Two</div>
        <a href="#">Link One</a>
        <a href="#">Link Two</a>
        <a href="#">Link Three</a>

        </div>

    </div>


    </div>

</div>
<div class="credit">copyright // <a href="http://dominicwrites.tumblr.com">dominicwrites</a></div>
</content>

</body>
</html>