﻿/*
Theme Name: Adminique
Date: January 2011
Description: a html5 + css3 template for admin/backend and web applications
Version: 1.0
Author: Gatot Ari Wibowo
Autor URI: http://gawibowo.com
*/

@import url("grid.css");
@import url("reset.css");
@import url("custom.css");
@import url("buttons.css");

/* global
------------------------------------------------------------------------- */
html, body {
	height: 100%;
}
body {
	color: #444;
	background: #eaeaea ;
	font: 12px/2 Arial, sans-serif;
}

a {
	color: #0d8b9b;
	text-decoration: none;
}
a:hover {
	color: #cb6400;
}
p {
	margin-bottom: 20px;
}

p:last-child {
	margin-bottom: 0;
}
h1, h2 {
	font-weight: bold;
}
h1 { font-size: 21px; }
h2 { font-size: 18px; }
h3 { font-size: 17px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }

.tab-content-wrapper h1.p-title
{
margin:0px;padding:0px;font-size:17px;
	 }
h3, h4, h5, h6 {
	margin-bottom: .2em;
}
.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}
.alignright {
	text-align: right;
}
img[align="left"], img.alignleft {
	float: left;
	margin: 6px 15px 15px 0;
}
img[align="right"], img.alignright {
	float: right;
	margin: 6px 0 15px 15px;
}

/* FADE IN DIVS
------------------------------------------------------------------------- */
.set-alert-mail-list-wrapper
{
      position:absolute;  
    z-index:2000;
    width:100%;
    height:100%;
    margin:0px !important;
  display:none;  
}
.set-alert-mails
{
     text-align: left;
    position: relative;
    top: 10%;
    left: 25%;
 width:220px;
	min-height:300px;
	overflow:hidden;
	z-index:4000; 
}
.change-sensors-wrapper
{
    position:absolute;  
    z-index:2000;
    width:100%;
    height:100%;
    margin:0px !important;
  display:none;
}
.change-sensors
{
  text-align: left;
    position: relative;
    top: 99px;
    left: 20px;
 width:580px;
	min-height:300px;
	overflow:hidden;
	z-index:4000;   
}
.change-sensors.prop
{
 height:590px;
 width:620px;
    top: 59px;
     left: 0px;
 margin:auto;
}
.change-sensors.xchange
{

 width:600px;
    top: 59px;
     left: 0px;
 margin:auto;
}
.progBar_wrapper
{
  position:absolute;  
    z-index:2000;
    width:100%;
    height:100%;
    margin:0px !important;
    display:none;
}
 #browserWarning ul{width:422px;margin:auto;}
 #browserWarning ul li{display:inline-block;float:left;height:140px;width:100px;text-align:center;margin-right:5px;}
.detectBrowser
{
  position:absolute;  
    z-index:2000;
    width:100%;
    height:100%;
    margin:0px !important;
    display:none;
}
.hide{
	display:none;
}
#terms-text {
	height: 60vh;
	overflow-y: auto;
}
.detectBrowser .terms
{
  	height:265px;  
  	padding-top:35px;
}
.dropdownhelp
{
    position:absolute;
    z-index:1000;
	width:200px;
	height:300px;
	padding:10px;
	margin:0px !important;
	display:none;
	background:#ffffff;
	overflow:auto;
		-webkit-box-shadow: 1px 1px 0 #ddd;
	-moz-box-shadow: 1px 1px 0 #ddd;
	box-shadow: 1px 1px 0 #ddd;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.dropdownhelp3
{
    position:relative;
    left:0px;
    z-index:1000;
	width:97%;
	height:150px;
	padding:10px;
	display:none;
	background:#ffffff;
	margin-bottom:15px;
	overflow:auto;
		-webkit-box-shadow: 1px 1px 0 #ddd;
	-moz-box-shadow: 1px 1px 0 #ddd;
	box-shadow: 1px 1px 0 #ddd;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

/* HEADER
------------------------------------------------------------------------- */
header#top {
	height: 73px;
	color: #ccc;
	background: #ffffff ;
	min-width: 1024px;

}
a.hidehelp
{
    display:block;
    text-align:right;
    width:100px;
    float:right;
}

div#logo {
	font-size: 18px;
	
}
header#top div#logo a {
	text-decoration: none;
	color: #aaa;
}
header#top div#logo a:hover {
	color: #ccc;
}
div#logo img {
	vertical-align: middle;
}
div#logo a span {
	color: #eee;
}
a#view-site {
	font-size: 11px;
	font-weight: normal;
	border: 1px solid #444;
	padding: 1px 3px;
	margin-left: 10px;
	background: #333;
	vertical-align: middle;
}
#userinfo {
	margin-top: 15px;
	text-align: right;
}
#userinfo a {
	padding: 4px 10px 4px 25px;
	background: url(/images/icons/user-silhouette.png) 5px 4px no-repeat;
}

/* FOOTER
------------------------------------------------------------------------- */
footer#bottom 
{
    position: absolute;bottom: 0;width:100%;
	color: #ccc;
	font-size: 11px;
	background: #2c2c2c;
	padding: 10px 0 10px 0;
	min-width: 1024px;
}
footer#bottom a
{
color:#fff;
}
header#top a:hover,
footer#bottom a:hover {
	color: #fff;
}

/* Navigation
------------------------------------------------------------------------- */
nav#topmenu {
	height: 36px;
	line-height: 37px;
	min-width: 1024px;
	position: relative;
	z-index: 1;
	background: #6AB0DD;
border-bottom: 1px solid #394693;
	border-bottom: 1px solid #0d8b9b;
}
nav ul li {
	float: left;
	position: relative;
}
nav ul li a {
	display: block;
	color: #fff;
	padding: 0 10px;
}
nav ul li {
	text-shadow: 1px 1px 1px #444;
}
nav ul ul li {
	text-shadow: none;
}
nav ul li.current a,
nav ul li a:hover {
	color: #eee;
}
nav ul#mainmenu {
	float: left;
}
nav ul#userlang 
{
	float: right;margin-right:20px;
}
nav ul#userlang li
{
width:28px;
padding:10px 2px 0px;

}
nav ul#userlang li a
{
width:30px;
display:block;
height:17px;
width:20px;
padding:0px;
border:1px solid #ffffff;

}
nav ul#userlang li:nth-child(2) a 
{
background: url(/images/icons/Kingdom-flag.png) left 0px no-repeat;
}
nav ul#userlang li:nth-child(1)  a
{
background: url(/images/icons/Spain-Flag.png) left 0px no-repeat;
}
nav ul#usermenu 
{
	float: right;
	font-size: 11px;
}
nav ul#usermenu li
{
float:left;
color: #fff;
padding-top: 2px;
}
nav ul#usermenu li a
{
float:none;
display:inline;
padding: 4px 10px 4px 25px;
background: url(/images/icons/user-silhouette.png) 5px 4px no-repeat;

}

nav ul#usermenu li:last-child a
{
padding-left:15px;
background:none;
}

.version-wrapper
{
 	background: #fff;
	margin-bottom: 15px;
	position: relative;
	float:right;
	top:3px;
	right:20px;
	padding: 0;	
	border: 1px solid #bbb;
	width:120px;margin:auto;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
}
span.version
{
    color:#004880 !important;display:block;
   text-align:center;
    text-shadow: 0px 0px 0 #fff !important;
    font-weight:bold;
}

/* CONTENT
------------------------------------------------------------------------- */
section#content {

	padding: 20px 0 0 0;
	min-width: 1024px;
	text-align: justify;
	height:100%;
}

/* MAIN
------------------------------------------------------------------------- */
article {
	border: 1px solid #aaa;
	background: #fff;
	padding: 20px;
	margin-bottom: 15px;
}
article h1 {
	font-family: ariel;
	font-weight: normal;
	background: #f4f4f4;
	padding: 1px 10px;
	margin-bottom: 15px;
}

article h2 {
	color: #902452;
	margin: 15px 0 10px;
}
article .links {
	text-align: right;
	margin-top: 10px;
}

/* content styles
------------------------------------------------------------------------- */
.content img {
	border: 1px solid #ddd;
	padding: 4px;
}
.content ul, .content ol {
	margin-left: 10px;
	padding-left: 10px;
	margin-bottom: 10px;
}
.content ul ul, .content ol ol {
	margin-bottom: 0;
}
.content ul {
	list-style: circle;
}
.content ol {
	list-style: decimal;
}
.content ol ol {
	list-style: lower-alpha;
}
.content dl dd {
	margin: 0 0 10px 20px;
}

/* box
------------------------------------------------------------------------- */
.box {
	background: #fff;
	margin-bottom: 15px;
	position: relative;
	padding: 0;	
	border: 1px solid #bbb;
	background: #fff url(/images/box-header.gif) 0 0 repeat-x;
}
.device_menu .acc-holder{padding-left:0px;background:#ffffff;}
.box span.bo
{
   font-weight:bold; 
   display:block;
}
.box section.perefences
{
   display:none;zoom:1;
}

.box h2 ,.device_menu h2{
   	position: relative;
	height: 23px;
	padding: 5px 36px;
	font-size: 13px;
	font-weight: bold;
	color: #555;
	text-shadow: 1px 1px 0 #fff;
	background: url(/images/icons/bullet_go.png) 10px center no-repeat;
}
.box section {
	padding: 10px;
	font-size: 11px;
}
.box img.toggle {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
.box.info h2 {
	background-image: url(/images/icons/block.png);
}
.box.menu h2 
{
    background-image:none;
	/*background-image: url(/images/icons/bookmarks.png);*/
}
.search {
	padding: 15px 10px;
	border-color: #ccc;
	background: #f4f4f4;
}
.search label {
	font: 11px Tahoma, sans-serif;
	color: #777;
	font-weight: bold;
	margin: 0 0 3px 2px;
	display: block;
}

/* login
------------------------------------------------------------------------- */
#login {
	width: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -150px;
}
#login h2 {
	background-image: url(/images/icons/key.png);
}
#login section {
	padding: 20px;
}
#login a {
	font-size: 11px;
}
input#username, 
input#adminpassword {
	width: 230px;
}
#login #forgot {
	margin-left: 20px;
}

/* Accordion
------------------------------------------------------------------------- */

.accordion h3 
{
    position:relative;
	padding: 2px 8px 0px 20px;
font-family:	Arial,sans-serif;
	font-size: 1.1em;
	letter-spacing:0.05em;
	text-transform:capitalize;
	margin-bottom: 2px;
	cursor: pointer;
	font-weight: normal;
	text-shadow: 1px 0px 0px gray;
background: #ffffff url(/images/icons/arrow_state_grey.png) no-repeat left 5px;
color: #000;
text-align:left;
}
.accordion h3 a
{

color: #000;
display:block;
width:100%;
height:20px;
font-size:12px;
}
.accordion h3  span
{
 display:block;  
padding:  0px;
}
.accordion h3  span.dealer-alert
{
background: url(/images/icons/exclamation-red_thin.png) right center no-repeat;
}
div.accordion h3.active {
background: #ffffff url(/images/icons/arrow_state_grey_expanded.png) no-repeat left 5px;

}
.accordion h3:hover {
	/*background: #eee;*/
}
.accordion div {
	margin: 0;
	padding:0px 9px;
	zoom:1;
}
.accordion div ul li{
margin-left:3px;border:none;
}

.accordion div div {
	margin: 0;zoom:1;	padding:0px 4px;
}

/* accordion boxes
------------------------------------------------------------------------- */
.box ul li {
	padding: 0;
	border-bottom: 1px dashed #D6D8D9;
	width:80%;
	display:block;

}
.device_menu ul li.reg 
{
    height:20px;
line-height:20px;
margin-bottom:2px;
width:inherit;
}

.device_menu ul li.reg a img
{
display:inline-block;    
position:relative;
left:0px;
top:6px;
margin-right:5px;
}
.device_menu ul li.reg a 
{
   display:inline-block;
   position:relative;
   width:100%; 
color: #333;
height:20px;
line-height:20px;
top:-6px;
	/*background: url(/images/icons/tick_open1.png) 0 center no-repeat;*/
}

/*.device_menu ul li.reg.pending-on a {background:url(/images/icons/pending_on.png) 0 center no-repeat;}
.device_menu ul li.reg.unit-off a {background:url(/images/icons/tick_close1.png) 0 center no-repeat;}
.device_menu ul li.reg.pending-off a {background:url(/images/icons/pending_off.png) 0 center no-repeat;}*/
.device_menu ul li a span.controller-alert
{
 display:block;  
padding:  0px;
color: #333;
background: url(/images/icons/exclamation-red_thin.png) right center no-repeat;
}

.device_menu ul li a:hover, .box ul li a.corrent{
	color: Red;
}
.device_menu ul li:hover {
	background-color: #FFFAE3;
}

.device_menu ul ul {
	margin-left: 15px;
}
.device_menu ul ul li {
	border-bottom: none;
}
.device_menu ul#layoutwidth li a {
	padding: 3px 5px 3px 28px;
	color: #333;
	display: block;
	background: url(/images/icons/arrow-move.png) 0 center no-repeat;		
}


/* CSS3 enhancement
------------------------------------------------------------------------- */

nav#topmenu 
{
    background: url(/images/topmenu_bg.png) 0 repeat-x;
	/*background: -webkit-gradient(linear, 0 0, 0 bottom, from(#394693), to(#6AB0DD));
	background: -moz-linear-gradient(#394693, #6AB0DD);
	background: linear-gradient(#394693, #6AB0DD);
	-pie-background: linear-gradient(#394693, #6AB0DD);*/
}
.button {
	-webkit-box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), inset 0 -5px 15px rgba(0, 0, 0, .3), 1px 1px 1px #ccc;
	-moz-box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), inset 0 -5px 15px rgba(0, 0, 0, .3), 1px 1px 1px #ccc;
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), inset 0 -5px 15px rgba(0, 0, 0, .3), 1px 1px 1px #ccc;
}
.buttonASP {
	-webkit-box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), inset 0 -5px 15px rgba(0, 0, 0, .3), 1px 1px 1px #ccc;
	-moz-box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), inset 0 -5px 15px rgba(0, 0, 0, .3), 1px 1px 1px #ccc;
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), inset 0 -5px 15px rgba(0, 0, 0, .3), 1px 1px 1px #ccc;
	
}
a#view-site {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
nav ul#mainmenu li.current a,
nav ul#mainmenu li a:hover,
nav ul#mainmenu ul li:hover {
	-webkit-box-shadow: inset 0 3px 20px rgba(0, 0, 0, .2);
	-moz-box-shadow: inset 0 3px 20px rgba(0, 0, 0, .2);
	box-shadow: inset 0 3px 20px rgba(0, 0, 0, .2);
}
footer#bottom 
{
     background: url(/images/footer_bg.png) 0 repeat-x;
   
/*	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#394693), to(#6AB0DD));
	background: -moz-linear-gradient(#394693, #6AB0DD);
	background: linear-gradient(#394693, #6AB0DD);
	-pie-background: linear-gradient(#394693, #6AB0DD);*/
}
article {
	-webkit-box-shadow: 3px 3px 0 #ddd;
	-moz-box-shadow: 3px 3px 0 #ddd;
	box-shadow: 3px 3px 0 #ddd;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
article h1 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
article .links a {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.box {
	-webkit-box-shadow: #e1e1e1 2px 2px 0;
	-moz-box-shadow: #e1e1e1 2px 2px 0;
	box-shadow: #e1e1e1 2px 2px 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
}
.box h2 {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}


form fieldset {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

div.msg {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}






