/******************************
DESIGN BY JEFF (NEKOHAYO)
jeff.ecchi.ca

Rsponsive and mobile first. No hacks. IE has <6% market share.
Feel free to suggest improvements
 ******************************/

/* NOTE: dumbass CSS doesn't understand "or" for media queries,
         you need to use commas, and do NOT forget parentheses. */


/* LAYOUT BASE - mobile first, from which higher resolutions derive */
body {
    font-family: "Droid Sans", Sans;
    color: black;
    background-color: white;
    margin: 0;
    padding: 0;
}

header{
    width: 100%;
    /* "Pitivi Yellow": the SVG's transparent gradient will fade into this */
    background-color: #ffbe3b;
    background-image: url("i/header-radial-bg.svg");
    background-repeat: no-repeat;
    /*
    This is the usual "Pitivi Yellow", but with a "groove" border
    instead of solid, which darkens it and creates a second "shadow" line: */
    border-bottom: 2px groove #ffbe3b;
}

    nav{
        margin-left: auto;
        margin-right: auto;
        font-weight: 200;
        width: 95%;
        min-height: 0; /* on mobile, don't use more space than necessary;
            the wrapped menu items automatically request more height anyway */
    }

        #logotype{
            float: left;
            margin-right: 1%;
            color: #fdfdfd;
            font-family: "Source Sans Pro";
            font-weight: 400;
            font-size: 200%;
            text-shadow: 1px 1px white;
        }
            #logotype img{
                width: 24px;
            }
            #logotype a{
                /*
                Almost black but not exactly; pure blacks don't exist in nature.
                Match the logo colors instead. */
                color: #2d2d2d;
                text-decoration: none;
            }
            #logotype a:hover{
                text-decoration: underline;
            }

    nav ul{
        clear: left;
        padding: 0; /* no distanciation from the top */
        margin: 0; /* no offset from the logotype on the left */
    }
        nav ul li{
            display: inline;
            padding-left: 1%;
            padding-right: 1%;
            font-size: 120%;
            text-shadow: 1px 1px white;
        }
            nav li a{
                color: #004b6c; /* close to Navy Blue but less saturated */
                text-decoration: none;
                font-family: "Droid Sans", Sans;
            }
            nav li a:hover{
                color: #5891aa; /* lighter blue */
                text-decoration: underline;
            }

footer{
    padding: 2%;
    clear: both;
    color: gray;
    text-align: center;
}

section{
    padding: 2%;  /* For each column edge, substract this to calculate col size */
}

img{ /* Upscaling screenshots and such is not a good idea */
    max-width: 100%;
    height: auto;
}

video{
    /* Contrary to images, we can rarely predict the resolution of our videos
    And they usually look better/more uniform when occupying the whole space */
    width: 100%;
    height: auto;
    border: 1px solid black;
}

/* Generic text styles */
h1, h2, h3, h4, h5{
    font-family: "Source Sans Pro";
    font-weight: normal; /* Surprising, you actually HAVE to specify this thing */
}
    h2{
        color: #94ac41;
    }
    h3{
        color: #8e8e8e;
        border-bottom-style: dotted;
        border-bottom-width: 1px;
    }

a{
    color: #7590ae;
    text-decoration: underline;
}
    a:hover{
        color: #90cf58;
        text-decoration: none;
    }

ul{
    list-style-type: square;
}
li{
    margin-bottom: 0.5em;
}

code{
    font-family: "Droid Sans Mono";
    font-weight: bold;
    color: white;
    background-color: black;
    padding: 3px;
}

.frontpage_social_media_icon{
    border-style: none;
    /* 4 icons is 4x25%, but #news is a "section" with 2% padding (-2x2%/4) */
    width: 24%; height: 24%;
}

.centered-image{
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* SPECIFIC (ID) STYLES */
#mission{
    clear: both;
    width: 80%;
    margin-left: auto; margin-right: auto;
    font-family: "Source Sans Pro";
    font-size: 110%;
    font-weight: normal; /* 400 */
}
    #mission h1{
        margin-top: 0;
        font-size: 110%;
        font-weight: normal; /* 400, to be overridden at high resolutions */
    }

#raw-features-list{
    clear: left;
}


/*--------------------------------------------------------------------------
 Progressive-enhancement of the responsive design, for higher resolutions
 -------------------------------------------------------------------------*/

/* Anything bigger than ultra-small resolutions: */
@media (min-width: 500px){
    nav ul li{
        font-size: 150%;
    }
    #mission{
        font-size: 130%;
    }
    #mission h1{
        font-size: 150%;
    }
    .frontpage_social_media_icon{
        max-width: 5em;
    }
}
@media (min-width: 850px){
    #mission{
        font-size: 150%;
    }
    #mission h1{
        font-size: 180%;
        font-weight: 200; /* slim glyphs to compensate the big font size */
        }
    .full-width-gallery{
        /* Fitting more text in less vertical space makes box floats easier */
        font-size: 90%;
    }
    /* We can fit roughly three "regular" boxes. Since we're in a section,
       we lose about 2*2% in padding, so 96% available. */
    .full-width-gallery .box{
        float: left;
        padding: 1%;
        width: 30%; /* 96% - 3 boxes * 2*1% = 90%, divided by 3 */
    }
    .full-width-gallery .box-huge{
        float: left;
        padding: 1%;
        /* roughly two boxes-wide: 96% - 2*1% padding - (30% + 1*2% padding) */
        width: 62%;
    }
    .auto-text-columns{
        column-count: 2;
        column-gap: 5%;
        /* Bitches. Please. This is 2013. */
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -moz-column-gap: 5%;
        -webkit-column-gap: 5%;
    }
    .auto-column-half{
        /* A column part of a layout made of two columns when possible.
           Used for the Downloads page */
       float: left;
       width: 46%; /* 100% - 2*2*2% padding, divided by 2 columns */
    }

    .auto-column-third{
        /* A column part of a layout made of three columns when possible.
           Used for the Contribute and Contact pages */
       float: left;
       width: 29.333333333%; /* 100% - 3*2*2% padding, divided by 3 columns */
    }
}

@media (min-width: 1024px){
    nav{
        min-height: 80px;
    }
        nav #menu-links{
            /* The only way to actually have the menu items shifted downwards: */
            padding-top: 15px;
            }
        nav ul{
            clear:none; /* wrap around to the right of the logotype */
            margin-top: 0;
            padding-top: 30px; /* align with the pitivi logotype */
            margin-left: 20%;
        }
        #logotype{
            font-size: 400%;
            text-shadow: 1.5px 1.5px white;
        }
        #logotype img{
            width: 48px;
        }
        #news ul li{
            font-size: 90%;
            margin-left: -5%;
        }
    .frontpage_social_media_icon{
        max-width: 3em;
    }
}


/* Change the content layout for normal (sub-HD) computer screens,
   between 1024 and 1600 */
@media screen and (min-width: 1024px) and (max-width: 1600px){
    /* There's 2% padding * 4 edges, so deduct 8%+ from the total.
       Also deduct whatever border width if present. */
    #frontpage_splash{
        float: left;
        width: 54%;
        /* Hack to regain 2% space between the columns,
           as the second column acts as psychovisual whitespace: */
        padding-right: 0;
    }
    #news{
        float: right;
        width: 40%;
    }
}
/* Middle-range screens */
@media screen and (min-width: 1200px){
    nav{
        width: 80%;
    }
    #showcase_movies{
        float: left;
        /* This overrides "section"'s 100% width, but not the 2% padding,
           so the 70% feels like 74% of the page */
        width: 70%;
        padding: 1%; /* for the gallery: tighter padding than the default 2% */
        font-size: 80%;
    }
    #showcase_movies .box{ /* two "columns" of pitivi-made movies */
        float: left;
        margin-left: 0.5%;
        margin-right: 1%;
        width: 48.5%;
    }
    #showcase_talks{ /* only a single column of presentations */
        float: right;
        font-size: 80%;
        padding: 1%;
        border-left: 2px dotted gray;
        /* We get the remaining space after the 70% eaten by showcase_movies...
           100% - 70% - padding around both sections (2*2*1%) - border */
        width: 25.5%;
    }
    .full-width-gallery .box{
        /* With 1% padding * 4 boxes: 2*4*1% = 8% eaten out of 96% available,
           so 88% left to divide by 4 boxes. */
        width: 22%;
    }
    .full-width-gallery .box-huge{
        /* roughly two boxes-wide (2 more on the right):
           96% - 2*1% padding - 2*(22% + 2% padding) */
        width: 46%;
    }
    .auto-text-columns{
        column-count: 3;
        /* Bitches. Please. This is 2013. */
        -moz-column-count: 3;
        -webkit-column-count: 3;
    }
    .centered-introduction{
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        border-bottom: 2px dotted #ccc;
    }
    .centered-non-responsive-contents{
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}




/* Change the layout again for the full HD widescreen version */
@media screen and (orientation: landscape) and (min-width: 1600px){
    /* 3 columns with 2% padding on each side means only 88% available,
    except that we'll hack the columns to regain 4+2+2%, so 96% available. */
    #mission{
        float: left;
        width: 25%;
        /* Regain 2% for frontpage_splash */
        padding-left: 1%;
        padding-right: 1%;
    }
    #frontpage_splash{
        float: left;
        width: 50%;
        /* Regain 4% space: */
        padding-left: 0;
        padding-right: 0;
    }
    #news{
        float: right;
        width: 20%;
        /* Regain 2% space for frontpage_splash */
        padding-right: 1%;
        padding-left: 1%;
    }
    .full-width-gallery .box{
        /* With 1% padding * 5 boxes: 2*5*1% = 10% eaten,
           so from a 96% available we go to 86% left to divide by 5 boxes. */
        width: 17.2%;
    }
    .full-width-gallery .box-huge{
        width: 55.5%; /* 3 boxes-wide, but saves 2*2*1% in padding so can be 4% larger */
    }
    .auto-text-columns{
        column-count: 4;
        /* Bitches. Please. This is 2013. */
        -moz-column-count: 4;
        -webkit-column-count: 4;
    }
}
/* Special case for a particular set of semi-HD resolutions where the missing text is too big and wraps too much; we therefore knock back down to the size of the sub-850px media query. This will reset back to the >850px size when going full-HD. */
@media screen and (min-width: 1600px) and (max-width: 1900px){
    #mission{
        font-size: 130%;
    }
    #mission h1{
        font-size: 150%;
    }
}


/* TODO: figure out what we want to do with ridiculously big screens.
   This media query probably doesn't work anyway. */
@media screen and (min-width: 1920px) and (min-resolution: 200dpi){
    .full-width-gallery{
        max-width: 2000px;
        margin-left: auto;
        margin-right: auto;
    }
}