/*
 * Frugalware.org Homepage Stylesheet
 *
 * Copyright (C) 2006 Frugalware Development Team
 *
 * Modified by PacMiam - 2013
 */


/* Use a default font to have a fixed font design */
@font-face {
    font-family: 'Title';
    src: local('Title'), url('../fonts/Cabin.ttf') format('truetype');
}
@font-face {
    font-family: 'Slogan';
    src: local('Slogan'), url('../fonts/Lobster.otf') format('truetype');
}

html {
    margin: 0;
    padding: 0;

    color: #000;
    background-color: #2D2D2D;
    font-family: Oxygen, Sans, verdana, sans-serif;
}

body {
    height: 100%;

    padding: 0;
    margin: 0 auto;

    font-size: 0;
}

a {
    color: #204bac;
    background-color: transparent;

    text-decoration: none;
}

img a,
img, a:hover {
    text-decoration: none;
    border: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    text-decoration: none;
}

table td {
    vertical-align: top;
}

input[type="image"] {
    margin: 0;
    padding: 0;

    clear: both;
}

/*
 *  Header
 */

header {
    position: absolute;
    width: 100%;
    height: 70px;
    z-index: 42;

    margin: 0;
    padding: 0;
    padding-bottom: 2px;

    background: #464646;
}


header img {
    position: relative;
    top: 5px;
    left: 5px;

    max-height: 64px;

    border: 0;
}

header a {
    color: white;

    text-shadow: 1px 1px 2px #000;
}

header a:hover {
    text-decoration: none;
}

header .title {
    position: relative;
    top: -20px;
    left: 10px;

    font-size: 44px;
    font-family: "Title", Cabin, Sans;

    color: white;
}

header .slogan {
    position: relative;
    top: -6px;
    left: -100px;

    font-size: 14px;
    font-family: "Slogan", Lobster, Sans;

    color: white;
}


/*
 *  Menu
 */
nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 99;

    font-size: 13px;

    background: #464646;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

#menu{
    margin: 4px 10px;
    padding: 0;

    list-style:none;
    font-weight:bold;

    text-align: center;
}

#menu li{
    display: inline-block;
    position:relative;
}

#menu a{
    display:block;
    padding: 2px 6px;
    color: white;
    text-decoration:none;
}

#menu a:hover{
    color: #6AB6FF;
    text-decoration:underline;
}

#menu hr {
    border: none;
    border-bottom: 1px solid rgb(85,85,85);
    margin: 4px 0;
}

/*--- DROPDOWN ---*/

#menu ul{
    background: #464646;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    padding: 6px 4px;

    border-radius: 0 0 6px 6px;

    list-style:none;

    text-align: left;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}

#menu ul li{
    padding: 1px 4px 0px 4px;
    position: relative;
    left: 0;
    display: block;
}

#menu ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    color: white;
}

#menu li:hover ul{ /* Display the dropdown on hover */
    left:-8px; /* Bring back on-screen when needed */
}

#menu li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    text-decoration:underline;
}

#menu li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}

#menu li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    color: #6AB6FF;
    text-decoration:underline;
}

/*
 *  Lang area
 */

#lang {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 100;

    padding: 2px 8px;

    background: rgba(193,212,225,0);
}

#lang a {
    padding: 0 3px;

    font-size: 10px;

    color: white;
}

#lang a:hover {
    text-decoration:overline;
}

#lang img {
    padding: 0px 2px;
}


/*
 *  Sidebar
 */

#rightcolumn {
    width: 300px;
    min-height: 100%;
    z-index: 10;

    padding-top: 10px;
    float: right;
}

#rightcolumn ul {
    margin: 0 0 5px 0;
    padding: 3px 10px;

    list-style-type: none;

    color: black;
}

#rightcolumn ul li a {
    text-decoration: none;
}

#rightcolumn ul li a:hover {
    text-decoration: underline;
}

#rightcolumn ul li a img {
    border: 0;
}

#sidebar h2 {
    display: block;

    margin: 6px 0 8px 0;
    padding: 4px 10px;

    font-size: 12pt;
    font-weight: bold;
    text-align: right;

    color: #FFF;
    background-color: #2D2D2D;

    box-shadow:0 0px 2px #999;
    border-radius: 3px 0 0 3px;
    text-shadow:0px 0px 0px #FFFFFF;
}


#sidebar h2 a img {
    position: relative;
    top: 2px;
}

#sidebar .content {
    margin-bottom: 20px;
    padding: 7px;

    border-right: 0 solid;
}

#sidebar .content a img {
    position: relative;
    top: 3px;
}

#sidebar .content p {
    margin: 0;

    font-size: 10px;
    text-align: center;

    color: black;

    clear: both;
}

#sidebar .content h3 {
    margin: 2px 0 2px 12px;
    padding: 0;

    font-size: 12px;
    text-align: right;

    color: #2D2D2D;

    border-bottom: 1px solid #2D2D2D;
}

#sidebar .content h4 {
    margin: 0;
    padding: 0;

    font-weight: normal;
    text-align: right;

    color: #7B7B7B;
}

#sidebar .content .pkg a {
    float: right;
}

#dllists {
    display: inline-block;
    width: 90%;

    margin: auto;
}

#dllists .dllist h6 {
    margin: 2px 6px;
    padding: 0;

    font-size: 11px;
}

#dllists .dllist {
    margin: 4px 10px 15px 10px;
    padding: 0;
    float: left;
}

.social {
    text-align: center;
}

.social img {
    width: 32px;
    height: 32px;
}

.don {
    text-align: center;
}


/*
 *  Contents
 */

#wrapper {
    width: 95%;
    overflow: auto;

    margin: 0 auto;
    padding: 95px 0 20px 0;

    text-align: left; /* Win IE5 */
    font-size: 11px;

    background-color: white;

    border-radius: 0 0 6px 6px;
}


/*
 *  Main content
 */

#centercolumn {
    padding-top: 10px;
}

#centercolumn h2 {
    display: inline-block;
    margin: 6px 4px 8px 0px;
    padding: 0 10px 4px 8px;

    font-size: 12pt;
    font-weight: bold;

    background-color: #2D2D2D;
    color: #FFF;

    box-shadow:0 0px 2px #999;
    border-radius: 0 3px 3px 0;
}

#centercolumn h2 img {
    position: relative;
    top: 5px;
    left: -3px;

    width: 20px;
}

#centercolumn h3 {
    text-align: center;
}

#centercolumn hr {
    width: 80%;

    margin: 2px auto 10px auto;

    border: none;
    border-bottom: 1px solid #E5E5E5;
}

#roaddefinition {
    margin: 0 40px 10px 40px;
    padding: 2px 8px;

    color: #7B7B7B;
}

.road {
    cursor: pointer;
}

/* News post */
#new {
    width: 95%;

    margin: 15px auto 10px auto;

    border: none;
}

#new h3 {
    margin: 0;

    font-size: 1.1em;
    font-weight: normal;

    color: #333333;
    text-align: left;
}

#new h3 a {
    font-size: 1.5em;
    text-decoration: none;

    color: #204bac;

    text-shadow: 1px 1px 2px #DDDDDD;
}

#new h3 .news {
    padding: 0;

    font-size: 0.8em;
}

#new h4 {
    margin: 0;
    padding: 2px 8px;

    font-weight: normal;

    color: #7B7B7B;
}

#new p {
    padding: 0 12px;
}

#new article {
    margin: 0 0 15px 0;
    padding: 0;

    text-align: justify;
}

#new article img {
    max-width: 50%;
}

/* News list */

#newsList {
    width: 85%;

    margin: 15px auto 20px auto;

    font-size: 14px;
}

#newsList th {
    text-align: left;
}

#newsList td {
    vertical-align: middle;
}

#newsList img {
    width: 20px;
}

.link {
    width: 95%;

    margin: 4px auto;

    font-size: 12px;
}

.pagination {
    width: 80%;

    margin: 0 auto;

    text-align: center;
}

.pagination a {
    margin: 0 8px;
}

.pagination b {
    margin: 0 8px;
}

.moreandless {
    position: relative;
    top: 2px;

    width: 16px;

    cursor: pointer;
}

/* Middle box */
.middleheader {
    width: 90%;
    margin: 20px auto 0 auto;

    font-size: 1.5em;
    text-decoration: none;

    color: #204bac;

    text-shadow: 1px 1px 2px #DDDDDD;
}

.middleheader .news a {
    padding: 0;

    font-size: 0.8em;
}

.middlebox, fieldset {
    width: 90%;

    margin: 3px auto 30px auto;
    padding: 2px 12px;

    text-align: justify;

    background-color: #f3f3f3;
    border: 1px solid #e1e1e1;

    -moz-box-shadow:0 2px 2px #999;
    -webkit-box-shadow:0 2px 2px #999;
    -khtml-box-shadow:0 2px 2px #999;
    box-shadow:0 2px 2px #999;
}

.middlebox ul {
    list-style: none;
}

.middlebox img {
    text-align: center;
    max-width: 90%;
}

.middlebox .rss li em {
    margin-bottom: 15px;
}

/* Bow without border and background */
.emptyheader, .screenheader {
    padding: 3px 5px 3px 20px;

    font-size: 12px;
    text-decoration: none;

    color: #204bac;

    text-shadow: 1px 1px 2px #DDDDDD;
}

.emptybox, .screenbox {
    margin: 15px auto 15px auto;
    padding: 2px 2px 2px 15px;

    font-size: 11px;
}

.emptybox {
    text-align: justify;
}

.emptybox .packages {
    width: 80%;

    margin: auto;
}

.package td {
    padding: 6px 6px;

    vertical-align: -2px;
}

.package input {
    background-color: transparent;
    color: white;

    border: none;
}

.package input[type="text"]  {
    padding: 1px 4px;
}

.package input[type="submit"], .package input[type="reset"] {
    padding: 2px 4px;

    cursor: pointer;
}

.package input[type="reset"] {
    background: url("../../images/icons/clear.png") no-repeat center center #2D2D2D;
}

.searchInput {
    background-color: #2d2d2d;
    border-radius: 3px;
}

/* Fieldset */

pre {
    width: 0;
}

legend {
    font-size: 1.5em;
    text-decoration: none;
    color: #204bac;
    text-shadow: 1px 1px 2px #DDDDDD;
}


.screenbox {
    margin: 0 10px 20px 10px;
}

.screenbox h1 {
    font-size: 12px;
}

.screenbox ul li {
    display: inline-block;

    padding: 0 4px;

    text-align: center;

    list-style:none;
}

div.screenbox span {
    display: inline-block;
    padding: 5px 8px;
    padding-bottom: 10px;

    text-align: center;
    letter-spacing: normal;

    vertical-align: top;

    clear: both;
}

div.screenbox img {
    width: 200px;
    height: 160px;

    cursor: url("../../images/icons/magnify.png"), -moz-zoom-in;
}

/* Show author in a box */
.authorbox {
    min-height: 90px;

    margin: 20px 60px 5px 60px;
    padding: 2px 6px;

    background-color: #f3f3f3;

    border: 1px solid #e1e1e1;

    -moz-box-shadow:0 2px 2px #999;
    -webkit-box-shadow:0 2px 2px #999;
    -khtml-box-shadow:0 2px 2px #999;
    box-shadow:0 2px 2px #999;
}

.authorbox .info {
    margin: 5px 0 5px 100px;
}

.authorbox ul {
    margin: 2px 0 8px 0;
}

.authorbox img {
    margin: 5px 0;
    float: left;
}


/* A stupid simply box */
.boxpadding {
    margin-bottom: 10px;

    border: 0;
}

.boxheader {
    margin: 0 8px;
    padding-right: 2px;

    font-size: 18pt;
    text-align: right;

    color: rgb(32, 75, 172);
    background-color: transparent;

    text-shadow:0px 0px 9px #FFFFFF;
}

.boxcontent {
    padding: 4px;
    padding-left: 0px;

    background-color: #fff;
    color: #000;
}

.buildlog {
    font-size: 1.2em;
}

/* This is the front-page welcome widget */
.about {
    width: 90%;

    margin: 5px auto 20px auto;
    padding: 2px 12px;

    text-align: justify;

    background-color: #e7e7df;

    border: 1px solid #DEDEDE;

    -moz-box-shadow: 0 0 5px rgba(153,153,153,0.5);
    -webkit-box-shadow: 0 0 5px rgba(153,153,153,0.5);
    -khtml-box-shadow: 0 0 5px rgba(153,153,153,0.5);
    box-shadow: 0 0 5px rgba(153,153,153,0.5);
}

.about div {
    display: table-cell;
    table-layout: auto;

    padding: 8px;

    vertical-align: top;
}

.freespace {
    display: none;
}

.imgcontent {
    font-size: 16px;
    text-align: left;

    vertical-align: bottom;
}


/*
 *  Footer
 */

footer {
    position: relative;

    padding: 6px 10px;

    height: 18px;

    font-size: 10pt;
    text-align: center;

    color: #FFF;
}

footer a{
    color: #6AB6FF;
}

footer hr{
    width: 80%;

    margin: 2px auto;
    padding: 1px 0;

    background-color: transparent;

    border: 0 solid;
    border-bottom: 1px solid grey;
}

footer img {
    padding-top: 5px;
}

/*
 *      Full width design responsive
 */

@media screen and (min-width: 981px)
{
    body {
        min-width: 1000px;
    }


    #centercolumn {
        margin-right: 320px;
    }
}