/* INI web system base stylesheet 
   $Id: simple.css 2533 2009-01-21 16:16:15Z dylan $
   This file provides the base styles for the INI website.
   
   Author: Dylan Muir <dylan@ini.phys.ethz.ch>
   Created: 1st February, 2008
*/

/* @group Quirks and justifications */

/* @override 
	http://dbdevel.lan.ini.uzh.ch/~dave/db2/login/include/simple.css
	http://www.ini.uzh.ch/db2/login/include/simple.css
	http://dbdevel/~dave/db2/login/include/simple.css
	http://dbdevel/~dylan/db2/login/include/simple.css
	http://dbdevel/~dylan/db2/include/simple.css
	http://dbdevel/~maik/db2/include/simple.css
	http://dbdevel.lan.ini.uzh.ch/~dylan/db2/include/simple.css
	http://dbdevel.lan.ini.uzh.ch/~dylan/db2/login/include/simple.css
	http://dbdevel.lan.ini.uzh.ch/~dave/db2/include/simple.css
	http://www/db2/include/simple.css
	http://www.ini.uzh.ch/db2/include/simple.css
*/

/*	inline-block on mozilla (firefox pre v3)
	Firefox 2.0 does't support display: inline-block
	For those elements that require it, I've used display: table-cell
	as well. This should degrade nicely on firefox 2.0.
*/

/* @end */

/* @group Default markup */

body {
	min-width: 95ex;
	background-color: #16346c;
	padding: 1.5ex;
}

form {
	overflow: hidden;
}

* {
/*	color: #0b1b39;*/
	padding: 0;
	margin: 0;
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
}

p {
	padding: 0 0 1.25em;
	text-align: left;
	margin: 0;
	max-width: 95%; 
	line-height: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 110%;
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
	margin: 0 0ex 0.5ex;
	padding: 1.5ex 0ex 0ex;
}

h1 {
	font-size: 150%;
}

h2 {font-size: 125%;}

h3 {font-size: 110%;}

h4 {
	font-size: 110%;
	font-weight: normal;
}

h5 {font-size: 100%;}


a {
	text-decoration: underline;
}

a:hover {
	background-color: #ced6e5;
}

a img {
	border: none;
}

ul {
	list-style-position: outside;
	list-style-type: none;
	text-indent: 0px;
}

ul ul {
	padding-left: 2ex;
}

li {
	margin: 0px;
	padding: 0px;
	text-indent: 0px;
}

ol {
	list-style-position: inside;
	margin-left: 2ex;
}

input {
	/* margin: 1ex; */
	vertical-align: bottom;
}

.clear {
	clear: both;
}

.print-only {
	display: none !important;
}
/* force background colour printing in chrome browser */
span, div, table, tr, tbody, tfoot, td, hr {
    -webkit-print-color-adjust: exact;
}
@media print {
	.print-only {
		display: block !important;
		width: 100% !important;
		margin: 0ex !important;
		max-width: none !important;
	}

	.print-only p {
		max-width: none !important;
	}
}

/* @end */

/* @group Includes */

/* @end */

/* @group Header */

div#header {
	background-color: #385281;
}

#header a:hover {
	background: none;
}

#header .background-image {
	display: block;
	position: absolute;
	right: 0ex;
	left: 25ex;
	top: 1ex;
	bottom: 1ex;
	overflow: hidden;
}

#header .background-image img {
	width: 100%;
	display: inline;
}

/* @end */

/* @group Main menu */

div#menu {
	position: relative;
}

div.main-menu {
	background: #000;
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
}

/*div.main-menu::after {
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}*/

.main-menu ul {
	display: block;
	height: 4ex;
	background-color: #000;
}

.main-menu > ul > li {
	position: relative;
	display: block;
	float: left;
	background-color: #000;
	color: #fff;
	height: 4ex;
}

.main-menu > ul > li > div > a {
	display: block;
	padding: 0 4ex 0 1ex;
	color: #fff;
	height: 100%;
	text-decoration: none;
}

.main-menu li.current,
.main-menu li.current > a {
	background-color: #7f0000;
}

.main-menu li a:hover,
.main-menu li:hover,
.main-menu li:hover > div > a {
	text-decoration: none;
	color: #333;
	background-color: #fff;
}

.main-menu ul ul {
	display: none;
	position: absolute;
	top: 4ex;
	left: 0;
	width: 30ex;
	height: auto;
	z-index: 1;
}

.main-menu li:hover ul {
	display: block;
}

.main-menu ul ul li {
	display: block;
	color: #fff;
	width: auto;
	height: 4ex;
}

.main-menu ul ul li > div > a {
	color: #fff;
	display: block;
	padding: 0 4ex 0 1ex;
	height: 100%;
}

.main-menu ul ul ul li {
	display: none;
}


/* @end */

/* @group Navigation trail */

div.navigation-trail {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
	font-size: 90%;
	clear: both;
}

.navigation-trail ul {
	display: block;
	height: 3.4ex;
	background-color: #7f0000;
}

.navigation-trail ul li:first-child {
	/* display: none; */
}

.navigation-trail li {
	padding: 0.5ex 1ex;
	display: block;
	float: left;
}

.navigation-trail li,
.navigation-trail li a {
	display: block;
	background-color: #7f0000;
	color: #fff;
}

.navigation-trail li.current,
.navigation-trail li.current a {
	background-color: #f2e6e6;
	color: #333;
}

.navigation-trail li:hover,
.navigation-trail li:hover a,
.navigation-trail li a:hover {
	background-color: #fff;
	color: #000;
	text-decoration: none;
}

/* @end */

/* @group Navigation tree */

div.navigation-tree {
	float: left;
	width: 23.5ex;
	line-height: 1em;
	background-color: #677a9f;
	margin-right: 1.5ex;
}

div.menu-background {
	position: absolute;
	left: 0ex;
	top: 0ex;
	width: 23.5ex;
	height: 10000ex;
	background-color: #677a9f;
	z-index: -1;
	visibility: visible;
}

div.navigation-tree * {
	color: #052230;
}

div.navigation-tree ul {
	position: relative;
	padding-top: 0.5ex;
	font-size: 100%;
}

div.navigation-tree ul ul {
	padding-left: 0ex;
	padding-top: 0ex;
	font-size: 85%;
}

div.navigation-tree ul ul li {
	margin-left: 0px;
	padding-left: 1ex;
	border-left: 0.8ex solid #a1adc4;
}

div.navigation-tree ul ul,
div.navigation-tree li.current li ul {
	display: none;
}

div.navigation-tree li.current ul,
div.navigation-tree li.current li.current ul {
	display: block;
}

div.navigation-tree li.deepest-menu ul {
	background-color: #808ba0;
}

div.navigation-tree a {
	display: block;
	padding-left: 1ex;
	padding-right: 1ex;
	padding-top: 0.75ex;
	padding-bottom: 0.75ex;
	background-color: transparent;
	text-decoration: none;
}

div.navigation-tree a:hover {
	text-decoration: none;
	background-color: #052230 !important;
	color: #eceded !important;
}

div.navigation-tree li.current ul li a,
div.navigation-tree li.current ul li.current ul a,
div.navigation-tree li.current ul li.current ul li.current ul a {
	background-color: transparent;
	color: #031a26;
	font-weight: normal;
	font-style: normal;
}

div.navigation-tree li.current a,
div.navigation-tree li.current ul li.current a, 
div.navigation-tree li.current ul li.current ul li.current a,
div.navigation-tree li.current ul li.current ul li.current ul li.current a {
	background-color: #a1adc4;
}



/* @end */

/* @group Main content components */

div#page-content {
	border-top: 1.5ex solid #16346c;
	border-bottom: 1.5ex solid #16346c;
        overflow: hidden;
}

/* @group General content */

div#content {
	position: relative;
	padding-left: 1.5ex;
	padding-bottom: 5ex;
        margin-left: 0ex;
	left: 0ex;
}

div#content p {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
}

div.content-background {
	position: absolute;
	left: 0ex;
	top: -10ex;
	width: 1000ex;
	height: 10000ex;
	background-color: #eceded;
	visibility: visible;
	z-index: -1;
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
}

div.body-content h1,
div.body-content h1 *,
div.body-content h2,
div.body-content h2 *,
div.body-content h3,
div.body-content h3 *,
div.body-content h4,
div.body-content h4 *,
div.body-content h5,
div.body-content h5 *,
div.body-content h6,
div.body-content h6 * {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
}

div.body-content * {
	height: auto;
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
}

div#content p {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
}

div.column-set {
    width: 100%;
    overflow: hidden;
}

.column {
	float: left;
	margin-right: 4ex;
	max-width: 30%;
}

.body-content p {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
	text-align: justify;
}

.body-content a:hover {
}

.body-content ul {
	padding: 0 0 1.25em;
}


/* @end */

/* @group Status messages */

.has-status-message {
	position: relative;
}

div.status-message {
	display: block;
	position: absolute;
	right: 2ex;
	top: 0ex;
	width: 1.5em;
	height: 0.8em;
	border: 0.5ex solid black;
	background-color: #f2f2f2;
	color: #f2f2f2;
	content: ".";
	overflow: hidden;
}

.has-status-message:hover > div.status-message,
.has-status-message:hover > * > div.status-message {
	display: block;
	position: absolute;
	right: 2ex;
	top: 0ex;
	width: 50%;
	height: auto;
	min-width: 45ex;
	font-size: 80%;
	padding: 1ex 2ex;
	border: 0.5ex solid black;
	background-color: #f2f2f2;
	z-index: 2;
}

.has-status-message:hover > div.status-message *,
.has-status-message:hover > * > div.status-message * {
	color: black;
}

div.status-message * {
	text-align: left !important;
	padding: 0ex !important;
	margin: 0ex !important;
}

div.status-message h1,
div.status-message h2,
div.status-message h3,
div.status-message h4,
div.status-message h5 {
	font-size: 125% !important;
}

div.status-message.notification {
	border: 0.5ex solid #bfbd5f !important;
	background-color: #f2f079 !important;
}

div.status-message.notification * {
	color: #f2f079;
}

div.status-message.error {
	border: 0.5ex solid #bf5f5f !important;
	background-color: #f27979 !important;
}

div.status-message.error * {
	color: #f27979;
}


/* @end */

/* @group Images/captions */

div.body-content div.image-cap,
div.abstract div.image-cap {
	padding: 1ex;
	float: right;
	width: 40%;
        max-width:550px;
	clear: right;
	background-color: #a1adc4;
	margin: 1.5ex;
}

div.image-cap img {
	width: 100%;
}

div.image-cap p {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
	font-size: 90%;
	text-align: left !important;
	background-color: #a1adc4;
	padding: 1ex 2ex;
}

/* Protect images in image-caps */

div.image-cap {
	position: relative;
}


div.image-cap:after {
	position: absolute;
	top: 0ex;
	left: 0ex;
	right: 0ex;
	bottom: 0ex;
	z-index: 2;
	content: ".";
	visibility: visible;
	color: transparent;
}

/* @end */

/* @group Page abstracts */

div.abstract p {
	text-align: justify;
}

/* @end */

/* @group Action menu */

div.action-menu {
	position: relative;
	width: 35ex;
	background-color: #385281;
	background-color: rgba(86,105,191,0.5);
	padding: 1ex;
	font-size: 90%;
	float: right;
	clear: right;
	z-index: 2;
	margin: 2ex;
}

div.action-menu::before {
	content: "Actions";
	font-weight: bold;
	color: #fff;
	color: rgba(255,255,255,0.5);
}

.action-menu * {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
	color: #fff;
	color: rgba(255, 255, 255, 0.5);
}

.action-menu:hover {
	background-color: rgba(80,98,178,0.9);
}

.action-menu:hover * {
	color: rgba(255, 255, 255, 1);
}

.action-menu:hover::before {
	color: rgba(255, 255, 255, 1);
}

.action-menu ul {
	margin: 1ex;
	padding: 0;
	list-style-type: none;
	list-style-position: inside;
	background-color: transparent !important;
}

.action-menu ul li {
	font-weight: bold;
}

.action-menu ul ul {
	display: none;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.action-menu ul ul li {
	font-weight: normal;
	display: block;
}

.action-menu li:hover ul {
	display: block;
}

.action-menu a {
	background: none;
}

.action-menu a:hover {
}

/* @end */

/* @group Tables */

table {
	border: 1px solid #a1adc4;
	margin-bottom: 1.25em;
}

tbody {
	margin: 0;
	padding: 0;
}

tr {
	margin: 0;
	padding: 0;
}

tr:hover {
	background-color: #ced6e5;
}

td {
	vertical-align: top;
	padding: 0 1ex .2ex;
	max-width: 65ex;
}

table p {
	padding: 0;
	margin: 0;
}

table h1,
table h2,
table h3,
table h4,
table h5,
table h6 {
	padding: 0;
	margin: 0;
}


/* @end */

/* @group Icon summary list */

div.icon-summary-list {
	position: relative;
	clear: right;
	width: 100%;
	overflow: hidden;
}

div.icon-summary-list * {
	line-height: 100%;
}

div.icon-summary-list::after {
}

.icon-summary-list div.image-cap {
	margin: 0;
	padding: 0;
	float: none;
}

.icon-summary-list .image-cap .caption {
	display: none;
}

.icon-summary-list li {
	display: block;
	float: left;
	color: #666;
	margin-bottom: 2ex;
	margin-right: 2ex;
	width: 15ex;
	min-height: 25ex;
}

.icon-summary-list ul h1,
.icon-summary-list ul h2,
.icon-summary-list ul h3,
.icon-summary-list ul h4,
.icon-summary-list ul h5,
.icon-summary-list ul h6 {
	color: #000;
	margin-bottom: 0ex;
	margin-top: 0ex;
	padding-top: 0ex;
}

.icon-summary-list ul h1 {
	font-size: 110%;
}

.icon-summary-list ul h2 {
	font-size: 100%;
}

.icon-summary-list ul h3 {
	font-size: 90%;
}

.icon-summary-list ul h4 {
	font-size: 80%;
}

.icon-summary-list div.icon {
	position: relative;
	display: block;
	width: 70%;
	margin-bottom: 1ex;
}

.icon-summary-list img {
	width: 100%;
	border: 1px solid #000;
}

.icon-summary-list a {
	text-decoration: none;
}

/* @end */

/* @group Icon list */

div.icon-list {
	position: relative;
	clear: right;
	width: 100%;
	overflow: hidden;
}

div.icon-list * {
	line-height: 100%;
}

div.icon-list::after {
}

.icon-list li {
	display: block;
	float: left;
	color: #666;
	margin-bottom: 2ex;
	margin-right: 2ex;
}

.icon-list img {
	height: 5ex;
	width: auto;
	border: 1px solid #000;
}

.icon-summary-list a {
	text-decoration: none;
}



/* @end */

/* @group Mutable object lists */

span.mutable-object {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

span.mutable-object h1,
span.mutable-object h2,
span.mutable-object h3,
span.mutable-object h4,
span.mutable-object h5,
span.mutable-object h6 {
	padding-top: 0ex;
	margin-top: 1ex;
}

span.mutable-object span.actions {
	display: block;
	position: absolute;
	float: left;
	left: 0;
	top: 0ex;
	right: 0ex;
	height: 0ex;
	width: 100%;
	z-index: 100;
}

span.mutable-object span.actions::before {
	display: block;
	position: absolute;
	top: -0.25ex;
	left: -0.25ex;
	width: 2ex;
	height: 2ex;
	content: "";
	visibility: visible;
	border: .3ex solid black;
	border: .3ex solid rgba(22,52,108,0.5);
	font-size: 100%;
	font-weight: bold;
	color: #fff;
}

span.mutable-object span.actions:hover::before {
	border-color: black;
}

span.mutable-object span.actions ul {
	display: none;
	position: absolute;
	top: 0ex;
	left: -0.35ex;
	padding-top: 2.3ex;
	padding-left: 0ex;
	width: 90%;
	min-width: 20ex;
	background-color: transparent;
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
	z-index: 100;
}

span.mutable-object span.actions ul a {
	text-decoration: none;
}

span.mutable-object span.actions ul a:hover {
	text-decoration: underline;
}

span.mutable-object span.actions:hover ul {
	display: block;
}

span.mutable-object span.actions li {
	display: block;
	position: relative;
	min-height: 0px;
	min-width: 0px;
	margin: 0 0 0 0;
	padding: .25ex 0 .25ex 2em;
	background-color: #5062b2;
	background-color: rgba(80,98,178,0.9);
	color: white;
	float: none;
	line-height: 150%;
	width: 100%;
	text-align: left;
	z-index: 4;
}

span.mutable-object span.actions a {
	background-color: transparent !important;
	line-height: 1.5em;
	color: white !important;
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
}

/* @end */

/* @group Box */

div.box {
	border: 0.5ex solid #003f83;
	background-color: #c6d4e4;
	margin-left: 2ex;
	margin-bottom: 2ex;
	min-width: 15ex;
	max-width: 50%;
	color: #003f83;
	padding: 1ex;
	font-size: 80%;
}


/* @end */

/* @end */

/* @group Footer components */

div#footer {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
	padding-right: 2ex;
	padding-left: 26ex;
	padding-top: 1ex;
	clear: both;
}

#footer div {
	display: table-cell;
	display: inline-block;
	width: auto;
/*	min-width: 10ex; */
	padding-right: 4ex;
	vertical-align: top;
	padding-bottom: 2ex;
}

#footer * {
	color: #ced6e5;
	color: rgba(255,255,255,0.7);
}

#footer a:hover {
	background: none;
}

/* @end */

/* @group Sub-footer components */

div#subfooter {
	font-family: "Myriad Pro", "Helvetica Neue", Helvetica, "Lucida Grande", Lucida, Verdana, Geneva, Arial, sans-serif;
	position: relative;
	/*background-image: url(css_images/ini-building-background.jpg) no-repeat right bottom;*/
	padding-top: 1.5ex;
}

#subfooter div {
	display: table-cell;
	display: inline-block;
	width: auto;
	max-width: 40%;
	min-width: 40ex;
	padding-right: 4ex;
	padding-bottom: 2ex;
	padding-top: 1ex;
}

#subfooter * {
	color: white;
}

/* @group Impressum */

#subfooter div.impressum {
	position: absolute;
	bottom: 0px;
	right: 0px;
	font-size: 80%;
	font-weight: lighter;
	text-align: right;
	padding: 0ex;
}

div.impressum p {
	text-align: right;	
}

/* @end */

/* @end */

/* @group AHAH styles */

.ahah-loading {
	display: block;
	width: 220px;
	height: 19px;
	background: url(css_images/ahah-loading.gif) no-repeat center;
	margin: auto;
}

.ahah-error {
	background-color: #ffa5aa;
	font-size: 120%;
}

/* @end */

/* @group Pop-over dialogs */

div.pop-over {
	position: fixed;
	z-index: 100;
	width: 100%;
        height: 0;
}

.pop-over .box {
	position: relative;
	margin: auto;
	background-color: #fff;
	display: block;
	padding: 1ex;
	border: 2px solid #000;
}

.pop-over .box-content {
  max-height:400px;
  overflow:auto;
}

.pop-over .box-content * {
	max-width: none;
	padding: 0;
	line-height: 120%;
/*	overflow: hidden;*/
}

.pop-over .more-link {
	position: absolute;
	bottom: 0.5ex;
	right: 1ex;
	text-align: right;
	font-style: italic;
}

.pop-over .more-link::after {
	color: #7f7f7f;
	font-style: italic;
}

.pop-over .box-content h1,
.pop-over .box-content h2,
.pop-over .box-content h3,
.pop-over .box-content h4,
.pop-over .box-content h5,
.pop-over .box-content h6 {
	margin-top: 0;
	padding-top: 0;
}

.pop-over .box-close a {
	position: absolute;
	top: -18px;
	left: -18px;
	width: 30px;
	height: 30px;
        background: url(css_images/pop-over/pop-over-close.png) no-repeat;
	font-size: 0;
	text-indent: 30px;
	overflow: hidden;
        visibility: hidden;
}

.pop-over .box-left {
	position: absolute;	
	top: 0px;
	bottom: 0px;
	left: -10px;
	width: 10px;
	background: url(css_images/pop-over/pop-over-left.png) repeat-y;
	background-position: left;
}

.pop-over .box-right {
	position: absolute;	
	top: 0px;
	bottom: 0px;
	right: -33px;
	width: 33px;
	background: url(css_images/pop-over/pop-over-right.png) repeat-y;
	background-position: top right;
}

.pop-over .box-top {
	position: absolute;
	top: -10px;
	left: 0px;
	height: 10px;
	width: 100%;
	background: url(css_images/pop-over/pop-over-top.png) repeat-x;
	background-position: top;
}


.pop-over .box-bottom {
	position: absolute;
	bottom: -33px;
	left: 0px;
	height: 33px;
	width: 100%;
	background: url(css_images/pop-over/pop-over-bottom.png) no-repeat bottom;
	background-position: bottom left;
}

.pop-over .box-top-left {
	position: absolute;
	top: -10px;
	left: -10px;
	width: 10px;
	height: 10px;
	background: url(css_images/pop-over/pop-over-top-left.png) no-repeat;
	background-position: top left;
}

.pop-over .box-top-right {
	position: absolute;
	top: -10px;
	right: -33px;
	height: 10px;
	width: 33px;
	background: url(css_images/pop-over/pop-over-top-right.png) no-repeat;
	background-position: top right;
}

.pop-over .box-bottom-left {
	position: absolute;
	left: -10px;
	bottom: -33px;
	height: 33px;
	width: 10px;
	background: url(css_images/pop-over/pop-over-bottom-left.png) no-repeat;
	background-position: bottom left;
}

.pop-over .box-bottom-right {
	position: absolute;
	right: -33px;
	bottom: -33px;
	height: 33px;
	width: 33px;
	background: url(css_images/pop-over/pop-over-bottom-right.png) no-repeat;
	background-position: bottom right;
}

/* force scrollbar on content */
.force-scroll {
 		overflow-x: scroll;
}


/* @end */

/* @group Business cards */

div.business-card img {
	height: 20ex;
        width: auto;
	float: left;
	margin-right: 1ex;
	border: none;
}

/* @end */

.float-right {
    float: right;
}

.align-right { 
  text-align: right;
}

.display-none { 
  display: none;
 }

.display-block { 
  display: block;
 }

.bold {
  font-weight: bold;
}

.bggray { 
  background-color: lightgray;
}

.fggray { 
  color: gray;
}

/* finance functions */
.cellsize {
	width:5px;
}

/* tooltip */ 
.tooltip {outline:none; }
.tooltip strong {line-height:30px;}
.tooltip:hover {text-decoration:none;} 
.tooltip div span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:240px; line-height:16px;
}
.tooltip:hover div span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/* CSS3 extras tooltip */
.tooltip div span
{
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
        
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 5px 5px 8px #CCC;
}

/* date picker */
/* the div that holds the date picker calendar */
.dpDiv {
	}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #ece9d8;
	border: 1px solid #AAAAAA;
	}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #ece9d8;
	}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #aca998;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
	}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	color: white;
	}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: gray;
	font-weight: bold;
	}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: 4060ff;
	font-weight: bold;
	}


/* the forward/backward buttons at the top */
.dpButton {
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	padding: 0px;
	}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	}