@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

/* to import google font style */
body {
	background-color: #C7C9C9;
	background-image: url(https://www.barryfordmusic.com/images/coop_proj_outside_background.png);
	width: 25.5%;
}

.outerDiv {
	margin: 0px auto;
	width: 1130px;
	height: 100%;
	background: #01151C;
	-moz-box-shadow: 4px 4px 14px #000000;
	-webkit-box-shadow: 4px 4px 14px #000000;
	box-shadow: 4px 4px 14px #000000;
	background: -webkit-linear-gradient(#01151C, black);
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#01151C, black);
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#01151C, black);
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(#01151C, black)
		/* Standard syntax */
	;
	padding-top: 20px;
	font-size: 14px;
	font-family: 'Droid Serif', serif;
}

.pageDiv {
	width: 45.5%;
	float: left;
	margin-top: 10px;
}

.divCore {
	width: 40.5%;
	height: 100%;
	background-color: #C7C9C9;
	background-image: url(https://www.barryfordmusic.com/images/coop_proj_outside_background.png);
	border: dashed 1px #999999;
}

.headDiv {
	width: 361px;
	height: 85px;
	text-shadow: 2px 2px 2px #cfcfcf;
	font-size: 16px;
	color: #1111D1;
	text-align: center;
	vertical-align: bottom;
	font-family: 'Droid Serif', serif;
}

.topMessage {
	background-color: #111A99;
	color: white;
	font-size: 10px;
	font-family: arial, helvetica;
	font-weight: bold;
	text-shadow: inherit;
	object-position: top;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	-moz-box-shadow: 4px 4px 14px #000000;
	-webkit-box-shadow: 4px 4px 14px #000000;
	box-shadow: 4px 4px 14px #000000;
	background-image: linear-gradient(#01151C, black);
}

.topMsgAlert {
	background: #F21538;
	color: white;
	font-size: 10px;
	font-family: arial, helvetica;
	font-weight: bold;
	text-shadow: inherit;
	object-position: top;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	-moz-box-shadow: 4px 4px 14px #000000;
	-webkit-box-shadow: 4px 4px 14px #000000;
	box-shadow: 4px 4px 14px #000000;
	background-image: linear-gradient(#01151C, #F21538);
}

.listButtonOn {
	color: white;
	font-size: 14px;
	font-family: arial, helvetica;
	font-weight: bold;
	text-shadow: inherit;
	object-position: top;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	-moz-box-shadow: 4px 4px 14px #000000;
	-webkit-box-shadow: 4px 4px 14px #000000;
	box-shadow: 4px 4px 14px #000000;
	background-image: linear-gradient(rgba(15, 187, 245, .4), rgba(1, 21, 28, .2));
}

.listButtonOff {
	color: #B8BBBE;
	font-size: 14px;
	font-family: arial, helvetica;
	font-weight: bold;
	text-shadow: inherit;
	object-position: top;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 2px;
	padding-bottom: 2px;
	-moz-box-shadow: 4px 4px 14px #000000;
	-webkit-box-shadow: 4px 4px 14px #000000;
	box-shadow: 4px 4px 14px #000000;
	background-image: linear-gradient(#67686A, #01151C);
}

.divMenu {
	width: 360px;
	height: 100%;
	float: left;
	background: rgba(0, 0, 0, 0.5);
	border-right: dashed 1px #999999;
}

.divAdd {
	width: 440px;
	height: 762px;
	float: left;
	background: rgba(0, 0, 0, 0.2);
	border-right: dashed 1px #999999;
}

.divAdd2 {
	width: 450px;
	height: 100%;
	float: left;
	background: rgba(0, 0, 0, 0.2);
	border-left: dashed 1px #999999;
	border-right: dashed 1px #999999;
}

li {
	padding: 4px;
	text-shadow: 2px 2px 2px #C9CFD1;
}

ul {
	padding: 4px;
	margin-bottom: 1px;
	margin-top: 1px;
}

p {
	font-weight: bold;
	text-align: center;
	color: #F5E614;
	background: rgba(0, 0, 0, 0.2);
	font-size: 18px;
	text-shadow: 2px 2px 2px #cfcfcf;
}

h2 {
	background: rgba(0, 0, 0, 0.5);
}

.colrBlue {
	color: #2D39E3;
	text-shadow: 2px 2px 2px #cfcfcf;
}

.form {
	width: 400px;
	float: left;
	background: rgba(63, 191, 191, 0.3);
	font-family: 'Droid Serif', serif;
	padding-left: 20px;
}

form h2 {
	text-align: center;
	text-shadow: 2px 2px 2px #154985;
}

form label {
	font-family: 'Droid Serif', serif;
	font-weight: bold;
	color: #154985;
}

.fileHighlight {
	background: #F0ECD5;
	padding: 12px;
}

.inlineImg {
	display: inline-block;
	vertical-align: middle;
	/* float:left; */
	padding: 2px;
}

/*INPUTS*/
input {
	text-transform: capitalize;
}

::-webkit-input-placeholder {
	text-transform: none;
}

:-moz-placeholder {
	text-transform: none;
}

::-moz-placeholder {
	text-transform: none;
}

:-ms-input-placeholder {
	text-transform: none;
}

.input {
	width: 250px;
	height: 12px;
	border-radius: 1px;
	box-shadow: 0px 0px 1px 2px #123456;
	margin-top: 5px;
	padding: 3px 0;
	border: none;
	margin-bottom: 5px;
	background: #F0ECD5;
	color: #121363;
}

.inputMed {
	width: 160px;
	height: 12px;
	border-radius: 1px;
	box-shadow: 0px 0px 1px 2px #123456;
	margin-top: 5px;
	padding: 2px 2px;
	border: none;
	margin-bottom: 5px;
	background: #F0ECD5;
	color: #121363;
}

.inputSm {
	width: 40px;
	height: 12px;
	border-radius: 1px;
	box-shadow: 0px 0px 1px 2px #123456;
	margin-top: 5px;
	padding: 2px 2px;
	border: none;
	margin-bottom: 5px;
	background: #F0ECD5;
	color: #121363;
}

input.noTransform {
	text-transform: none;
	width: 250px;
	height: 12px;
	border-radius: 1px;
	box-shadow: 0px 0px 1px 2px #123456;
	margin-top: 10px;
	padding: 2px 0;
	border: none;
	margin-bottom: 5px;
	background: #F0ECD5;
	color: #121363;
}

input.noTransformMed {
	text-transform: none;
	width: 165px;
	height: 12px;
	border-radius: 1px;
	box-shadow: 0px 0px 1px 2px #123456;
	margin-top: 5px;
	padding: 2px 0;
	border: none;
	margin-bottom: 5px;
	background: #F0ECD5;
	color: #121363;
}

input[type="text"]:valid {
	background: #F0ECD5;
	color: #121363;
}

input[type="text"]:invalid {
	background: #F7C3CF;
	border: solid red 3px;
}

input[type="number"]:invalid {
	background: #F0ECD5;
	color: red;
	border: solid red 3px;
}

.bigNumberDrop {
	width: 48px;
	height: 18px;
	border-radius: 1px;
	box-shadow: 0px 0px 1px 2px #123456;
	margin-top: 5px;
	padding: 2px 2px;
	border: none;
	margin-bottom: 5px;
	background: #F0ECD5;
	color: #121363;
}

.bigInput {
	width: 140px;
	height: 20px;
	border-radius: 1px;
	box-shadow: 0px 0px 1px 2px #123456;
	margin-top: 5px;
	padding: 2px 2px;
	border: none;
	margin-bottom: 5px;
	background: #F0ECD5;
	color: #121363;
}

/*BUTTONS*/
.buttonSubmit {
	color: white;
	border-radius: 3px;
	background: #09B80C;
	padding: 5px;
	margin-top: 5px;
	border: none;
	width: 93px;
	height: 30px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 16px;
}

.buttonDelete {
	color: white;
	border-radius: 3px;
	background: #F52F59;
	padding: 2px;
	margin-top: 5px;
	border: none;
	width: 93px;
	height: 30px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 16px;
}

.buttonAdd {
	color: white;
	border-radius: 6px;
	background-image: linear-gradient(rgba(55, 192, 219, .1), rgba(13, 77, 88, .5));
	padding: 2px;
	margin-top: 5px;
	border: none;
	width: 93px;
	height: 30px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 16px;
}

.buttonCancel {
	color: white;
	border-radius: 3px;
	background: black;
	padding: 2px;
	margin-top: 5px;
	border: none;
	width: 93px;
	height: 30px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 16px;
}

.buttonSave {
	color: white;
	border-radius: 3px;
	background: blue;
	padding: 2px;
	margin-top: 5px;
	border: none;
	width: 63px;
	height: 30px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 15px;
}

.buttonShow {
	color: white;
	border-radius: 3px;
	background: #5A8FA1;
	padding: 4px;
	margin-top: 5px;
	border: none;
	width: 63px;
	height: 17px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 10px;
}

.buttonCancelSm {
	color: white;
	border-radius: 3px;
	background: rgba(57, 71, 100, .8);
	padding: 4px;
	margin-top: 5px;
	border: none;
	width: 63px;
	height: 17px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 10px;
}

.loginLocked {
	height: 35px;
	width: 68px;
	background-image: url(../images/thumbs/key_sm01.png);
	background-repeat: no-repeat;
	border-radius: 3px;
	padding: 3px;
	margin-top: 5px;
	border: 2px solid black;
	width: 93px;
	box-shadow: 0px 0px 1px 2px #123456;
}

a.locked {
	color: #F96071;
	font-size: 14px;
	font-family: courier new;
	text-decoration: none;
	text-align: top;
	text-shadow: 2px 2px 2px #032538;
}

a.unlocked {
	color: #F4F8FA;
	font-size: 14px;
	font-family: courier new;
	text-decoration: none;
	text-align: top;
	text-shadow: 2px 2px 2px #032538;
}

a {
	text-decoration: none;
	font-size: 16px;
	margin: 2px 0 0 10px;
	padding: 3px;
	color: white;
}

a:hover {
	text-shadow: 2px 2px 2px yellow;
	color: red;
	font-size: 17px;
}

a.darkLink {
	text-decoration: none;
	font-size: 16px;
	margin: 2px 0 0 30px;
	padding: 3px;
	color: #0D5B75;
}

a.darkLink:hover {
	text-shadow: 2px 2px 2px yellow;
	color: red;
	font-size: 17px;
}

a.greyAnchor {
	text-decoration: none;
	font-size: 16px;
	margin: 2px 0 0 10px;
	padding: 3px;
	color: #D3D5D8;
	font-weight: bold;
}

a.greyAnchor:hover {
	text-shadow: 2px 2px 2px yellow;
	color: red;
	font-size: 17px;
}

.clear {
	clear: both;
}

.red {
	color: red;
}

.formget {
	float: right;
	margin-top: 30px;
	clear: right;
}

.dropbtn {
	color: white;
	padding-left: 4px;
	padding-right: 8px;
	font-size: 16px;
	border: none;
	cursor: pointer;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #FCF9CF;
	min-width: 250px;
	padding: 6px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 6px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropMenuTitle {
	font-weight: bold;
	text-align: justify;
	line-height: -55px;
	color: black;
	font-size: 12px;
}

.dropMenuText {
	text-align: justify;
	color: black;
	font-size: 9px;
}

.viewDEBUG {
	text-align: left;
	padding-left: 6px;
	color: #ffffff;
	background: rgba(17, 13, 8, 0.8);
	box-shadow: 4px 8px 8px 4px #1B1B01;
	font-size: 13px;
}

.smallFnt {
	color: #ffffff;
	background: rgba(17, 13, 8, 0.8);
	box-shadow: 4px 8px 8px 4px #1B1B01;
	font-size: 11px;
}