/* Mobile Responsive styles from http://www.w3schools.com/css/css_rwd_grid.asp */

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

.list_container{
	width:95%;
	margin:auto;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
	
	.list_container{width:80%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

[class*="col-"] {
    float: left;
    padding: 15px;
    /*border: 1px solid red;*/
}

* {box-sizing: border-box;}

.row::after {
    content: "";
    clear: both;
    display: block;
}


/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
}



/* -------------------------------- */
/* Author: Brayden Sorenson */
ul {
	list-style: none; 
	padding: 0;
	margin: 0;
}

li{
	border:1px solid #ccc;
	padding: 0;
}

div[id*="delete"]{
	font-family:arial, Helvetica, sans-serif;
	font-weight:bold;
	color: red;
	margin-right:2%;
	display:inline-block;
	float:right;
	cursor:pointer;
}

.background{
	width:100%;
	height:100%;
	background-image:url("wrinkledpaper.jpg");
	background-size:cover;
	background-attachment:scroll;
	box-shadow: 1px 0px 8px;
	margin-top: 10px;
}

.centered{
	text-align: center;
	margin:auto;
}

.login_form{
	border: 1px solid black;
	background-color:#eee;
	border-radius:5px;
	box-shadow: 5px 5px 20px #888888;
	padding-top:3%;
	padding-bottom:3%;
	max-width:400px;
}

.login_form input[type="text"], .login_form input[type="password"]{
	width:75%;
	margin-bottom:10px;
}

.login_form input[type="submit"]{
	width:75%;
	padding:2%;
	margin:1%;
}

.header{
	border-bottom:1px solid gray;
	box-shadow:0px 0px 8px;
	width:100%;
	position:fixed;
	padding-top:5px;
	padding-bottom:5px;
	padding-right:0px;
	padding-left:5px;
	margin-bottom:px;
	top:0px;
	left:0px;
	background-color:#eeeeee;
	font-size:18px;
}

.header a{
	color:black;
}

input[type="text"], input[type="submit"], input[type="password"]{
	margin-bottom:10px;
	width:100%;
	padding:2px;
	font-size:18px;
}

.seventyfive {width:75%;}

#logged_in{
	display:inline-block;
	float:left;
}

#log_out{
	display:inline-block;
	float:right;
}

#status{
	display:inline-block;
	background-color:#eeeeee;
	width:14px;
	height:14px;
	border:1px solid gray;
	border-radius:100%;
	margin-bottom:10px;
	vertical-align:middle;
}

#server_response{
	display:inline-block;
	font-size:14px;
	margin-left:10px;
	margin-bottom:10px;
	vertical-align:middle;
}

#item_text{
	display:inline;
	font-size:18px;
}

.completed{background-color:rgba(10,250,100,0.7);}
.incomplete{background-color:rgba(200,200,200,0.5);}