/* resets */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 

  margin:0; 

  padding:0; 

}

img{ 

  border:0; 

}

ul,ol{ 

  list-style:none;

}

h1, h2, h3, h4, h5, h6{ 

  font-size:100%; 

  font-weight:normal;  

}



/* type */

body,td,a,p { 

  font-family:Arial,Helvetica,sans-serif; color:#333;       

}

p{ 

  font-size: 80%; 

  line-height:150%; 

  color:#333;

}

p.line120{ 

  line-height:120%; 

}

p small{

  color:#777;

  font:normal 70% Verdana, sans-serif; 

}

h1.major{ /* large red heading (h1) */ 

  font-size:1.2em; 

  color:#AB000B; 

  margin-bottom:.3em; 

}

h1.minor{ /* small gray heading (h2) */  

  font-size:.8em; 

  font-weight:bold;

  color:#555; 

}

h2.gld{  

  color:#F2BE31; 

  font-size:1.2em; 

}

h6.error { 

 color:#444;

 font-size:1.5em;

}



p.note{ /* red notification message (h3) */ 

  color:#AB000B; 

  font-size:.8em; 

  font-weight:bold; 

  margin:0.5em 0; 

}

p.large_note{ /* large gray notification (h5) */  

  font-size:1.2em; 

  color:#555; 

}

p.nice{ padding-bottom:.7em; text-align:justify; }

p.green b{ font:normal 1.7em arial, sans-serif; color:#009933; display:inline; }    



  

/* links */

a.red:link, a.red:visited { 

  color:#AB000B; 

  text-decoration:underline; 

  cursor:pointer;      ``

} 

a.red:hover, a.red:active { 

  color:#FFF; 

  background-color:#AB000B;

} 



a.yellow:link, a.yellow:visited{ 

  color:#F2BE31; 

  font-size:1.1em; 

  text-decoration:underline; 

}  

a.yellow:hover, a.yellow:active{ 

  color:#fff; 

  background:#F2BE31; 

  text-decoration:none; 

}



a.grn:link, a.grn:visited{ 

  color:#009933; 

} 

a.grn:hover, a.grn:active{ 

  color:#FFF; 

  background-color:#009933;

} 



a.red:link, a.red:visited{ 

  color:#AB000B; 

} 

a.red:hover, a.red:active{ 

  color:#FFF; 

  background-color:#AB000B;

} 



a.gld,a.gld:link, a.gld:visited{ 

  color:#f2be31; 

} 

a.gld:hover, a.gld:active{ 

  color:#FFF; 

  background-color:#f2be31;

} 

a.gray:link, a.gray:visited, a.whats-next:link, a.whats-next:visited {

  font-weight:bold; 

  color:#777; 

  text-decoration:underline; 

  cursor:pointer; 

} 

a.whats-next:link, a.whats-next:visited { 

  margin:0.5em 1.3em 0 0; 

  float:left; 

}

a.gray:hover, a.gray:active, a.whats-next:hover, a.whats-next:active { 

  color:#FFF; 

  background-color:#999;

} 





/* elements */

button{

  border:0; 

  background-color:#fff; 

  cursor:pointer;

}

input.button{

  font:bold 1em Arial, sans-serif; 

  padding:0.2em; 

  margin-top:0.9em; 

}



/* -- fixes --- */

.clearfix:after{ 

  content: "."; 

  display:block; 

  height:0; 

  clear:both; 

  visibility:hidden; 

}

/* backslash hack hides from IE mac \*/

* html .clearfix{ 

  height:1%; 

}

.clearfix{ 

  display:block; 

}

/* end backslash hack */  

.clear{ clear:both; }

.left{ float:left; }

.right{ float:right; }





/* --- layout --- */

body{ 

  background:#f0f0f0 url(https://static.tutorz.com/img/bg-vertical-line.png) repeat-x; /* old bg-color #E7E7E7 */

  text-align:center; /* IE hack to center the container */ 

}       

#container{ 

  position:relative; /* for #img#border- */

  width:53.12em; /* 53.12em = 51em(main) + 2*1em(padding) + 2*1px(border) = 850pixel */

  margin:0 auto; 

  background:#fff;

}   

#main{ 

  width:51em; min-height:515px; 

  border-color:#c7c7c7;

  border-style:solid;

  border-width:0 1px 1px 1px;

  border-top:1px solid #F2BD2F;    

  padding:0 1em 1em 1em; 

  background-color:#fff; 

  text-align:left; 

}

#content, #sidebar{ float:left; }





/* header */

#header{ 

  position:relative; z-index:2; 

  width:53.15em; /* the 0.5 is to fix the breaking line effect when widening the browser */ 

  height:4em;    /* normal:4em, logo for spring:4.55em, halloween:5.5em; xmas/winter:4.95em; */

  margin:0px auto; 

  text-align:left;

}

#header img{ 

  margin:0.45em 0 0 0.6em;

  /*margin:0.3em 0 0 0;*/

  float:left;

}

#header #quicklinks{ 

  float:right; 

  margin:1em 0.5em; 

  font:normal 60% Verdana, sans-serif; 

}

#header #quicklinks a:link, #header #quicklinks a:visited {

  font-family:verdana, sans-serif; 

  text-decoration:none; 

  color:#444; 

}     

#header #quicklinks a:hover, #header #quicklinks a:active { 

  text-decoration:underline; 

  background-color:#FFF; 

}



/* subtab */

#subtab{ 

  position:relative; z-index:1; 

  width:52.2em; height:1.4em;

  border:1px solid #000;    

  padding:0.4em 0.82em 0.2em 0; 

  background:#FFF2BF; 

  border:1px solid #F2BD2F; 

  text-align:left; 

} 

#subtab a, #subtab a:link, #subtab a:visited{  /* order: a, a:link or else IE6 chokes */ 

  text-decoration:none; 

  margin-left:26px; 

  font:bold 80% arial, sans-serif; 

  border-bottom:2px solid #FFF2BF; 

  color:#666; 

  background:transparent;  

}

#subtab a:hover, #subtab a:active{ 

  text-decoration:none; 

  border-bottom:2px solid #888; 

  background:none; 

}

#subtab a.on{ 

  margin-left:0px; 

}

#subtab img{ 

  margin:0px 2px 0px 18px; 

}



/* --- footer --- */

#footer-container {

  /* background:#f0f0f0 url(https://static.tutorz.com/img/graveyard.gif) repeat-x; /*push - not cdd or else no /static -> static.tutorz.com */

  /* background:#f0f0f0 url(https://static.tutorz.com/img/winter-snowflakes.gif) repeat-x; /*push - not cdd */

  /* height:17em; /* only for graveyard, winter */

} 

#footer { 

  width:53em;

  margin:0em auto; 

  text-align:left;

}

#footer a:link, #footer a:visited { 

  color:#555;

  background-color:transparent;

  font-size:70%; 

  text-decoration:none; 

}     

#footer h5 a:link, #footer h5 a:visited { 

  color:#999; 

  /*background-color:#f0f0f0; /* turn off for graveyard and snowflakes*/

  font:bold 0.8em arial, sans-serif; 

  text-decoration:none; 

}     

#footer a:hover, #footer a:active, #footer h5 a:hover, #footer h5 a:active{  

  background-color:#f0f0f0; 

  text-decoration:underline; 

} 



#footer #site-map{ margin-top:1.5em; float:left; width:100%; }

#footer #site-map .col{ float:left; }

#footer #site-map .col #follow-us p{ 

  font-size:70%; 

  padding-bottom:0.3em; 

  margin-bottom:0; 

}

#footer #site-map .col #follow-us .social-media {

  text-align:center;  

  float:left;

  clear:left;

}

#footer #site-map .col #follow-us p{ font-size:80%; font-weight:bold; color:#999; }

#footer #site-map .col #follow-us a{ background:transparent; }

#footer #site-map .col #follow-us img{ margin:0 1em 0.4em 0; }

#footer #site-map .col #follow-us img.googleplus{ border:0; width:32px; height:32px; padding-bottom:0.45em }

#footer #site-map h3{ float:left; border-right:1px solid #bbb; height:2.5em; margin:0 1em; }

#footer #site-map .copy-right{ float:right; text-align:right; font:bold 55% Verdana, sans-serif; color:#999; width:30em; }



/* social media icons */

/* -------------------------------------------------

 * https-urls-after-push (do not delete this string)

 * it's to make the iconmon work for all pages

 * ------------------------------------------------- */

@font-face {

  font-family: 'icomoon';

  src: url(https://static.tutorz.com/img/font/footer/icomoon.eot);

  src: url(https://static.tutorz.com/img/font/footer/icomoon.eot#iefix) format('embedded-opentype'),

  url(https://static.tutorz.com/img/font/footer/icomoon.woff) format('woff');

  font-weight: normal;

  font-style: normal;

}



#footer [class^="icon-"], #footer [class*=" icon-"] {

  /* use !important to prevent issues with browser extensions that change fonts */

  font-family: 'icomoon' !important;

  speak: none;

  font-size: 1.6em;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  color: #fff;



  /* backward-compatibliy font rendering */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



#footer .icon {

  box-sizing: border-box;

  position: relative;

  display: inline-block;

  width: 31px;

  height: 31px;

  margin-right:0.2em;

  border-radius: 5px;

  background-color: #A8A8A8;

  padding-top: 8px;

  padding-left: 0;

  vertical-align: top;

}

    

#footer .icon:hover {

  background-color: #B3B2B2;

  box-shadow:inset 1px 0px 3px #999;

}



#footer .icon-twitter:before {

  content: "\f099";

}



#footer .icon-facebook:before{ content: "\f09a"; }



.icon-linkedin:before {

  content: "\f0e1";

}



#footer .icon-youtube:before {

  content: "\f167";

  font-size: 1.2em;

}

#footer .icon-youtube {

  padding-top: 4.5px;

  padding-left: 0;

}
/* --- footer end --- */



/* box */

.box{ position:relative; float:left; }

.box img.tl{ position:absolute; top:0; left:0;}

.box img.tr{ position:absolute; top:0; right:0;}

.box img.bl{ position:absolute; bottom:0; left:0;}

.box img.br{ position:absolute; bottom:0; right:0;}

.box .inner{ background:#fff; margin:1px; padding:0.7em; }



.box.std{ 

  width:39.1em;

  background:#cfcfcf; 

}

.box.std h2{ 

  font:normal 1.1em arial, sans-serif; 

  color:#555; 

  background-color:#f5f5f5; 

  padding:0.3em 0.7em 0.2em; 

  margin:1px 1px 0 1px; 

}

.box.vivid{

  width:39.1em;

}

.box.vivid h2{ 

  color:#fff; 

  font-size:1.1em;

  padding:0.15em 0.7em 0.1em;    

}

.box.std .col{ float:left; width:12.65em }



/* img-less box */

.rounded-outer-box{ border-collapse:separate !important; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border:0; background-color:#F8F8F8; }

.rounded-inner-box{ border-collapse:separate !important; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; border:0; background-color:#c3dd82; text-align:center; color:#FFFFFF; }

.rounded-inner-box .call-for-action{ color:#FFFFFF; font-size:1.3em; background:transparent; }

   

/* --- views ----- */

/* catcha */

.spammer{ text-align:center; margin-top:2.7em; }

.spammer h6, .spammer p{ color:#AB000B; }



/* confirmation success */

.confirm-success h1{ color:#AB000B; font:normal 1.2em Arial, sans-serif; margin:0.5em 0; }

.confirm-success h1 img{ vertical-align:bottom; margin-right:0.2em; }



/* be-a-tutor */

.box.vivid.be-a-tutor{ background:#AB000B; clear:left; width:10em; margin:1.5em 0 0 1em; }   

.box.vivid.be-a-tutor h2{ padding:0.3em 0.7em 0.2em; color:#fff; }  

.box.vivid.be-a-tutor .inner{ padding:0.3em 0.4em }



/* latest blog post */

.latest-blog-post{ clear:both; float:left; width:10em; margin:1.5em 0 0 1em; }

.latest-blog-post h2{ margin-bottom:0.3em; }



/* award */

.award{ width:10em; clear:both; float:left; margin:2.7em 0 1em 1em; text-align:center; }

#layout-right .award a{ background-color:transparent; }



/* available-credit */

#available-credit p{ color:#888; font-size:64%; margin:0 0.2em 0.3em 0; }  

#available-credit h1{ margin-right:0.1em; }







