/** *********************************************************************************************************
										reset
********************************************************************************************************** */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*/


/** *********************************************************************************************************
										base layout
********************************************************************************************************** */

body{
	font-family: Helvetica, arial, Sans Serif;
	background-color: #EEE;
	color: #333;
	margin: 0;
	padding: 1px;
	font-size: 16px;
	/**font-size: 12pt;	*/
}

ol,
ul{
	padding: 0;
	margin: 0;
}

ol li,
ul li{
	list-style: none;
}

/** *********************************************************************************************************
										base skin
********************************************************************************************************** */

a,
.likeLink{
	color: #224d6f;
	text-decoration: underline;
}

/** 100% #29abe2, 40% #  , 10% #e9f6fc*/

a:hover,
.likeLink:hover{
	color: #29abe2;
}

h3{
	font-size: 21px;
	padding: 16px 0;
	font-weight:normal;
	margin: 0;
}

.emphasized,
.emphasizedBig{
	font-family: palatino, georgia;
}

.emphasizedBig{
	font-size: 150%;
}

.spaced{
	line-height: 140%;
}

.dulled{
	font-size: 8pt;
	color: #999;
}

.error{
	font-weight: bold;
	color: red;
}

.warning{
	color: red;
}

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

.valueDescription{
	font-size: 80%;
	color: #BBB;
	display: inline;
}

.lightText{
	color: #BBB;
}

/** *********************************************************************************************************
										uservoice label css
********************************************************************************************************** */

#uvTab{
	background: #333 !important ;
	background-image: none !important; 
	width: 25px !important;
}

#uvTab:hover{
	padding: 0 0 0 3px !important;
}

#uvTab #uvTabLabel{
	padding: 0 !important;
	margin: 10px 5px !important;
	height: 145px !important;
	background: transparent url(../../../../images/themes/jsportal/uv-feedback-tab.png) scroll 0 0 no-repeat !important ;
}

#uvTab #uvTabLabel img{
	display: none;
}

body #uvw-overlay-background {
	background-color: #EEE;
	opacity: 0.3;
	-moz-opacity: 0.3;
	filter: alpha(Opacity=30);
}

/** *********************************************************************************************************
										pagelayout layout
********************************************************************************************************** */

.productionMode .t-console,
.productionMode .t-err{
	display: none;
}

#backgroundImage{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#all{
	width: 100%;
	height: 100%;
	z-index: 1;
}

#partsContainer,
#dropShadowContainer{
	width:50em;
	position: relative;
	background: #FFF;
}

#dropShadowContainer{
	margin: 1em auto;
}


#all.wide #partsContainer,
#all.wide #dropShadowContainer{
	width:75em;
}

#dropShadowContainer{
	z-index: 1;
}

#partsContainer{
	/*overflow: hidden;*/
}

#header,
#footer,
#content{
	width: 100%;
}


#header{
	height:120px;
	margin-top:0;
	margin-bottom:0;
	position: relative;
}

#header .subMenuLayunder{
	position:absolute;
	padding:0;
	width: 100%;
	background-color: 100%;
	top: 7.6em;
	height: 2.1em;
	background-color: #FFF;
	z-index: -1;
}

.secured #header{
	margin-bottom: 0;
	overflow: visible;
}

.secured #header .subMenuLayunder {
	display: none;
}

#header #searchBlock{
	position: absolute;
	right: 1em;
	top: 1em;
}

#header #searchBlock #searchField{
	width: 10em;
	margin:0 0.5em;
}

#header #searchBlock .searchButton{
	position:relative;
	top:0.2em;
}

#header #languageSelectionBlock{
	position: absolute;
	right: 1em;
	top: 1em;
	font-size: 90%;
}

#header #languageSelectionBlock,
#header #languageSelectionBlock a{
	color: #FFF;
}

.secured #languageSelectionBlock{
	display: none;
}

body.en #header #languageSelectionBlock a.en,
body.nl #header #languageSelectionBlock a.nl{
	text-decoration: none;
	font-weight: bold;
}

.logoContainer{
	position: absolute;
	left: 1em;
	top: 1em;	
	width: 14em;
}
#headerHomeLink{
	display: block;
	text-decoration: none;
}


.byline{
	color:#FFFFFF;
	float:right;
	font-size:95%;
	font-style: italic;
	position:relative;
	top:-0.4em;
}

.byline .tradeMark{
	font-size: 50%;
	margin-left: 0.5em;
}

.secured #all .logoContainer .byline{
	display: none;
}


#content{
	margin-bottom:0px;
	margin-top:0px;
	position:relative;
}

.secured #content{
	/*top: -1.5em;*/
}

#contentLayout{
	width:100%;
	padding:0px;
	margin: 0px;
	/*with the hidden overflow the space at the bottom is fixed, 
	without it the popup container might be hidden at times. TODO: find another solution
	overflow: hidden;
	*/
}

#contentLayout #singleColumn,
#contentLayout #leftColumn,
#contentLayout #rightColumn,
#contentLayout #nestedLeftColumn,
#contentLayout #nestedRightColumn{
	display:block;
	float:left;
	margin:0px;
	list-style: none;
}

#contentLayout #singleColumn{
	padding:1em 0;
	width:48em;
	margin: 0 2em;
}

#contentLayout.publicLayout #singleColumn{
	padding: 1em 2em;
	width:46em;
}

#contentLayout #tabbedColumns #singleColumn{
	width:46em;
}


#all #contentLayout #crossColumnFooter,
#all #contentLayout #crossColumnHeader{
	padding:20px 2em 0;
	width:48em;
	float: left;
}

#all #contentLayout #crossColumnFooter{
	float: left;
	padding:0 1em 1em;
}

#all #contentLayout.publicLayout #crossColumnFooter{
	padding:0 2em 2em;
}

#all.wide #contentLayout #singleColumn{
	width: 69em;
}

#all.wide #contentLayout #tabbedColumns #singleColumn{
	width:71em;
}

#all.wide #contentLayout #crossColumnHeader{
	width:71em;
}

#contentLayout #leftColumn{
	padding: 1em 1em 1em 2em;
	width:31em;
}

#contentLayout #tabbedColumns #leftColumn{
	padding: 1em 1em 1em 0;
}

#contentLayout.publicLayout #leftColumn{
	padding: 2em 1em 2em 3em;
	width:29em;
}

#contentLayout.publicLayout #rightColumn {
	margin-left: 0;
}

#contentLayout #tabbedColumns #leftColumn{
	width:30em;
}

.cornerContainer{
	position: relative;
	display: block;
	float: left;
	overflow: visible;
}

.secured .cornerContainer{
	margin: 0 2em;
	float: left;
}

#tabbedColumns{
	float: left;
}

#tabbedColumns #singleColumn{
	margin: 0;
}

#tabbedColumns:after,
#leftColumn:after,
#rightColumn:after {
	content: "this is trickery, for browsers must learn to see, floating is beauty";
	display: block; 
	height: 0;
	width: 0;
	clear: both; 
	visibility: hidden;
}

#contentLayout #leftColumn #nestedLeftColumn {
	padding-right:0.5em;
	width:17.5em;
}

#contentLayout #leftColumn #nestedRightColumn {
	padding-left:0.5em;
	width:17.5em;
}

#all.wide #contentLayout #leftColumn{
	width:50em;
}

#all.wide #contentLayout #tabbedColumns #leftColumn{
	width:50em;
}

#contentLayout #rightColumn{
	padding: 16px 0;
	width: 15em;
	float: left;
	margin-left: 1em;
}

#contentLayout.publicLayout #rightColumn{
	padding:2em 0 0 1em;
	width:14em;
	text-align: justify;
}



#contentLayout.publicLayout #leftColumn{
	text-align: justify;
}

#contentLayout #tabbedColumns #rightColumn{
	width:13.8em;
}

#all.wide #contentLayout #rightColumn{
	width:20em;
}

#all.wide #contentLayout #tabbedColumns #rightColumn{
	width:18.8em;
}

#content #contentHeader,
#content .contentHeader  {
	float:left;
	width: 100%;
	margin: 0;
}

#crossColumnHeader .contentHeader{
	border-bottom: 1px solid #BBB;
	position: relative;
}

#content,
#rightColumn,
#leftColumn{
	/*position: relative;*/
}

/** this has an unwanted side effect in Firefox of empty space at the bottom of some pages **/
#contentLayout:after {
	content: "this is trickery, for browsers must learn to see, floating is beauty";
	display: block; 
	height: 0;
	width: 0;
	clear: both; 
	visibility: hidden;
}

#contentLayout{
	zoom:1;
}

#footer{
	margin-top: 0.8em;
	padding: 0.4em 0;
	text-align: center;;
	font-size: 90%;
	background-color: #EEE;
	color: #888;
}

#footer .footerText{
	margin: 0;
}

#footer a{
	color: #888;
	text-decoration: none;
}

#footer #publicFooterContent a:hover,
#footer a:hover{
	color: #29abe2;
}

#footer hr{
	width: 84%;
	margin: 1em 8%;
	border: none 0;
	height: 1px;
	background-color: #CCC;
	color: #CCC;
	float: left;
}

#publicFooterContent:after{
	content: "this is trickery, for browsers must learn to see, floating is beauty";
	display: block; 
	height: 0;
	width: 0;
	clear: both; 
	visibility: hidden;
}

#publicFooterContent{
	color: #BBB;
}

#footer #publicFooterContent a{
	color: #BBB;
}

#footer #publicFooterContent .crossColumnFooter{
	margin: 1em;
}

#footer #publicFooterContent .syncFooterLogos{
	float: left;
	clear: both;
	width: 90%;
	margin: 10px 10%;
	color: #888;
}

#footer #publicFooterContent .syncFooterLogos .intro{
	width: 15%;
	float: left;
	text-align: left;
	height: 32px;
	padding-top: 20px
}

#footer #publicFooterContent .syncFooterLogos .syncLogoContainer{
	display: block;
	float: left;
	width: 25%;
	height: 52px;
}

.syncLogoContainer.google img{
}
.syncLogoContainer.ical img{
	margin-top: -5px;
}
.syncLogoContainer.twitter img{
	margin-top: 5px;
}

.footerColumns{
	float: left;
	width: 80%;
	margin: 0 10% 1em;
	text-align: left;
}

.footerColumns .footerColumn{
	float: left;
	width: 33%;
}

.footerColumns .footerColumn.features{
	width: 40%;
}
.footerColumns .footerColumn.website{
	width: 20%;
	margin-left: 10%; 
}
.footerColumns .footerColumn.languages{
	width: 15%;
	margin-left: 15%; 
}


.footerColumns .footerColumn .footerColumnHeader{
	margin: 0.3em 0;
	font-weight: bold;
}

.footerColumns .footerColumn .footerColumnItem,
.footerColumns .footerColumn .footerColumnHeader{
	float: left;
	width: 100%;
}

.tabbedSidePanel{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.hidden{
	display: none;
}

/** *********************************************************************************************************
										pagelayout skin
********************************************************************************************************** */

#header{
	background-color: #37BBA4;
}

#content h1,
#content h1 a{
	color: #333;
	margin: 0;
	font-weight: bold;
}

#content h2{
	color: #333;
	font-size: 22px;
}

.infoBlock{
	background-color: transparent;
	padding: 0;
	margin: 0 0 40px;
	position: relative;
	float: left;
}

.infoBlock .entityDetails,
.infoBlock .formItems{
	margin: 10px 0 0;
}

.infoBlock .formItems .optionalFields{
	float: left;
	display: block;
	margin-top: 6px;
	padding-top: 6px;
	margin: 12px 0 0 0;
	padding: 6px 0 0 0;
	border: none 0;
	border-top: 1px solid #BBB;
	width: 100%;
}

.infoBlock .formItems .optionalFields.collapsed .formItem{
	display: none;
}

.infoBlock .formItems .optionalFields legend{
	padding: 0 6px 0 0;
	font-style: italic;
	cursor: pointer;
	font-size: 85%;
}

.infoBlock .formItems .optionalFields.collapsed legend .showLink,
.infoBlock .formItems .optionalFields legend .hideLink{
	display: inline;
}
.infoBlock .formItems .optionalFields legend .showLink,
.infoBlock .formItems .optionalFields.collapsed legend .hideLink{
	display: none;
}

.infoBlock.collapsed>*{
	display: none;
}

.infoBlock.collapsed .blockHeader,
.infoBlock.collapsed .blockHandels{
	display: block;
}

.infoBlock .infoBlockDescription,
.tableBlock .noGridData{
	padding: 10px 0;
	float: left;
	margin: 0;
}

.tableBlock .noGridData{
	width: 100%;
	border-top: 1px dotted #BBB;
}

.inpagePopupLayer .infoBlock{
	margin: 0;
}

.infoBlock>div.blockHeader{
	margin: 0;
	border-bottom: 1px dotted #BBB;
}

.infoBlock.tableBlock>div.blockHeader{
	border-bottom: 0 none;
}

.infoBlock>div.blockHeader .genericNavigation{
	float: left;
	clear: left;
	padding-bottom: 10px;
}

.infoBlock>div.t-data-grid{
	margin: 0;
}

.infoBlock .blockHeader,
.infoBlock>.blockHandels{
	position: relative;
	float: left;
	top: 0;
	margin: 0;
	padding: 0;
}

.infoBlock .blockHeader{
	width: 100%;
}

.infoBlock.headless .blockHeader{
	background-color: #FFF;
	background-image: none;
	border-bottom: 1px solid #BBB;
}

.infoBlock.headless .blockHeader h3{
	background-image: none; 
}

/** needed to show the normal font size in the ajaxwizards*/
.infoBlock .blockHandels .inpagePopupLayer{
	font-size: 111.1%;
}

.infoBlock .blockHeader{
	white-space: nowrap;
	width: 100%;
}

.infoBlock .blockHeader h3{
	float: left;
}

.blockHandels{
	overflow: visible;
}

.infoBlock .blockHandels{
	position:absolute;
	right:0;
	bottom: 10px;
	
}

.infoBlock .blockHandels .blockHeaderNavigation {
	position: relative;
}

.infoBlock .blockHandels li,
.infoBlock .blockHandels div{
	float: left;
}

.infoBlock .blockHandels .blockHandel{
	display:block;
	float:left;
	margin: 0 0.5em;
	position: relative;
}

#leftColumn .infoBlock{
	width:50em;
}

#rightColumn .infoBlock{
	width:18.5em;
}

#rightColumn .infoBlock .formItem{
	width: 295px;
}

#singleColumn .infoBlock,
.filterBlock{
	width:71em;
}

#all .inpagePopupLayer .infoBlock{
	width: 26.5em;
}

.nonEditableBlock .blockHandels .cancelLink,
.nonEditableBlock .blockHandels .deleteLink,
.editableBlock .blockHandels .editLink{
	display: none;
}

.inpagePopupContainer .infoBlock .blockHandels .blockHandel {
	margin: 5px 0.5em;
}
.inpagePopupContainer .infoBlock .blockHandels .cancelLink.blockHandel {
	margin: 5px 0.5em;
}

.infoBlock .infoBlockRowHandles{
	position: absolute;
	right: 1em;
	top: 0;
}

.infoBlock .infoBlockRowHandles{
	position: absolute;
	right: 0em;
}

.infoBlock .secondColumn{
	position: absolute;
	right: 6em;
	top: 0.5em;
}

.narrow .infoBlock .secondColumn{
	right: 1em;
}

.showChildContentOnRollover .parentRolloverShowContent{
	display:none;
}

.showChildContentOnRollover:hover .parentRolloverShowContent{
	display:inline;
}

.firstColumnOfTwo,
.secondColumnOfTwo{
	width: 50%;
	float:left;
}

.firstColumnOfTwo:after,
.secondColumnOfTwo:after {
	content: "this is trickery, for browsers must learn to see, floating is beauty";
	display: block; 
	height: 0;
	width: 0;
	clear: both; 
	visibility: hidden;
}

.filterBlock .secondColumnOfTwo .entityDetails{
	margin-top: 0;
}

.breadcrumbs{
	font-size: 80%;
	color: #888;
	clear: both;
	float: left;
	width: 100%;
	margin: 0 0 0.5em
}

.breadcrumbs li{
	float: left;
	margin: 0 0.3em 0 0;
}

.breadcrumbs a{
	text-decoration: none;
	border-bottom:1px dotted #224d6f;
}

.breadcrumbs a:hover{
	border-bottom:1px solid #29abe2;
}

.actionLinks{
	float:left;
	padding:0.5em 0;
}
.actionLinks a,
.actionLinks .disabled{
	display:block;
	margin: 0 0 10px;
	min-width: 19.5em;
	text-align: center;
}

.actionLinks .disabled{
	color: #BBB;
}

.pageNotification{	
	display: block;
	text-align: center;
	width: 71em;
	color: green;
	padding: 1em 2em 0;
}

.pageNotification.error{
	color: red;
}

.pageNotificationsContainer{
	clear: both;
}
/** *********************************************************************************************************
										ajax loader
********************************************************************************************************** **/

.ajaxInProgress #ajaxLoadingIndicator {
	display: block;
}

#ajaxLoadingIndicator{
	position: absolute;
	background: #FFF1A8 url("../../../../images/themes/jsportal/loader.gif") no-repeat 0.3em 0.3em;
	z-index: 101;
	width: 5em;
	height: 1.6em;
	position: fixed;
	left: 50%;
	margin-left: -2.5em;
	top: 2em;
	padding: 0.3em 0.3em 0.3em 2.5em;
	display: none;
}

#ajaxLoadingIndicator .loadingText{
	display: block;
	margin-top: 0.2em; 
}

body .secured{
	background-color: #FFF;
}

body div.t-ajax-console{
	z-index: 20;
}

/** the modal window is ccsed to match our native feel */

body #MB_overlay {
	background-color: #EEE !important;
	opacity: 0.6 !important;
	-moz-opacity: 0.6 !important;
	filter: alpha(Opacity=6) !important;
}

a.removeRowLink,
a.removeRowLink{
	display:block;
	height:20px;
	overflow:hidden;
	width:12px;
	position: absolute;
	right: -1.5em;
	/**top: 13px;*/
	top: 7px;
}

a.removeRowLink:hover img,
a.removeRowLink:hover img{
	position: relative;
	left: -12px;
}

/** *********************************************************************************************************
										tooltip layout
********************************************************************************************************** **/

.helpItemRollover{
	color: #BBB;
	font-weight: bold;
	margin: 6px 0 0 2em;
	float:left;
}

body div.ck_tooltip{
	border: 2px solid #BBB;
	width: 15em;
	background-color: #FFF;
}

body div.ck_tooltip .ck_tooltip-title {
	background-color: #BBB ;
	background-image: none;
	color: #444;
}

body div.ck_tooltip .ck_tooltip-content {
	color: #444;
	font-size: 90%;
}

.infoBlock .canvasChartContainer{
	margin: 0;
	position: relative;
	width: 100%;
	min-height: 16em;
	float: left;
}

/**
 * Delete once we have just google charts
 */
 
.infoBlock .canvasChartContainer.canvasChartContainer_old{
	margin-top: 20px;
}

/** *********************************************************************************************************
										contextual help
********************************************************************************************************** **/

.domHilighterTrigger{
	color: #224d6f;
	border-bottom: 1px dotted #224d6f;
}

.domHilighterTrigger:hover{
	color: #29abe2;
	border-bottom: 1px dotted #29abe2;
	cursor: help;
}

.targetHilight,
.targetHilightRingTwo,
.targetHilightRingThree{
	background-color: transparent;
	position: absolute;
}
.targetHilight{
	z-index: 80;
	border : 2px solid #29abe2;
	margin: -2px 0 0 -2px;
}
.targetHilightRingTwo{
	z-index: 79;
	border : 4px solid #29abe2;
	margin: -6px 0 0 -6px;
	padding: 2px;
	opacity: 0.6;
	-moz-opacity: 0.6;
	filter: alpha(Opacity=60);
}
.targetHilightRingThree{
	z-index: 78;
	padding: 6px;
	border : 6px solid #29abe2;
	margin: -12px 0 0 -12px;
	opacity: 0.4;
	-moz-opacity: 0.3;
	filter: alpha(Opacity=30);
}

.expandCollapseLink{
	background:url("../../../../images/themes/jsportal/minus.png") no-repeat scroll 0 0 transparent;
	display:block;
	height:12px;
	position:absolute;
	right:1em;
	top:0.6em;
	width:12px;
}

.collapsed .expandCollapseLink{
	background: url(../../../../images/themes/jsportal/plus.png);
}

.bigButtonContainer{
	display: block;
	position: relative;
	margin-bottom: 12px;
	float: left;
}

.bigButtonContainer .disabledSubmit,
.bigButtonContainer a{
	text-align: left;
	color: #FFF;
	height: 64px;
	font-size: 20px;
	text-decoration: none;
	padding: 10px 8px 10px 20px;
	width: 200px;
	margin-right: 12px;
	overflow: hidden;
	display: block;
	text-align: center;
	background: transparent url(../../../../images/themes/jsportal/big_action_button_green.png) no-repeat scroll 0 -2px;
}

.bigButtonContainer:hover .disabledSubmit,
.bigButtonContainer:hover a{
	color: #FFF;
	text-decoration: none;
	background-position: 0 -86px;
}

.bigButtonContainer:hover .bigButtonRightBorder{
	background-position: -227px -86px;
}

.bigButtonRightBorder{
	position: absolute;
	display: block;
	overflow: hidden;
	right: 0;
	top: 0;
	width: 12px;
	height: 84px;
	background: transparent url(../../../../images/themes/jsportal/big_action_button_green.png) no-repeat scroll -227px -2px;
}

.bigButtonContainer.blue a,
.bigButtonContainer.blue .bigButtonRightBorder{
	background-image: url(../../../../images/themes/jsportal/big_action_button_blue.png);
}

.bigButtonContainer.light_green a,
.bigButtonContainer.light_green .bigButtonRightBorder{
	background-image: url(../../../../images/themes/jsportal/big_action_button_light_green.png);
}

.bigButtonContainer.grey a,
.bigButtonContainer.grey .bigButtonRightBorder{
	background-image: url(../../../../images/themes/jsportal/big_action_button_grey.png);
}

#all .bigButtonContainer .disabledSubmit{
	background-position: 0 -86px;
	background-image: url(../../../../images/themes/jsportal/big_action_button_grey.png);
}

#all .bigButtonContainer.disabledSubmit .bigButtonRightBorder{
	background-position: -227px -86px;
	background-image: url(../../../../images/themes/jsportal/big_action_button_grey.png);
}

.bigButtonSubs{
	font-size: 14px;
	display: block;
	clear: both;
	margin-top:0.3em;
	color: #333;
}


/*************** fixed footer *******************/

.fixedFooter{
	width: 76em;
	left: 50%;
	margin-left: -38em;
	position: fixed;
	bottom: 0;
	background-color: #FFF;
	border: 1px solid #888888;
	border-bottom: 0 none;
	z-index: 20;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
}

.fixedFooter.down{
	height: 0;
	bottom: -1px;
}

.fixedFooter.down>.dropshadow{
	display: none;
}

.fixedFooterZone{
	margin: 0.5em;
}

.fixedFooter .fixedFooterNavigation{
	left: -1px;
	top: -24px;
	height: 22px;
	position: absolute;
	background-color: #FFF;
	border: 1px solid #888888;
	border-bottom-color: #FFF; 
	
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
}

.fixedFooter.down .fixedFooterNavigation{
	top: -20px;
}

.fixedFooter .fixedFooterNavigation .fixedFooterNavigationItem{
	float: left;
	height: 22px;
	padding: 0 6px;
	border-bottom: 1px solid #888; 
	border-right: 1px solid #888; 
	background-color: #EEE;
}

.fixedFooter .fixedFooterNavigation .fixedFooterNavigationItem:hover{
	background-color: #FFF;
}

.fixedFooter .fixedFooterNavigation .fixedFooterNavigationItem.first{
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
}

.fixedFooter .fixedFooterNavigation .fixedFooterNavigationItem.last{
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	border-right: 0 none;
}

.fixedFooter .fixedFooterNavigation .fixedFooterNavigationItem.selected{
	background-color: #FFF;
	border-bottom: 0 none; 
}

.fixedFooter.down .fixedFooterNavigation .fixedFooterNavigationItem.selected{
	background-color: #EEE;
}

.fixedFooter .fixedFooterNavigation .fixedFooterNavigationItem.toggleContainer{
	border-right: 0 none; 
}
.fixedFooter.down .fixedFooterNavigation .fixedFooterNavigationItem.selected a,
.fixedFooter .fixedFooterNavigation .fixedFooterNavigationItem a{
	text-decoration: none;
	color: #888;
}

.fixedFooter .fixedFooterNavigation .fixedFooterNavigationItem.selected a{
	color: #000;
}
.fixedFooter .fixedFooterToggle span{
	display: none;
}

.fixedFooter .fixedFooterToggle{
	display: block;
	position: relative;
	height: 1em;
	width: 9px;
	background: url(http://www.yanomo.com/assets/1.1.17/images/themes/jsportal/sort_ascending.gif) no-repeat scroll 0 8px;
}

.fixedFooter.onTop .fixedFooterToggle{
	background: url(http://www.yanomo.com/assets/1.1.17/images/themes/jsportal/sort_descending.gif) no-repeat scroll 0 2px;
}

/** *********************************************************************************************************
										forms
********************************************************************************************************** */

.formItems{
}

.entityDetails,
.formItems{
	clear: both;
	float: left;
	width: 100%;
}

#all.wide #singleColumn .formItems{
	width: 69em;
}

.entityDetails:after,
.formItems:after {
	content: "this is trickery, for browsers must learn to see, floating is beauty";
	display: block; 
	height: 0;
	width: 0;
	clear: both; 
	visibility: hidden;
}

.formItem{
	padding: 0.4em 0 0;
	clear: both;
	float:left;
	width: 100%;
	min-height: 30px;
}

.formItem label,
.formInputLabel{
	float:left;
	position:relative;
	width:10em;
	padding: 6px 0;
	text-align: left;
}

#all .formItem .formInputLabel.fullWidthLabel,
#all .formItem label.fullWidthLabel{
	width: 100%;
}

.formItem input,
.formInput{
	position: relative;
	display: block;
	float:left;
}

.formInput{
	padding: 6px 0;
}

.formInput .workCompletePercentageSymbol{
	padding: 6px 4px;
	float: left;
}

.percentageCompleteForm .hourFieldLabel{	
	padding: 6px 4px;
	display: block;
	float: right;
}

.editable .formInput,
.editableBlock .formInput,
.formInput.displayFormItem,
.mediumForm .formInput{
	padding: 0;
}

.staticFormInput,
.editableBlock .formInput.staticFormInput,
.editable .formInput.staticFormInput{
	padding: 6px 0;
}

.formItem .validation-msg{
	clear: both;
	margin: 0;
	font-size: 90%;
	color: red;
	float: left;
	width: 100%;
	display: block;
}

.formItem .nextLine,
.formInput.nextLine{
	clear: both;
	margin-left: 0;
	margin-top: 1.3em;
}

.formItem  input[type=text],
.formInput input[type=text],
.formItem  input[type=password],
.formInput input[type=password],
.formItem  textarea,
.formInput textarea,
.formInput select,
.inpagePopupLayer .formItem iframe,
.inpagePopupLayer .formInput iframe{
	width: 248px;
	font-family: Helvetica, arial, Sans Serif;;
	float: left;
	font-size: 14px;
	padding: 4px 6px;
}

.formItem select.monthSelect,
.formItem select.yearSelect{
	width: 80px;
}

.formItem select.contactDetailTypeSelect{
	width: 140px;
}

#all .formInput select{
	padding: 0;
}

/**needed for the textarea resize mixin*/
textarea{
	line-height: 100%;
}

#all .inpagePopupLayer{
	padding: 0.5em 1.5em 1em;
}

.formInput .formValueDescription{
	margin: 0.5em 0;
	display: block;
}

.inpagePopupContainer .formInput .formValueDescription{
	max-width: 16em;
}

.inpagePopupContainer .formItem.descriptionItem{
	width: 26em;
}

textarea{
	font-family: Helvetica, arial, Sans Serif;
	padding: 6px;
}

textarea.helpMessageShown{
	color: #BBB;
}

.formItem select,
.formInput select {
	width: 265px;
	margin: 6px 0;
}

.formItem .formInputLabel select{
	margin: 0;
}

select {
	font-size: 14px;
}

.radioLabelCombo{
	clear: both;
	float: left;
	width: 100%;
}

.inpagePopupLayer .formItem .radioLabelCombo input,
.inpagePopupLayer .formInput .radioLabelCombo input{
	width: auto !important;
}

.formItem input[type="radio"]{	
	margin: 8px 10px 8px 0;
}

#all.wide #singleColumn .inpagePopupContainer .formItems{
	width: 29em;
}

#rightColumn .inpagePopupContainer .infoBlock .formItem,
.inpagePopupContainer .formItem{
	width: 27em;
}

.mediumForm .formItem input,
.mediumForm .formItem textarea,
.mediumForm .formInput input,
.mediumForm .formInput textarea,
.mediumForm .forceAutocompleteFieldContainer,
.narrowForm .formItem input,
.narrowForm .formItem textarea,
.narrowForm .formInput input,
.narrowForm .formInput textarea,
.narrowForm .forceAutocompleteFieldContainer{
	width: 9em;
}

.formItem input.amountField{
	width: 9em;
	text-align: right;
}

.formItem  input[type=checkbox]{
	margin: 8px 3px;
}

.formItem .formInputLabel input[type="checkbox"],
.formItem label input[type="checkbox"] {
	margin: 4px 8px 4px 0;
}

.filterPage .mediumForm .formItem input[type="checkbox"],
.mediumForm .formItem input[type=checkbox]{
	width: auto;
}

.narrowForm .formItem label,
.mediumForm .formItem label{
	width: 5em;
}

.narrowForm .formItem label{
	clear: both;
}

.filterPage .mediumForm .formItem label{
	width: 130px;
}
.filterPage .mediumForm .formItem input{
	width: 146px;
}
.filterPage .mediumForm .formItem select{
	width: 160px;
}

.radioLabelCombo{
	display: block;
}

input.secondInputField,
input.thirdInputField{
	margin-top: 0.5em;
	margin-left: 160px;
	clear:both;
}

.formInputDescription{
	font-size: 90%;
	color: #888;
	margin-left: 1em;
}

.formControls{
	display: block;
	clear: both;
	position: relative;
	float:left;
	padding: 1em 0;
	width:100%;
}

.formControls.addRowControls{
	width: auto;
	float: right;
	margin-right:1em;
	padding-bottom: 0;
}

.formControls.additionalControls{
	padding: 0;
}

.formControls li,
.formControls .back,
.formControls .next  {
	display: inline;
}

.formControls .back{
	float: left;
}

.formControls .next{
	float: right;
	text-align: right;
}

.formItems .buttons{
	width: 100%;
	text-align: right;
}

.narrowForm .formItem label,
.narrowForm .formInputLabel{
	clear: both;
}

.singleRadio{
	width: auto;
}

.radioOptions{
	width: auto;
}

.narrowForm .formInput,
.mediumForm .formInput{
	position: relative;
	display: inline;
	margin-left: auto;
	left: 0;
}

input.formFieldHelpHint{
	color: #DDD;
}

a.linkClass{
   color:black;
}

#all div.t-autocomplete-menu{
	z-index: 10;
}

#all div.t-autocomplete-menu ul{
	border: 1px solid #888;
	background-color: #FFF;
	max-height: 12em;
	padding: 0;
}

#all div.t-autocomplete-menu ul li,
#all div.t-autocomplete-menu ul:hover li.selected{
	color: #000;
	font-weight: normal;
	border-bottom: 0 none;
	padding: 0 0.3em;	
	background-color: #FFF;
}

#all div.t-autocomplete-menu ul li:hover,
#all div.t-autocomplete-menu ul li.selected,
#all div.t-autocomplete-menu ul li.focus{
	color: #FFF;
	background-color: #224d6f;
}


#all .t-autoloader-icon{
	position:absolute;
	right: 6px;
	top: 8px;
	background: none;	
	background-color: #FFF;
	z-index: 1;
}

#all div.t-autocomplete-menu ul li.devider,
#all div.t-autocomplete-menu ul li.devider:hover{
	background-color:#FFF;
	color:#888;
}
#all .datePicker{
	z-index:1;
	background-position: 96% center;
}
/**the fck editor*/
.formItem iframe,
.formInput iframe{
	width: 100%;
}

/** the yui editor **/
.formItem .yui-editor-container {
	float: left;
	width:16.5em !important;
}

/**date picker image for t5components datetimepicker and t5 datefield*/

img.inputExtension{
	left:15em !important;
	position:absolute !important;
	top:0.4em !important;
}

.inpagePopupLayer img.inputExtension{
	left:14.2em !important;
	position:absolute !important;
	top:0.2em !important;
	
}

img.t-calendar-trigger{
	position:absolute;
	right: 6px;
	top: 7px;
}

img.t-calendar-trigger-arrowUp,
img.t-calendar-trigger-arrowDown{
	position:absolute;
	right:1.8em;
	top: 10px;
}

img.t-calendar-trigger-arrowUp:hover,
img.t-calendar-trigger-arrowDown:hover{
	cursor: pointer;
}

img.t-calendar-trigger-arrowDown{
	top: 13px;
}

/** the calendar item pop up */

BODY .DynarchCalendar{
	background-color: #FFF;
}

BODY .DynarchCalendar-bottomBar,
BODY .DynarchCalendar-topBar,
BODY .DynarchCalendar-focused .DynarchCalendar-bottomBar,
BODY .DynarchCalendar-focused .DynarchCalendar-topBar {
    background-color: #F5F5F5;
}

BODY .DynarchCalendar-dayNames div,
BODY .DynarchCalendar-title div{
	text-shadow: none;
}
BODY .DynarchCalendar-title div{
	color: #8D1433;
}
BODY .DynarchCalendar-day-today.DynarchCalendar-day-selected,
BODY .DynarchCalendar-day-selected {
    background-color: #37BBA4;
}

BODY .DynarchCalendar-day-today.DynarchCalendar-day-selected,
BODY .DynarchCalendar-day-today{
	color: #8D1433; 
}

BODY .DynarchCalendar .DynarchCalendar-weekend{
	color: #888;
}

BODY .DynarchCalendar .DynarchCalendar-day-othermonth{	
	color: #BBB;
}

img.t-error-icon {
	margin-left:-1.3em;
	margin-top:0.2em !important;
	position:absolute;
	display: none;
}

#all input.t-error, textarea.t-error, select.t-error {
	border:2px solid red;
	color: red;
	font-style: normal;
}

.datePicker img.t-error-icon {
	display: none;
}

div.t-error {
	border: 0 none;
}
div.t-error div{
	display: none;
}

html body #all div.t-error li{
	margin-left: auto;
}

/** ********************the estimation fields ********************** */

.estimationFieldContainer{
	background-color:#F5F5F5;
	color:#888888;
	margin: 0 0.5em 0 9.6em;
	/**background: #EEE url(http://www.yanomo.com/assets/1.1.17/ctx/static/css/images/themes/jsportal/top_cast_shadow.png) repeat-x scroll 0 -11px;*/
	background-color: #EEE;
}

.estimationFieldAvailable .estimationRelationContainer{
	border-bottom: 1px solid #BBB;
}

.estimationFieldContainer .formItem label,
.estimationFieldContainer .formInputLabel {
	padding-left: 0.5em;
	width: 9em;
}

.estimationFieldContainer .formInput {
	float: right;
}

.estimationFieldContainer input.estimateField{
	margin-right: 0.9em;
}

.formItem input.durationField,
.formItem input.estimateField,
.formInput input.durationField,
.formInput input.estimateField{
	width: 4em;
	text-align: right;
	float:right;
}

.formItem input.durationField
.formInput input.durationField{
	margin-bottom: 0;
	display: block;
	z-index: 2;
	position: relative;
}

.estimationFieldAvailable .formItem.durationFieldContainer{
	border-bottom: 1px solid #BBB;
}

.estimationFieldContainer{
	display: none;
	margin-left: 0.5em;
	padding:0.3em 0;
	width: 95%;
}

.budgetDetailsList .estimationRelationContainer,
.estimationFieldAvailable .endDateformItem{
	border-bottom: 1px solid #BBB;
	padding-bottom: 0.3em;
}

.budgetDetailsList .estimationFieldContainer,
.estimationFieldAvailable .estimationFieldContainer{
	display: block;
	position: relative;
	min-width: 16.6em;
}

.timeEntryFormItems.estimationFieldAvailable .estimationFieldContainer{
	width: 16.6em;
	margin-left: 10em;
}

img.captchaImage{
	display: block;
	clear:both;
	float:left;
}

#all div.t-palette-title {
	background-color: #F5F5F5;
	color: #8D1433;
	font-weight: normal;
}


/** *********************************************************************************************************
										table css
********************************************************************************************************** */


div.t-data-grid{
	width: 100%;
	font-family: Helvetica, arial, Sans Serif;
}

.t-data-grid table.t-data-grid {
	border: 0 none;
	width: 100%;
}

.infoBlock.tableBlock{
	padding: 0;
	float: left;
	width: 100%;
}

.infoBlock.tableBlock .t-data-grid table.t-data-grid {
	clear: both;
}

table.t-data-grid thead tr {
	background-color: #FFF;
	border: 0 none;
	border-top: 0 none;
}

table.t-data-grid thead tr th {
	font-size: 100%;
	font-weight: normal;
	margin: 0 -1em 1em;
	padding: 0.2em 1em;
	color: black;
}

#all table.t-data-grid thead tr {
	border-collapse: separate;
	height: 1em;
	background-color: #EEE;
	color: #333;
}

#all table.t-data-grid thead tr th,
#all table.t-data-grid thead tr th a{
	color: #333;
}

table.t-data-grid thead tr th{
	border-right: 1px solid #FFF; 
	margin-right: 1px;
}

#all table.t-data-grid thead tr th.t-last{
	border-right: none;
}

table.t-data-grid tbody tr{
	border-bottom: 1px dotted #BBB;
}

table.t-data-grid tbody tr.selected,
table.t-data-grid tbody tr:hover,
table.t-data-grid tbody tr:hover .tableRowEdit  {
	background-color: #e9f6fc !important;
}


#all table.t-data-grid thead tr th {
	border: 0 none;
	margin: 0;
	padding: 0.3em 0.5em;
	font-size: 90%;
	color: #888;
	background: url(../../../../images/themes/jsportal/white_hairline.gif) scroll 0 100% no-repeat;
}

table.t-data-grid thead tr th a {
	background-color: transparent;
	background-image: none;
	background-repeat: no-repeat;
	background-position: 100% 50%;
	color: #888;
	text-decoration: none;
	display: block;
}

table.t-data-grid thead:hover tr th a {
	width: 100%;
	background-image: url(../../../../images/themes/jsportal/sort_unsorted.gif);
}

table.t-data-grid thead tr th a:hover {
	color: #29ABE2;
}

table.t-data-grid thead tr th a.t-sort-column-descending {
	background-image: url(../../../../images/themes/jsportal/sort_descending.gif);
}

table.t-data-grid thead tr th a.t-sort-column-ascending {
	background-image: url(../../../../images/themes/jsportal/sort_ascending.gif);
}

table.t-data-grid thead tr th a+a {
	display: none;
}

table.t-data-grid thead tr th a img.t-sort-icon {
	display: none !important;
	display: inline;
}

table.t-data-grid tbody tr td {
	border: 0 none;
}

table.t-data-grid tbody tr td,
table.t-data-grid tfoot tr td {
	padding: 10px 0.5em;
}

table.t-data-grid tr.even td {
	background: #F4F4F4;
}

div.t-data-grid-pager {
	text-align: right;
}

/** 100% #29abe2, 40% #a9ddf3 , 10% #e9f6fc*/

div.t-data-grid-pager span.current {
	background-color:#29abe2;
	color:white;
	border: 0 none;
}

div.t-data-grid-pager a {
	color:#29abe2;
	border: 0 none;
}

div.t-data-grid-pager a:hover {
	color:#29abe2;
	background-color:#a9ddf3;
	border: 0 none;
}

#pagination {
	float: left;
	left: 1em;
	margin-top: -1em;
}

td.money-cell {
	text-align: right;
}

.tableBlock table.t-data-grid tbody tr.warn {
	background-color: #fff5f5;
}

.tableBlock table.t-data-grid tbody tr.warn:hover {
	background-color: #ffeaea;
}

.tableBlock table.t-data-grid tbody tr.critical {
	background-color: #ffe0e0;
}

.tableBlock table.t-data-grid tbody tr.critical:hover {
	background-color: #ffcfcf;
}

.tableBlock table.t-data-grid tbody tr .tableRowEdit{
	width: 3.5em;
	height: 1.3em;
	display: block;	
}
.tableBlock table.t-data-grid tbody tr .tableRowEdit a,
.tableBlock table.t-data-grid tbody tr .tableRowEdit .deleteLink,
.tableBlock table.t-data-grid tbody tr .tableRowEdit .editButton{
	display: none;
}

.tableBlock table.t-data-grid tbody tr:hover .tableRowEdit a,
.tableBlock table.t-data-grid tbody tr:hover .tableRowEdit .deleteLink,
.tableBlock table.t-data-grid tbody tr:hover .tableRowEdit .editButton{
	display: block;
}

.tableRowEdit a,
.tableRowEdit .deleteLink,
.tableRowEdit .editButton,
.tableRowEdit input{
	float: left;
}

.tableCSVDownloadLinkText{
	display: none;
}

div.t-data-grid .number {
	display: inline;
	/*width: 100%;
	display: block;
	text-align: right;	*/
}

td.amount,
td.quantity,
td.totalAmount,
td.grossTotalAmount,
td.netTotalAmount,
td.totalVatAmount {
	text-align: right;
}

.t-data-grid .totals-row{
	color: #888;
}

.totals-pagespan-title{
	color: #bbb;
	font-size: 85%;
}

/** *********************************************************************************************************
										navigation layout
********************************************************************************************************** */

.topNavigation{
	float: right;
	height: 100%;
}

.topNavigation ul.topNavList{
	position:relative;
	margin: 0 0;
	overflow: visible;
}

.topNavigation ul.topNavList{
	margin: 84px 0 0;
	float: right;
}

/** don't think I need this anymore
ul.topNavList li{
	position: relative;
	display: block;
	padding: 0;
	margin-right: 3px;
}*/

ul.topNavList li.navigationAdditionalContent{
	padding:0.2em;
}

ul.topNavList li.navigationAdditionalContent a,
ul.topNavList li.navigationAdditionalContent span.warning{
	display:inline;
	padding: 0;
}

ul.topNavList li.navigationAdditionalContent a{
	background: none;
	border: none;
	color: #224d6f;
}

ul.topNavList li.navigationAdditionalContent a:hover{
	color: #29abe2;;
}

ul.topNavList li a{
	height: 18px;
	border: none 0;
}

ul.topNavList li ul{
	position:absolute;
	left:auto;
	padding:0;
	width: 20em;
	top: 1.9em;
	height: 2.1em;
}

.topNavigation ul.topNavList li,
.topNavigation ul.topNavList li ul li{
	list-style-type:none;
	float:left;
}

.topNavigation ul.topNavList li.rightItem,
.topNavigation ul.topNavList li ul li.rightItem{
	float:right;
}

.topNavigation ul.topNavList li ul{
	z-index: 1;
}

ul.topNavList li ul{
	display: none;
}


ul.topNavList li.selected ul,
ul.topNavList li:hover ul,
#all ul.topNavList:hover li.selected:hover ul{
	display: block;
}

#all ul.topNavList:hover li.selected ul{
	display: none;
} 

.topNavigation ul.topNavList li.ContactUs ul{
	left:-16em;
	padding-left:7em;
	width:18em;
}

.topNavigation ul.topNavList li.FeaturesOverview ul{
	left: -7em;
}



/** *********************************************************************************************************
										navigation skin
********************************************************************************************************** */

.topNavigation .navigationAdditionalContent{
	display: none;
}

.topNavigation ul.topNavList li a,
.secureduser.viewingSelf .topNavigation ul.topNavList li.ContactsAll a,
.topNavigation ul.topNavList li.selected.UserDashboard a{
	color:#FFF;
	text-decoration: none;
	background-color: transparent;
}

.topNavigation ul.topNavList li a{
	display:block;
	padding: 10px 15px 8px;
	position: relative;
	border:0 none;
}

.topNavigation ul.topNavList li .topLeft,
.topNavigation ul.topNavList li .topRight{
	display:none;
}

.topNavigation ul.topNavList li.rightItem a,
.topNavigation ul.topNavList li ul li.rightItem a{
	margin-left:0;
	margin-right:1em;
}

.topNavigation ul.topNavList li ul li a,
#header:hover ul.topNavList li.selected ul li a{
	color: #888;
	background-color: transparent;
}
	
.topNavigation ul.topNavList li.selected ul li.selected>a,
.topNavigation ul.topNavList li ul li:hover>a{
	color: #333;
}

.topNavigation ul.topNavList li.selected:hover ul li a{
	color: #888 !important;
}

.topNavigation ul.topNavList li.selected:hover ul li a:hover{
	color: #333 !important;
}

.topNavigation ul.topNavList>li.selected>a,
.secureduser.viewingSelf .topNavigation ul.topNavList li.UserDashboard>a,
.secureduser .topNavigation ul.topNavList li.ContactsAll>a,
.securedcompany .topNavigation ul.topNavList li.ContactsAll>a,
.securedproject .topNavigation ul.topNavList li.Projects>a,
.securedtask .topNavigation ul.topNavList li.Projects>a,
.securedwork .topNavigation ul.topNavList li.Projects>a,
.securedlabel .topNavigation ul.topNavList li.Projects>a,
.securedlicenses .topNavigation ul.topNavList li.AllLicenses>a,
.securedlicense .topNavigation ul.topNavList li.AllLicenses>a,
.securedbilling .topNavigation ul.topNavList li.InvoicesAll>a,
.securedsettings .topNavigation ul.topNavList li.LicenseSettings>a{
	background-color: #FFF;
	color: #333;
}


.secureduser.viewingSelf .topNavigation ul.topNavList li.ContactsAll>a:hover,
.topNavigation ul.topNavList>li:hover>a,
#header:hover ul.topNavList>li.selected:hover>a,
#all #header .topNavigation ul.topNavList:hover>li.selected:hover>a{
	background-color: #333;
	color: #FFF;
}


.productfeatures ul li.FeaturesOverview ul:hover li.FeaturesOverview a{
	color:#888;
}

.topNavigation ul.topNavList li.selected ul li a,
.topNavigation ul.topNavList li ul li a{
	white-space: nowrap;
	color:#888;
}

/** ***************************** the navigation icons *************************** */

.calendarFullScreenToggle{
	display: none;
}

.securedusertime ul li.WorkWeekCalendar a{
	/*reactivate when calendar expander is working like it should in all browsers padding-right: 2em;*/
}

.securedusertime ul li.WorkWeekCalendar .calendarFullScreenToggle{
	position: absolute;
	top: 0.4em;
	right: 0.7em;
	z-index: 10;
	cursor: pointer;
	display: block;
}


/** *********************************************************************************************************
										in page navigation
********************************************************************************************************** */

.genericNavigation.inPageNavigation{
	float: left;
}

.inPageNavigation>ul,
ol.inPageNavigation{
	float: left;
	display: block;
	margin: 0 0 0 10px;
}

.inPageNavigation>ul li,
ol.inPageNavigation li{
	display: block;
	float: left;
	margin-right: 0.5em;
	position: relative;
	top: 1px;
}

.inPageNavigation>ul li a,
ol.inPageNavigation li a{
	display: block;
	border: 1px solid #bbb;
	background: url(../../../../images/themes/jsportal/tab_bg.gif) scroll 0 -5px;
	padding: 0.3em 0.6em 0.3em;
	position: relative;
	text-decoration: none;
	min-width: 5em;
	text-align: center;
	color: #888;
}

.inPageNavigation>ul li a:hover,
ol.inPageNavigation li a:hover{
	background-color: #FFF;
	background-image: none;
	z-index: 2; 
	color: #888;
}


#topRightInPageNavigation {
	position: relative;
	padding: 0 0.5em;
	right: 0;
	text-align: right;
	display: block;
	height: 2em;
	top: 0;
}

#topRightInPageNavigation ol {
	display: block;
	position: absolute;
	right: 0.5em;
}

#topRightInPageNavigation li {
	display: block;
	float: left;
}

#topRightInPageNavigation li a{
	padding: 0.3em;
	text-decoration: none;
	position: relative;
	display: block;
	float: left;
}

#topRightInPageNavigation li a{
	font-size: 90%;
	padding: 0.55em 0.6em;
	margin: 0 0.2em;
	
}

#topRightInPageNavigation li:hover a{
	background-color: #EEE;
	color: #000;
}

.panelLinks{
	display: block;
	margin: 1em 0;
}

.panelLinks a{
	margin-right: 0.5em;
	font-size: 90%;
}

.panelLinks.headerRightAligned{
	position: absolute;
	right: 0;
	margin: 0 0.1em;
	padding: 0 0.3em;
	z-index: 1;
	top: 0.4em;
}


/**	user time navigation skin **/

BODY.securedusertimeWorkWeekCalendar a#workWeekView,
BODY.securedusertimeWeekCalendar a#weekView,
BODY.securedusertimeMonthCalendar a#monthView,
BODY.securedusertimeDayCalendar a#dayView,
BODY.securedusertimeMatrix a#matrixView,
BODY.securedusertimeReport a#reportView,
BODY.securedcompanyOverview a#overview{
	background-color: #EEE;
	color: #000;
}


.inPageNavigation .selected a,
BODY.securedusertime .WorkWeekCalendar a,
BODY.securedusertime .WeekCalendar a,
BODY.securedusertime .DayCalendar a{
	border-bottom: 1px solid #FFF;
	background-image: none;
	color: #000;
	background-color: #FFF;
	z-index: 1;
}

.inPageNavigation ul li.selected,
BODY.securedusertime .WorkWeekCalendar ul li,
BODY.securedusertime .WeekCalendar ul li,
BODY.securedusertime .DayCalendar ul li{
	z-index: 1;
}

/** deeper non listed public navigation */
.productfeatures .topNavigation ul.topNavList>li.FeaturesOverview>a{
	background-color: #FFF;
	color: #333;
}

.productfeatures .topNavigation ul.topNavList li.FeaturesOverview>ul{
	display:block;
}

.productfeatures #all #header ul.topNavList>li.FeaturesOverview:hover>a{
	background-color: #EEE;
	color: #888;
}

.productfeatures .topNavigation ul.topNavList li.FeaturesOverview a .topLeft,
.productfeatures #all #header ul.topNavList li.FeaturesOverview:hover a .topLeft,
.productfeatures .topNavigation ul.topNavList li.FeaturesOverview a .topRight,
.productfeatures #all #header ul.topNavList li.FeaturesOverview:hover a .topRight{
	display:block;
}

#all #header .topNavigation ul.topNavList:hover>li.selected>a{
	background-color: #37BBA4;
	color: #FFF;
}

.productfeatures .topNavigation ul.topNavList li.FeaturesOverview ul li.FeaturesOverview>a,
.productfeatures #header .topNavigation ul.topNavList li.FeaturesOverview:hover ul li.FeaturesOverview:hover>a{
	color: #333;
}
.productfeatures #header .topNavigation ul.topNavList li.FeaturesOverview:hover ul li.FeaturesOverview>a{
	color: #888;
}


.blockHeaderNavigation .topNavList,
.blockHandels{
	float: left;
}

.blockHandels{
	clear: left;
}

.blockHeaderNavigation .topNavList li {
	float: left;
}

.blockHeaderNavigation .topNavList li.notSelected a{
	display: block;
}

.blockHeaderNavigation .topNavList li a{
	text-decoration: none;
	float: left;
}

.blockHeaderNavigation .topNavList li .tabTotalsNumber{
	font-size:75%;
	display: inline;
	position: relative;
	top: -1px;
}

#all .tabButton.projectsTab.selected{
	background-position: 0 -400px;
}

#all .tabButton.projectsTab.selected .buttonCloser{
	background-position: -391px -400px;
}

#all .tabButton.projectsTab.selected .buttonSelected{
	background-position: -404px 0;
}

#all .tabButton.tasksTab.selected{
	background-position: 0 -473px;
}


#all .tabButton.tasksTab.selected .buttonCloser{
	background-position: -391px -473px;
}

#all .tabButton.tasksTab.selected .buttonSelected{
	background-position: -434px 0;
}

.blockHeaderNavigation .topNavList li:hover,
.blockHeaderNavigation .topNavList li.selected {
	background-color: #FFF;
}

.blockTabs .blockHandleTab{
	margin:0.2em 0 0 0.5em;
	padding:0.3em 0.6em;
	float: left;
	position: relative;
}

.blockTabs .blockHandleTab:hover{
	background-color: #FFF;
}

.blockTabs .blockHandleTab a{
	color: #888;
	text-decoration: none;
	font-size: 90%;
}

.licenseStateBlock{
	width: 100%;
	text-align: center;
	margin: 1em 0;
}

.tabButton,
.newButton,
.editButton{
	background: transparent url(../../../../images/themes/jsportal/buttons_bg.png) no-repeat;
	text-decoration: none;
	height: 18px;
	display: block;
	padding: 4px 0 3px 0.5em;
	position: relative;
	color: #FFF;
	font-size: 90%;
}


#all .editButton.linkOnly{
	background: none;
	padding: 0;
	width: 18px;
}
#all .editButton.linkOnly .editButtonText,
#all .editButton.linkOnly .buttonCloser{
	display: none;
}

#all .tabButton{
	margin-right: 10px;
	padding: 4px 5px 2px 1em;
}

#all a.tabButton,
#all .tabButton,
#all .tabButton a{
	color: #333;
}

.tabButton .buttonCloser,
.editButton .buttonCloser,
.newButton .buttonCloser{
	position: absolute;
	right: -9px;
	top: 0;
	height: 24px;
	background: transparent url(../../../../images/themes/jsportal/buttons_bg.png) no-repeat -391px 0;
	width: 9px;
	display: block;
}


#all .newButton.newRunableLink{
	color: #FFF;
	background-position: 0 0;	
}

#all .newButton.newRunableLink .buttonCloser{
	background-position: -391px 0;	
}
#all .newButton.newRunableLink:hover{
	background-position: 0 -36px;
}

#all .newButton.newRunableLink:hover .buttonCloser{
	background-position: -391px -36px;
}

#all .newButton.newRunableLink:active{
	background-position: 0 -73px;
}

#all .newButton.newRunableLink:active .buttonCloser{
	background-position: -391px -73px;
}

#all .newButton.newTaskLink {
	color: #FFF;
	background-position: 0 -255px;
}
#all .newButton.newTaskLink .buttonCloser{
	background-position: -391px -255px;
}

#all .newButton.newTaskLink:hover{
	background-position: 0 -291px;
}

#all .newButton.newTaskLink:hover .buttonCloser{
	background-position: -391px -291px;
}

#all .newButton.newTaskLink:active{
	background-position: 0 -327px;
}

#all .newButton.newTaskLink:active .buttonCloser{
	background-position: -391px -327px;
}


#all .newButton.newTimeLink {
	color:#FFF;
	background-position: 0 -545px;
}
#all .newButton.newTimeLink .buttonCloser{
	background-position: -391px -545px;
}

#all .newButton.newTimeLink:hover{
	background-position: 0 -581px;
}

#all .newButton.newTimeLink:hover .buttonCloser{
	background-position: -391px -581px;
}

#all .newButton.newTimeLink:active{
	background-position: 0 -618px;
}

#all .newButton.newTimeLink:active .buttonCloser{
	background-position: -391px -618px;
}

#all .newButton,
#all .editButton{
	background-position: 0 -145px;
	color: #666;
}

#all .newButton img,
#all .editButton img{
	float: right;
}

#all .newButton .buttonCloser,
#all .editButton .buttonCloser{
	background-position: -391px -145px;
}

#all .newButton:hover,
#all .editButton:hover{
	background-position: 0 -182px;
}

#all .newButton:hover .buttonCloser,
#all .editButton:hover .buttonCloser{
	background-position: -391px -182px;
}

#all .newButton:active,
#all .editButton:active{
	background-position: 0 -218px;
}

#all .newButton:active .buttonCloser,
#all .editButton:active .buttonCloser{
	background-position: -391px -218px;
}

#all .newButton .editButtonText,
#all .editButton .editButtonText{
	margin-right: 5px; 
	float: left;
}

#all .disabled.editButton{
	color: #B0B0B0;
	background-position: 0 -109px;
}

#all .disabled.editButton .buttonCloser{
	background-position: -391px -109px;
}

#all .tabButton{
	background-position: 0 -364px;
}

#all .tabButton .buttonCloser{
	background-position: -391px -364px;
}

#all .tabButton.selected,
#all .tabButton.selected a,
#all .tabButton.selected{
	color: #FFF;
}

#all .tabButton.selected{
	background-position: 0 -509px;
}

#all .tabButton.selected .buttonSelected{
	position: absolute;
	top: 21px;
	left: 50%;
	width: 10px;
	height: 8px;
	background: transparent url(../../../../images/themes/jsportal/buttons_bg.png) no-repeat scroll -414px 0px;
}

#all .tabButton.selected .buttonCloser{
	background-position: -391px -509px;
}

.infoBlock.newTimeEntry > div.blockHeader,
.infoBlock.editTimeEntry > div.blockHeader {
	border-bottom: 10px solid #636;
}

.infoBlock.newTask > div.blockHeader,
.infoBlock.editTask > div.blockHeader {
	border-bottom: 10px solid #09C;
}

.infoBlock.newRunableBlock > div.blockHeader {
	border-bottom: 10px solid #00BA99;
}

.profilePicture{
	margin:0 10px 5px 0;
	display: inline;
}

a.profilePictureLink{
	text-decoration: none;
}

.profilePictureLink,
.profilePictureLink .userName,
.profilePicture img{
	display: inline;
}

.profilePicture img{
	vertical-align: middle;
}

.profilePicturePrinter{
	display: block;
	text-decoration: none;
}

.profilePicturePrinter a{
	white-space: nowrap;
	position: relative;
}

a.profilePictureLink .userName{
	text-decoration: underline;
}

.messageFeedTable tbody tr.t-first{
	border-top: 1px dotted #BBB;
}

.messageFeedTable tbody tr.emptyRow{
	display: none;
}

/** *********************************************************************************************************
										progress bar styles
********************************************************************************************************** */

.progressBarContainer{
	min-width: 140px;
}

.progressBarContainer .percentageNumber,
.progressBarContainer .progressBarOuter{
	float: left;
}

.progressBarOuter{
	width: 100px;
	height: 10px;
	background-color: #F5F5F5;
	display: block;
	overflow: hidden;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px 6px 6px 6px;
}

.progressBarOuter .progressBar{
	height: 100%;
	background-color: #333;
	-moz-border-radius: 6px;
	border-radius: 6px 6px 6px 6px;
}

.progressBarContainer .percentageNumber{
	font-size: 12px;
	margin: -2px 0 0 4px;
}


/** *********************************************************************************************************
										AccountHeader
********************************************************************************************************** */
 
 
#content .contentHeader h1.accountHeaderTitle{
	padding: 5px 0 20px;
}

#content .contentHeader h1,
#content .contentHeader h1 a {
    font-weight: normal;
    text-decoration: none;
}

.parentsAvailable .accountHeaderTitle{
	/*padding: 0.2em 0 0 0.1em*/
	clear: right;
}

.accountParentName{
	display: block;
}

.accountParentName li{
	padding:0 0 0 0.2em;
	display: inline;
}

.accountParentName li.subParentAccount{
	padding: 0 0 0 0.3em;
}

.parentsAvailable .labelIndicator{
	background: url("../../../../images/themes/jsportal/sub_arrow.gif") no-repeat 0 8px;
	padding: 0 0 0 0.8em;
}

.accountParentName.simpleDisplay li{
	margin: 0;
}

.accountParentName.simpleDisplay li.subParentAccount,
.childAccount.simpleDisplay{
	background: none;
	padding: 0 0 0 0.2em;
}

li.subParentAccount a,
.parentItem a{
	color: #888;
	text-decoration: none;
}

.accountParentName.simpleDisplay li.subParentAccount a,
.simpleDisplay .parentItem a{	
	white-space: nowrap;
}


.accountParentName li.subParentAccount a:hover,
.parentItem a:hover{
	color: #29abe2;
}


.simpleDisplay .parentItem a{
	font-size: 85%;
}

#all #content h1.simpleDisplay{
	font-size: 1em;
	font-weight: normal;
	margin: 0;
	color: #000;
}

#all #content a h1.simpleDisplay{
	color: #224D6F;
}

#all #content a:hover h1.simpleDisplay{
	color: #29abe2;
}

#all #content h1.simpleDisplay a{
	color: #224D6F;
	text-decoration: underline;
	font-weight:normal;
}

#all #content h1.simpleDisplay:hover a{
	color: #29ABE2;
}

#content h1 a{
	text-decoration: none;
}

.parentsAvailable{
	display: block;
}

.parentsAvailable h1{
	display: block;
	margin-top: 0 !important;
}

.headerContainer #accountSelectionSearch {
	border:1px solid #FFFFFF;
	font-size: 200%;
	color: #224D6F;
}

.labelIndicator{
	color:#BBB;
}

.parentsAvailable .labelIndicator{
	margin: 0 0.2em 0;
}

.contentHeader .profilePicture{
	height:3.5em;
}

#all .profilePicturePrinter .editButton.linkOnly{
	position: absolute;
	right: 10px;
	top: 0;
	padding: 4px;
	display: none;
	width: 100%;
	height: 100%;
}
#all .profilePicturePrinter .editButton.linkOnly .editButtonText{
	display: none;
}

#all .profilePicturePrinter:hover .editButton{
	display: block;
}

#all #crossColumnHeader .profilePicturePrinter{
	float: left;
	position: relative;
}

#crossColumnHeader .profilePicture{
	position: relative;
	margin-right: 10px;
	display: block;
	float: left;
}

.contentHeader .headerContainer{
	clear: right;
}

.accountStatusMessage{
	font-weight: normal;
}
.secureduser #all .inPageNavigation > ul, ol.inPageNavigation {
	margin: 5px 5px 0 0;
}



/**
 *   AccountStatusheader.css
 */
 
.accountChangeDecr,
.accountStatusForm{
	display: inline;
}

.accountChangeDecr,
.accountStatusMessage,
.accountStatusField{
	color: #BBB;
	font-size: 55%;
}

.accountStatusField{
	border: 0 none;
	border: 1px solid #FFF;
	width: 20em;
}

.accountStatusField:focus,
.accountStatusField:hover{
	border: 1px inset;
}

.accountChangeDecr
/**once it works uncoment ,
h1.mouseOver .accountStatusField,
h1.mouseOver .accountStatusMessage*/{
	display: none;
	
}

h1.mouseOver .accountChangeDecr{
	/**once it works uncoment 
	display: inline;
	*/
}


/** *********************************************************************************************************
										Page notification
********************************************************************************************************** */

.pageNotifications{
	display:block;
	float:left;
	margin:1em;
	position: relative;
	background-color: #e9f6fc;
}

.pageNotifications .pageNotificationsContent{
	display:block;
	float:left;
	padding:1em;
	position: relative;
	border:1px solid #BBB;
	width: 71em;
}

.pageNotifications .pageNotificationsContent h2{
	margin: 0 0 0.3em;
}

.pageNotifications .pageNotificationsContent .removeRowLink{
	right: 0.5em;
	top: 8px;
}

.pageNotifications .pageNotificationsContent .removeRowTextLink{
	right: 1.8em;
	position: absolute;
	top: 0.55em;
	font-size: 85%;
}

.pageNotificationSteps{
	padding-left: 2em; 
	margin: 1em 0;
}
.pageNotificationSteps li{
	list-style: decimal;
	margin: 0.5em 0;
}

/** *********************************************************************************************************
										Logged status block
********************************************************************************************************** */




#header #logged{
	float: right;
	height: 100%;
}

#all .loggedStatusNameDivider{
	color:#FFFFFF;
	text-decoration: none;
	margin-right: 1.5em;
	float: left;
	margin-top: 1px;
}

#header #logged .loggedUserName{
	position: relative;
	display: block;
	color: #FFF;
	float: left;
}

#header #logged .loggedUserDashboard,
#header #logged .loggedStatusName{
	cursor: pointer; 
	position: relative;
	display: block;
	color: #FFF;
	margin: 0 1em;
}

#header #logged .loggedStatusName{
	margin: 0 0.6em 0 0;
	padding-right: 1em; 
	cursor: pointer; 
	display:block;
	float:left;
	margin-top: 89px;
	position:relative;	
}

.loggedStatusNameDivider, .loggedStatusName, a.logonLink:hover{
	text-decoration: underline
}

#loggedActions{
	width: 100%;
	background-color: #F5F5F5;
	position: absolute;
	top: 1.3em;
	left: 0;
	display: none;
	z-index: 5;
}

.loggedStatusName:hover #loggedActions{
	display: block;
}

#loggedActions li{
	display: block;
	position: relative;
	width: 100%;
}

#loggedActions li a{
	width: 100%;
	padding: 0.2em 0.5em;
	text-decoration: none;
	display: block;
	
}

#loggedActions li:hover{
	background-color: #29ABE2;
	color: #FFF;
}

#loggedActions li:hover>a{
	color: #FFF;
}

#header #logged #logon{
	position: absolute;
	top: 7.6em;
	left: 0;
	margin: 0 1em;
	z-index: 10;
	background-color: #EEE;
	padding: 0 1em;
	width: 46em;
}

#header #logged #logon .formItems div.formItem,
#header #logged #logon .formItems div.buttons {
	float: left;
	padding: 0.15em 1em 0.15em 0;
	clear:none;
	width: auto;
}

#header #logged #logon .formItems .stayLoggedCheckbox{
	display: none;
}

#header #logged #logon .formItems div.buttons {
	width: auto;
	padding: 0.35em 0;
}



.loggedStatusName,
a.logonLink{
	color: #FFF;
	text-decoration: none;
	padding: 0.3em;
}

#all #header #logged .loggedUserDashboard{
	text-decoration: none;
	margin:0;
	max-width: 330px;
    white-space: nowrap;
    overflow: hidden;
}

#all #header #logged .loggedUserDashboard:hover{
	text-decoration: underline;
}

a.logonLink{
	text-transform: capitalize;
}

#header.logonHover #navigation ul#topNavList li ul{
	display:none;
}

#logged .inpagePopupContainer{
	top: 4em;
}

/** *********************************************************************************************************
										AccountSelector
********************************************************************************************************** */

.accountSelectorParent,
.accountSelectorTitle{
	font-size: 80%;
	color: #888;
	margin: 0 0.6em 0.3em 0;
}

.parentsNotAvailable{
	display: none;
}

.accountSelectorParent:hover{
	text-decoration: underline;
	cursor: pointer;
	color: #29abe2;
}


body .forceItemCreation input{
	border: 2px solid #00BA99;
}