/*
Skin Name: Fuji Xerox epicenter - epiportal
Description: The skin used for the front banner, on the homepage of the epiportal
Version: 1.0
Author: Nicholas Chin
*/

/*
 * The frame surrounding the SlideDeck.
 * 
 * Customize the width, height, padding and background to customize the area 
 * surrounding your SlideDeck.
 */
@import url(font/stylesheet.css);
.skin-epiportal_banner {
    position: relative;
	background: none;
	height: 400px;/*Height of entire slidedeck*/
	margin: 50px auto 0px auto;
	width: 1200px; /*Width of entire slidedeck*/
}

[if IE], .skin-epiportal_banner {

	margin: 10px auto 0px auto;
}

/*
 * The SlideDeck element itself.
 * 
 * Customize the width and height to increase or decrease the size of
 * your SlideDeck. 
 */
.skin-epiportal_banner dl.slidedeck {
    position: relative;
	height: 377px;
	margin: 0 auto;
}

/*
 * The SlideDeck slide area.
 * 
 * You can specify a height for the slide area, but it is not required, width
 * will automatically be defined for the slide area and will vary depending on
 * how many slides you have in your SlideDeck.
 * 
 * To add space between a slide and the next slide's spine (slide title bar),
 * increase the border-right definition. To remove the space, just remove the
 * border definition.
 * 
 * SlideDeck slides are all given a unique class, so you can customize the
 * appearance of each slide individually by referencing a slide by its
 * numbered class name. For example:
 *    .slidedeck dd.slide_1
 *    .slidedeck dd.slide_2
 *    .slidedeck dd.slide_3
 *    etc...
 */
.skin-epiportal_banner dl.slidedeck > dd {
    position: relative;
	padding: none;
	padding-left: 40px;
    margin: 0;  /* Note: you should position the background with pixel measurements in IE7 as it improperly calculates the height of the DD element when containing vertical slides */
    overflow: hidden;
	background: white;
	left: 0px;
}

#blue_slide_heading, #purple_slide_heading, #green_slide_heading, #yellow_slide_heading, #welcome_heading{
	/*font-family: Xerox-Sans, Verdana, Arial, Tahoma, sans-serif;*/
    font-family:'Clarimo UD PE', Helvetica, Sans-Serif;
	font-size: 2.6em;
	line-height: 1.1em; 
	text-shadow: 1px 1px 1px #E5E5E5;
	position: relative;
	width: 380px;
	height: 100px;
}

#blue_slide_sub_heading, #purple_slide_sub_heading, #green_slide_sub_heading, #yellow_slide_sub_heading, #welcome_sub_heading{
	/*font-family: 'PT Sans', Tahoma,Verdana, Geneva, Arial,  sans-serif;*/
    font-family:'Clarimo UD PE', Helvetica, Sans-Serif;
	font-size: .85em;
	color:#666;
	position: relative; 
	width: 350px;
	line-height:1.65em;
	
}

[if IE], #blue_slide_heading, #purple_slide_heading, #green_slide_heading, #yellow_slide_heading, #welcome_heading{
	font-size: 2.3em;
	
}


#blue_slide_action, #purple_slide_action, #green_slide_action, #yellow_slide_action, #welcome_action  {
	/*font-family: 'PT Sans',Tahoma,Verdana, Geneva, Arial,  sans-serif;*/
    font-family:'Clarimo UD PE', Helvetica, Sans-Serif;
	font-size: .85em;
	position: relative; 
	width: 350px;
	line-height:1.45em;
    
	
}
/*MStart JRR 02-MAR-2021 - Changed left from 560px to 710px to fit in full width*/
#welcome_heading {top: 100px; left:710px;  color: #01916D;/*#34BCBA;*/ font-size: 3em !important;}
#welcome_sub_heading {top: 125px; left: 710px;font-size: 1.4em;color:#807e7e;   /*color: #999;*/ line-height: 1.3em !important;}
#welcome_action {top: 150px; left: 710px; color:#01916D;/*#34BCBA;*/  font-size: .9em !important; }
/*MEnd JRR 19-FEB-2021*/
/*MStart JRR 04-MAR-2021 -changed font colours*/
/*MStart JRR 03-MAR-2021 -changed left property from 25px to 775px for blue_slide and yellow_slide*/
/*MStart JRR changed left property from 575px to 775px for blue_slide and yellow_slide*/
#blue_slide {}
#blue_slide_heading {top: 100px; left: 775px; color:#0B6297;/*#2895D5;*/}
#blue_slide_sub_heading {top: 125px; left: 775px;}
#blue_slide_action {top: 150px; left: 775px; color:#0B6297;/*#2895D5;*/}

#purple_slide {}
#purple_slide_heading {top: 100px; left: 775px; color:#E70924;/*#9B2583;*/}
#purple_slide_sub_heading {top: 125px; left: 775px;}
#purple_slide_action {top: 150px; left: 775px; color:#E70924;/*#9B2583;*/}

#green_slide
#green_slide_heading {top: 100px; left: 775px; color:#01916D;/*#6DAF3D;*/}
#green_slide_sub_heading {top: 125px; left: 775px;}
#green_slide_action {top: 150px; left: 775px; color:#01916D;/*#6DAF3D;*/}

#yellow_slide {}
#yellow_slide_heading {top: 100px; left: 775px; color:#B2880A;/*#FD9F13;*/}
#yellow_slide_sub_heading {top: 125px; left: 775px;}
#yellow_slide_action {top: 150px; left: 775px; color:#B2880A;/*#FD9F13;*/}
/*MEnd JRR 19-FEB-2021*/
/*MEnd JRR 04-MAR-2021*/
/*
 * The SlideDeck spine (slide title bar).
 * 
 * SlideDeck spines are rotated, so you will need to swap your directions. To
 * change the width of the spine, you will need to modify the spine height.
 * You will also need to make sure that any background imagery used is rotated
 * horizontally.
 * 
 * Like slides, spines are also given a unique class allowing for custom
 * appearance for each spine. This follows a similar naming convention:
 *     .slidedeck dt.slide_1
 *     .slidedeck dt.slide_2
 *     .slidedeck dt.slide_3
 *     etc...
 */
.skin-epiportal_banner dl.slidedeck > dt {
    position: relative;
	cursor: pointer;
	height: 40px;
	max-height: 40px;
	max-height: 40px;
	line-height: 37px;
	font-size: 1em;
	font-weight: bold;
	/*font-family: Arial, verdana, Helvetica, sans-serif;*/
    font-family:'Clarimo UD PE', Helvetica, Sans-Serif;
	text-transform: none;
	letter-spacing: 0em;
	/*color: #FFFFFF;*/
    color:black;
    margin: 0;
}
/*MStart JRR 18-FEB-2021 - Removed color bars from home page*/
.skin-epiportal_banner dl.slidedeck > dt.blue {
	/*background: url(images/front/spines_blue.png) no-repeat  top left #FFFFFF;*/
	
}
.skin-epiportal_banner dl.slidedeck > dt.blue.active {	
	text-shadow: #396182 2px 2px 2px;
	
}

.skin-epiportal_banner dl.slidedeck > dt.purple {
	/*background: url(images/front/spines_purple.png)  no-repeat top left #FFFFFF;*/
}
.skin-epiportal_banner dl.slidedeck > dt.purple.active {	
	text-shadow: #553661 2px 2px 2px;
}

.skin-epiportal_banner dl.slidedeck > dt.green {
	/*background: url(images/front/spines_green.png)  no-repeat top left #FFFFFF;*/
}
.skin-epiportal_banner dl.slidedeck > dt.green.active {	
	text-shadow: #2D5227 2px 2px 2px;
}

.skin-epiportal_banner dl.slidedeck > dt.yellow {
	/*background: url(images/front/spines_yellow.png)  no-repeat top left #FFFFFF;*/
}
.skin-epiportal_banner dl.slidedeck > dt.yellow.active {
	text-shadow: #7A7810 2px 2px 2px;
}

.skin-epiportal_banner dl.slidedeck > dt.turquoise {
	/*background: url(images/front/spines_turquoise.png) no-repeat  top left #FFFFFF;*/
}
.skin-epiportal_banner dl.slidedeck > dt.turquoise.active {
	text-shadow: #2E6569 2px 2px 2px;
}

.skin-epiportal_banner dl.slidedeck > dt.grey {
	/*background: url(images/front/spines_grey.png) no-repeat top left #FFFFFF;*/
}
/*MEnd JRR 18-FEB-2021 */
.skin-epiportal_banner dl.slidedeck > dt.turquoise.active {
	text-shadow: #666 2px 2px 2px;
}

/*
 * The hovered state of a SlideDeck spine.
 */
.skin-epiportal_banner dl.slidedeck dt.spine:hover {
	color: #444;
	background-position: center left;
}

/*
 * The active state of a SlideDeck spine.
 */
.skin-epiportal_banner dl.slidedeck dt.spine.active,
.skin-epiportal_banner dl.slidedeck dt.spine.active:hover {
	cursor: default;
	color: #fff;
	background-position: bottom left;
}

/*
 * The SlideDeck spine index labels.
 * 
 * This is to style the numbers (or letters if you have customized it so)
 * that appear at the bottom of each SlideDeck spine.
 */
.skin-epiportal_banner dl.slidedeck dt.spine .index {
}
.skin-epiportal_banner dl.slidedeck dt.spine.active .index { margin-bottom: 0; }

/*
 * The hovered state of a SlideDeck spine index label.
 */
.skin-epiportal_banner dl.slidedeck dt.spine:hover .index { color: #444; }

/*
 * The active state of a SlideDeck spine index label.
 */
.skin-epiportal_banner dl.slidedeck dt.spine.active .index { color: #ffffff; }

/*
 * The SlideDeck "active corner".
 * 
 * This is the small triangle that appears in the upper left of the active
 * slide. This can be made any size and positioned differently by modifying
 * the margin values. By default the left margin is inset to prevent any
 * gap from appearing as the SlideDeck animates.
*/
.skin-slidedeck dl.slidedeck .activeCorner {
	display:none;
}

/*
 * The SlideDeck vertical slide style.
 * 
 * Veritcal slides will take over the entire content area of a horizontal slide
 * automatically. Padding will automatically be accommodated for. You can also
 * eliminate the padding definition to have your vertical slide content line
 * up flush against the containing slide content area edges.
 */
.skin-epiportal_banner dl.slidedeck dd.slide ul.slidesVertical > li {
    overflow: hidden;
	height: 377px;
}

/*
 * The SlideDeck vertical slide navigation container.
 * 
 * This is the container for the vertical slide navigation. You can position
 * this anywhere you want within the containing slide's area. If you try to
 * position it outside of the slide area it will not appear.
 */
.skin-epiportal_banner dl.slidedeck ul.verticalSlideNav {
	position: relative;
	overflow: hidden;
	margin: 0	/*
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: -7px 0;
	-moz-transform: rotate(90deg);
	-moz-transform-origin: -7px 0;
	-o-transform: rotate(90deg);
	-o-transform-origin: -7px 0;
	*/

}

/*
 * The SlideDeck vertical slide navigation link containers.
 * 
 * This is the container for a navigation link in the vertical slide navigation
 * element. You can adjust the width and height of this element to accommodate
 * for a larger vertical navigation button.
 * 
 * To increase the space between vertical navigation links, increase the bottom
 * and/or top padding of this element.
 */
.skin-epiportal_banner dl.slidedeck ul.verticalSlideNav li {
	position: relative;
	padding: 0;
	margin: 0;
    overflow: hidden;
    float: left;
    clear: left;
}

/*
 * The SlideDeck vertical slide position indicator.
 * 
 * This is the element that slides behind the default navigation link list to
 * show which is the current vertical slide being viewed. This should be given
 * similar dimensions to the vertical slide navigation links.
 * 
 * NOTE: This element is not used in this skin, so it is hidden
 */
.skin-epiportal_banner dl.slidedeck dd.slide ul.verticalSlideNav li.arrow { display: none; }

/*
 * The SlideDeck veritcal slide navigation links.
 * 
 * These are the vertical slide navigation links. By default these are a small
 * square that uses a sprite background image replacement method to hide the
 * default text that is placed in the link ("Nav 1", "Nav 2", "Nav 3").
 * 
 * To change the appearance of the navigation elements, you will need to use a
 * background image replacement as the text for the links cannot be changed.
 * Each vertical slide navigation link is given a unique class so they can be
 * styled individually. For example:
 *     dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_1
 *     dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_2
 *     dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_3
 *     etc....
 */
.skin-epiportal_banner dl.slidedeck ul.verticalSlideNav li a{
	position: relative;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	width: 400px;
}

.skin-epiportal_banner dl.slidedeck ul.verticalSlideNav li.nav_1 a{
	background:url(images/front/vertical_nav_2.png) transparent 0 0 no-repeat;
	height: 45px;
	margin-left: 460px;
	
	
}

.skin-epiportal_banner dl.slidedeck ul.verticalSlideNav li.nav_2 a{
	background:url(images/front/vertical_nav_1.png) transparent 0 0 no-repeat;
	height: 30px;
	margin-top:347px;
}


/* Vertical slide navigation style for the currently active vertical slide navigation link */
.skin-epiportal_banner dl.slidedeck ul.verticalSlideNav li.active a {
    display: none;
}
/* Vertical slide navigation link style when the parent horizontal slide is active */
.skin-epiportal_banner dl.slidedeck dt.active ul.verticalSlideNav li.active a {
	display: none;
}

/*
 * The SlideDeck vertical slide navigation link hover state.
 */
dl.slidedeck dd.slide ul.verticalSlideNav li a:hover {
    opacity: 0.75;
    -moz-opacity: 0.75;
    -webkit-opacity: 0.75;
    -khtml-opacity: 0.75;
    -ms-filter: "Alpha(opacity=75)";
    filter: Alpha(opacity=75); 
}

/*======================================================*/
/*==========Registation and Login Box Contents==========*/
/*======================================================*/

/*===Login Box Contents===*/


/*
#login_box_contents{
	width: 275px;
	margin-left:425px;
}

#login_box_top{
	width: 250px;
	margin-bottom: 5px;
}

#login_box_top img{
	margin-left:10px;
}


#login_form /*Form Text Styling{
	font-family: Arial, Tahoma, Geneva, sans-serif;
	text-transform:uppercase;
	font-size:.7em;
	color: #34BCBA;
	font-style:normal;
	margin: 10px 0px 0px 10px;
}

.login_submit /*Login Submit Button{
	float: right;
	width: 132px;
	height: 44px;
	margin-top:10px;
	font-size: 0px;
	border:none;
	cursor:pointer;
	background: url(images/front/login_button_default.png) transparent 0 0 no-repeat;
}

.login_submit:hover{
	background: url(images/front/login_button_hover.png) 0 0 no-repeat;
}

.login_submit:active{
	background: url(images/front/login_button_active.png) 0 0  no-repeat;
}

#login_username, #login_password /*Text Field Areas{
	width: 250px;
	background: #999;
	border: none;
	color: #000;
	margin: -2px 0px 10px 0px; 
	font-weight: bold;
	padding-left:5px;
	height:20px;
	    opacity: 0.75;
    -moz-opacity: 0.75;
    -webkit-opacity: 0.75;
    -khtml-opacity: 0.75;
    -ms-filter: "Alpha(opacity=75)";
    filter: Alpha(opacity=75); 
}
*/
/*===New Register Box Contents===*/
#new_register {
	/*font-family: Arial, Tahoma, Geneva, sans-serif;*/
    font-family:'Clarimo UD PE', Helvetica, Sans-Serif;
	color: #666;
	font-size:.85em;
	width: 700px;
	background: url(images/front/rego_bg.png) 0 0 no-repeat;
	height: 377px;
	padding-top: 0px;
}
/*
#new_register_header /*New Registration Header{
	margin-left:17px;
}

#new_register{
	width: 700px;
}
#new_register_contents /*Contains new_register_left and new_register_right 
	width: 700px;
}

#new_register_left /*Contains form{
	float: left;
	width: 50%;
	font-family:Georgia, "Times New Roman", Times, serif;
	color: #999;
	font-style: italic;
	font-weight:bold;
	font-size:.8em;
	letter-spacing:.05em;
	line-height:1.75em;
}

#new_register_caption /*Intro text{
	margin: 10px 0px 0px 50px;
	width: 360px;
}

#new_register_right /*Contains register button{
	float:right
	width: 50%;
}

#new_register_table /*Form elements are contained a table{
	width:350px;
	color:#B569A6;
	font-size: .9em;
	margin: 20px 0px 0px 40px;
	font-family: Arial, Tahoma, Geneva, sans-serif;
	text-transform:uppercase;
	font-weight: bold;
	font-style: normal;
}

#new_register_table td /*Cells of the table{ 
	text-align:left;
	line-height: 1em;
	padding:2px 10px;
}

.new_register_input /*Text Input Text area{
	width: 100%;
	height:17px;
	font-weight: bold;
	margin: 3px 0px 4px 0px;
	background: #999;
	color: #000;
	border:none;
	padding-left:5px;
	opacity: 0.5;
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    -khtml-opacity: 0.5;
    -ms-filter: "Alpha(opacity=50)";
    filter: Alpha(opacity=50); 
}

.new_register_submit /*New Register Submit and Next Buttons{
	float: right;
	margin: 225px 10px 0px 0px;
	width: 132px;
	height: 44px;
	font-size: 0px;
	border: none;
	cursor:pointer;
	float:right;
}
.new_register_submit{
	background: url(images/front/rego_button_default.png) transparent  0 0 no-repeat;
}

.new_register_submit:hover{
	background: url(images/front/rego_button_hover.png) transparent 0 0 no-repeat;
}

.new_register_submit:active{
	background: url(images/front/rego_button_active.png) transparent 0 0 no-repeat;
}
*/