﻿
/* EF Common Header Styling  */
div#wrapHeader div.logo
{
    height: 97px;
    left: 20px;
    position: absolute;
    top: 0;
    width: 106px;
}


div#wrapHeader div.action
{
    font-size: 11px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
}

/* --------------- OLD UNWANTED GLOBAL DROPDOWN --------------- */ 
/* 
div#wrapHeader div.action a#slideme{background: transparent url(http://media.ef.com/_imgs/ly/2010/header/arrowDown.gif) no-repeat right center;padding: 0px 18px;display: inline;margin: 0px auto;}
div#wrapHeader div.action a{color: #333333;}
div#wrapHeader div.action ul{margin-top: 4px;}
div#wrapHeader div.action ul li {display: block;float: left;height: 20px;list-style-type: none;margin-left: 14px;}
div#wrapHeader div.action ul li span.square {background: transparent url(http://media.ef.com/_imgs/ly/2010/header/square3px.gif) no-repeat scroll 0 6px;padding-left: 6px;}
div#wrapHeader div.action ul li.tab div.languages {background: transparent url(http://media.ef.com/_imgs/funnelpages/Splash2010/tab.gif) no-repeat scroll left bottom;display: inline;float: left;height: 24px;padding: 2px 0 4px 16px;position: relative;top: -4px;z-index: 2;}
div#wrapHeader div.action ul li.language{margin-left: 0px;text-align: center;}
div#wrapHeader div.action ul li.language span.flagIcon {margin: 1px 0px 0px 0px;width: 14px;height: 14px;position: absolute;background-position: 0px 1px; *background-position:0px0px;}
div#wrapHeader div.action ul li.language ul {position: relative; overflow: hidden;margin-bottom: 2px;visibility: hidden;} 
*/
/*set fix width for bloody IE6*/
/* * html div#wrapHeader div.action ul li.language ul {width: 100px;}*/
/*
.country-selector-text {background:transparent url(http://media.ef.com/_imgs/funnelpages/splash2010/full_dashed_line.gif) no-repeat scroll left bottom;margin-left:6px;padding-bottom:5px;width:815px;}
.country-selector-text h4 {font:bold 14px Arial !important;color:#009CDC !important;text-align:left !important;}
#ContentWrapperCountrySelector {padding-top:10px;}
div#wrapHeader div.action ul li.tab div.tabStart {background: transparent url(http://media.ef.com/_imgs/funnelpages/Splash2010/tab.gif) no-repeat scroll left bottom;display: inline;float: left;height: 24px !important;padding: 2px 0 4px 12px;position: relative;top: -4px;z-index: 2;}
div#wrapHeader div.action ul li.tab div.tabEnd {background: #FFFFFF url(http://media.ef.com/_imgs/funnelpages/Splash2010/tab.gif) no-repeat scroll 99% -33px;display: block;float: left;height: 24px;padding-top: 2px;position: relative;top: -4px;width: 11px;z-index: 2;height:24px !important;}
#panel div.tabStart {background: transparent url(http://media.ef.com/_imgs/ly/2010/header/arrowUp.gif) no-repeat scroll right 4px;display: inline;float: right;height: 24px;margin-right: 11px;padding: 2px 16px 0 27px;position: relative;top: 1px;width: auto;z-index: 99999;color: #333333;text-align: left;}
div#wrapHeader div.action ul li.programs {margin-left: 0;}
div#wrapHeader div .action ul li a:hover {text-decoration: underline;}
*/
/* ---------------------------------------------------- */ 


/* --------------- NEW SHINY GLOBAL DROPDOWN --------------- */ 
.top-panel-wrapper{
	z-index: 100;
	width: 960px;
	top: 0;
}
.top-panel {
	background: transparent url(../images/top-panel/right.png) no-repeat bottom right;
	width: 948px;
	padding: 0 15px 2px 0;
	margin: 0 0 -10px 0;
	display: none;
}
.top-panel .content{
	display: block;
	width: 928px;
	background: transparent url(../images/top-panel/left.png) no-repeat bottom left;
	padding: 20px 0 20px 20px;
	margin: 0;
	min-height: 640px;
}
.top-panel .content p.intro{
	font-size: 15px;
	color: #203d53;
	font-weight: bold;
}
.top-panel .content p{font-size: 13px;}
.top-panel-wrapper .global{
	right: 10px;
	font-size: 12px;
}
.top-panel-wrapper #close{
	background: transparent url(../images/top-panel/right.png) no-repeat bottom right;
	font-size: 12px;
	color: #FFFFFF;
	padding: 5px;
	padding:0 15px 2px 0;
/*	display: inline-block;*/
	font-size: 11px;	
}
.top-panel-wrapper #close-top{
	position: absolute;
	top: 5px;
	right: 22px;
}


.top-panel-wrapper #close a{
	background: transparent url(../images/top-panel/left.png) no-repeat -7px 100%;
	padding:6px 0 0 8px;
	height: 25px;
	display: inline-block;
	text-decoration: none;
	width: auto;
	color: #333;
}
.top-panel-wrapper #close a:hover{
	color: #005B82;
}
.top-panel-wrapper #close-top a{
	text-decoration: none;
	font-size: 11px;
}
.top-panel-wrapper #close a span.dotted {
	background:url(../images/dots.gif) top left repeat-x;
	padding-top: 6px;
	width: auto;
}
.top-panel-wrapper #close a span.arrow {
	background: url(../images/top-panel/arrow_down.gif) no-repeat right;
	padding-right: 20px;
	padding-bottom: 1px;
	width: auto;
	padding-top: 4px;
}

.top-panel-wrapper #close a span.arrow img{
	float: left;
	margin-right: 3px;
	margin-top: -1px;

}

.top-panel-wrapper #close-top a span.arrow img{
	float: left;
	margin-right: 3px;
}

.top-panel-wrapper #close-top a span.arrow {
	background: url(../images/top-panel/arrow_up.gif) no-repeat right;
	padding-right: 20px;
	padding-top: 3px;
}
.top-panel-wrapper #close a span.close {
	background: url(../images/top-panel/close.gif) no-repeat right;
	padding-right: 20px;
	padding-top: 3px;
}
.top-panel-wrapper #close a:hover span.close {background: url(../images/top-panel/close_hover.gif) no-repeat right;}



div.dotted {
	background: url(../images/dots.gif) repeat-x bottom left;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-bottom: 10px;}
.cols {
	background: url(../images/country-dots.gif) repeat-y top left;
	margin: 0 0;}
.cols  div.countrys{
	width: 120px;
	float: left;
	padding: 0 17px;	
}
.cols div.countrys .heading{
	font-size: 12px;
	color: #009cdc;
	margin-bottom: 5px;
}
.cols  div.countrys ul {margin-bottom: 10px;}
.cols  div.countrys ul li {margin-bottom: 3px;}
.cols  div.countrys ul li a{
	color: #333;
	text-decoration: none;
}	
.cols  div.countrys ul li a:hover{color: #005B82;}
.cols  div.countrys .forms  {padding-left: 0;}
.cols div.countrys .forms .jqTransformSelectWrapper{width: 132px !important;}
#header .cols div.countrys .forms .jqTransformSelectWrapper ul{
	width: 128px !important;
	height: 500px !important;
}	




/* the overlayed element */ 
.simple_overlay {      
    display:none; 
    z-index:10001; 
    background-color:#fff; 
    border:10px solid #00AEEF; 
}

.overlayWrapper {
	position: relative !important;
	z-index: 10000;}

.text-pop-up {
	left: 200px !important;
	top: 0 !important;
}
.form-pop-up {
	left: 302px !important;
	top: 0 !important;
}
 
/* close button positioned on upper right corner */ 
.simple_overlay .close { 
    background: url(../images/overlay/close.png) no-repeat; 
    position:absolute; 
    right: 0; 
    top: 9px; 
    cursor:pointer; 
    height:35px; 
    width:27px; 
}



/* loading */
#loading {
	position:absolute;
	top: 300px;
	left: 370px;
}


#right-col #loading {
	position:absolute;
	top: 200px;
	left: 200px;
}



.image-block {
	position: relative;
	margin-bottom: 10px;
}
.image-block .content{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 640px;
	height: 40px;
}
.image-block .content p{
	float: left;
	color: #fff;
	font-size:16px;
	margin:10px 0 0 10px;
	padding:0;	
}
.image-block .content ul.buttons{
	position: absolute;
	top: 6px;
	right: 0;
}


.thank-you-panel {
	background: #dedede url(images/dots.gif) repeat-x top left;
	padding: 20px 10px;
	margin-bottom: 20px;
	position: relative;
	height: 575px;
}
.thank-you-panel .content {
	width: 50%;
	
}

/* ---------------------------------------------------- */ 




/*EF Footer styling */
div#footer
{
    background-color: #ECECEC;
    border-top: 3px solid #D6D6D6;
    height: 39px;
    width: 100%;
    z-index: 1;
    margin:0;
}

div#footer span.copyright
{
    color: #5B5B5B;
    font-size: 10px;
    padding: 9px 0;
}

div#footer span.links
{
    color: #555555;
    padding: 7px 0;
    float:left;
}

div#footer span.links a
{
    font-size: 11px;
    color: #0067c5;
}

/*End of Footer Style */




/*
Following styles are used for Header Sliding bar for Country Selection Page


Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0
The CSS, XHTML and design is released under Creative Common License 3.0:
http://creativecommons.org/licenses/by-sa/3.0/
*/



/* Panel Tab/button */
#toppanel .tab
{
    background: transparent;
    height: 33px;
    position: relative;
    top: -4px;
    z-index: 99999;
    width: 960px;
    margin: 0 auto;
    display: none;
}

.tab ul.login
{
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 33px;
    width: auto;
    font-weight: bold;
    line-height: 33px;
    margin: 0;
    color: white;
    font-size: 80%;
    text-align: center;
    background: transparent;
}

.tab ul.login li.left
{
    background: url(http://media.ef.com/_imgs/funnelpages/splash2010/left-curve.gif) no-repeat left 0;
    height: 30px;
    width: 10px;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
}

.tab ul.login li.right
{
    background: url(http://media.ef.com/_imgs/funnelpages/splash2010/right-curve.gif) no-repeat left 0;
    height: 30px;
    width: 10px;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
}

.tab ul.login li
{
    text-align: left;
    padding: 0 6px;
    display: block;
    float: left;
    height: 30px;
    background: #FFFFFF;
    margin-left: 0;
}

.tab ul.login li a
{
    color: #0067c5;
    font-size: 12px;
    font-family: Arial;
    padding-right: 20px;
    text-align: right;
}

.tab ul.login li a:hover
{
    color: #009CDC;
}

.tab .sep
{
    color: #414141;
}

.tab a.open, .tab a.close
{
    height: 20px;
    line-height: 20px !important;
    padding-left: 10px !important;
    cursor: pointer;
    display: block;
    width: 100px;
    margin: 5px 0 0 0;
}

.tab a.open
{
    background: url(http://media.ef.com/_imgs/ly/2010/header/arrowDown.gif) no-repeat left 0;
}
.tab a.close
{
    background: url(http://media.ef.com/_imgs/funnelpages/splash2010/close_button.gif) no-repeat right -4px;
}
.tab a:hover.open
{
    background: url(http://media.ef.com/_imgs/ly/2010/header/arrowDown.gif) no-repeat left -19px;
}


/* sliding panel */
#mask
{
    background: #000000 none repeat scroll 0 0;
    z-index: 5 !important;
}

*html #mask
{
    background: #000000 none repeat scroll 0 0;
    z-index:5 !important;
}



*html #toppanel
{
    position: absolute; /*Panel will overlap  content */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999998 !important;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}





#toppanel
{
    position: absolute; /*Panel will overlap  content */
    top: 0;
    width: 100%;
    z-index: 9998;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#toppanel #insideWrapper
{
    margin: 0 auto;
    position: relative;
    top: 0;
    width: 960px;
    z-index:9998;
}
#fChangeCountry
{
    height:500px;
    position:relative;
    z-index:999998;
}
#panel
{
    width: 840px;
    height: 523px;
    color: #999999;
    background: transparent url(http://media.ef.com/_imgs/funnelpages/splash2010/left_corner_line.gif) no-repeat left bottom;
    overflow: hidden;
    position: relative;
    z-index: 1000;
    display: none;
    margin: 0 auto;
    float: right;
    padding-bottom: 10px;
}

*html #panel
{
    width: 840px;
    height: auto;
    color: #999999;
    background: #FFFFFF url(http://media.ef.com/_imgs/funnelpages/splash2010/left_corner_line.gif) no-repeat left bottom;
    overflow: hidden;
    position: relative;
    z-index: 99999;
    display: none;
    margin: 0;
    float: right;
    padding-bottom: 0px;
    margin-bottom:-1px;
    }

#panel h1
{
    font-size: 1.6em;
    padding: 5px 0 10px;
    margin: 0;
    color: white;
}

#panel h2
{
    font-size: 15px;
    font-family: Arial;
    font-weight: bold;
    padding: 10px 0 4px 15px;
    margin: 0;
    color: #203d53;
}

#panel h4
{
    color: #333333;
    font-family: 'Arial';
    font-size: 13px;
    font-weight: normal;
    margin: 0;
    padding: 0 0 0 15px;
}

#panel p
{
    margin: 5px 0;
    padding: 0;
}

#panel a
{
    text-decoration: none;
    color: #15ADFF;
}

#panel a:hover
{
    color: #009CDC;
}

#panel a-lost-pwd
{
    display: block;
    float: left;
}

#panel .content
{
    width: auto;
    margin: 0 auto;
    text-align: left;
    font-size: 0.85em;
    background: transparent;
}

#panel .content .left
{
    width: 280px;
    float: left;
    padding: 0 15px;
    border-left: 1px solid #333;
}

#panel .content .right
{
    border-right: 1px solid #333;
}

#panel .content form
{
    margin: 0 0 10px 0;
}

#panel span.flagIcon
{
    background-position: 0 2px;
    float: left;
    height: 14px;
    padding-right: 1px;
    width: 14px;
    margin-right: 5px;
}

#panel .wrapper-panel
{
    background-color: #FFFFFF;
    height:523px;
}

#panel .lower-border
{
    background-color: #FFFFFF;
}

/*End of Panel style */

