/*
============================================================================
TOP LEVEL
============================================================================
*/
* { margin:0; padding:0 }
body { font:normal 0.80em Arial, Helvetica, sans-serif; background:#d9dec9; color:#7f7f7f; }
html, body { height:100% }
p { margin:0 0 15px 0 }
a { color:#60b552 }
a:hover, a:focus, a:active { color:#555!important; text-decoration:none }
h1, h2, h3, h4, h5, h6 { font-size:100%; color:#4d4d4d }
hr { border:none; background:none; border-top:1px dotted #ccc; height:1px; line-height:1px; margin:30px 0 30px 0 }
textarea, select { font-family:Arial, Helvetica, sans-serif; width:96%; font-size:100%; padding:5px; color:#666 }
fieldset { border:none; position:relative }
fieldset label { }
/*
============================================================================
HEADERS
============================================================================
*/
#col-l h1 { font-size:220%; margin:0 0 10px }
#col-l h2 { font-size:200%; margin:0 0 10px }
#col-l h3 { font-size:180%; margin:0 0 10px; color:#7f7f7f }
#lead h3 { color:#ff7028; font-size:220%; text-transform:uppercase; margin:0 0 10px }
.sidebar-item h2, .sidebar-item h3 { font-size:200%; margin:0 0 10px; color:#82867a; line-height:100% }
.sidebar-item h3 { font-size:175% }
.sidebar-item h4 { font-size:150%; margin:0 0 10px; color:#aa8631 }
/*
============================================================================
'NEW' CLEARFIX
============================================================================
*/
.group:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height: 0; }
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */
/*
============================================================================
STRUCTURE
============================================================================
*/
.outer-wrapper { float:left; width:100% }
.inner-wrapper { margin:auto; width:990px; position:relative }
#wrapper-site { background:#fafcf7 url(/images/common/bg.jpg) center 237px; float:left; width:100% }
#wrapper-header { height:237px; background:#a6daf1 url(/images/common/header.jpg) center top no-repeat }
#header { position:relative; height:237px; background:#a6daf1 url(/images/common/header.jpg) center top no-repeat }
#header h1, #header h2, #header p { display:none }
#wrapper-footer { height:165px; background:#d9deca url(/images/common/footer.jpg) center top no-repeat }
#footer { background:url(/images/common/footer.jpg) center top no-repeat; height:165px; padding:80px 0 }
#footer-inner { margin:0 60px; background:url(/images/common/logo-i-to-i.gif) top left no-repeat; padding:0 40px 40px }
#content { background:url(/images/common/inner-middle.jpg) repeat-y left top; _background-position:5px top }
#col-l { float:left; width:650px; background:url(/images/common/inner-top.jpg) no-repeat left top; _background-position:5px top; position:relative; }
#col-l-inner { margin:0 85px; background:#fff; }
#col-l-footer { float:left; width:650px; background:url(/images/common/inner-break.jpg) no-repeat left top; _background-position:5px top }
#col-l-footer-inner { margin:0 85px; padding:100px 0 0 }
#sidebar { float:right; width:330px; margin:0 10px 0 0; padding:0; /* height:550px; */}

.end-page #wrapper-header { background-image:url(/images/common/header-end.jpg) }
.end-page #header { background-image: url(/images/common/header-end.jpg) }
.end-page #wrapper-footer { background-image:url(/images/common/footer-end.jpg) }
.end-page #footer { background-image:url(/images/common/footer-end.jpg) }

.end-page #content { background:none }
.end-page #col-l { background:none;width:100% }
.end-page #col-l-inner { background:none; }

a.btn-end {
	display:block;
	background-color:#a5d239;
	text-decoration:none;
	font-weight:bold;
	color:#fff;
	text-align:center;
	padding:5px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius: 5px;
	margin:0 0 5px 0;
}
a.btn-end:hover { background-color:#87b121; color:#fff!important; }
a.btn-learn { background-color:#92997e; }
a.btn-learn:hover { background-color:#7e8766; }

a#chalkboard-cta { display:block; width:168px; height:115px; background: url(/images/common/chalkboard.jpg) no-repeat top left; }
a#chalkboard-cta:hover { width:168px; height:115px; background-position: bottom left; }
a#chalkboard-cta span { display:block; width:168px; height:115px; margin-left:-5000px;}

a#facebook-logo { display:block; width:168px; height:37px; background: url(/images/common/logo-facebook.gif) no-repeat top left; }
a#facebook-logo:hover { width:168px; height:37px; background-position: bottom left; }
a#facebook-logo span { display:block; width:168px; height:37px; margin-left:-5000px;}

a#youtube-logo { display:block; width:168px; height:37px; background: url(/images/common/logo-youtube.gif) no-repeat top left; }
a#youtube-logo:hover { width:168px; height:37px; background-position: bottom left; }
a#youtube-logo span { display:block; width:168px; height:37px; margin-left:-5000px;}

/*
============================================================================
SIDEBAR
============================================================================
*/
.sidebar-item { margin:0 15px; color:#5b5956 }
.sidebar-polaroid { margin:0 0 0 }
.sidebar-products a { color:#aa8631 }
.sidebar-products ul { margin:0 0 20px 30px!important }
.call-us { font-size:350%;margin-top:-10px }
/*
============================================================================
HEADER
============================================================================
*/
#ten-minutes { position:absolute; right:70px; top:40px }
#finished { position:absolute; left:670px; top:50px }
#strapline {background:url(/images/common/strapline.gif) no-repeat;width:347px;height:75px;position:absolute;top:65px;left:250px;}
/*
============================================================================
PROGRESS INDICATOR
============================================================================
*/
#progress { position:absolute; top:85px; left:680px; list-style:none; }
#progress h3 { font-size:120%; margin:0 0 5px }
#progress li { width:22px; height:23px; background:url(/images/common/progress-icon.gif) no-repeat; display:block; float:left; margin:0 3px 0 0 }
#progress li.in-progress { background-position:center; }
#progress li.completed { background-position:bottom; }
#progress li.to-do { background-position:top; }
#progress li span { display:none }
/*
============================================================================
QUESTION LAYOUTS
============================================================================
*/
.q { font-size:120%; color:#bbb; margin:0 0 0px }
.survey-question-page .question { margin:0 0 70px }
.survey-feedback-page .question { margin:0 0 60px }
fieldset { font-size:130%; position:relative }
.question fieldset label, .question-label { margin:0 0 15px; display:block; color:#414141; font-size:80%; font-weight:bold; position:relative }
.question-label { font-size:100% }
.question fieldset input { margin:0 5px 0 0 }
.question fieldset label.error { text-transform:uppercase; position:absolute; top:0px; left:-80px; width:65px; background:#d0433c url(/images/common/error-arrow.png) no-repeat right; _background-image:url(/images/common/error-arrow.gif); color:#fff; padding:3px 3px 3px 10px; font-size:65% }
.question ul, .step ul, .question ol, .step ol { margin:0 0 20px 30px }
.step { border-top:1px dashed #CCC; padding:30px 0 0; margin:30px 0 0 }
.step h3 { }
.survey-feedback-page .question-label { margin:0 0 1px }
.highlight { background:#f6fac2; padding:25px 25px 10px; color:#697014; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; }
.highlight a { color:#505512; font-weight:bold }
.highlight h4 { color:#a6b02a }
.q-nu { position:absolute; left:-35px; top:-2px; font-weight:normal; font-size:130%; color:#999; text-align:right; width:30px }
.correct { color:#60b552 }
.wrong { color:#d94734 }
.response { color:#808080; margin:0 0 20px }
.you-answered { color:#bbb }
/*
============================================================================
BUTTONS
============================================================================
*/
#navigation { }
/*.start-btn-text { color:#888; font-size:140%; margin:30px 0 5px; text-align:center }*/
.sidebar-button { width:138px; height:138px; border:none; background-position:top; margin:0 0 0 100px; display:block; font-size:0px; cursor:pointer }
.sidebar-button span { display:none }
.sidebar-button:hover { background-position:bottom; cursor:pointer }
.btn-start { position:absolute; bottom:30px; left:640px; background:url(/images/buttons/btn-start.png) no-repeat; _background:url(/images/buttons/btn-start.gif) no-repeat }
.btn-next { position:absolute; bottom:30px; left:640px; background:url(/images/buttons/btn-next.png) no-repeat; _background:url(/images/buttons/btn-next.gif) no-repeat }
/*
============================================================================
SLIDER UI OVER-RIDES
============================================================================
*/
.ui-slider { left:8px!important; width:97%!important; font-size:80%!important }
.ui-slider-label { font-size:80%!important; line-height:100%; color:#97947f }
.ui-slider-scale li { width:80px!important }
.ui-slider ol { width:95%!important; left:10px!important }
.ui-slider-label { cursor:pointer }
.ui-widget-content { border: 1px solid #dbdbd7!important; background: #e9e7d7!important }
.ui-state-default, .ui-widget-content .ui-state-default { border:none!important; background: url(/images/slider/slider-handle.png) top no-repeat!important; _background: url(/images/slider/slider-handle.gif) top no-repea!important }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: none!important; background-position:center!important; }
.ui-state-active, .ui-widget-content .ui-state-active { border: none!important; background-position:bottom!important; }
.ui-slider .ui-slider-handle { width: 18px!important; height: 18px!important }
.ui-slider-horizontal { height: .6em!important; }
.ui-slider-horizontal .ui-slider-handle { top: -5px!important; margin-left: -9px!important; }
/*
============================================================================
FOOTER
============================================================================
*/
#footer { color:#666; font-size:85% }
#footer a { color:#666 }
#footer p { margin:0 0 3px }
.footer-alt, .footer-alt a { color:#999!important }
/*
============================================================================
LEAD FORM
============================================================================
*/
#lead {position:relative}
#lead .group img {position:absolute;top:-10px;right:-50px;_right:30px}
.lead-form fieldset p { float:left; clear:left; margin:0 0 5px; position:relative; width:330px }
.lead-form label { width:80px; display:block; float:left; font-size:70%; font-weight:bold }
.lead-form input { width:230px;margin:0 0 2px }
.lead-form fieldset select { padding:0; width:230px; font-size:80% }
.lead-form fieldset p label.error { text-transform:uppercase; position:absolute; top:0px; left:320px; width:90px; background:#d0433c url(/images/common/error-arrow.png) no-repeat left; _background-image:url(/images/common/error-arrow.gif); color:#fff; padding:3px 3px 3px 10px; font-size:65% }
.lead-form input#leadform-submit { width:100px; position:absolute; right:0; bottom:3px; }
#lead-result { font-size:200%; color:#fff; padding:10px; background:#60b552; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; width: 310px;}
#lead-result .message-title {margin-bottom:5px; display: block;}
#lead-result .message-body {font-size: 13px; font-weight: normal;}

#end-consultation .lead-form input { _width:224px }
#start-consultation-form .lead-form {float:right;width:315px}

/*
============================================================================
END PAGE
============================================================================
*/
#end-buttons {}
#end-comments-submit { background-color:#a5d239; border:0; padding:10px 20px 10px 20px; font-weight:bold; font-size:1.2em; cursor:pointer; color:#fff; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; }
.eb {width:187px;height:49px;cursor:pointer;float:left;margin:0 15px 0 0;background: url(/images/common/end-buttons.jpg) top no-repeat; }
.eb1 {background-position:0 0;}
.eb2 {background-position:-187px 0;}
.eb3 {background-position:-374px -98px;}
.eb4 {background-position:-561px 0;margin:0}
#end-consultation {background:#f6fac2 url(/images/common/consultation-bg.jpg) 300px bottom no-repeat; }
#end-consultation-form {float:right;width:315px}
#end-consultation #lead-result { font-size:170%; float:right;width:300px; }
#social-links {float:left;margin-left:-10px}
#email-to-friend {}
#email-to-friend a {display:block;width:170px;height:75px;background:url(/images/common/share.jpg) top;}
#share a {display:block;width:170px;height:75px;background:url(/images/common/share-facebook.jpg) top;}
#email-to-friend a:hover, #share a:hover {background-position:bottom;}
#email-to-friend a span, #share a span {display:none}

#end-content .inner-content { width:800px; background: url(/images/end-breaker.gif) repeat-y center; }
#end-content h2 { margin-bottom:25px; margin-left:10px; }
.end-content-quarter { float:left; width:180px; margin-right:0; padding:0 10px 0 10px; }
.end-content-quarter h3 { color:#4e5447!important; }

.no-r-margin { margin-right:0!important; padding-right:0!important; }

/*
============================================================================
MISC
============================================================================
*/
.list { color:#009cff; font-size:110%; margin:0 0 0 0; padding-top:30px }
.list li { margin:0 0 10px }
.list span { color:#888 }
#end-review-wrapper { padding:25px 25px; }
#end-review-wrapper label { display:block; margin:0 0 3px; font-size:70%; font-weight:normal }
#end-review-submit { margin:10px 0 0; float:right }


/*
============================================================================
BOOKMARKS PANEL - Digg, del.icio.us etc
============================================================================
*/
#bookmarks {
	width:750px;
	float:left;
	font:normal 0.9em Arial, Helvetica, sans-serif;
	color:#666;
}
#bookmarks a {
	color:#666;
	text-decoration:underline;
	margin:0px 5px 0px 5px;
	padding:2px 0px 2px 19px
}
#bookmarks a:hover, #bookmarks-inner a:focus, #bookmarks-inner a:active { text-decoration:none }
a#bookmark-icon-google { background:url(http://www.onlinetefl.com/images/common/footers/bookmark-icon-google.png) no-repeat left; }
a#bookmark-icon-facebook { background:url(http://www.onlinetefl.com/images/common/footers/bookmark-icon-facebook.png) no-repeat left; }
a#bookmark-icon-msnlive { background:url(http://www.onlinetefl.com/images/common/footers/bookmark-icon-msnlive.png) no-repeat left; }
a#bookmark-icon-yahoo { background:url(http://www.onlinetefl.com/images/common/footers/bookmark-icon-yahoo.png) no-repeat left; }
a#bookmark-icon-delicious { background:url(http://www.onlinetefl.com/images/common/footers/bookmark-icon-delicious.png) no-repeat left; }
a#bookmark-icon-digg { background:url(http://www.onlinetefl.com/images/common/footers/bookmark-icon-digg.png) no-repeat left; }
#bookmarks p {margin:0}
#tipBookmarks {margin-left:15px;cursor:pointer;color:#666;font-style:italic;border-bottom:1px dashed #666}
#tipBookmarks:hover {border-bottom:1px solid #666}
#tipBookmarks p {margin:0;padding:0}

#tooltip {
	position: absolute;
	z-index: 3000;
	background-color: #fff;
	background:#fff url(http://www.onlinetefl.com/images/common/icon-tooltip-info.png) no-repeat 10px 15px;
	color:#111;
	opacity: 0.93;
	filter: alpha(opacity = 93);
	-moz-border-radius:4px;
	width:220px;
	padding:15px 15px 15px 40px;
}
#tooltip h3, #tooltip div {margin:0}


.floatfix:after {
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden
}
.floatfix { display:inline-block }
/* Hides from IE-mac \*/
* html .floatfix { height:1% }
.floatfix { display:block }
/* End hide from IE-mac */

/* tidy up tracking pixels on lead form thanks page, for IE8+/Firefox/Webkit/Opera */
/*img[src^="https://www.emjcd.com/"][width="20"][height="1"] {float:left; width: 0!important; height: 0!important;}
iframe[width="1"][height="1"] {float:left; width: 0!important; height: 0!important;}*/