/*
Created for Microscopy Australia - myscope-explore.org by Andres Vasquez
—— www.andresvasquez.net ——
*/

@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

/*	PRESETS
	------------------	*/

html {
    height: 100%;
}

body {
    font-family: "Droid Sans", sans-serif;
    color: #1d1d1b;
    line-height: 30px;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    background: #ffffff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* Selection colours (easy to forget) */

::selection {
    background: rgb(238, 213, 217);
}

::-moz-selection {
    background: rgb(238, 213, 217);
}

img::selection {
    background: transparent;
}

img::-moz-selection {
    background: transparent;
}

body {
    -webkit-tap-highlight-color: rgb(238, 213, 217);
}


/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */


/* hotfix */

body {
    width: 896px;
    padding: 20px 25px 84px;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%;
    /* Stops Mobile Safari from auto-adjusting font-sizes */
    top: 0px;
}

#sideActivitiesTable,
#lessonPlansTable,
#resourcesTable,
#glossaryTable,
#sideActivitiesTitle,
#lessonPlansTitle,
#resourcesTitle,
#glossaryTitle {
    width: 650px;
    margin: 0 auto;
}

#sideActivitiesTitle,
#lessonPlansTitle,
#resourcesTitle,
#glossaryTitle {
    text-align: center;
    color: #004685;
    font-size: 30px;
    font-weight: 400;
    padding-bottom: 12px;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #324b9b;
}

#lessonsIntro {
    padding: 14px;
    width: 650px;
    text-align: center;
    margin: 0 auto;
    color: #464642;
}

#goback {
    padding-bottom: 1%;
}

table {
    width: 650px;
}

td {
    padding: 15px 5px 5px;
}

#sideActivitiesTable td:nth-child(1),
#lessonPlansTable td:nth-child(1),
#resourcesTable td:nth-child(1),
#glossaryTable td:nth-child(1) {
    color: #324b9b;
    font-weight: 700;
    line-height: 30px;
    width: 30%;
}

#sideActivitiesTable td:nth-child(2),
#lessonPlansTable td:nth-child(2),
#resourcesTable td:nth-child(2),
#glossaryTable td:nth-child(2) {
    width: 70%;
}

#sideActivitiesTable tr:hover,
#lessonPlansTable tr:hover,
#resourcesTable tr:hover {
    background-color: #fbdf6e;
    cursor: pointer;
}


/* ------------- tooltip ----------------------- */

.ui-tooltip {
    background-image: -webkit-linear-gradient(90deg, rgba(128, 180, 164, 0.6) 0%, rgba(131, 198, 180, 0.7) 29%, rgba(130, 181, 165, 0.7) 30%, rgba(128, 180, 164, 0.6) 69%, rgba(130, 181, 165, 0.6) 70%, rgba(255, 255, 255, 0.8) 100%);
    background-image: linear-gradient(0deg, rgba(128, 180, 164, 0.6) 0%, rgba(131, 198, 180, 0.7) 29%, rgba(130, 181, 165, 0.7) 30%, rgba(128, 180, 164, 0.6) 69%, rgba(130, 181, 165, 0.6) 70%, rgba(255, 255, 255, 0.8) 100%);
    background-color: rgba(219, 216, 213, 10);
    box-shadow: 5px 9px 6px 0px rgba(0, 0, 0, 0.5);
    font-family: "Droid Sans", sans-serif;
    color: #313131;
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
    border: none;
    padding: 0;
    opacity: 1;
}

.ui-tooltip-content {
    position: relative;
    padding: 10px;
}

.ui-tooltip-content::after {
    right: 100%;
    top: 12px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #b9ccc4;
    border-width: 10px;
    margin-top: 0px;
}


/* ------------- end tooltip ----------------------- */


/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      87   181    275    369    463    */

@media only screen and (min-width: 480px) and (max-width: 769px) {
    body {
        width: 463px;
        padding: 0;
        margin: 0 auto;
    }
    #sideActivitiesTable,
    #lessonPlansTable,
    #resourcesTable,
    #glossaryTable,
    #sideActivitiesTitle,
    #lessonPlansTitle,
    #resourcesTitle,
    #glossaryTitle {
        width: 470px;
        margin: 0 auto;
    }
    table {
        width: 463px;
    }
    td {
        padding: 15px 5px 5px;
    }
    #sideActivitiesTable td:nth-child(1),
    #lessonPlansTable td:nth-child(1),
    #resourcesTable td:nth-child(1),
    #glossaryTable td:nth-child(1) {
        color: #1d1d1b;
        font-weight: 400;
        line-height: 100%;
        width: 30%;
    }
    #sideActivitiesTable th,
    #lessonPlansTable th,
    #resourcesTable th,
    #glossaryTable th {
        color: #324b9b;
        font-weight: 700;
        line-height: 30px;
        width: 30%;
    }
    #sideActivitiesTitle,
    #lessonPlansTitle,
    #resourcesTitle,
    #glossaryTitle {
        margin-bottom: 20px;
    }
    #lessonsIntro {
        padding: 0;
        width: 470px;
        font-size: 19px;
    }
}


/*  ----------------------------------------------------------------------------------*/


/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 25px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      99   197    295    */

@media only screen and (max-width: 479px) {
    body {
        width: 319px;
        padding: 0;
        margin: 0 auto;
    }
    #sideActivitiesTable,
    #lessonPlansTable,
    #resourcesTable,
    #glossaryTable,
    #sideActivitiesTitle,
    #lessonPlansTitle,
    #resourcesTitle,
    #glossaryTitle {
        width: 290px;
        margin: 0 auto;
    }
    table {
        width: 319px;
    }
    td {
        padding: 15px 5px 5px;
    }
    #sideActivitiesTable td:nth-child(1),
    #lessonPlansTable td:nth-child(1),
    #resourcesTable td:nth-child(1),
    #glossaryTable td:nth-child(1) {
        color: #1d1d1b;
        font-weight: 400;
        line-height: 100%;
        width: 30%;
    }
    #sideActivitiesTable th,
    #lessonPlansTable th,
    #resourcesTable th,
    #glossaryTable th {
        color: #324b9b;
        font-weight: 700;
        line-height: 30px;
        width: 30%;
    }
    #sideActivitiesTitle,
    #lessonPlansTitle,
    #resourcesTitle,
    #glossaryTitle {
        margin-bottom: 20px;
    }
    
    #lessonsIntro {
        padding: 0;
        width: 319px;
        font-size: 19px;
        letter-spacing: -1px;
        line-height: 120%;
        margin-bottom: 30px;
    }
}