@CHARSET "UTF-8";

body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color:		#000000;
	margin:		0;
    padding:	0;
}

h1 {
    display:		block;
    margin:			0;
    padding:		17px 0;
    position:		fixed;
    top:			0;
    text-align:		center;
    text-shadow:	3px 3px 4px rgba(117, 117, 117, 0.93);
    width:			100%;
}

h2 {
    padding:	3px;
 	margin:		0px;
    font-size:	16px;
}



h3 {
    font-size:	12px;
    position:	fixed;
    text-align:	center;
    top:		37px;
    width:		100%;
}

h3 img {
    height:	16px;
    width:	30px;
}

label {
    display:	inline-block;
    text-align:	left;
    width:		80px;
}

input {
	background:		white;
	border:			1px inset #CCCCCC;
    border-radius:	5px;
    color:			black;
    margin:			1px 0;
}

button {

    font-size:	14px;
    margin:		2px 3px;
    padding:	1px 7px;
}

button img {
	vertical-align: -2px;
}

button[disabled="disabled"] {
    background: gray;
    background: linear-gradient(to bottom,
    	rgba(226,226,226,1) 0%,
    	rgba(219,219,219,1) 50%,
    	rgba(209,209,209,1) 51%,
    	rgba(254,254,254,1) 100%
    );
}

#user {
    float:		right;
    position:	fixed;
    right:		15px;
    top:		8px;
    text-align:	center;
    font-size:	14px;
}

#error,
#message {
    display:	block;
    margin:		5px 25% 0;
    min-height:	40px;
    padding:	3px 0 0;
    position:	absolute;
    top:		10px;
    width:		50%;
}

#error {
	background: #f18e99;
    background: linear-gradient(to bottom,
    			#efc5ca 0%,
    			#d24b5a 50%,
    			#ba2737 51%,
    			#f18e99 100%);
    border:		1px solid #FF0000;	
}

#message {
	background: #7cbc0a;
	background: linear-gradient(to bottom,
				#9dd53a 0%,
				#a1d54f 50%,
				#80c217 51%,
				#7cbc0a 100%);
	border:		1px solid green;
	padding:	2px 5px;
	z-index:	1;
}

.field_error {
	background:	linear-gradient(to bottom,
				#efc5ca 0%,
				#d24b5a 50%,
				#ba2737 51%,
				#f18e99 100%) !important;
    border:		1px solid #FF0000 !important;
}

#content {
    margin:		70px 10px 0;
    text-align:	center;
}

#form_control {
    left:		15px;
    position:	fixed;
    top:		10px;
}

/* login */
#user button,
.link_button {
    background:	none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border:		medium none;
    color:		#0000FF;
    padding:	0;
    cursor:		pointer;
}

.input_forms {
    border-radius:	30px;
    color:			black;
    margin:			14% auto 0;
    padding:		3% 10px;
    text-align:		center;
    width:			50%;
    border:			2px groove gray;
}

.input_forms p {
	font-weight: 	bold;
	font-size:		20px;
}

.input_forms button {
	margin:	10px 0 3px;
}

.dates {
    display:		inline-block;
    vertical-align:	top;
    border-radius:	5px 0 5px 0;
    margin-bottom:	15px;
    color:			#000000;
    width: 300px;
}

.date_label {
    display:		block;
    text-align:		center;
    border:			1px solid #000000;
    border-radius:	5px 5px 0 0;
    border-bottom:	none;
    font-size:		17px;
    padding:		4px;
}

.team > span:nth-child(3) {
    background:	gray;
    float:		right;
    padding:	0 10px;
}

/* matchs form */

.rules {
    margin:				4px;
    padding:			3px 30px;
    background-color:	rgba(0, 0, 0, 0.3);
    border:				1px inset gray;
    border-radius:		30px;
    color:				white;
    text-align:			left;
}

.match {
	background:	#cccccc;
	border:		1px solid #000000;
	margin:		0 0 5px;
	min-width:	200px;
	padding:	1px 3px;
	box-shadow:	3px 3px 10px 0 #3B3B3B;
	text-align:	left;
}

.match div * {
    display: inline;
}

.match > div > span {
    display:	inline-block;
    margin:		0;
    padding:	0;
    text-align:	center;
    width:		30px;
}

.match input {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px inset #CCCCCC;
    border-radius: 5px;
    color: #FFF;
    padding: 0;
    text-align: center;
    font-size: 20px;
    width: 44px;
    height: 22px;
}

.score {
    background: linear-gradient(to bottom,
    	#EEEEEE 0%,
    	#CCCCCC 100%);
    border: 1px solid #000000;
    float: left;
    height: 36px;
    margin: 0 2px 0 0;
    padding: 0;
    text-align: right;
    width: 30px;
}

.score > span {
	width: 15px !important;
	padding: 0 !important;
}

.score>span:first-child {
	float: left;
	font-size: 20px;
	margin: 6px 0;
}

/* special event colors */

.points_extra {
	color: green;
	font-weight: bold;
}

.points_normal {
	color: blue;
	font-weight: bold;
}

.winner {
	background: #96c56f;
	background: linear-gradient(to bottom,
				rgba(169,219,128,1) 0%,
				rgba(150,197,111,1) 100%);
}

.losser {
	background: #EFB3B3;
	background: linear-gradient(to bottom,
				rgba(255,196,196,1) 0%,
				rgba(239,179,179,1) 41%,
				rgba(216,153,153,1) 100%);
}

.tie {
	background: #98B0D9;	
	background: linear-gradient(to bottom,
				rgba(195,217,255,1) 0%,
				rgba(177,200,239,1) 41%,
				rgba(152,176,217,1) 100%);
}

#quinielas_displayer {
    background-color: rgba(25, 25, 25, 0.90);
    color:		#FFFFFF;
    display:	none;
    left:		0;
    margin:		0;
    position:	absolute;
    top:		0;
    width:		100%;
    z-index:	99;
    min-height: 100%;
    text-align:	left;
}

#displayer_controls {
	position:	fixed;
    right:		4.5%;
    width:		30px;
}

#displayer_controls > img {
	cursor:			pointer;
	color:			white;
	background:		black;
    background:		linear-gradient(to bottom, 
			    	#aebcbf 0%,
			    	#6e7774 50%,
			    	#0a0e0a 51%,
			    	#0a0809 100%);
    border:			1px solid #FFFFFF;
    border-radius:	5px;
    padding:		4px;
}

#output {
    margin: 0 2%;
}

.user_container {
	text-align:	left;
	padding:	3px 20px;
}

.user_container > div {
	display:		none;
	background:		none rgba(255, 255, 255, 0.2);
	width:			98%;
	margin:			0;
    padding:		0 0 0 5px;
    border-radius:	0 30px 5px 5px;
}

.user_container > span {
    background:		none rgba(255, 255, 255, 0.2);
    border-radius:	5px 20px 0 0;
    display:		inline-block;
    width:			40%;
    padding:		3px 5px;
    border-top:		1px solid white;
}

#loading {
    background-color:	rgba(25, 25, 25, 0.95);
    display:			none;
    height:				100%;
    left:				0;
    padding-top:		25%;
    position:			fixed;
    text-align:			center;
    top:				0;
    width:				100%;
    z-index:			999;
    color:				white;
}

.expander {
	cursor:		pointer;
	display:	inline-block;
	width:		16px;
	height:		16px;
	margin:		0 5px -1px;
	padding:	0;
	background:	url("../images/add.png");
}

.expanded {
	background: url("../images/minus.png");
}

/* final table */

table {
    border: 2px solid #000000;
    margin: 120px auto;
    border-collapse: collapse;
}

table td:nth-child(2) {
    text-align: left;
}

thead {
	border-bottom: 1px solid #000000;
}

td {
	border-bottom: 1px solid #000000;
	background: linear-gradient(to bottom,
		rgba(233,246,253,1) 0%,
		rgba(211,238,251,1) 100%);
}

thead th, tfoot th {
    padding: 4px 15px;
}

thead, tfoot {
    background: linear-gradient(to bottom,
    	#FFFFFF 0%,
    	#F1F1F1 50%,
    	#E1E1E1 51%,
    	#F6F6F6 100%);
}