body{
			background: #eef;
			margin: 100px 0;
		}
        
        textarea, input, button, select { font-family: inherit; font-size: inherit; }
		
		#topMenu{
		    margin: 0;
		    padding: 0 10px;
		    position: fixed;
		    top: 0;
		    left: 0;
		    right: 0;
		    background: rgba( 200, 200, 200, 0.7 );
		    border-bottom: 1px solid #666;
		    box-shadow: 0 5px 5px #999;
		}
		
		#topMenu li{
		    margin: 0 1px;
		    padding: 0 0 5px 0;
		    display: inline-block;
		}
		
		#topMenu li a{
		    color: #257;
		    margin: 0;
		    padding: 7px 20px;
		    text-decoration: none;
		    border: 2px solid #368;
		    border-top: none;
		    border-bottom-left-radius: 5px;
		    border-bottom-right-radius: 5px;
		    font-size: 2em;
		    font-weight: bold;
		    display: block;
		}
		
		#topMenu li span{
		    font-size: 0.7em;
		    margin: 0;
		    padding: 0;
		    width: 100%;
		    display: inline-block;
		    text-align: center;
		}
		
		#topMenu li a.active{
		    color: #257;
		    background: #fff;
		    border: 2px solid #58a;
		    border-top: none;
		}
		
		#topMenu li a:hover{
		    border: 2px solid #fff;
		    border-top: none;
		}
		
		/*
		TOP MENU COLOURS
		*/
		.logout{
		    background: #fcc;
		}
		
		.newItem{
		    background: #cfc;
		}
		
		.search{
		    background: #ccf;
		}
		
		.newTote{
		    background: #333;
		}

        .sortingHat{
            background: #C4A484;
        }
		
		.moveTote{
		    background: #555;
		}
		
		.listTotes{
		    background: #999;
		}
		
		.clearTote{
		    background: #ccc;
		}
		
		
		div.boxContainer{ 
			background: #fff;
			padding: 5px;
			border-top: 2px solid #257;
		}
		
		table.toteDetails th{
		    background: #eef;
		    font-size: 1.5em;
		}
		
		tr.toteItem:hover {
			color: #fff;
			background: #58a;
			cursor: pointer;
		}
		
		tr.toteItem td{
		    border-top: 1px solid #257;
		}
		
		tr.itemLocation td, tr.itemLocation th{
		    font-size: .75em;
		}
        
        .tile{ 
            color: #444;
            background: #fff;
            display: inline-block;
            width: 150px;
            height: 100px;
            padding: 3px;
            margin: 3px;
            vertical-align: top;
            border: 1px dotted #444;
            box-shadow: 3px 3px 5px #fff;
            text-decoration: none;
            overflow: hidden;
        }
        
        .tile:hover{
            color: #257;
            background: #cff;
            border: 1px solid #444;
            box-shadow: 3px 3px 5px #adf;
        }
        
        .tile h2{
            text-align: center;
            margin: 3px 0;
        }
        
        .owner{
            font-weight: bolder;
            text-align: right;
        }
                
        .centerBTN{
            display: block;
            margin: 0 auto;
            width: auto;
        }
		
		input[type="submit"]{
			color: #fff;
			background: #479;
			margin: 10px auto;
			padding: 5px 15px;
			border: 1px solid #257;
			font-size: 1.5em;
            display: block;
		}
		
		input[type="submit"]:hover{
		    background: #58a;
		}
        
		.searchBox{
            color: #444;
            display: block;
            width: 100%;
            max-width: 800px;
            box-sizing: border-box;
            margin: 0 auto;
            font-size: 1.5em;
            padding: 10px;
            outline: none;
        }
        
        .searchBox:focus{
            background: #adf;
        }
		
		select:disabled, input:disabled, input:disabled:hover{
		    color: #444;
		    background: #ccc;
		}
		
		div.success{
			color: #000;
			background: #efe;
			padding: 7px;
			border: 1px solid #3f3;
			border-left: 30px solid #3f3;
		}
		
		div.error{
			color: #000;
			background: #efe;
			padding: 7px;
			border: 1px solid #f33;
			border-left: 30px solid #f33;
		}
		
		table.toteContents{
		    margin: 5px 0;
			background: #fff;
			width: 100%;
			font-size: 1em;
		}
		
		.toteContents td{
		    padding: 10px 5px;
		}
		
		table.toteContents a{
		    color: #357;
		    text-decoration: none;
		    font-weight: bold;
		}
		
		.login input{
		    font-size: 1.3em;
		    width: auto;
		    margin: 0 auto;
		    padding: 5px;
		    display: block;
		    text-align: center;
		}
		
		.login input[type="password"] {
		    color: #000;
		    background: #adf;
		    border: 1px solid #257;
		}
		
		.login input::placeholder{
		    color: #8bd;
		}
		
		.login input[type="submit"] {
		    background: #257;
		    padding: 7px 20px;
		    border: 1px solid #146;
		}
		
		.login h2, .login p{
		    text-align: center;
		    width: 10px auto;
		    margin: 0 auto;
		    padding: 20px;
		}

        a.button{
            color: #000;
            background: #fff;
            padding: 10px 10px;
            border: 2px dotted #000;
            display: inline-block;
            text-decoration: none;
            margin: 5px;
        }
        a.button:hover{
            border: 2px solid #444;;
        }

a.audit{
    color: #fff;
    background: #C4A484;
}

a.trash{
    color: #400;
    background: #f99;
}

a.keep{
    color: #040;
    background: #efe;
    font-weight: bold;
}

a.home{
    color: #00f;
    background: #eef;
}

a.skip{
    color: #800000;
    background: #F4A460;
}

a.nxtRand{
    color: #000;
    background: #adf;
}

    input.button{
            color: #000;
            background: #fff;
            padding: 10px 5px;
            border: 2px dotted #000;
            display: inline-block;
            text-decoration: none;
            margin: 10px;
            font-size: 1em;
            width: auto;
        }
    input.button:focus{
            border: 2px solid #444;;
    }

.toteID{
    width: 3em;
    padding: 10px 5px;
    border: 2px dotted #000;
    font-size: 1em;
    margin: 5px;
}



span.tote_id{
    color: #fff;
    background: #444;
    padding: 4px 10px;
    font-size: 1.2em;
}




#overlay{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba( 0,0,0,0.3 );
}

#overlayContent{   
    color: #444;
    background: #fff;
    display: none;
    padding: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid #257;
    box-shadow: 0 0 15px #000;
}

.itemCard{
    color: #444;
    background: transparent;
    border-top: 2px solid #444;
    display: block;
    vertical-align: top;
    text-decoration: none;
}

.itemCard:hover{
    background: #efefef;
}

.itemCardBox{
    color: #257;
    font-size: 1.5em;
    line-height: 30px;
    width: 50px;
    display: inline-block;
    text-align: center;
}

.itemCardTitle{
    color: #444;
    font-size: 1.2em;
    line-height: 30px;
    display: inline-block;
    vertical-align: top;
}

.itemDetails select, .itemDetails input[type=number], .itemDetails textarea {
    color: #444;
    background: #eee;
    font-size: 1.3em;
    padding: 10px;
    margin: 5px;
    outline: none;
    display: inline-block;
    vertical-align: top;
}

.itemDetails textarea{
    display: block;
    width: 90%;
    box-sizing: border-box;
    max-width: 600px;
    font-size: 1.2em;
}

.itemDetails textarea::first-line{
    font-size: 1.5em;
    font-weight: bold;
}