/* 24/04/2012: Forcing the scrollbar as requested by Huw to avoid "jump effect" when switching between tabs in the same page that cause the scrollbar to appear and tabs that don't */
html {
	overflow-y: scroll;
}
/*Set the default font-size to 62.5% as a good pattern to make em multiple of 10px*/
body { font-size:62.5%;color:#222222; font-family:Arial,Helvetica,sans-serif;}
form { display: inline;}

/*Redefine subscript and superscript as their alignment is reset in reset.ccs so they don't render really fine (moreover it looks like they need to have set a smaller character in browser that are different from IE). 
  They render correctly, without this rules, when creating them inside a textareas because it looks like browsers apply their own css styles to elements in a text area (for instance Firefox use a html.css visible in Firebug). However when used ouside a textarea (as when displayed in a researcher profile)
  they need to be redefined here to be display correctly when used across the application*/
sub {vertical-align:sub;font-size:smaller;line-height:normal;}
sup {vertical-align:super;font-size:smaller;line-height:normal;}

a, a:visited{normal;text-decoration: none;color:#017d98;}
.fakeLink{cursor:pointer;color:#017d98;}
/*Certain links will require to be shown differently */
a.linkType1, a:visited.linkType1 {color:#222222;}

/**********************************************************
      *** START SECTION RELATED TO THE HEADER   ****
***********************************************************/
/*Set the automatic margin and the width on the wholePageContainer to have the whole page content "centered". Doing that in this central point will allow to change the
  dimension only here rather than in different points */
#wholePageContainer {margin:auto;width:966px;}
/* Added the "width" only to help IE6 to display correctly*/
#headerContainer .headBord { background-color: #222222;width:100%}
#headerContainer .headBord .leftSide {float:left;color:white;padding:16px 0 15px 20px;}
#headerContainer .headBord .leftSide .mainTextPart1 {font-size:2.4em;font-family:Arial Black;}
#headerContainer .headBord .leftSide .mainTextPart2 {font-size:2.4em;font-weight:bold;font-style:italic;}
#headerContainer .headBord .leftSide .desc {padding-top:10px;font-size:1.6em;}
#headerContainer .headBord .rightSide {float:right;margin:0;padding-top:55px;}
/* Added the "width" only to help IE6 to display correctly */
#headerContainer .headCrum {background-color:	#97CFDF;line-height:2.4em;font-size:1.1em;width:100%;}
#headerContainer .headCrum .crumLinks {padding-left:5px;}
#headerContainer .headCrum .crumLinks a {padding:0px 5px;}
#headerContainer .headCrum .crumLinks .separator {position:relative;bottom:1px;}

#headerContainer .headMenu {font-size:1.2em;font-weight:bold;line-height:30px;border-bottom: 1px solid #BBBBBB;}
#headerContainer .headMenu .leftSide {float:left;margin-left:10px;}
#headerContainer .headMenu .leftSide .loggedInAs {color:#666666;}
#headerContainer .headMenu .rightSide {float:right;margin-right:10px;}
#headerContainer .headMenu .rightSide img{position:relative;bottom:1px;}
#headerContainer .headMenu .rightSide a{padding:0px 5px;}

/**********************************************************
      *** START SECTION RELATED TO THE FOOTER   ****
***********************************************************/
#footerContainer {line-height: 1.5em;border-top: 15px solid #212121;color: #333333;margin:2em 0 0;padding: 10px 0 0;}
#footerContainer .leftSide{float:left}
#footerContainer .rightSide{float:right;margin-right:5px;margin: 0.5em 0.5em 0 0;}
#footerContainer .leftSide ul, #footerContainer .leftSide .address {margin: 0.5em 0;padding: 0 20px;}
#footerContainer .leftSide .address{font-size:1.2em;} 
#footerContainer .leftSide ul a {color:#222222;font-weight:bold;}
#footerContainer .leftSide ul a:hover{text-decoration:underline;}
#footerContainer .leftSide ul li {border-right: 1px solid #CCCCCC;display: inline; font-size: 1.3em;padding: 0 8px 0 8px;}
#footerContainer .leftSide ul li.first{padding-left:0;}
/* The address tag renders text in italic by default; set it to be rendered normally*/
#footerContainer .leftSide address{font-style: normal;}
#footerContainer .rightSide span{color:#666666;font-size:1.2em;font-weight:bold;}
#footerContainer .rightSide img{vertical-align:bottom;}

/*****************************************************************
      *** START SECTION RELATED TO THE COMMON PAGE CONTENTS   ****
******************************************************************/
/* IMPORTANT : Core container located between the header and the footer. Assign a min-height so those pages with little content (error pages, message pages, etc.) 
won't look that empty */
#mainContainer{min-height:300px;}
/* Containers contained into mainContainer that give the layout of the page */
#mainLeftContainer{float:left;margin-top:25px;margin-left:10px;width:205px;}
#mainRightContainer{float:left;width:751px;}
#mainRightLeftContainer{float:left;width:500px;}
#mainRightRightContainer{float:left;margin-left:29px;width:222px;}

/*Rules to render the main left menu*/
#mainLeftMenu {font-size:1.2em;}
#mainLeftMenu a{color:#222222;}
#mainLeftMenu li{padding:5px 0;}
#mainLeftMenu li.hasMenuImg{position:relative;}
/*Target only the first contained image (submenus may have the "external resource" image which hasn't to be targeted)*/
#mainLeftMenu li.hasMenuImg > img{position:absolute;}
/*Define the cursor style as hand because some of the element is a div */
#mainLeftMenu li .standOut{font-weight:bold;cursor:pointer;}
#mainLeftMenu li .content{margin-left:17px;width:150px;}
#mainLeftMenu li .content img{margin-left:4px;}
/*Margin top only for the first element of an inner list */
#mainLeftMenu li li:first-child{margin-top:5px;}
#mainLeftMenu li li.hasMenuImg{padding-left:10px;}

/* Rules to render the main page title: set the height on the nested core DIV elements to guarantee that it's fixed (even when the goBackLink section it's empty) */
#mainPageTitle {margin-top:10px;}
#mainPageTitle .goBackLink{height:20px;}
#mainPageTitle .goBackLink .arrow {font-family:Tahoma;font-weight:bold;font-size:1.2em;color:#017D98;}
#mainPageTitle .goBackLink a{font-size: 1.2em;margin-left:3px;}
#mainPageTitle .title{min-height:25px;padding-bottom:5px;font-size: 2.3em;line-height:1.2em;}


#functionTitle {margin:5px 0 10px 0;}

#functionTitle h1.title {
  font-size: 2.2em;
  color: #2A6399;
  letter-spacing: -1px;
  border-bottom: 1px solid #2A6399;
  padding-bottom: 3px;
}

/****
  Set basic look and feel for input, textarea, select fields.
  input, textareas, select and button must have declared the font-family as they won't inherit it from body
*****/
input, textarea, select, button{font-family:Arial,Helvetica,sans-serif;}
/* Setting the borders for input and textarea plus the default font-size. Can't set the border on select fields as it causes Safari to lose the dropdown arrow ! */
input, textarea{border:1px solid #DCDCDC;font-size:1.3em;}
/*set the line-height as the height to make sure IE7+ vertically centers the text field content*/
input{height:20px;line-height:20px;}
/*For some reason a select field needs some extra height to match the height given to an input + set the default font-size (can't be set with the borders above as having border causes problem on Safari for a select field, as explained)*/
select{height:23px;font-size:1.3em;}
/* Set default font size for labels*/
label, .label{font-size:1.3em;font-weight:bold;}
/* Reset the height for checkboxes as the height assigned to input (necessary for text fields) is sometimes too much + eliminating the border definition otherwise IE will display it.
   This is needed for check boxes used in the Edit Other Funding List and in all the future similar pages) */
.inputCheckBox{height:12px;line-height:12px;border:none;}
/*Class for text field containing numbers*/
.txtFieldNumeric{text-align:right;}
/**************************
  Some message style
***************************/
.inPageMsgWarnSmall{font-weight:bold;font-size:1.3em;}
.inPageMsgWarnLarge{font-weight:bold;font-size:1.7em;}
/*Set a background on the loading message as it will have assigned a jQuery fadeIn/fadeOut effect which will make IE render the text awfully if a background isn't set*/
.loadingMsg{width:60%;margin-left:auto;margin-right:auto;margin-top:20px;font-weight:bold;font-size:1.3em;line-height:1.3em;text-align:center;background:#FFFFFF;}

/* Utility class to display a research activity status when is active*/
.activityStatusActive{color:#669200;}

/* Utility class to float element on the left */
.floatLeft{float:left;}
/* Utility class to clear both sides when there are floating elements */
.clearBoth{clear:both}
/* Utility class to hide elements */
.hide{display:none}
/* Utility class to capitalise text */
.upCsText{text-transform:uppercase;}
/* Utility css class to create a bottom gray "shadow"*/
.grayShadow {
  -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
  filter: progid:DXImageTransform.Microsoft.Shadow(Color='gray', Direction=135, Strength=5);
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color='gray', Direction=135, Strength=5)"; 
}

/*****************************************************************
      *** START SECTION RELATED TO THE MAIN SEARCH (it can be 
          rendered differently according to the renderType) ****
******************************************************************/

#mainSearchBox{background-color:#97CFDF;}
/* Set the margin-right to 0 as both Safari and Chrome put some margin which avoids the button to be attached to the text field + set the line-height as the height to make sure IE7+ vertically centers the text field content*/
#mainSearchBox #inputTextMainSearch{vertical-align:bottom;color:#666666;width:190px;padding-left:10px;height:26px;line-height:26px;font-size:1.4em;margin-right:0;}
#mainSearchBox #btnMainSearch.ui-button img {vertical-align:bottom;}
/* IE7 doesn't align the button properly to the text field. Using the IE7 Star hack (*) we need to move the whole button down of 1 px and decrease the padding-bottom of 1px too in its ui-button class (it's in the next class definition)
   PLEASE NOTE: this fix works well with a proper IE7 but it looks wrong if seen using IE8 Compatibility View */
#mainSearchBox #btnMainSearch.ui-button {*position:relative;*top:1px;}
#mainSearchBox #btnMainSearch.ui-button .ui-button-text {padding: 8px 9px;*padding-bottom:7px;}
#mainSearchBox #btnMainSearch.ui-button.ui-state-default, #mainSearchBox #btnMainSearch.ui-button.ui-state-hover {border: none;}
#mainSearchBox .more{font-size:1.2em;font-weight:bold;text-align:right;}
#mainSearchBox .more .separator {font-family:Tahoma;font-size:1.5em;position:relative;top:1px;}
#mainSearchBox .more .content {cursor:pointer;}

#mainSearchBox.renderType1 {width:300px;padding:15px 0;margin-top:20px;}
/*Keep the wrapper slightly larger that what should be the optimal size otherwise iPad and iPhone will render the search button on a new line*/
#mainSearchBox.renderType1 .wrapper{width:242px;margin-left:auto;margin-right:auto;}
#mainSearchBox.renderType1 .header{font-size:1.5em;font-weight:bold;padding-bottom:15px;}
#mainSearchBox.renderType1 .desc{font-size:1.2em;line-height:1.3em;padding-top:5px;}
#mainSearchBox.renderType1 .more{padding-top:10px;}

#mainSearchBox.renderType2 {width:216px;padding:10px 0 8px 0;margin-bottom:25px;}
/*Keep the wrapper slightly larger that what should be the optimal size otherwise iPad and iPhone will render the search button on a new line*/
#mainSearchBox.renderType2 .wrapper{width:195px;margin-left:auto;margin-right:auto;}
#mainSearchBox.renderType2 #inputTextMainSearch{width:150px;height:20px;line-height:20px;font-size:1.4em;}
#mainSearchBox.renderType2 #btnMainSearch.ui-button .ui-button-text {padding: 5px 6px;*padding-bottom:4px;}
#mainSearchBox.renderType2 .more{font-size:1.1em;padding-top:3px;font-weight:normal;}
#mainSearchBox.renderType2 .more .separator{font-size:1.4em;font-weight:bold;}

#mainSearchBox.renderType3 {width:330px;padding:12px 0;}
#mainSearchBox.renderType3 .wrapper{width:308px;margin-left:auto;margin-right:auto;}
#mainSearchBox.renderType3 .search{float:left;}
#mainSearchBox.renderType3 .more{float:right;font-size:1.1em;font-weight:normal;padding-top:10px;}
#mainSearchBox.renderType3 .more .separator{font-size:1.4em;font-weight:bold;}
#mainSearchBox.renderType3 #inputTextMainSearch{width:150px;height:20px;line-height:20px;font-size:1.4em;}
#mainSearchBox.renderType3 #btnMainSearch.ui-button .ui-button-text {padding: 5px 6px;*padding-bottom:4px;}

/*****************************************************************
      *** START SECTION RELATED TO THE GENERIC BOXES (they can be 
          rendered differently according to the renderType) **** 
******************************************************************/
.genericBox.renderType1{border-top:3px solid #97CFDF;border-bottom:5px solid #F3F3F3;font-size:1.1em;line-height:1.4em;color:#393734;}
.genericBox.renderType1 .wrapper{padding:10px;}
.genericBox.renderType1 .line{border-bottom:1px solid #BBBBBB;}
.genericBox.renderType2{border-top:3px solid #97CFDF;border-bottom:5px solid #F3F3F3;margin-bottom:20px;}
.genericBox.renderType3{margin-bottom:20px;}
.genericBox.renderType3 .header{font-size:1.3em;font-weight:bold;}
.genericBox.renderType3 .box{border-top:3px solid #97CFDF;border-bottom:5px solid #F3F3F3;margin-top:5px;}
.genericBox.renderType3 .box .line{border-bottom:1px solid #BBBBBB;}
.genericBox.renderType3 .box .wrapper .hasImageURL{padding:10px 0px 10px 10px;}
.genericBox.renderType3 .box .wrapper .hasNotImageURL{padding:10px;text-align:center;}
.genericBox.renderType3 .box .wrapper .hasImageURL .leftSide{float:left;}
.genericBox.renderType3 .box .wrapper .hasImageURL .rightSide{float:left;margin-left:5px;line-height:1.4em;width:45%;}
.genericBox.renderType3 .box .wrapper .hasImageURL .rightSide, .genericBox.renderType3 .box .wrapper .hasNotImageURL{font-size:1.2em;}
.genericBox.renderType4{margin-bottom:20px;}
.genericBox.renderType4 .header{font-size:1.3em;font-weight:bold;}
.genericBox.renderType4 .box{border:1px solid #DCDCDC;margin-top:5px;background-color:#F7F7F7;}
.genericBox.renderType4 .box ul{padding-top:10px;padding-bottom:5px;}
.genericBox.renderType4 .box li{font-size:1.2em;line-height:1.3em;padding:0px 10px 5px 10px;}
.genericBox.renderType4 .box .see{background-color:#FFFFFF;border-top:1px solid #DCDCDC;font-size:1.2em;line-height:26px;text-align:right;padding-right:10px;}

/*****************************************************************
      *** START SECTION RELATED TO THE GENERIC LISTS (they can be 
          rendered differently according to the renderType) **** 
******************************************************************/
.genericList.renderType1{margin-bottom:15px;}
.genericList.renderType1 .header{width:38%;padding:8px 0 8px 10px;font-size:1.2em;font-weight:bold;border:1px solid #DCDCDC;border-bottom:none;background:url("../images/bg/list_header_bg_1x40.png") repeat-x scroll 50% 50% #FFFFFF;}
.genericList.renderType1 ul li:first-child{border-top:1px solid #DCDCDC}
.genericList.renderType1 ul li{padding:10px;font-size:1.2em;line-height:1.2em;border:1px solid #DCDCDC;border-top:none;}
.genericList.renderType1 ul li.odd{background-color:#FBFBFB;}
.genericList.renderType1 ul li:hover{background-color:#97CFDF;cursor:pointer;}
.genericList.renderType1 ul li:hover a{color:#222222;}
/* Sometimes a LI may contain 2 div to be aligned left and right*/
.genericList.renderType1 ul li .leftSide{float:left;width:47%;}
.genericList.renderType1 ul li .rightSide{float:left;width:50%;font-size:0.9em;}
.genericList.renderType2 .letters {font-size:12px;font-weight:bold;}
.genericList.renderType2 .letters .letter{float:left;background-color:#F7F7F7;border:1px solid #DCDCDC;border-right:none;width:18px;height:18px;text-align:center;}
.genericList.renderType2 .letters .letter.hasRightMargin{border-right:1px solid #DCDCDC;}
.genericList.renderType2 .letters .letter.hasLongerWidth{width:19px;}
.genericList.renderType2 .letters .letter.selected{background-color:#FFFFFF;border-bottom:1px solid transparent;}
.genericList.renderType2 .letters .letter.selected span{color:#222222;}
.genericList.renderType2 .letters .letter:hover{background-color:#97CFDF;cursor:pointer;}
.genericList.renderType2 .letters .letter:hover span{color:#222222;}
.genericList.renderType2 .letters span{position:relative;top:3px;}
.genericList.renderType2 ul li{background-color:#FBFBFB;padding:10px;font-size:1.2em;line-height:1.2em;border:1px solid #DCDCDC;border-top:none;}
/* IE7 put some extra top padding on the first LI. Using the IE7 Star hack (*) the padding of the element is reduced. */
.genericList.renderType2 ul li:first-child{*padding-top:5px;} 
.genericList.renderType2 ul li.odd{background-color:#FFFFFF;}
.genericList.renderType2 ul li:hover{background-color:#97CFDF;cursor:pointer;}
.genericList.renderType2 ul li:hover a{color:#222222;}
/* Sometimes a LI may contain 2 div to be aligned left and right*/
.genericList.renderType2 ul li .leftSide{float:left;width:47%;}
.genericList.renderType2 ul li .rightSide{float:left;width:50%;font-size:0.9em;}
.genericList.renderType2 .noResult{padding-top:15px;text-align:center;font-size:1.2em;font-weight:bold;}
.genericList.renderType3 ul li:first-child{border-top:1px solid #DCDCDC;}
.genericList.renderType3 ul li{font-size:1.2em;line-height:1.2em;border:1px solid #DCDCDC;border-top:none;}
.genericList.renderType3 ul li.odd{background-color:#FBFBFB;}
.genericList.renderType3 ul li .leftSide{float:left;width:228px;padding:10px 10px;}
.genericList.renderType3 ul li .rightSide{float:left;width:229px;padding:10px 10px;border-left:1px solid #DCDCDC;}
.genericList.renderType3 ul li .leftSide:hover, .genericList.renderType3 ul li .rightSide:hover{background-color:#97CFDF;cursor:pointer;}
.genericList.renderType3 ul li .leftSide:hover a, .genericList.renderType3 ul li .rightSide:hover a{color:#222222;}
.genericList.renderType4 table{width:100%;border:1px solid #DCDCDC;font-size:1.2em;}
.genericList.renderType4 table tr td{border:1px solid #DCDCDC;line-height:1.2em;}
.genericList.renderType4 table tr.odd td{background-color:#FBFBFB;}
.genericList.renderType4 table tr td.first{font-weight:bold;text-align:center;vertical-align: middle;padding:5px 5px;}
.genericList.renderType4 table tr td.first.noShowInitial{border:none;background-color:#F7F7F7;}
.genericList.renderType4 table tr td.second{padding:5px 10px;}
.genericList.renderType4 table tr td.second:hover{background-color:#97CFDF;cursor:pointer;}
.genericList.renderType4 table tr td.second:hover a{color:#222222;}
/*****************************************************************
        *** START SECTION RELATED TO SORTING TABLE  **** 
******************************************************************/
table.sortingTable tr td.hasPaddingRight, table.sortingTable tr td.hasPaddingRight{padding-right:5px;}
/* 16/05/2013 : Force vertical-align:top on cells. This is the default but it's somehow lost when a cell contains 2 floating div as in the case of the checkbox put in a cell when we want to perform a selection  */
table.sortingTable tr td {border-top:1px dotted #CDCDCD;padding:5px 0;line-height:1.2em;font-size:1.2em;vertical-align:top;}
table.sortingTable tr td:first-child, table.sortingTable tr th:first-child{padding-left:15px;}
table.sortingTable tr:first-child th{text-align:left;border-top:none;background-color:#F7F7F7;padding-top:10px;padding-bottom:10px;font-weight:bold;line-height:1.2em;font-size:1.2em;cursor:pointer;}
table.sortingTable tr:first-child th.sortAsc{background: #F7F7F7 url("../images/icon/icon_arrow_sort_asc.png") no-repeat 95% 40%;}
table.sortingTable tr:first-child th.sortDesc{background: #F7F7F7 url("../images/icon/icon_arrow_sort_desc.png") no-repeat 95% 40%;}
/*Clever way to select the second tr by selecting the first using first:child and then combining it with the Adjacent Sibling selector*/
table.sortingTable tr:first-child + tr td{border-top:none;}
/*****************************************************************
        *** START SECTION RELATED TO SORTING LIST BOX  **** 
******************************************************************/
.sortingListBox .header{font-size:1.2em;line-height:2em;font-weight:bold;padding:5px 0;border-bottom:1px solid #CCCCCC;}
/* IE7 doesn't align the first left float inside the main right float element properly unless a width is declared. Using the IE7 Star hack (*) to set such a width*/
.sortingListBox .header .rightSide{float:right;*width:33%;}
.sortingListBox .header .rightSide .displayBy{float:left;margin-right:5px;color:#666666;}
.sortingListBox .header .rightSide .displayOptions{float:right;}
.sortingListBox .header .rightSide .displayOptions .displayOption{float:left;width:55px;text-align:center;}
.sortingListBox .header .rightSide .displayOptions .displayOption:hover,.sortingListBox .header .rightSide .displayOptions .displayOption.sortAsc:hover,.sortingListBox .header .rightSide .displayOptions .displayOption.sortDesc:hover{background-color:#97CFDF;color:#222222;}
.sortingListBox .header .rightSide .displayOptions .displayOption.sortAsc{background:url("../images/icon/icon_arrow_sort_asc.png") no-repeat 95% 40%;}
.sortingListBox .header .rightSide .displayOptions .displayOption.sortDesc{background:url("../images/icon/icon_arrow_sort_desc.png") no-repeat 95% 40%;}
.sortingListBox ul li:first-child{border-top:none;}
.sortingListBox ul li{padding:10px;font-size:1.2em;line-height:1.3em;border-top:1px dotted #CDCDCD;}
.sortingListBox ul li.groupName:first-child{border-top:none;}
.sortingListBox ul li.groupName{font-weight:bold;border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;background-color:#F7F7F7;}
.sortingListBox ul li.groupName + li{border-top:none;}
.sortingListBox ul li .leftSide{float:left;width:95%;}
.sortingListBox ul li .rightSide{float:right;}

/*Normalise label and select for plugin jwysiwyg to match the associated image window*/
form.wysiwyg label{font-size:1em;font-weight:normal;}
form.wysiwyg select{font-size:1em;height:auto;}

/*Miscellaneous styles*/
#msgFundingEditProfilePopupDialog{line-height:1.3em;}