/* ToDoList - Project */
/* BODY */
html, body {
background-color:#222;
text-decoration:none;
text-align:center;
color:#fff;
}
a {
color:#aaa;
text-decoration:underline;
transition:0.3s;
}
a:hover {
color:#fff;
text-shadow:
0px 0px 3px #459cce,
0px 0px 5px #fff;
}

/* Scrollbar - inspired by Steam <3 */
::-webkit-scrollbar,
::-webkit-scrollbar-corner { /* Track + Corner of SB */
width:17px;
background-color:#171717;
}

::-webkit-scrollbar-thumb { /* Slider style */
background-color:#444;
background-image:url(track.png);
background-position:center;
background-repeat:no-repeat;
border:1px solid #171717;
}

::-webkit-scrollbar-button:vertical:decrement { /* Button TOP */
height:23px;
background-position:center 8px;
background-image:url(up.png);
background-repeat:no-repeat;
background-color:#444;
border:1px solid #171717;
border-bottom:none;
}
::-webkit-scrollbar-button:vertical:increment { /* Button BOTTOM */
height:23px;
background-position:center 8px;
background-image:url(down.png);
background-repeat:no-repeat;
background-color:#444;
border:1px solid #171717;
border-top:none;
}

::-webkit-scrollbar-button:vertical:decrement:hover,
::-webkit-scrollbar-button:vertical:increment:hover,
::-webkit-scrollbar-thumb:hover { /* Hover styles */
background-color:#555;
}
/* Scrollbar - inspired by Steam <3 */

/* H2 - Text */
#h_main_container {
position:relative; top:-10px;
height:80px;
width:80%;
/* width:1150px; */
min-width:750px; /* for mobile devices */
/* min-width:1000px; */
/*background-color:#2d2d2d;*/
background:linear-gradient(90deg,#252525,#2d2d2d,#252525);
margin:0 auto;
border-radius:360px;
box-shadow:
0px 0px 10px #111,
0px 1px 10px #111;
}
h2 {
font-size:2.5em;
padding-top:7px;
color:#202020;
letter-spacing:0.125em;
text-shadow:
-1px -1px 1px #000,
2px 2px 1px #383838;
}
#head_signature {
font-size:1.3em;
position:relative; top:-33px;
color:#202020;
letter-spacing:0.125em;
text-shadow:
-1px -1px 1px #000, 
1px 1px 0px #363636;
}
/* Main Frame */
#main_frame {
position:relative; top:15px;
height:620px;/*555*/
width:70%;
/* width:1000px; */
min-width:800px; /* for mobile devices */
background:linear-gradient(#2a2a2a, #1f1f1f);
margin:0 auto;
/* margin-bottom:15px; */
border-radius:5px;
box-shadow:
-1px -1px 3px #111,
2px 2px 3px #404040;
}
/* List Frame */
#list_frame {
position:relative; top:5px;
height:535px;/*600*/
width:90%;
/* width:900px; */
min-width:380px; /* for mobile devices */
/*background-color:#555; /* dev only */
margin:0 auto;
overflow-y:scroll; /* => vertical-scrollbar is always visible */
}
/* Todo - List */
#main_table_top {
position:relative; top:5px; right:8px;
width:81%;
/* width:875px; */
/* min-width:350px; */ /* for mobile devices */
color:#fff;
border:3px solid #151515;
background:rgba(0, 83, 138, 0.06);
box-shadow:0px 1px 10px #111, 0px 5px 5px rgba(0,0,0,0.2);
margin:0 auto;
}
#main_table {
position:relative;
width:90%;
/* width:850px; */
min-width:350px; /* for mobile devices */
margin:0 auto;
color:#fff;
border:3px solid #151515;
background:rgba(0, 83, 138, 0.06);
margin-left:5px;
margin-top:5px;
box-shadow:0px 1px 10px #111;
margin:0 auto;
}
.list_item {
font-size:1.2em;
}
.date, .state{
width:15%;
}
.entry {
width:70%;
}
#date {
width:15%;
/* width:140px; */
height:35px;
font-size:1.5em;
font-variant:small-caps;
color:#ddd;
font-family:impact;
letter-spacing:7px;
text-shadow:0px 0px 5px #459cce, 0px 0px 10px #459cce, 0px 0px 15px #fff;
}
#entry {
width:70%;
/* width:700px; */
height:35px;
font-family:;
}
#deadline {

}
.obo_ph { /*order|by|or|=>placeholder*/
font-size:1.25em;
color:#ddd;
padding-left:5px;
padding-right:5px;
}
#state {
width:15%;
/* width:139px; */
height:35px;
font-size:1.5em;
font-variant:small-caps;
color:#ddd;
font-family:impact;
letter-spacing:7px;
text-shadow:0px 0px 5px #459cce, 0px 0px 10px #459cce, 0px 0px 15px #fff;
}
.orderByActive {
color:#fff;
text-shadow:0px 0px 2px #fff;
letter-spacing:1px;
}
#tasks:hover, #deadline:hover {
text-decoration:none;
text-shadow:0px 0px 2px #111;
}

#date a, #state a, #entry a {
font-size:1.5em;
font-variant:small-caps;
color:#ddd;
}

.state_check {
width:30px;
height:30px;
cursor:pointer;
}
/* HR & Post-Frame */
#post_frame{ /* => gets "windowed" if post btn was pressed */
margin:0 auto;
width:90%;
min-width:775px; /* for mobile devices */
/* min-width:1000px; */
height:2px;
position:relative; top:-6px;
/*background-color:#2d2d2d;*/
background:linear-gradient(#2a2a2a, #1f1f1f);
border-radius:10px;
box-shadow:
-1px -1px 1px #000,
1px -1px 1px #000,
1px 1px 1px #404040;
transition:0.3s;
overflow:hidden;
}
#post_frame_form_container {
text-align:left;
position:relative; left:1%; top:5px;
width:400px;
height:90px;
margin:0 auto;
/*background-color:gray;*/
}
#post_form {
position:relative;
margin:0 auto;
}

#post_entry_container {
/*background-color:red;*/
width:200px;
position:relative;
float:left;
height:90px;
}
#post_entry_disc {
position:absolute; left:1px; top:-2px;
color:#ccc;
display:none;
}
#post_entry {
width:150px;
height:60px;
min-width:175px;
max-width:175px;
max-height:60px;
background-color:#333;
border-style:none;
outline:none;
color:#fff;
box-shadow:
-1px -1px 2px #111,
2px 2px 2px #444;
transition:0.3s;
}
#post_entry:focus {
border-style:none;
outline:none;
background-color:rgba(63, 150, 200, 0.1);
}

#post_note_container {
/*background-color:green;*/
width:200px;
position:relative; left:200px; top:-2px;
height:50px;
}
#post_note_disc {
position:absolute; left:1px; top:-1px;
color:#ccc;
display:none;
}
#post_note {
position:absolute; left:0px;
width:187px;
color:#fff;
background-color:#333;
border-style:none;
outline:none;
box-shadow:
-1px -1px 2px #111,
2px 2px 2px #444;
transition:0.3s;
}
#post_note:focus {
border-style:none;
outline:none;
background-color:rgba(63, 150, 200, 0.1);
}

#post_check_container {
/*background-color:blue;*/
position:relative; left:200px; top:-6px;
width:200px;
height:40px;
}
#post_check_disc {
position:absolute; left:0px;
color:#ccc;
}
#post_check {
position:absolute; left:85%; bottom:18px;
width:17px;
height:17px;
box-shadow:0px 0px 5px #111;
background:rgba(63, 150, 200, 0.1);
display:block;/*custom checks*/
}

#post_submit {
position:absolute; bottom:1px; left:200px;
width:190px;
height:20px;
background-color:#333;
border-style:none;
outline:none;
box-shadow:
-1px -1px 2px #444,
2px 2px 2px #111;
color:#ccc;
transition:0.3s;
}
#post_submit:active {
border-style:none;
outline:none;
box-shadow:
-1px -1px 2px #111,
2px 2px 2px #444;
}

/* Stuff :) */
.big_bullet_l {
font-size:5em;
position:absolute; left:30px; top:-4px;
color:#202020;
text-shadow:
-1px -1px 1px #000,
2px 2px 1px #383838;
cursor:default;
}
.big_bullet_r {
font-size:5em;
position:absolute; right:30px; top:-4px;
color:#202020;
text-shadow:
-1px -1px 1px #000,
2px 2px 1px #383838;
cursor:default;
}
/* Welcome & LogOut */
#welcome {
position:relative;
min-width:775px;
color:#bbb;
}
/* Search */
#search, #search form {
display:block;
position:relative; top:3px;
min-width:775px;
}
.search_bar {
position:relative;
width:175px;
height:18px;
color:#bbb;
outline:none;
border:none;
background-color:rgba(0,0,0,0.15);
box-shadow:0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0,0,0,0.2) inset;
}
.search_bar:focus {
-webkit-animation:login_glow 0.5s infinite alternate;
animation:login_glow 0.5s infinite alternate;
}
#search_btn {
width:100px;
height:18px;
background-color:rgba(17, 17, 17, 0.5);
border:none;
color:#aaa;
}
/* DONE - Style */
.done {
color:#ccc;
font-style:oblique;
text-decoration:line-through;
}
/* Textarea Design => EditTask */
.editTaskArea {
width:95%;
height:125px;
color:#bbb;
outline:none;
border:none;
background-color:rgba(0,0,0,0.15);
box-shadow:0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0,0,0,0.2) inset;
position:relative; top:5px;
overflow:auto;
margin:0 auto;
}
/* Deadline - mark - Style */
.dl_today {
color:orange;
}
.dl_expired {
color:red;
}
.dl_1or2days {
color:yellow;
}
/* Task - States */
#task_states {
position:relative;
margin:0 auto;
text-align:center;
font-size:18px;
color:#FFC200;
}
/* ################## */
/* LogIn Page */
#login_note {
font-size:1.3em;
position:relative; top:10px;
color:#bbb;
}
#login_form {
width:375px;
height:225px;
box-shadow:0px 0px 5px #111, 0px 0px 8px #111;
margin:25px auto;
border-radius:5px;
}
.login_form_text {
font-size:1.1em;
color:#999;
}
#login_form input[type="text"], input[type="password"] {
width:250px;
background-color:rgba(17, 17, 17, 0.5);
border:none;
color:#aaa;
box-shadow:0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.2) inset;
}
#login_form input[type="submit"] {
width:150px;
height:25px;
background-color:rgba(17, 17, 17, 0.5);
border:none;
color:#aaa;
position:relative; top:10px;
}
#login_form input[type="text"]:focus, input[type="password"]:focus {
border:none;
outline:none;
-webkit-animation:login_glow 0.5s infinite alternate;
animation:login_glow 0.5s infinite alternate;
}
/* Webkit */
@-webkit-keyframes
login_glow {
0% {box-shadow:0px 0px 1px #459cce;}
100% {box-shadow:0px 0px 10px #459cce;}
}
/* Mozilla */
@-moz-keyframes
login_glow {
0% {box-shadow:0px 0px 1px #459cce;}
100% {box-shadow:0px 0px 10px #459cce;}
}
/* IE */
@-ms-keyframes
login_glow {
0% {box-shadow:0px 0px 1px #459cce;}
100% {box-shadow:0px 0px 10px #459cce;}
}
/* ####################################### */
/* New Checkboxes by MK .. like everything else =P */
input[type=checkbox] {
display:none;
}

/* Checkbox "Unchecked - Checked" Design */
input[type="checkbox"] + label {
width:23px;
height:23px;
border:4px solid #000;
display:inline-block;
position:relative; left:0px; top:2px;
transition:0.3s;
box-shadow:0px 0px 5px #111 inset, 0px 0px 1px #111;
}

input[type="checkbox"]:checked + label {
width:23px;
height:23px;
border:4px solid rgba(0, 187, 0, 0.75);
}

/* Checked State */
input[type="checkbox"]:checked + label:before { /* Haken */
content:"";
z-index:2;
height:0px;
width:5px;
position:absolute;
top:10px;
left:2px;
display:inline-block;
border-radius:7px;
background-color:#ddd;
transform:rotate(-45deg);
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
-ms-transform-origin:left top;
-webkit-animation:haken 0.2s ease 0s forwards;
-moz-animation:haken 0.2s ease 0s forwards;
-ms-animation:haken 0.2s ease 0s forwards;
}
input[type="checkbox"]:checked + label:after { /* Strich */
content:"";
z-index:1;
height:0px;
width:5px;
position:absolute;
top:22px;
left:14px;
display:inline-block;
border-radius:7px;
background-color:#ddd;
transform:rotate(-140deg);/*-135*/
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
-ms-transform-origin:left top;
-webkit-animation:strich 0.4s ease 0s forwards;
-moz-animation:strich 0.4s ease 0s forwards;
-ms-animation:strich 0.4s ease 0s forwards;
}

/* Unchecked State */
input[type="checkbox"] + label:before { /* Haken */
content:"";
/*Unused*/
}
input[type="checkbox"] + label:after { /* Strich */
content:"";
/*Unused*/
}

/* Animations */
/* Webkit */
@-webkit-keyframes
haken {
0% {height:0px;}
100% {height:15px;}
}
@-webkit-keyframes
strich {
0% {height:0px;}
50% {height:0px;}
100% {height:30px;}
}
/* Mozilla */
@-moz-keyframes
haken {
0% {height:0px;}
100% {height:15px;}
}
@-moz-keyframes
strich {
0% {height:0px;}
50% {height:0px;}
100% {height:35px;}
}
/* IE */
@-ms-keyframes
haken {
0% {height:0px;}
100% {height:15px;}
}
@-ms-keyframes
strich {
0% {height:0px;}
50% {height:0px;}
100% {height:35px;}
}