﻿/* #Reset & Basics (Inspired by E. Meyers)
================================================== */


/* Global
----------------------------------------------*/
img { 
	border: none;
}
h1, h2 {
	font-family: "Trebuchet MS", sans-serif;
	font-weight: normal;
	line-height: 0.8em;
	/*letter-spacing: -1px;*/
	margin: 0;
	padding: 10px 0;
}

h1 {
	font-size: 2.2em;
	color: #fff;
}
h2 {
	font-size: 1.8em;
	color: #333;
}
a {
	color: #003366;
}
pre {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}
td pre.limit100 { max-width: 100px; width: 100px;} 
td pre.limit75 { max-width: 100px; width: 100px;} 
/* Main Structure
----------------------------------------------*/
html {
	font-size: 62.5%; 
}
body {
	background: #eee url('../img/bkg_body_page.gif') repeat-x center 0;
	font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-size: 13px; 
	font-size: 1.3rem; 
	line-height: 18px; 
	color: #555; 
	position: relative; 
	-webkit-font-smoothing: antialiased; 
}
#page 
{
	/*
	width: 960px;
	margin: 0 auto;
	text-align: center;
	padding:0;
	*/
}

#header {
	background: #3b3b3d url('../img/bkg-header-page.png') repeat-x center 0;
	height: 65px;
	padding-top: 15px;
}

#logo
{

}
#logo-text h1 
{ 
	font: bold 24px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	color: #fff;
	word-spacing: -1px;
	letter-spacing: -2px;
	margin:0; 
	padding-top:9px;
}
/* Navigation
----------------------------------------------*/
#nav-container 
{
	/*width: 960px; */
}
#nav
{
    display: block;
	background:url('../img/nav.png') repeat-x;
	/*height:30px; */
	padding-left: 25px;
}
#nav li
{
	list-style:none; 
	display:inline;
	margin:0; 
	padding:0;
}
#nav li a
{
	float:left;
    display:block;
	background:url('../img/nav.png') 0px -30px no-repeat;
	font:10px Verdana, Arial, Helvetica, sans-serif; 
	color:rgb(255,255,255); 
	text-decoration:none; 
	cursor:pointer; 
	padding-left:15px; 
}
#nav li a span
{
    float:left; 
	display:block; 
    background:url('../img/nav.png') 100% -30px no-repeat;
	line-height:30px; 
	padding-right:15px; 
}
#nav li a:hover
{
	background-position:0px -60px; 
	color:rgb(255,255,255);
}
#nav li a:hover span
{
    background-position:100% -60px;
}

#nav li a.active, 
#nav li a.active:hover
{
	background:url('../img/nav.png') 0px -90px no-repeat; 
	color: #333;
	line-height:30px; 
}
#nav li a.active span, 
#nav li a.active:hover span
{
	background:url('../img/nav.png') 100% -90px no-repeat;
}
/* secondary menu */
#secondary-container {
	background:url('../img/bkg-secondary-nav.png') repeat-x center 0;
	height: 40px;
	color: #333;
	font: 11px Helvetica,Arial,sans-serif;
	padding-top: 10px;
}


/* Content
----------------------------------------------*/
#main
{
	background-color: #fff;
}
#content-container
{

}
#content
{
	padding: 15px;
}

/* Sidebar
----------------------------------------------*/
#sidebar
{
	padding-left: 15px;



}
.lt-blue
{
	background-color: #ecf1f7;
	padding: 15px;
}
.lt-blue input, 
.lt-blue input[type="text"] { 
	width: auto;
}
.dk-black
{
		/*padding: 20px 20px 2px 20px;*/
		background: #0e0e0e;
		background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#F4F4F4));
		background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F4F4F4',GradientType=0 );
		box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
		margin: 0 0 20px 0;
}
.dk-black ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.dk-black li a{
	background: #333 url(../img/bkg-sidebar-li.jpg) repeat-x bottom left;
	font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
	color: white;
	display: block;
	width: auto;
	padding: 10px 0;
	padding-left: 10px;
	text-decoration: none;
}


.dk-black li a:visited, 
.dk-black li a:active{
	color: white;
}

.dk-black li a:hover{
	background-image: url(../img/bkg-sidebar-li-hover.jpg);
}



/* Footer
----------------------------------------------*/
#footer-container
{
	background-color: #343436;
	height: 60px;
	color: #fff;
}
#footer
{
	padding: 15px;
}
#footer a{ color: #fff;}


/*	Panels
	-------------------------------------------------- */
	div.panel {
		padding: 20px 20px 2px 20px;
		background: #efefef;
		background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#F4F4F4));
		background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F4F4F4',GradientType=0 );
		box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
		margin: 0 0 20px 0;
	}
	.login {
		line-height: 40px;
	}
	#login-container
	{
			padding-top: 50px;
	}

	.filter-container
	{
		background-color: #edeef2;
		border: 1px #e2e3e7 solid;
		box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
		-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
		margin: 0 0 20px 0;
		padding: 15px 15px 15px 15px;
	}
	.filter-container input[type="text"],
	.filter-container select
	{
		display:inline-block;	
	}
/*	Tooltips
-------------------------------------------------- */
.tooltip {
    display:none;
    background:transparent url(../img/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#eee;
  }


/* Forms
----------------------------------------------*/
form { margin:0;}
	/* backgrounds */
	.form, .info
	{
		border: 1px #bad0ed solid;
	}
	.form
	{
		background-color: #ecf1f7;
	}
	.info
	{
		background-color: #fff;	
	}

	.form td, .info td { padding: 5px 15px;}
	
	label {
		display: block;
		font-weight: bold;
		font-size: 13px;
	}
	
	/* inputs */
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #777;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		/*margin-bottom: 20px;*/
		background: #fff; 
	}
	select {
		/*padding: 0; */
		width: 220px; 
	}
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }

	/* #Buttons  */

	.button,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background: #eee; /* Old browsers */
		background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
		background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
		background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
		background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
		background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
		background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
	  border: 1px solid #aaa;
	  border-top: 1px solid #ccc;
	  border-left: 1px solid #ccc;
	  -moz-border-radius: 3px;
	  -webkit-border-radius: 3px;
	  border-radius: 3px;
	  color: #444;
	  display: inline-block;
	  font-size: 11px;
	  font-weight: bold;
	  text-decoration: none;
	  text-shadow: 0 1px rgba(255, 255, 255, .75);
	  cursor: pointer;
	  /*margin-bottom: 20px;*/
	  line-height: normal;
	  padding: 8px 10px;
	  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }

	.button:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		color: #222;
		background: #ddd; /* Old browsers */
		background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
		background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
		background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
		background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
		background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
		background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
	  border: 1px solid #888;
	  border-top: 1px solid #aaa;
	  border-left: 1px solid #aaa; }

	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
		border: 1px solid #666;
		background: #ccc; /* Old browsers */
		background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
		background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
		background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
		background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
		background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
		background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }

	.button.full-width,
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }

input.phone { display: inline-block !important; }
input.phone-ext { display: inline-block !important; width: 50px !important;}

	/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    border: 0;
    padding: 0;
	}
	/* custom */
	.sidebar-filterbox input[type="radio"], 
	.sidebar-filterbox input[type="image"], 
	.sidebar-filterbox input[type="text"] {
		display: inline;
	}
	.sidebar-filterbox input[type="text"]
	{
		padding: 3px 4px;
	}
	.sidebar-filterbox label {
		display: inline;
		margin-right: 15px;
	}
	.sidebar-item
	{
		display:inline-block;
		margin-bottom: 15px;
	}

	#btnLogin { margin-left: 160px; }
	.btnNewIssue { margin-left: 50px; }


.admin-filter input, .admin-filter label, .admin-filter select { display:inline-block; margin: 10px 0;}
/* Table Grids
----------------------------------------------*/
.grid {
	background-color: #fff;
	border-left: 1px #bad0ed solid;
	width: 100%;
}
.grid .even {
	background-color: #ecf1f7;
}
.grid th, .grid td, .grid pre {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 24px;
	border-style: solid;
}
.grid th {
	background-color: #333;
	color: #fff;
	border-color: #bad0ed;
	border-width: 1px 1px 1px 0px;
	padding: 2px 5px;
}
.grid th a { color:#fff; text-decoration:none;}
.grid td {
	border-color: #bad0ed;
	border-width: 0px 1px 1px 0px;
	padding: 0 5px;

	border-collapse:collapse;
}
#pager
{
	padding: 5px;
	background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #CCCCCC;
}
#pager input {
vertical-align: bottom;
}
/* Print styles, disable gridview items */
.hide-gridview-row-text a {
	display: none;
}



/*	Icons
	-------------------------------------------------- */
.toolbar, .toolbar div
{
	display:inline-block;
}
.icon-excel-export {
	display: block;
	cursor:pointer;
	background: transparent url(../img/icon-excel-export.png) no-repeat scroll top left;
	width: 150px;
	height: 75px;
}
.icon-excel-export:hover {
	background-position: -150px 0;

}
span.export-text 
{
    color: #ccc;
    text-align: center; 
    padding-left: 20px;   
}
a.icon-print-page {
	display: block;
	cursor:pointer;
	background: transparent url(../img/icon-print-page.png) no-repeat scroll top left;
	width: 150px;
	height: 75px;
}
a.icon-print-page:hover {
	background-position: -150px 0;

}
a.icon-add-item {
	display: block;
	cursor:pointer;
	background: transparent url(../img/icon-add-item.png) no-repeat scroll top left;
	width: 150px;
	height: 75px;
}
a.icon-add-item:hover {
	background-position: -150px 0;

}

.img-header {
	padding: 5px 0 0 0;
}
input.date-box { display: inline-block !important;}