/* Basic styling / Small desktop / Tablet (portrait) */
@media only screen {

    header {
        width:600px;
        height:100px;
        background-color:#ffffff;
        text-align:left;
        text-shadow: 1px 1px #ccccdd;
        line-height:100px;
        font-family: 'Raleway', sans-serif;
        font-size: 3em;
        color:#1100aa;
        margin-left:25px;
    }

    header a {
        color:#1100aa;
        text-decoration: none;
    }

    header a:visited {
        color:#1100aa;
    }

    header a:hover {
        color:#1100aa;
    }

    footer {
        width:600px;
        height:100px;
        background-color:#ffffff;
        line-height:100px;
        font-family: "Times New Roman", Times, serif;
        font-size:.8em;
        color:#1100aa;
        margin-left:25px;
    }

    .buttonContainer {
        width:100%;
        height:50px;
    }

    .buttonContainer a {
        text-decoration: none;
    }

    .button {
        width:25%;
        height:50px;
        margin-bottom:50px;
        background-image:linear-gradient(to bottom, #1100aa, #110066),linear-gradient(to bottom, #1100aa, #110066);
        text-align:center;
        line-height:50px;
        font-size:1.5em;
        display:block;
        float:left;
        font-family: 'Oswald', sans-serif;
        background-position:center, center;
        background-repeat:no-repeat;
        background-size:100%,100%;
        color:rgba(255,255,255,255);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .button:hover {
        width:25%;
        height:50px;
        background-color:#ff8800;
        text-align:center;
        line-height:50px;
        font-size:1.5em;
        color:#ffffff;
        background-image:none;
    }

    ul {
        list-style-type: none;
    }

    .tileContainer {
        width:600px;
        height:600px;
        margin-left:auto;
        margin-right:auto;
    }

    .tileContainer a {
        text-decoration: none;
    }

    .tile {
        margin:25px;
        width:250px;
        height:250px;
        background-color:#1100aa;
        background-position:center, center;
        background-repeat:no-repeat;
        background-size: 75%,100%;
        text-align:center;
        line-height:250px;
        font-size:2em;
        color:rgba(255,255,255,0);
        display:block;
        float:left;
        font-family: 'Oswald', sans-serif;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .tile:hover {
        margin:25px;
        width:250px;
        height:250px;
        background-color:#ff8800;
        text-align:center;
        line-height:250px;
        font-size:2em;
        color:#ffffff;
        background-image:none;
    }

    .picturesTile {
        background-image:url('camera.svg'),linear-gradient(to bottom, #1100aa, #110066);
    }

    .picturesTile:hover {
        background-image:none;
    }

    .milestonesTile {
        background-image:url('steps.svg'),linear-gradient(to bottom, #1100aa, #110066);
    }

    .milestonesTile:hover {
        background-image:none;
    }

    .suggestionsTile {
        background-image:url('mail.svg'),linear-gradient(to bottom, #1100aa, #110066);
    }

    .suggestionsTile:hover {
        background-image:none;
    }

    .videosTile {
        background-image:url('film.svg'),linear-gradient(to bottom, #1100aa, #110066);
        background-size: 75%,100%;
    }

    .videosTile:hover {
        background-image:none;
    }

    .decoration {
        display:none;
    }

    .decorationImage {
        width:180px;
        height:180px;
    }

    .adsense {
        width:320px;
        height:50px;
        background-color:#ddddff;
        position:relative;
        margin-left:auto;
        margin-right:auto;
    }

    #largead {
        display:none;
    }

    #smallad {
        display:block;
    }

    .picturesContent {
        width:600px;
        margin-bottom:50px;
        margin-left:auto;
        margin-right:auto;
    }

    .milestonesContent {
        width:550px;
        padding-left:25px;
        margin-bottom:50px;
    }

    .suggestionsContent {
        width:550px;
        padding-left:25px;
        margin-bottom:50px;
    }

    .videosContent {
        width:600px;
        margin-bottom:50px;
        margin-left:auto;
        margin-right:auto;
    }

    .milestoneCell {
        padding-left:10px;
    }

    .navigator {
        text-align: center;
        margin-bottom: 10px;
    }

    .navigator > a {
        color:#1100aa;
    }

    .navigator > a:hover {
        color:#ff8800;
    }

    .selectedpage {
        color:#ff8800;
    }

    .selectedbutton {
        background-image:linear-gradient(to bottom, #ff8800, #ff8800),linear-gradient(to bottom, #ff8800, #ff8800);
    }

    a:hover {
        color:#ff8800;
    }

    #from {
        width:200px;
    }

}

/* Mobile */
@media only screen
and (max-width:600px) {
    
    body {
        overflow-x:hidden;
    }

    header {
        width:95%%;
        height:50px;
        text-align:left;
        line-height:50px;
        font-size:2em;
        margin-top:25px;
        margin-left:2.5%;
    }

    footer {
        width:95%;
        height:100px;
        background-color:#ffffff;
        line-height:100px;
        font-size:.8em;
        margin-left:2.5%;
    }

    .tileContainer {
        width:320px;
        height:320px;
        margin-bottom:25px;
        margin-left:auto;
        margin-right:auto;
    }

    .tile {
        margin:10px;
        width:140px;
        height:140px;
        line-height:140px;
        font-size:1.5em;
    }

    .tile:hover {
        margin:10px;
        width:140px;
        height:140px;
        line-height:140px;
        font-size:1.5em;
    }

    .buttonContainer {
        overflow:hidden;
    }

    .button {
        margin-bottom:0px;
        color:rgba(255,255,255,0);
        background-size:50px,100%;
    }

    .button:hover {
        font-size:1em;
    }

    .picturesButton:not(.selectedbutton) {
        background-image:url('camera.svg'),linear-gradient(to bottom, #1100aa, #110066);
    }

    .picturesButton {
        background-image:url('camera.svg'),linear-gradient(to bottom, #ff8800, #ff8800);
    }

    .milestonesButton:not(.selectedbutton) {
        background-image:url('steps.svg'),linear-gradient(to bottom, #1100aa, #110066);
    }

    .milestonesButton {
        background-image:url('steps.svg'),linear-gradient(to bottom, #ff8800, #ff8800);
    }

    .suggestionsButton:not(.selectedbutton) {
        background-image:url('mail.svg'),linear-gradient(to bottom, #1100aa, #110066);
    }

    .suggestionsButton {
        background-image:url('mail.svg'),linear-gradient(to bottom, #ff8800, #ff8800);
    }

    .videosButton:not(.selectedbutton) {
        background-image:url('film.svg'),linear-gradient(to bottom, #1100aa, #110066);
    }

    .videosButton {
        background-image:url('film.svg'),linear-gradient(to bottom, #ff8800, #ff8800);
    }

    .button:not(.selectedbutton):hover {
        background-image:linear-gradient(to bottom, #ff8800, #ff8800),linear-gradient(to bottom, #ff8800, #ff8800);
    }

    #content {
        margin-top:25px;
    }

    .picturesContent {
        width:95%;
        padding-left:2.5%;
        margin-bottom:50px;
        margin-left:auto;
        margin-right:auto;
    }

    .milestonesContent {
        width:95%;
        padding-left:2.5%;
        margin-bottom:50px;
    }

    .suggestionsContent {
        width:95%;
        padding-left:2.5%;
        margin-bottom:50px;
    }

    .videosContent {
        width:300px;
        margin-bottom:50px;
        margin-left:auto;
        margin-right:auto;
    }

    #suggestionsinput {
        width:95%;
    }

}

/* Medium desktop / Tablet (landscape) */
@media only screen 
and (min-width : 1024px) {

    body {
        margin-left:200px;
    }

    header {
        width:600px;
        height:200px;
        text-align:center;
        line-height:200px;
        font-size:4em;
        margin-left:0px;
    }

    .buttonContainer {
        width:600px;
    }

    .button {
        width:150px;
        margin-bottom:50px;
    }

    .button:hover {
        width:150px;
    }

    .tileContainer {
        margin-left:0px;
        margin-right:0px;
    }

    .decoration {
        width:180px;
        height:900px;
        background-color:#eeeeff;
        position:absolute;
        left:0px;
        top:0px;
        display:inline;
    }

    .adsense {
        width:160px;
        height:600px;
        background-color:#ddddff;
        position:absolute;
        left:825px;
        top:200px;
    }

    #largead {
        display:block;
    }

    #smallad {
        display:none;
    }

    .picturesContent {
        width:600px;
        padding-top:25px;
        padding-left:0px;
        margin-left:0px;
        margin-right:0px;
    }

    .milestonesContent {
        width:600px;
        padding-top:25px;
        padding-left:0px;
    }

    .suggestionsContent {
        width:600px;
        padding-top:25px;
        padding-left:0px;
        padding-bottom:25px;
    }

    .videosContent {
        width:600px;
        padding-top:25px;
        padding-left:0px;
        margin-left:0px;
        margin-right:0px;
    }
}

/* Large desktop */
@media only screen 
and (min-width : 1200px) {

    header {
        width:800px;
    }

    .buttonContainer {
        width:800px;
    }

    .button {
        width:200px;
        margin-bottom:50px;
    }

    .button:hover {
        width:200px;
    }

    .tileContainer {
        width:800px;
        padding-left:100px;
        margin-left:0px;
        margin-right:0px;
    }

    .picturesContent {
        width:800px;
        padding-top:25px;
        padding-left:0px;
        margin-left:0px;
        margin-right:0px;
    }

    .milestonesContent {
        width:800px;
        padding-top:25px;
        padding-left:0px;
    }

    .suggestionsContent {
        width:800px;
        padding-top:25px;
        padding-left:0px;
        padding-bottom:25px;
    }

    .videosContent {
        width:800px;
        padding-top:25px;
        padding-left:0px;
        margin-left:0px;
        margin-right:0px;
    }

   .adsense {
        left:1025px;
    }

    #largead {
        display:block;
    }

    #smallad {
        display:none;
    }
}