@font-face {
    font-family: 'FiraSans';
    src: url('/fonts/FiraSans-Regular.eot');
    src: url('/fonts/FiraSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/FiraSans-Regular.woff') format('woff'),
         url('/fonts/FiraSans-Regular.ttf')  format('truetype')
}

body {
    background-color:#000000;
    font-family: 'FiraSans';
    color:#EEEEEE;
    background-image:url('/images/dark_geometric.png');
    background-repeat: repeat;
    /*font-family: Verdana;*/
}

h2 {
    font-size: 30px;
    margin-bottom:1em;
}

#picdropzone { 
    background-color:#CCCCCC;
    border:solid #777777 1px;
}

div.user_content {
    margin-top: 2em;
    border-top:1px #006363 solid;
}


/*
Picture gallery
*/


div.pictures {
    margin-top: 3em;
}

div.pictures div.picture {
    margin:5px;
    float:left;
    position:relative;
}

div.pictures div.hovercontent {
    display:none;
}

div.pictures div.glow {
    /*position:absolute;
    height:300px;
    width:10px;
    z-index: 1;*/
    position: absolute;
    background-color:yellow;
    z-index: 2;
    height: 152px;
    width: 100%;
    opacity: .25;
    filter:alpha(opacity=25);
}

div.pictures div.close {
    margin:5px;
    opacity: .99;
    filter:alpha(opacity=100);
    position:absolute;
    top:5px;
    right:5px;
    z-index: 2;
}

div.pictures div.close button {
    background-color:#FF7373;
    border:1px solid #EE0000;
    color:#EE0000;
    border-radius:5px;
    font-weight:bold;
}

div.pictures div.close button:hover {
    background-color:#FF9999;
}

div.pictures img {
    height:150px;
    position:static;
    border: solid 1px #888888;
    z-index: 1;
}


/*
help button
*/


div.helpme div {
    float:right;
    margin:0px 5px;
}

div.helpme p {
    padding: 5px 5px 0px 0px;
    line-height:120%;
}

div.helpme button {
    background-color:#5CCCCC;
    border:1px solid #006363;
    color:#006363;
    border-radius:5px;
    font-size:28px;
    padding:.2em;
}


div.helpme button:hover {
    background-color:#BBCCCC;
}


/*
Help overlay
*/


div.overlay_container {
    display:none;
    position:absolute;
    left: 0px;
    top: 0px;
    z-index: 3;
}

div.overlay_outside {
    width:100%;
    height:100%;
    position: fixed;
    top:0px;
    left:0px;
    z-index:0;
    background-color:#EEEEEE;
    filter:alpha(opacity=75);
    opacity: .75;
    border: solid 1px #006363;
}

div.overlay_outer {
    position: fixed;
    top:20%;
    left:35%;
    background-color:#000000;
    padding:2em;
}

div.overlay_content p {
    width:350px;
}

div.overlay_content img {
    border: solid 1px #006363;
}


/*
Full size image container
*/

div.fullimage {
    background-color:black;
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    z-index: 3;
    display:none;
    margin: 0px;
    padding: 0px;
}


div.fullimage div.close {
    margin:5px;
    opacity: .99;
    filter:alpha(opacity=100);
    position:fixed;
    top:5px;
    right:5px;
    z-index: 2;
}

div.fullimage div.close button {
    background-color:#111111;
    border:1px solid #EEEEEE;
    color:#EEEEEE;
    border-radius:5px;
}

div.fullimage div.close button:hover {
    background-color:#666666;
}


div.fullimage div.image {
    display:none;
    padding:0px;
    margin:0px; 
    z-index: 1;
    position:relative;
}

div.fullimage div.loading {

}

div.fullimage div.empty {
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    z-index: 0;
}