/*
 * Be a bit more selective .. and apply to the 'right' elements
label {
	text-shadow: 1px 1px 3px grey;
}
*/

body {
	background-image: url('/images/blank-chalkboard.png');
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

h1 {
	padding-left: 15px;
	font-family: 'Permanent Marker', cursive;
	font-size: 36px;
	color: #ddd;
}

h2 {
	color: #ddd;
}

p {
	color: #ddd;
}


legend {
	padding: 0px 15px;
}

fieldset.loginform {
	margin-top: 40px;
	margin-left: 20px;
	padding: 2em;
	display: inline-block;
	width: 600px;
	max-width: 100%
}

select {
	font-size: 22px;
	min-width: 275px;
}

textarea {
	font-family: 'Overpass', sans-serif;
	font-size: 18px;
}

div.AnyTime-win {z-index:9999}


.loginform legend {
	font-family: 'Permanent Marker', cursive;
	font-size: 36px;
	color: #ddd;
}

.loginform label {
	font-family: 'Overpass', sans-serif;
	font-size: 28px;
	color: #ccc;
}

.loginform input, 
.loginform textarea {
	padding: 9px;
	border: solid 1px #e5e5e5;
	outline: 0;
	background: #ffffff;
	width: 300px;
	font-family: 'Lato', sans-serif;
	font-size: 24px;
}

.loginform .submit.login {
	width: 150px;
}

input#newfiletitle {
	margin: 10px 8px 10px 0px;
}

input#activateevent,
input#invitenew,
input#newgraphicfile,
input#createprofile,
input#updateprofile {
	padding: 6px 15px 4px 15px;
}

.loginform .submit.login,
input#activateevent,
input#newgraphicfile,
input#invitenew,
input#createprofile,
input#updateprofile {
	font-family: 'Overpass', sans-serif;
	font-weight: 700;
	font-size: 22px;
	background-color: #4ef442;
	border: 2px black;
	border-radius: 4px;
}

.loginform .submit.pwreset {
	width: 400px;
	font-family: 'Overpass', sans-serif;
	font-weight: 400;
	font-size: 20px;
	background-color: #ff9900;
	border: 2px black;
	border-radius: 4px;
}

.loginform .text {
	font-family: 'Overpass', sans-serif;
	font-weight: 400;
	font-size: 18px;
	color: #ddd;
	
}


.signalstatus {
	margin-left: 50px;
	font-family: 'Permanent Marker', cursive;
	font-size: 44px;
}

.signalstatus.active {
	margin-top: -25%;
	color: #00ff00;
}

.signalstatus.quiet {
	color: #eeeeee;
}

.highlightshadow.nobg {
	font-weight: 900;
	text-shadow: 0px 0px 5px #000, -2px -2px #000, 2px 2px #000;
	padding: 0px 15px;
}

.highlightshadow.bg {
	padding-left: 20px;
	font-weight: 900;
	text-shadow: 0px 0px 5px #000, -2px -2px #000, 2px 2px #000;
	background-color: rgba(18,18,18,0.5);
}

.shadow3d {
	text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

fieldset.eventlisting label {
	font-family: 'Lato', sans-serif;
	font-size: 28px;
	font-weight: 700;
	text-shadow: 0px 0px 5px #000, -2px -2px #000, 2px 2px #000;
}


/*
fieldset.eventlisting legend,
fieldset.userprofile legend {
*/
fieldset legend {
	text-shadow: 0px 0px 5px #000, -2px -2px #000, 2px 2px #000;
}

fieldset.eventlisting  {
	position: relative;
	z-index: 200;
	margin-left: 50px;
	color: #ddd;
	font-family: 'Overpass', sans-serif;
	font-size: 24px;
	font-weight: 700;
	background-color: rgba(18,18,18,0.4);
}

/*
fieldset.userprofile label {
*/
fieldset label {
	font-family: 'Lato', sans-serif;
	font-size: 28px;
	font-weight: 700;
}

/*
fieldset.userprofile {
*/
fieldset {
	position: relative;
	z-index: 200;
	margin-left: 50px;
	color: #ddd;
	font-family: 'Overpass', sans-serif;
	font-size: 16px;
	font-weight: 700;
	background-color: rgba(18,18,18,0.4);
}

/*
fieldset.userprofile input {
*/
fieldset input {
	font-size: 24px;
}

fieldset.userprofile .userprofile.create,
fieldset.userprofile .userprofile.update {
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	font-weight: 400;
}

input.logout {
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	font-weight: 400;
	background-color: #ff9900;
	padding: 5px 20px;
	border: 2px black;
	border-radius: 4px;
	margin-left: 30px;
	margin-bottom: 30px;
}

input.cancelevent {
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	font-weight: 400;
	background-color: #ee1100;
	padding: 5px 20px;
	border: 2px black;
	border-radius: 4px;
	margin-left: 10px;
	margin-bottom: 5px;
}

div.userprofile,
div.groupprofile,
div.createevent {
	margin-top: 20px;
}

.logoutform {
	margin-top: 20px;
	margin-bottom: 40px;
	margin-left: 50px;
}

fieldset {
  -moz-border-radius:9px;  
  border-radius: 9px;  
  -webkit-border-radius: 9px; 
}

div.eventlisting {
	padding: 15px;
	background-color: rgba(35,122,179,0.4);
	border-radius:9px;
}

div.createevent {
	padding: 15px;
	background-color: rgba(41,128,185,0.4);
	border-radius:9px;
}

div.groupprofile {
	padding: 15px;
	background-color: rgba(47,135,191,0.4);
	border-radius:9px;
}

div.userprofile {
	padding: 15px;
	background-color: rgba(55,142,198,0.4);
	border-radius:9px;
}

div.userprofile p {
	font-size: 18px;
}
div.userprofile label {
	font-size: 24px;
}

input#userphone {
	width: 170px;
}


/*
.colourborder div {
    padding: 35px;
    background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}
*/


@media screen and (max-width: 249px) {
	fieldset.loginform {
		margin-top: 8px;
		margin-left: 0px;
		padding: 2px;
		width: 220px;
	}
	.loginform input,
	.loginform textarea {
		width: 175px;
		font-size: 10px;
	}
	.loginform .submit.pwreset {
		font-size: 10px;
		font-weight: 300;
		width: 180px;
	}
	fieldset.userprofile {
		margin-left: 2px;
		font-size: 16px;
		font-weight: 400;
		width: 220px;
	}
}

@media screen and (min-width: 250px) and (max-width: 320px) {
	.signalstatus {
		font-size: 20px;
	}
	fieldset.loginform {
		margin-top: 12px;
		margin-left: 2px;
		padding: 5px;
		width: 290px;
	}
	.loginform input,
	.loginform textarea {
		width: 240px;
	}
	.loginform .submit.pwreset {
		font-size: 14px;
		font-weight: 400;
		width: 240px;
	}
	fieldset.userprofile {
		margin-left: 2px;
		font-size: 16px;
		font-weight: 400;
		width: 290px;
	}
}
@media screen and (min-width:321px) and (max-width:480px) {
	.signalstatus {
		font-size: 22px;
	}
	fieldset.loginform {
		margin-left: 10px;
		padding: 1em;
		width: 300px;
	}
	.loginform input,
	.loginform textarea {
		width: 200px;
	}
	.loginform .submit.pwreset {
		font-size: 14px;
		width: 260px;
	}
	fieldset.userprofile {
		margin-left: 2px;
		font-size: 16px;
		font-weight: 400;
		width: 300px;
	}
}

@media screen and (min-width:481px) and (max-width:599px) {
	.signalstatus {
		font-size: 30px;
	}
	fieldset.loginform {
		margin-left: 10px;
		padding: 1em;
		width: 460px;
	}
	.loginform input,
	.loginform textarea {
		width: 240px;
	}
	.loginform .submit.pwreset {
		font-size: 14px;
		width: 240px;
	}
	fieldset.userprofile {
		margin-left: 2px;
		font-size: 16px;
		font-weight: 400;
		width: 460px;
	}
}


@media screen and (min-width:600px) and (max-width:759px) {
	div.userprofile,
	div.groupprofile,
	div.createevent,
	div.eventlisting
	{
		max-width: 80%;
	}
	.signalstatus {
		font-size: 36px;
	}
	fieldset.loginform {
		margin-left: 10px;
		padding: 1em;
		width: 540px;
	}
	.loginform input,
	.loginform textarea {
		width: 240px;
	}
	.loginform .submit.pwreset {
		font-size: 14px;
		width: 240px;
	}
	fieldset.userprofile {
		margin-left: 2px;
		font-size: 16px;
		font-weight: 400;
		width: 540px;
	}
}

@media screen and (min-width:760px) and (max-width:959px) {
	div.userprofile,
	div.groupprofile,
	div.createevent,
	div.eventlisting
	{
		max-width: 80%;
	}
	.signalstatus {
		font-size: 40px;
	}
	fieldset.loginform {
		margin-left: 10px;
		padding: 1em;
		width: 540px;
	}
	.loginform input,
	.loginform textarea {
		width: 240px;
	}
	.loginform .submit.pwreset {
		font-size: 14px;
		width: 300px;
	}
	fieldset.userprofile {
		margin-left: 2px;
		font-size: 16px;
		font-weight: 400;
		width: 740px;
	}
}


@media screen and (min-width: 1080px) {
	div.userprofile,
	div.groupprofile,
	div.createevent,
	div.eventlisting
	{
		max-width: 50%;
	}
}