/* GLOBAL */
body,html { font-family: 'Exo 2', sans-serif; }
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { 
    background-color:none!important;
    background-image: url(/images/logo-large-tilted.png);
    background-repeat: repeat;
}
h5.username { font-size:18pt; padding:0; margin:0;}
h5.field-title { padding:0; margin:0; border:1px solid #dadada; border-radius:15px 15px; background-color:darkblue; color:white; text-shadow:none;letter-spacing: 0.75pt;}
h2 {margin:0px;}
p.token { font-family:monospace; font-size:200%;}
a { text-decoration: none;}
a.black { color: black;}


.sixpixme { font-weight:bold;  }
.help.question { margin-bottom:4px; padding-bottom:0px; margin-top:25px; font-weight:bold; font-style: italic; color:darkblue;}
.help.answer { margin-top:4px; padding-top:0px; }

.something-went-wrong { border: 2px solid red; color:red; padding:5px; margin:5px; font-size:10pt; font-weight:bold;}

/* user-stats */
ul#user-stats { margin-top:-20px;}
ul#user-stats li { list-style-type: none; margin-left:-40px; font-size:9pt;   color:darkred;}
ul#user-stats li span.label { font-weight:bold;}

/* site-stats */
ul#site-stats { margin-top:-10px; margin-bottom:-5px;}
ul#site-stats li { list-style-type: none; margin-left:-40px; font-size:15pt;   color:darkred;}
ul#site-stats li span.label { font-weight:bold;}

/* wrapper */
div#site-wrapper { width:100%; display:inline-block;   text-align:center;}

/* container */
div#site-container { padding: 10px;  margin:10px auto;   display:inline-block; width:300px; max-width:300px; min-width:300px; border:1px solid #dadada; border-radius: 15px 15px; background-color:#eeeeee;}

/* terms of service */
div#terms-of-service { text-align:left; max-width:280px; padding:0px 3px; border:1px solid transparent; font-size:80%; }

/* help  */
div#help { text-align:left; max-width:280px; padding:0px 5px 0px 0px; border:1px solid transparent; }

/* contact  */
div#contact { text-align:center; max-width:280px; padding:0px 5px 0px 0px; border:1px solid transparent; }
div.g-recaptcha { padding: 10px 0; width:280px;}

/* privacy  */
div#privacy { text-align:left; max-width:280px; padding:0px 5px 0px 0px; border:1px solid transparent; font-size:80%;}

/* tagline */
div.tagline { padding:5px 0px 10px 0px; color:black;}

/* error message */
h2.message { color: #ff0000; }

/* form message */
div.form-message { display:none; color:red; padding-bottom:5px;}

/* form help */
div.form-help { width:80%; font-size:80%; margin:-3px auto 15px auto;}

/* site title */
div#site-title { text-align:center; font-size:200%;}

/* footer */
.footer { color:black; padding: 10px 3px 4px 3px; font-size:80%;}

/* input fields */
div.ui-input-text { width: 250px; margin:10px auto; }
div.ui-btn  { width:210px; margin:10px auto;}
div.ui-checkbox { width:250px; margin: 10px auto 0px auto; }
div.ui-checkbox label { font-size:80%; padding-left:40px;}
textarea.ui-input-text { width:250px; height:100px!important; margin:10px auto 0px auto;}

textarea.contact { margin-bottom:8px;}

/* simple link */
a.simple-link { text-decoration: none; }
a.simple-link:hover { text-decoration: none; font-weight:bold;}

/* blink */
.blink { background-color: #D16587;}

/* hidden */
.hidden {display: none;}

/* 6 button */
.clock-button:hover, .clock-button-all { cursor: pointer; }

/* full screen */
#fullscreen { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%;
    z-index:-99;
    background-size: 100%;
    background-color:white;
    background-repeat:no-repeat;
}
#fullscreen img { display:inline; margin:0 auto; text-align:center;}

div.fullscreen.footer {
    margin-top:-50px;
    text-shadow:none;
    text-align:center;
    color:white!important;
    font-weight:normal!important;
    font-size:12pt!important;
    font-family:verdana;
    letter-spacing: 1pt;
}



#fullscreen:hover {
    cursor:pointer;
}



/* upload area */

body.member.logged-in div.ui-input-text {
	height:120px;
	float:left;
	display:inline-block;
	width:98%;
	font-size:14pt;
	color:#000000;
}

#photo-upload-button {
	float:left;
	padding: 3px 3px 0 8px;
}
/*#photo-upload-form-wrapper {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 1px solid #999999;
    height: 100px;
    width: 80%;
    padding-left: 10px;
    display: none;
    clear: left;
    display: none;
    background: url('/images/uploadbox.png') no-repeat ;
    background-size: cover;
}*/
#photo-upload-form-wrapper h3 { margin: 7px; }
#photo-upload-form-wrapper input#fileToUpload  { margin-left:80px; }
a.upload-href {text-decoration: none; font-size:13pt; padding-bottom:5px; }

/* photos */
.photo { padding-top:8px; padding-bottom:8px; }

.photo img {
    border:6px solid white;
    border-radius: 15px 15px;
    box-shadow: 5px 4px #555;
}

#bottom-links { padding-top:10px;}
#bottom-links h5 { margin:12px 0;}

/* upload photos (manually) */
button#upload { 
    display:block; 
    margin:10px auto; 
    text-align:center; 
    width: 70%; 
    height:30px; 
    line-height: 6pt;
    font-size:9.3pt;
}
#upload-area input[type=file] { display:none; }
#upload-area div.ui-input-text { display:none; }

/* drag and drop */

div.filename { display:none; }
div.filesize { display:none; }
div.progressBar { float:none;}
div.statusbar { width:90%; }

div.upload-formats.top { font-size:10pt;}
div.upload-formats.bottom { font-size:9pt;}

#dragandrophandler {
    margin:0 auto;
    border:2px dotted #0B85A1;
    width:80%;
    height:130px;
    color:#222222;
    /*text-align:center;vertical-align:middle;*/
    padding:10px;
    margin-bottom:10px;
    margin-top:10px;
    font-size:100%;
}
.progressBar {
    width: 200px;
    height: 22px;
    border: 1px solid #ddd;
    border-radius: 5px; 
    overflow: hidden;
    display:inline-block;
    margin:0px 10px 5px 5px;
    vertical-align:top;
}
.progressBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #0ba1b5; border-radius: 3px; 
}
.statusbar {
    border-top:1px solid #A9CCD1;
    min-height:25px;
    width:700px;
    padding:10px 10px 0px 10px;
    vertical-align:top;
}
.statusbar:nth-child(odd) {
    background:#EBEFF0;
}
.filename {
    display:inline-block;
    vertical-align:top;
    width:250px;
}
.filesize {
    display:inline-block;
    vertical-align:top;
    color:#30693D;
    width:100px;
    margin-left:10px;
    margin-right:5px;
}
.abort {
    background-color:#A8352F;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;display:inline-block;
    color:#fff;
    font-family:arial;font-size:13px;font-weight:normal;
    padding:4px 15px;
    cursor:pointer;
    vertical-align:top
}


/* drag and drop */


/* menu */
div#menu { margin:-11px 0 0 0; padding:0px 0px 0px 1px; }

div#menu ul { width:320px; margin-left:-17%; height:20pt;}
div#menu ul li.menu.item.active { opacity:.5;}
div#menu i.fa { font-size:22pt; color:white; }
div#menu ul li { list-style-type: none; float:left; padding:2px 0px;  }

div#menu ul#icon-menu li { background-color:darkblue; border-left:1px solid white; border-right:1px solid white; }
div#menu ul#icon-menu li:hover { opacity: .5; cursor:pointer;}
div#menu i.fa { font-size:22pt; color:white;}

div#menu ul#text-menu { margin-top:-7px;}
div#menu ul#text-menu li { list-style-type:none; float:left; font-size:8pt; border-left:1px solid transparent; border-right:1px solid transparent;}
div#menu ul#text-menu li:hover {   cursor:pointer;}

/* tools */
div.tools {  display:inline-block; width:24px; float:right; text-align:center;}

/* trash */
div.trash { display:inline-block; float:right; }
a i.fa-trash-o { color:black; font-size:19pt; padding-right:2px; }
a i.fa-trash-o:hover { color:#444444;}

/* rotate */
div.rotate { display:inline-block; float:right;margin-top:5px; }
a i.fa-repeat { color:black; font-size:15pt; }
a i.fa-repeat:hover { color:#444444;}

body.member .blurb-container { 
    /*margin-top:-25px;*/
    display:inline-block;
}

.blurb { 
    border: 1px solid #bbbbbb; 
    border-radius: 15px 15px; 
    padding: 5px; 
    margin:5px; 
    background-color:#d8d8d8; 
}

div.background-number {
    font-size: 450%;
    padding-left:30px;
    display:block;
    position:absolute;
    margin-top:5px;
    color:#eaeaea;
    font-family:"Chewy";
}

body.visitor div.background-number {
    margin-top:-3px;
    font-size:350%;    
}
/* clock */
div.seconds-dots.dot {
    font-size:11pt; 
    font-family:"sans-serif"; 
    float:left; 
    padding:1px 1px; 
    margin:0 2px; 
    line-height: 5pt; 
    color:black; 
    width:10%; 
    font-weight:bold;
}
div.seconds-dots.container {
    display:block;
    clear:left; 
    padding-top:2px;  
    padding-left:8px; 
    width:auto; 
}
.dot-transpired { color:red!important; }
.dot-blink { color:transparent!important; }

.clock {  
    display:inline-block; 
    margin-left:23px; 
}
.clock-button-all-container,
.clock-button-all-label-container { 
    display:inline-block; 
    margin: 0 auto;
}
.clock-button-all-container {
    margin-bottom:10px;
}
.clock-button-all-label { 
    display:block; 
    float:left;  
    width:25px; 
    height:25px;  
    margin:2px 8px; 
    font-size:9pt; 
    text-align:center;

}
.clock-button-all { 
    display:block; 
    float:left;  
    width:25px; 
    height:25px; 
    border:1px solid black; 
    border-radius: 20% 20%; 
    background-color:orange; 
    color:#222222; 
    font-weight:bold; 
    margin:1px 8px; 
    font-size:12pt; 
    text-align:center;
    line-height:26px;
    font-family:"Chewy", sans-serif;
}
a.clock-button-all { color:#222222!important; text-decoration: none!important; }
a.clock-button-all:hover { background-color:yellow;}

.clock-button { 
    display:block; 
    float:left;  
    width:18px; 
    height:18px; 
    border:1px solid black; 
    border-radius: 20% 20%; 
    background-color:orange; 
    color:#222222!important; 
    margin:3px 12px; 
    font-size:9pt; 
    line-height:18px;
    text-align:center;
    font-family:"Chewy",sans-serif;
}
a.clock-button { color:#222222!important; text-decoration: none!important; }
a.clock-button:hover { background-color:yellow;}


.clock-label { 
    display:block; 
    float:left;  
    width:25px; 
    height:8px; 
    border:1px solid transparent; 
    margin:1px 8px; 
    font-size:7pt; 
    text-align:center;
}
.clock-time { 
    display:block; 
    float:left;  
    width:25px; 
    height:25px; 
    border:1px solid #dadada; 
    margin: 1px 8px; 
    background-color:snow; 
    text-align:center; 
    line-height: 26px; 
    font-family: 'Chewy', sans-serif; 
    /*font-family: 'News Cycle', sans-serif; */
    font-weight:bold; 
    border-radius:20% 20%;
    letter-spacing: .8pt;
}