/**
 *     Main CSS file
 */

/*
 * Used colours: 000080 FF6600
 */

/* desktop to mobile transitions *****************************/
@media (max-width: 960px){
	.width960 {
		width: 96%;
	}
	
	.width480 {
		width: 96%;
	}
}

/* global layout *********************************************/

html, body {
	position: relative;
    background: #F9F9F9;
    font-family: Roboto;
    font-size: 16px;
}

i {
	font-style: italic;
	color: #000080;
}

.small {
	font-size: 12px;
}

input, select, textarea {
	font-size: 16px;
}

.standard-button {
	background: #000080;
}

.standard-button:hover {
	background: #FF6600;
}

a {
	color: #000080;
}

a:hover {
	color: #FF6600;
}

a.standard-button:hover {
	color: #FFF;
}

h1 {
	font-size: 26px;
	font-weight: bold;
	padding: 40px 0 20px 0;
}

.padding-5px,
table.padding-5px td,
table.padding-5px th {
	padding: 5px;
}

.rosu {
	background: #DD4444;
}

.verde {
	background: #33AA33;
}

/* login */
table.login {
	margin-top: 40px;
}

table.login td,
table.login td input,
table.login td select {
	padding: 10px;
}

/* header */
header {
	margin: 20px 0;
}

header h1 {
	position: absolute;
	left: 220px;
	top: 24px;
	
	font-size: 36px;
	font-weight: bold;
	padding: 0;
}

#hUserMenu {
	position: absolute;
	right: 0;
	top: 16px;
}

#hUserMenu img {
	position: absolute;
	right: 0;
	top: 0;
}

#hUserMenuNav {
	position: relative;
	right: 0;
	top: 44px;
	width: 250px;
	z-index: 100;
	
	background: #FFF;
	border: 1px solid #000080;
	text-align: right;
}

#hUserMenuNav a {
	display: block;
	padding: 10px;
}

@media (max-width: 960px){
	#hMainLogo img {
		width: 100px;
		padding-top: 15px;
	}
	
	header h1 {
		font-size: 18px;
		left: 120px;
	}
	
	#hUserMenu {
		top: 0;
	}
}


/* home */
.addreadings {
	padding: 10px;
	background: #DDDDDD;
}

h2 {
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 20px;
	text-align: center;
}

.addreadings .sub .single {
	width: 50%;
	padding: 10px 0;
	float: left;
}

.addreadings .sub .single label {
	display: inline-block;
	width: 100px;
}

.addreadings .sub .message {
	background: #FF6600;
	color: #000;
	padding: 10px 0;
}

@media (max-width: 700px){
	.addreadings .sub .single {
		width: 100%;
	}
}

.viewreadings {
	margin-top: 50px;
}

.viewreadings table th {
	text-align: left;
	background: #000080;
	color: #FFF;
	padding: 8px 0 8px 4px;
}

.viewreadings table tr {
	border-bottom: 1px solid #FF6600;
}

.viewreadings table tr:hover {
	background: #FF6600;
}

.viewreadings table tr td {
	padding: 8px 0 8px 4px;
	text-align: left;
	vertical-align: middle;
}

@media (max-width: 500px){
	.viewreadings table {
		font-size: 12px;
	}
}


/* home admin */
#tab-gradcomplet table td {
	color: #FFF;
}

#tab-listaconsumatori table {
	text-align: left;
}

#tab-listaconsumatori table th {
	font-weight: bold;
}

#tab-listaconsumatori table tr:hover {
	background: #FF6600;
	color: #FFF;
}

#hTableUsers tr:hover {
	background: #FF6600;
	color: #FFF;
}

#hDIVIstoric table {
	font-size: 14px;
}

#hDIVIstoric table th {
	font-weight: bold;
}

#hDIVIstoric table .highlight {
	background: #F0F0F0;
}

#hDIVIstoric table tr:hover,
#hDIVIstoric table tr:hover .highlight {
	background: #FF6600;
	color: #FFF;
}

#overlay .sub .single {
	width: 50%;
	padding: 10px 0;
	float: left;
}

#overlay .sub .single label {
	display: inline-block;
	width: 100px;
}

#overlay .sub .message {
	background: #FF6600;
	color: #000;
	padding: 10px 0;
}

@media (max-width: 960px){
	.ui-tabs-panel {
		padding: 4px !important;
	}
	
	#homeadmin.width75p {
		width: 96%;
	}
	
	#homeadmin .canhide {
		width: 0;
		overflow: hidden;
		padding: 0;
		font-size: 0;
	}
}