/*Start by resetting everything, for IE7's sake*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}



body,
html {
    margin:0;
    padding:0;
    color:#000;
    font-family:"Trebuchet MS",Trebuchet,Verdana,Tahoma,Arial,sans-serif;
    font-size:14px;
    line-height:160%;

}


body {

       /*background-color: rgb(50, 50, 50);*/
	background-color: #000;
}


#wrapper{
    margin-left:auto;
    margin-right:auto;
    top:75px;
    width:100%;
    max-width:900px;
    position:relative;
    padding-left:0;
    padding-right:0;
}

#logo {
    float:left;
    position:absolute;
    left:25px;
    top:0px;
    /*margin-left:50px;*/
}

#lightpool {
    background-attachment: fixed;
  	background-image: url(../images/lightpool.gif);
  	background-repeat: no-repeat;

}



#intro {
    position:absolute;
    left:230px;
    top:0px;
    color:white;
    font-size:16px;
    padding-left:7px;
    padding-bottom:1em;
    
}

#topics{
    position:absolute;
    left:230px;
    top:120px;

}

.topic{
    height:50px;
    width:250px;
}

.topicName {
    padding:7px;
}

#contact {
    position:absolute;
    left:230px;
    top:400px;
    color:rgb(178,178,178);
    padding-left:7px;
    font-size:12px;
}

#contact a{
    color:rgb(178,178,178);
     color:#fff000;
}

#contact #details{
    display:none;
    padding-top:10px;


}

.yellow{
     color:#fff000;

}

.description{
    display:none;
    height:100px;
    margin-left:50px;
    color:white;
}

#textarea{
    display:none;
    position:absolute;
    left:490px;
    top:120px;
    width:400px;
    /*height:180px;*/

    padding:15px;
    border: 2px dotted #fff000;
}

#textarea p{
    font-size:14px;
    color:white;
    margin-bottom:0.5em;

}

.tip{
    text-decoration:underline;
}
.tipclass{
    display:block;

}

.handcursor{
    cursor:pointer;
}

.current {
    padding:5px;
    border: 2px dotted #fff000;
}

/* Make images scale within their containers */
img {
    max-width:100%;
    height:auto;
}

/* Responsive layout for small screens */
@media (max-width: 768px) {
    html, body {
        font-size:16px;
        line-height:1.6;
    }
    body {
        overflow-x:hidden;
    }

    #wrapper{
        top:0;
        box-sizing:border-box;
        padding-left:28px;
        padding-right:28px;
    }

    #logo{
        position:static;
        float:none;
        margin:16px auto 8px auto;
        text-align:center;
    }

    #intro{
        position:static;
        left:auto;
        top:auto;
        padding-left:0;
        padding-bottom:20px;
        text-align:center;
        font-size:18px;
        margin-top:24px;
    }

    #topics{
        position:static;
        left:auto;
        top:auto;
        margin-top:16px;
        margin-bottom:24px;
    }

    .topic{
        width:100%;
        height:auto;
        margin-bottom:24px;
    }

    .topicName{
        padding:0;
        text-align:left;
    }

    /* Show description under each heading on mobile */
    .description{
        display:block;
        height:auto;
        margin:8px 0 0 0;
        color:white;
        font-size:15px;
    }

    /* Constrain text line length for readability */
    #intro p,
    .description,
    #contact {
        max-width:36rem;
        margin-left:auto;
        margin-right:auto;
    }

    #contact{
        position:static;
        left:auto;
        top:auto;
        padding-left:0;
        font-size:14px;
        margin-top:28px;
    }

    #contact #details{
        display:block;
        padding-top:8px;
    }

    /* Hide floating textarea tooltip on mobile */
    #textarea{
        display:none !important;
    }

    /* Avoid outlines around current on small screens */
    .current{
        border:none;
        padding:0;
    }
}

/* Bump text size further on very small phones without changing layout */
@media (max-width: 480px) {
    html, body {
        font-size:18px;
    }
    #intro {
        font-size:20px;
    }
    #textarea p {
        font-size:16px;
    }
    #contact {
        font-size:14px;
    }
}