/* row 3 - 203: defined html structural elements */

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

/* to import google font style */
body {
	background: rgba(63, 191, 191, 0.3);
	/* background-image: url(../images/coop_proj_outside_background.png); */
	width: 25.5%;
}

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);
}

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;
}

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.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;
}

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

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

/* form{
width:300px;
float:left;
background-image: url(../images/coop_proj_outside_background.png);
background:rgba(63,191,191,0.3);
font-family: 'Droid Serif', serif;
padding-left:4px;
box-shadow:0px 0px 1px 2px #123456;
border: #01151C 2px;
border-radius: 6px;
}	 */

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

form td {
	display: inline-block;
	width: 55px;
	font-size: 14px;
	font-family: 'Droid Serif', serif;
	font-weight: bold;
	color: #154985;
}

label {
	font-size: 14px;
}

/*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.noTransform {
	text-transform: none;
	width: 232px;
	height: 15px;
	box-shadow: 0px 0px 1px 2px #123456;
	margin-top: 10px;
	padding: 2px 0;
	background: #a9d8f7;
	color: #121363;
	border: none;
	border-radius: 4px;
	margin-bottom: 5px;

}

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

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;
}

textarea {
	text-align: left;
	width: 288px;
	padding: 3px 0;
	background: #F0ECD5;
	color: #121363;
	box-shadow: 0px 0px 1px 2px #123456;
	border: none;
	border-radius: 4px;
	margin-bottom: 5px;
}


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

.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;
}

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

.inputSm {
	width: 40px;
	height: 15px;
	box-shadow: 0px 0px 1px 2px #123456;
	margin-top: 5px;
	padding: 2px 2px;
	background: #a9d8f7;
	color: #121363;
	border: none;
	border-radius: 4px;
	margin: 5px;

}

.iframe_tube {
	text-align: left;
	padding-left: 29px;
}

.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(../images/coop_proj_outside_background.png);
	border: dashed 1px #999999;
}

.divCore1 {
	width: 360px;
	height: 100%;
	background-color: #C7C9C9;
	background-image: url(../images/coop_proj_outside_background.png);
	border: dashed 1px #999999;
}

#log_container {
	width: 250px;
	position: fixed;
	left: 50px;
	top: 70px;
	/* background-image: url(../images/coop_proj_outside_background.png); */
	background: rgba(63, 191, 191, 0.8);
	font-family: 'Droid Serif', serif;
	padding-left: 4px;
	box-shadow: 0px 0px 1px 2px #123456;
	border: #01151C 2px;
	border-radius: 6px;
}

#logout_container {
	width: 200px;
	position: fixed;
	left: 50px;
	top: 70px;
	/* background-image: url(../images/coop_proj_outside_background.png); */
	background: rgba(63, 191, 191, 0.8);
	font-family: 'Droid Serif', serif;
	padding-left: 4px;
	box-shadow: 0px 0px 1px 2px #123456;
	border: #01151C 2px;
	border-radius: 6px;
}

.playBtn {
	cursor: pointer;
	vertical-align: middle;
	font-family: Arial, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.playBtn img {
	width: 30px;
	height: 30px;
	vertical-align: middle;
	float: right;
	padding: 0px 24px 0px 0px;
}

.playBtn_dim {
	color: #b8b9bb;
	cursor: pointer;
	vertical-align: middle;
	font-family: Arial, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.playBtn_dim img {
	width: 30px;
	height: 30px;
	vertical-align: middle;
	float: right;
	padding: 0px 24px 0px 0px;
}

.list_item_container {
	float: left;
}

.list_item_container img {
	float: right;
	padding: 0px 24px 0px 0px;
}

.playButton_container {
	float: right;
	padding: 0px 24px 0px 0px;
}

#YouTube_pop_container {
	background-color: rgba(13, 1, 24, 0.774);
	color: #f3f3ee;
	width: 280px;
	height: auto;
	float: left;
	font-family: 'Droid Serif', serif;
	padding-left: 4px;
	border-radius: 4px;
	display: none;
	border: solid #39e041 2px;
	border-radius: 10px;

}

#YouTube_pop_close {
	font-family: Arial, Helvetica, sans-serif;
	background-color: rgba(41, 102, 12, 0.404);
	color: #fce7e7;
	width: 280px;
	height: 35px;
	padding: 6px 0px 0px 8px;
}

#YouTube_inner_container {
	background-color: rgba(6, 51, 71, 0.452);
	color: #f3f3ee;
	width: 280px;
	height: auto;
}

#action_container {
	width: 320px;
	float: left;
	/* background-image: url(../images/coop_proj_outside_background.png); */
	font-family: 'Droid Serif', serif;
	padding-left: 4px;
	border-radius: 6px;
}

#action_container_pop {
	width: 320px;
	float: left;
	/* background-image: url(../images/coop_proj_outside_background.png); */
	font-family: 'Droid Serif', serif;
	padding-left: 4px;
	border-radius: 6px;
}

.action_Locked {
	background: rgba(145, 201, 72, 0.92);
	box-shadow: 0px 0px 1px 2px #583609;
	border: #380505 2px;
}

.action_UnLocked {
	background: rgba(63, 191, 191, 0.8);
	box-shadow: 0px 0px 1px 2px #123456;
	border: #01151C 2px;
}

.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;
	padding: 2px 3px 2px 3px;
	-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: 2px 3px 2px 3px;
	-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);
}

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

.inlineImg2 {
	display: inline-block;
	vertical-align: top;
}

.leftAl {
	font-size: 28px;
	color: #EDFCFC;
	text-align: left;
	background: rgba(241, 190, 8, .4);
}

.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);
}

.searchBox {
	font-size: 14px;
	background: #f4f5c0;
	border-radius: 6px;
}

.searchResultLst {
	color: #ecf2f5;
	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;
}

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

#divList {
	width: 360px;
	height: 100%;
	float: left;
	border-right: dashed 1px #999999;
	border-left: dashed 1px #999999;
	margin-top: 6px;
}

.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;
}

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

.fileHighlight {
	background: #F0ECD5;
}

.lwidth {
	width: 220px;
}

.fwidth {
	display: -ms-inline-grid;
	width: 290px;
	/* background: red; */
}

.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;
}

/*BUTTONS*/
.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;
	margin-left: 12px;
	margin-right: 12px;
	border: none;
	width: 60px;
	height: 18px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 12px;
}

.buttonSubmit {
	color: white;
	border-radius: 3px;
	background: #09B80C;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 12px;
	margin-right: 12px;
	border: none;
	width: 60px;
	height: 18px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 12px;
	vertical-align: middle;
}

.buttonDelete {
	color: white;
	border-radius: 3px;
	background: #e01c47;
	padding: 2px;
	margin-left: 12px;
	margin-right: 12px;
	border: none;
	width: 60px;
	height: 18px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 12px;
	vertical-align: middle;
}

.buttonCancel {
	color: white;
	border-radius: 3px;
	background: black;
	padding: 2px;
	margin-left: 12px;
	margin-right: 12px;
	border: none;
	width: 60px;
	height: 18px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 12px;
	vertical-align: middle;
}

.buttonLog {
	color: white;
	border-radius: 3px;
	background: #09B80C;
	padding: 2px;
	margin: 12px;
	margin-right: 12px;
	border: none;
	width: 60px;
	height: 18px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 12px;
	display: inline-table;
}

.btnCancelLog {
	color: white;
	border-radius: 3px;
	background: rgb(41, 37, 37);
	padding: 2px;
	margin: 12px;
	border: none;
	width: 60px;
	height: 18px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 12px;
	display: inline-table;
}

.buttonLogout {
	color: white;
	border-radius: 3px;
	background: #09B80C;
	padding: 2px;
	margin: 12px;
	margin-right: 12px;
	border: none;
	width: 60px;
	height: 18px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 12px;
	display: inline-table;
}

.btnCancelLogout {
	color: white;
	border-radius: 3px;
	background: rgb(41, 37, 37);
	padding: 2px;
	margin: 12px;
	border: none;
	width: 60px;
	height: 18px;
	box-shadow: 0px 0px 1px 2px #123456;
	font-size: 12px;
	display: inline-table;
}

.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;
}

.clear {
	clear: both;
}

.red {
	color: red;
}

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

.menuIcons {
	background: rgba(0, 0, 0, 0.33);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

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

.dropdown-content {
	display: none;
	position: relative;
	left: -100px;
	background-color: #c7eff7de;
	color: #271603;
	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;
}



/*//////////////////media query///////////////////////////////////////*/

@media all and (max-device-width: 500px) {

	.playBtn {
		cursor: pointer;
	}

	.playBtn img {
		width: 20px;
		height: 25px;
		vertical-align: middle;
	}

	.playBtn_dim {
		cursor: pointer;
	}

	.playBtn_dim img {
		width: 20px;
		height: 25px;
		vertical-align: middle;
	}

	.listButtonOn {
		font-size: 16px;
	}

	.listButtonOff {
		font-size: 16px;
	}

}