html { font-size: 100%; background: #fff; margin: 0; padding: 0; }
body { margin: 0; padding: 0; font: .6875em/1.273 Arial, sans-serif; color: #4f4d45; background: #fff; }

h1, h2, h3, h4, legend { font-weight: normal; serif; color: #4f4d45; }
h1 { font-size: 2.91em; }
h2 { font-size: 2em; margin: 0 0 1em; }
h3 { font-size: 1.27em; margin: .83em 0; }
a { color: #4f4d45; text-decoration: none; }
/*a:focus, a:hover { background-color: #f0f0f0; border-bottom-style: dotted; }*/
a img { border: 0; }
A.noborder, A.noborder:HOVER { border-bottom: none; }
p, ul, ol { margin-top: .91em; margin-bottom: .91em; } /* 10px at default size */
fieldset { margin: 0; padding: 0; border: 0; }
input.text, select, textarea { font: 1.1em Helvetica,Arial,sans-serif; color: #4f4d45; border: 1px solid #bfbfbf; background: #fff; }
input.text, textarea.text { width: 200px; padding-left: 1px; color: #959595}
input.button { font: 1em Arial, sans-serif; }
select { width: 204px; }

/*Line height styles*/
#main { padding-top: 15px; }
#main p, #main ul, #main li, #main img, #main .tc h3 {line-height: 16px;}
#main input.text:focus, #main select:focus {background-color: #ffffb7; border: 1px solid #000;}
#main_sleeve { zoom: 1; }
#main_sleeve:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }

/* avatar styles */
.avatar { position: relative; float: left; margin: 0 5px 10px 0; border: 1px dotted #fff; zoom:1; }
.avatar img { display: block;}



/* row, row with margin */
.r { 
width: 960px;
margin: 0 auto;
overflow: hidden;
}


.gridbg {
position:relative;
background:url(front/images/grid.png);
} /*pos:relative reqd for allowing the 'position:absolute' of the bottom shadow overlay to work */


.carousel {
width:650px;
min-height:285px;
float:left;
background: #e8e7e4 url(../tesassets/images/carousel/carousel_slot_5.jpg) no-repeat 0 0 ;
margin:0;
padding:0;
}

.gslot,
.gslot img,
.gslot a.btnRegister {
width:290px;
border:none;
}

.gslot{
width:290px;
min-height:265px;
float:right;
background-color:#e8e7e4;
margin:0;
padding: 10px;
}

.gslot h2,
.gslot blockquote,
.gslot a.btnRegister {
margin:0;
color:#242422;
}

.gslot blockquote  {
padding: 8px 0 0 0;
font-size:1.0909em;
height: 71px;
}

.gslot blockquote cite {
padding-top: 6px;
display:block;
font-size: 11px;
}

.gslot a.btnRegister {
display:inline-block;
width:290px;
height:30px;
line-height:30px;
background-color: #ee1b34;
font-size:1.6363em;
font-weight:normal;
color:#fff;
text-align:center;
zoom:1;
margin-top: 3px;
}

.gslot a.btnRegister:hover {
background-color: #a10113;
}

.gslot img {
margin-top:5px;
}

.botShadowOverlay {
position:absolute;
margin:0;
left:0;
bottom:0;
width:100%;
height:6px;
background-image: -moz-linear-gradient(top, hsla(0,0%,0%,0), hsla(0,0%,0%,0.1) 6px);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.1)));
z-index: 100;
}

.topShadowOverlay {
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background-image: -moz-linear-gradient(top, hsla(0,0%,0%,0.1), hsla(0,0%,0%,0) 6px);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.1)), color-stop(1, rgba(0,0,0,0)));
z-index: 100;
}


/* Todo: remove */
.gutterL15 {
margin-left:15px;
}


#featureboxes {
/*background: transparent url(graphics/home_featureboxes_bg.gif) 15px left repeat-y;*/
/*background-color: red;*/
background:#fff url(graphics/home_featureboxes_bg.gif) repeat-y 0 0;
border-top: 15px solid #fff;
}

#featureboxes .featurebox {
margin-top: 0;
}

.featurebox {
float:left;
margin-top:15px;
width:310px;
min-height:342px;	
font:bold 1.0909em arial, sans-serif; /* 12x */
}

.featurebox .header h3 {
font-family: arial, sans-serif;
font-size:2.25em; /* 27px */
margin:0;
}

.featurebox .header h3  a {
background:#fff url(front/images/fbox_idents_resources_sprite.png) no-repeat 270px -224px;
display:block;
padding-left:8px;
padding-right:10px;
border-bottom:none;	
color:#fff;
padding-top:3px;
font-weight:bold;
height: 38px;
}

.featurebox .header p {
margin: 10px auto;
width: 249px;
height: 69px;
background:#fff url(front/images/fbox_idents_resources_sprite.png) no-repeat;
padding-left: 41px;
font-weight: bold;
font-size: 2.75em;
display: block;
}

.featurebox .header p span {
display: block;

}

.featurebox .header p span.total {
height: 41px;
line-height: 41px !important;
margin: 0;
padding: 0;
}

.featurebox .header p span.desc {
padding-top: 7px;
height: 21px;
font-size: 0.4242em;
text-transform:uppercase;
margin-left: -9px;
padding-left: 9px;
white-space: nowrap;
}
.featurebox .boxContent {
margin:10px;
}
.featurebox  .boxContent h4 {
margin:7px auto 0px auto;
line-height:normal;
padding:0;
font:bold 1.4166em arial, sans-serif;
}

.featurebox  .boxContent dl,
.featurebox  .boxContent ul {
margin:0;
padding:0;
}

.featurebox  .boxContent dt {
font-size: 1.1666em;
}

.featurebox  .boxContent dt,
.featurebox  .boxContent .firstChild,
.featurebox  .boxContent li {
margin: 9px 0 0;
padding: 10px 0 0;
}

.featurebox.jobs  .boxContent dt,
.featurebox.jobs  .boxContent {
border-top:1px dotted #f27a87;
}

.featurebox  .boxContent dd {
margin-left:0;
font-weight: normal;
}

.featurebox.jobs .boxContent a {
border-bottom: 1px solid transparent;
}

/* temp hack */
#main .featurebox  .boxContent dd p {
display: inline;
line-height: inherit;
margin: 0;
color: inherit;
}


/* Start coloured background on headings for Jobs|Resources|Forums boxes */
.featurebox.jobs  {
background-color:#f7dbdb;
}
.featurebox.resources  {
background-color:#c2e0f5;
}
.featurebox.forums  {
background-color:#bdead4;
}

.featurebox.jobs  .header h3  a {
background-color:#ee1b34;
border-top:4px solid #7b000e;  
}

.featurebox.jobs  .header h3  a:hover {
background-color:#a10113;
border-top-color:#a10113;
}

.featurebox.resources .header h3 a {
background-color:#005bab;
border-top:4px solid #032748;
}

.featurebox.resources .header h3 a:hover {
background-color:#052949;
border-top-color:#052949;
}

.featurebox.forums  .header h3 a {
background-color:#00a650;
border-top:4px solid #014e26;
}

.featurebox.forums  .header h3 a:hover {
background-color:#014e26;
}
/* End colours */


.featurebox.jobs .header p {
background-position: left 0px;
}

.featurebox.resources .header p {
background-position: left -69px;
}

.featurebox.forums .header p {
background-position: left -138px;
}


.featurebox.resources .boxContent li,
.featurebox.resources .boxContent {
border-top:1px dotted #65a1d1;
}

.featurebox.forums .boxContent {
border-top:1px dotted #00a650;
}

.featurebox.forums .boxContent p  {
border-top:1px dotted transparent;
}

.featurebox.forums .boxContent h4 {
margin-bottom: 9px;
}


.featurebox ul.topContributor {
list-style-type: none;
line-height: 1.3333em !important; /* reset style */
}

.featurebox ul.topContributor li {
clear: left;
}

.featurebox ul.topContributor li img {
font-weight: normal;
overflow: hidden;
}

.featurebox ul.topContributor li a {
font-size: 1.1666em;
}

.featurebox ul.topContributor h5 {
margin: 0;
}

.featurebox ul.topContributor .avatar {
margin-bottom: 7px;
margin-right: 7px;
}

.featurebox ul.topContributor .meta {
color: #032748;
margin: 0;
font-weight: normal;
}

.featurebox ul.topContributor .meta a {
font-weight: bold;
font-size: 1em;
}

/* Start coloured background on statistics panels for Jobs|Resources|Forums boxes */
.featurebox.jobs .header span.desc {
background-color:#f7eeee;
}

.featurebox.jobs .header p {
color:#ee1b34;
}

.featurebox.resources .header span.desc {
background-color:#e3eef6;
color:#032748;
}

.featurebox.resources .header p {
color:#005bab;
}

.featurebox.forums .header span.desc {
background-color:#e4f4ec;
color:#014e26;
}

.featurebox.forums .header p {
color:#0fab5a;
}

.featurebox.jobs  .boxContent h4 {
color: #ee1b34;
}

.featurebox.jobs  .boxContent dt a {
color: #f03b50;
}

.featurebox.jobs .boxContent a:hover {
border-bottom: 1px dotted #f03b50;
}

.featurebox.jobs .header span.desc,
.featurebox.jobs .boxContent dd {
color:#a10113;
}

.featurebox.resources  .boxContent * {
color:#005eae;
}

.featurebox.resources .boxContent a:hover {
border-bottom: 1px dotted #005eae;
}

.featurebox.resources .boxContent a.avatar:hover {
border-bottom: 1px dotted #fff;
}


.featurebox.forums  .boxContent * {
color:#03a752;
}
/* End colours */


.popularLinksArea {
margin-top:14px;
min-height:34px;
padding-top:15px;
padding-bottom:6px;
}

.popularLinksAreaContent {
position:relative;
height:54px;
background:transparent url(front/images/controls/b_seo_expand_sprite.png) no-repeat left 0px;
}
.popularLinksArea  div.expanded {
height:auto;
background:transparent url(front/images/controls/b_seo_expand_sprite.png) no-repeat left -54px;
}
.popularLinksAreaContent h4 {
padding-left:10px;
padding-right:10px;
}

.popularLinksAreaContent .featurebox {
font-weight:normal;
margin-top:0;
min-height:auto;
min-height:inherit;
padding-top:1px;
} /* 'min-height' cross-browser. 'auto' for IE / 'inherit' for others. */

.popularLinksAreaContent  .accordionContent  {
display:none;
clear:both;
background-color:#fff;
margin-bottom:11px;
padding-top:10px;
}

.popularLinksAreaContent span.popularLinksBoxExpander {
position:absolute;
right:0px;
top:0px;
display:block;
width:53px;
height:44px;
text-indent:-9999px;
background: url(front/images/controls/b_seo_expand_sprite.png) no-repeat right 0px;
cursor:pointer;
cursor:hand;
} /* The duplication of the arrow/up bg-img sprite here is required for IE; without it only the span's text is hover-reactive; */
.popularLinksAreaContent span.expanded {
  background-position:right -54px;
} /* JS-home.js  "toggleClass"'s this */
.popularLinksAreaContent ul, .popularLinksAreaContent h5 {
  margin-top:0px;
  padding-left:10px;
  list-style-type:none;
}
#content .popularLinksAreaContent ul {
  color:#727171;
	margin:0px 55px 18px 0px;;
}
#content .popularLinksAreaContent ul li {
line-height:1.38em;
margin-bottom:5px;
}
#content .popularLinksAreaContent ul li a:hover{
border-bottom: 1px dotted #727171;
}

.popularLinksAreaContent h5 {
font-size:1.1666em;
color:#242422;
margin-bottom: 5px;
}
#content .popularLinksAreaContent ul a {
  color:#717171;
}

.popularLinksAreaContent .hide {
display: none;
}

.popularLinksAreaContent .featurebox  h4 {
width:296px;
margin:9px 0px 7px auto;
border-right:1px dotted black;
text-align:left;
line-height:25px;
font:1.5em/1.3 Arial, sans-serif;
color:#000;
}

.productsset {
padding-top: 8px;
}

.productsset ul {
list-style-type:none;
margin:0 auto;
padding-left:0;
height:58px;
overflow:hidden;
position:relative;
width: 980px;
}

.productsset li { 
display:inline-block;
color:green;
width:137px;
height:58px;
overflow:hidden;
} /* A tag required for IE as you cant do LI:hover */

.productsset li span {
display: none;
}

.productsset li.first { 
width:138px;
}

.productsset li.brightspark { 
background:transparent url(graphics/products_bright_logo_sm.png) no-repeat;
}

.productsset li.prime { 
background:transparent url(graphics/products_tesprime_logo_sm.png) no-repeat;
}

.productsset li.buywire {
background:transparent url(graphics/products_tesbuywire_logo_sm.png) no-repeat;
}

.productsset li.events {
background:transparent url(graphics/products_tesevents_logo_sm.png) no-repeat;
}

.productsset li.newteach { 
background:transparent url(graphics/products_tesnewteac_logo_sm.png) no-repeat;
}

.productsset li.hirewire {
background:transparent url(graphics/products_hirewire_logo_sm.png) no-repeat;
}

.productsset li.the { 
 background:transparent url(graphics/products_the_logo_sm.png) no-repeat;
}

.productsset li a { 
float:left;
width: 97px;
padding:10px 20px;
height:38px;
text-indent:-9999px;
overflow:hidden;
text-decoration:none;
color:#6b6b6b;
font-size: 11px;
line-height: 1.182em;
}

.productsset li a:hover {
width: 97px;
background-color:#e8e7e4; 
text-indent: 0px;
background-position:0 58px;
overflow:hidden;
}


/* Carousel */

.carousel {
width:650px;
position:relative;	
float:left;
}

.carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}

.carousel li {
color: #666;
text-align: center;
background-color: #f0f0f0;
border: none;
width: 650px;
height: 285px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.carousel-paging {
padding: 0;
position: absolute;
right: 8px;
text-align: center;
top: 8px;
}

.carousel-paging div {
float:left;
background-color: transparent;
background-repeat: no-repeat;
cursor: pointer;
width:10px;
height:10px;
margin: 0.1818em;
padding: 0;
overflow:hidden;
}

.carousel-paging div span {
visibility:hidden;
}

.carousel-paging div:hover 
{
background-image: url(../tesassets/images/carousel/b_home_carousel_page_red.png) !important;
}

/* background-image style for other carousel slots are added via JS to improve intitial page responsiveness */

/* reset style, needs #main */
#main ul.carousel-items,
#main ul.carousel-items li {
line-height: 1.2727em;
}

.carousel-items li {
display: none;
}

.carousel .first-item {
background-image: url(../tesassets/images/carousel/carousel_slot_1.jpg);
}

.carousel li.clickable{
cursor: pointer;
}

.carousel .first-item .content,
.carousel-text {
bottom: 0;
height: 70px;
margin: 0;
padding: 0 7%;
position: absolute;
width: 86%;
display: none;
left: 0;
color: #000;
}

.carousel .first-item .content {
display: block;
text-align: left;
}

.carousel-text h3,
.carousel .first-item .content h3
{
margin: 0.5454em 0 0 0;
padding:0;
color: #000;
font-weight: normal;
font-size: 2em;
line-height: 1.2727em;
}

.carousel .first-item .content h3,
.carousel .first-item .content p {
display: none;
}

.carousel-text p,
.carousel .first-item .content p
{
font-size:12px;
font-weight: normal;
margin: 0.1666em 0 0 0;
padding: 0 0 0 0.0833em;
text-transform: uppercase;
}

.carousel .first-item .content a,
.carousel-text a
/*,
.carousel .content a*/ {
color: #000;
}

/*.carousel .content {
text-align: left;
}*/

.carousel .first-item .content a:hover,
.carousel-text a:hover {
text-decoration: underline;
}

.carousel-scroll {
position:absolute;
cursor:pointer;
margin: 1.8181em 0.4545em;
width:30px;
height:30px;
display: none;
}

.carousel-scroll.left {
left:0;
bottom:0;
background: url(../tesassets/images/carousel/leftarrow.gif) no-repeat 0 0;
}

.carousel-scroll.right {
right:0;
bottom:0;
background: url(../tesassets/images/carousel/rightarrow.gif) no-repeat 0 0;
}


#carouselLoadingWrap {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
margin: 0px;
width: 650px;
height: 285px;
background-color: transparent;
}

#carouselLoadingWrap li {
background-color: transparent;
}

/* End Carousel */

/* Video player Iframe */
.BrightcoveExperience {margin:10px 10px 0px 10px;}
#videoWrapper {
  width:100%;
	height:280px;
	background:url(graphics/loadingAnimation.gif) no-repeat 50% 50%;
}
/* Video player Iframe */