@charset "utf-8";
/* CSS Document */

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { font: 16px Arial, Helvetica, Verdana, sans-serif; color: #333; }

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */

a { text-decoration: none; font-weight: bold; }
a.logo { color: #FFCC00; }
a.logo h1 { font-family: 'Exo 2', Arial; }
a.logo:hover h1 { color: #fff; }
a.button { display: inline-block; background: #008CBA; color: white; padding: 10px 20px; margin-left: 5px; border-radius: 20px; border-bottom: none;}
a.button:hover { background: #f44336; color: white; }


#header-wrapper { width: 100%; float: left; display: inline; background: #000 url(../images/bg/header.jpg) repeat; border-bottom: 5px solid #000 }
#content-wrapper { width: 100%; float: left; display: inline; background: #fff; }
#footer-wrapper { width: 100%; float: left; display: inline; background: #000 url(../images/bg/header.jpg) repeat; border-top: 5px solid #000 }
.container { width: 1200px; margin: 0 auto; }

header { width: 1200px; padding-top: 10px; float: left; display: inline  }
header h1 { margin: 10px 0 10px 0; padding-left: 60px; font: normal 40px Arial, sans-serif; color: #FFCC00; float: left; display: inline; background: url(../images/bestjobslk.gif) no-repeat; background-size: 50px; }
nav { margin: 25px 0 10px 0; float: right; display: inline; }
nav ul { list-style: none; font-weight: bold }
nav ul li { display: inline }
nav ul li a { padding: 8px 15px; display: inline-block; color: #eee; }
nav ul li a:hover { color: #fff; }
nav ul li a.active { background: #000; color: #FFCC00; border-radius: 8px; }
nav ul li a.facebook { width: 32px; padding: 8px 0; background: url(../images/icons/best-jobs-facebook.png) no-repeat; text-indent: -9999px; }
nav ul li a.facebook:hover { background: url(../images/icons/fb-gray.png) no-repeat; }
nav ul li a.youtube { margin-left: 10px; width: 32px; padding: 8px 0; background: url(../images/icons/youtube.png) no-repeat; text-indent: -9999px; }
nav ul li a.youtube:hover { background: url(../images/icons/youtube-hover.png) no-repeat; }

#searchbox { margin: 10px 0 0 0 }
#searchbox input { padding: 5px; width: 200px; border: 1px solid #aaa; border-radius: 5px; }
#searchbox button { padding: 4px; border-radius: 5px; }

#content { width: 1200px; float: left; display: inline; 
/*     background: url(../images/bg/content.gif) repeat-y right;   */
}
article { width: 840px; margin-right: 10px; float: right; display: inline; }
article h1 { margin-top: 10px; padding: 5px 0; font: normal 30px 'Exo 2', Arial, sans-serif; color: #222; border-bottom: 3px solid #ddd; letter-spacing: -1px; }
article h2 { margin-top: 10px; padding: 5px 0; font: normal 28px 'Exo 2', Arial, sans-serif; color: #222; border-bottom: 3px solid #ddd; }
article h3 { margin-top: 10px; padding: 5px 0; font: normal 26px 'Exo 2', Arial, sans-serif; color: #222; border-bottom: 2px solid #ddd; }
article h4 { margin-top: 10px; padding: 5px 0; font: normal 18px Arial, sans-serif; color: #222; }
article h3 strong { font-weight: normal}
article a { color: #2566d4; border-bottom: 1px dotted #2566d4; }
article a:hover { color: #FF6600; border: none;}
article p { margin: 10px 0; line-height: 150% }
article .red { color: red; font-weight: bold }
article ul li, article ul ol { line-height: 150% }

article .hometitle { width: 100%; margin-top: 10px; padding: 5px 0; border-bottom: 3px solid #ddd; float: left; overflow: auto }
article .hometitle h1 { margin-top: 0; border-bottom: none; float: left; letter-spacing: normal; }
article .hometitle .sortby { margin-top: 18px; float: right; font-size: 13px; }
article .hometitle .sortby a { border: none; }
article .hometitle .sortby span.active { color: red; font-weight: bold; }

article .top-ten-slider ol { margin: 0;  } 
article .top-ten-slider ol li { margin: 0;  } 

article .addthis { margin: 0 0 10px 0; max-width: 50%; float: left; display: inline; }
article .tutnav { margin: 0 0 10px 0; max-width: 50%; float: right; display: inline; }
article .tutnav a { display: inline-block; background: #008CBA; color: white; padding: 10px 20px; margin-left: 5px; border-radius: 20px; border-bottom: none;}
article .tutnav a:hover { background: #f44336;}
article .start-tut { margin: 0 0 10px 0; }
article .start-tut a { display: inline-block; background: #008CBA; color: white; padding: 10px 20px; margin-left: 5px; border-radius: 20px; border-bottom: none;}
article .start-tut a:hover { background: #f44336;}

a.play-button { border-bottom: none; font-style: italic }
a.play-button small { font-style: normal }

article #bottomad { margin: 40px 0 20px 75px; }

.error { margin: 10px 0 0 0; padding: 10px; background: #e51400; color: #fff; line-height: 150% }
.error a { font-weight: bold; color: #fff; border-bottom: 1px dotted #fff; }
.error a:hover { border: none; color: #fff;}

#job-title { margin-bottom: 10px; }
#job-title h1 { margin-top: 10px; padding: 5px 0 0 0; font-size: 30px; font-weight: normal; color: #222; border: none; }
#job-title h2 { margin: 0; padding: 0 0 5px 0; font-size: 20px; font-weight: normal; color: #222; }
#job-title h2 span { color: #aaa; }

#vid-title { margin-bottom: 10px; }
#vid-title h1 { margin-top: 10px; padding: 5px 0 0 0; font-size: 30px; font-weight: normal; color: #222; border: none; }
#vid-title h2 { margin: 0; padding: 0 0 5px 0; font-size: 20px; font-weight: normal; color: #222; }
#vid-title h2 span { color: #aaa; }
#vid-title .sortby { margin-top: 5px; float: right; font-size: 13px; }
#vid-title .sortby a { border: none; }
#vid-title .sortby span.active { color: red; font-weight: bold; }

iframe { padding-bottom: 5px; border-bottom: 3px solid #ddd;  }

.download-title { display: inline-block; width: 100%; margin-bottom: 10px; }
.download { display: inline-block; width: 100%; margin-bottom: 10px; background: url(../images/icons/dl.png) left center no-repeat; padding-left: 40px; }

.vid-details { display: inline-block; width: 100%; float: left; }
.vid-details h2 { margin-bottom: 10px;}
.vid-details .vid-thumb-small { width: 230px; height: 131px; overflow: hidden; background-size: 230px; background-position: center; float: left; }
.vid-details .vid-info { display: inline-block; float: left; padding: 20px; font-size: 20px; }

#view-job { margin-bottom: 20px; }
#view-job p { margin: 5px 0 10px 0; line-height: 150%; }
#view-job ul { margin: 10px 0 15px 20px;}
#view-job ul li { margin-bottom: 6px; }
#view-job strong { color: #222;}
.companylogo { margin-top: 10px; margin-left: 5px; float:right; }
.thumbnail { margin-top: 5px; margin-left: 5px; float:right; width: 120px; height: 68px }
.companylogo, .thumbnail a { border: none; }

#view-vid { margin-bottom: 20px; width: 100%; float: left; }
#view-vid p { margin: 5px 0 10px 0; line-height: 150%; }
#view-vid ul { margin: 10px 0 15px 20px;}
#view-vid ul li { margin-bottom: 6px; }
#view-vid strong { color: #222;}

.download-link { width: 100%; float:left; margin-bottom: 20px;}

.bodyad  { margin: 10px 0 10px 10px; width: 300px; margin-bottom: 10px; background: #eee; float: right; display: inline; }

div.hits {padding: 4px 10px 5px 5px; margin: 2px 2px 0 2px; background: #f7f7f7; border: 1px solid #eee; float: left; display: inline}
span.hits { color: #666; text-transform: uppercase; font: 12px Verdana, sans-serif; }

aside { width: 300px; float: left; display: inline; box-shadow: 2px 0 0 #eee; border-right: 1px solid #ddd }
aside .sbitem { width: 300px; margin-bottom: 10px; padding-bottom: 8px; float: left; display: inline; }
aside .sbad {  width: 300px; margin: 15px 0 10px 0; background: #eee; float: left; display: inline; }
aside .sbad h4 { color: #aaa; font-weight: normal; font-size: 18px; padding: 10px; font-family: 'Exo 2', sans-serif; }  
aside h3 { margin-top: 10px; padding: 5px 0 0 0;  font: normal 24px 'Exo 2', Arial, sans-serif; color: #222; text-transform: uppercase; }
aside .totalhits h3 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; text-align: center; }


ul.jobcat { margin-left: 5px; padding-bottom: 2px; list-style: none; }
ul.jobcat li { margin: 15px 5px; }
ul.jobcat li a { color: #2566d4; border-bottom: 1px dotted #2566d4; }
ul.jobcat li a:hover { color: #ff0000; border: none}
ul.jobcat li a em { font-weight: normal; color: #999; font-style: normal; font-size: 12px; }

ol.tut-playlist { margin: 10px 10px 10px 0; padding-bottom: 2px; }
ol.tut-playlist li { margin-bottom: 10px; line-height: 130%}
ol.tut-playlist li a { color: #2566d4; border-bottom: 1px dotted #2566d4; font-weight: normal; }
ol.tut-playlist li a:hover { color: #ff0000; border: none}
ol.tut-playlist li a em { font-weight: normal; color: #999; font-style: normal; font-size: 12px; }

ol.top-ten { margin-left: 20px; padding-bottom: 2px; }
ol.top-ten li { margin: 9px 5px; }
ol.top-ten li a { color: #2566d4; border-bottom: 1px dotted #2566d4; }
ol.top-ten li a:hover { color: #FF6600;}

ul.recent-posts { margin-left: 0; padding-bottom: 2px; list-style: none; }
ul.recent-posts li { margin: 9px 0; }
ul.recent-posts li a { color: #2566d4; border-bottom: 1px dotted #2566d4; }
ul.recent-posts li a:hover { color: #FF6600;}

.vid-list { float: left; overflow: auto; }
.vid-list .row { float: left; overflow: auto; margin: 10px 0;}
.vid-list .video { width: 273px; float: left; margin-right: 10px; cursor: pointer }
.vid-list .video:hover h3 { color: red; box-shadow: 1px 1px 1px #eee; }
.vid-list .video:last-of-type { margin-right: 0; }
.vid-list .video h3 { padding: 5px 10px; font-size: 16px; font-weight: bold; border: 1px solid #eee; margin: 0; line-height: 150%; }
.vid-list .vid-thumb { width: 273px; height: 155px; overflow: hidden; background-size: 273px; background-position: center; }
.vid-list .video img { width: 273px; }

.tut-thumb { padding: 10px 15px 15px 15px; width: 273px; height: 155px; overflow: hidden; background-size: 273px; background-image: url('../images/tut-thumb.jpg'); background-position: center; color: #0040ad; text-align: center; font-size: 30px; line-height: 110%; vertical-align:middle;  font-family: 'Exo 2', sans-serif; }
.tut-thumb:hover { color: red; border: 1px solid #aaa; padding: 9px 14px 14px 14px; text-shadow: 1px 1px 1px #fff }

table.job-list { margin: 0 0 20px 0; width: 600px; border-collapse: collapse; }
table.job-list tr td { padding: 10px 5px 7px 0; text-align: left; line-height: 160% }
table.job-list tr td a { font-size: 19px; }
table.job-list tr td p a { font-size: 16px; }
table.job-list tr td { border-bottom: 1px solid #ddd}
table.job-list tr td span.tiny { font-size: 12px; }
table.job-list .ra { width: 100px; text-align: right; font-size: 12px; vertical-align: top; }
table.job-list tr td span.info { color: #333; font-size: 13px; }
table.job-list tr td span.new { padding: 1px 3px; background: #00C900; font-size: 10px; color: #fff; border-radius: 5px;}
table.job-list tr td span.old { padding: 1px 3px; background: #c90000; font-size: 10px; color: #fff; border-radius: 5px;}

table.vid-list { margin: 0 0 20px 0; width: 840px; border-collapse: collapse; }
table.vid-list tr td { padding: 10px 5px 7px 0; text-align: left; line-height: 160%; vertical-align: top; }
table.vid-list tr td a { font-size: 19px; }
table.vid-list tr td p a { font-size: 16px; }
table.vid-list tr td { border-bottom: 1px solid #ddd}
table.vid-list tr td span.tiny { font-size: 12px; }
table.vid-list .ra { width: 100px; text-align: right; font-size: 12px; vertical-align: top; }
table.vid-list tr td span.info { color: #333; font-size: 13px; }
table.vid-list tr td span.new { padding: 1px 5px; background: #00C900; font-size: 12px; color: #fff; border-radius: 5px;}
table.vid-list tr td span.popular { padding: 1px 5px; background: #ff4538; font-size: 12px; color: #fff; border-radius: 5px;}
table.vid-list tr td span.old { padding: 1px 3px; background: #c90000; font-size: 10px; color: #fff; border-radius: 5px;}

footer { padding-bottom: 30px; text-align: center; }
footer p { padding: 10px; color: #aaa; }
footer p a { color: #aaa; font-weight: normal; }
footer p a:hover { color: #fff }
footer p span {color: #666; margin: 0 10px; }
footer p a.fb { background: url(../images/icons/best-jobs-facebook.png)  no-repeat; -webkit-background-size: 24px 24px;
background-size: 24px 24px; padding: 0 0 10px 32px}
footer p a.yt { background: url(../images/icons/youtube.png) no-repeat; -webkit-background-size: 24px 24px;
background-size: 24px 24px; padding: 0 0 10px 32px}
footer p a.fb:hover { background: url(../images/icons/fb-gray.png)  no-repeat; -webkit-background-size: 24px 24px;
background-size: 24px 24px; padding: 0 0 10px 32px}
footer p a.yt:hover { background: url(../images/icons/youtube-hover.png) no-repeat; -webkit-background-size: 24px 24px;
background-size: 24px 24px; padding: 0 0 10px 32px}

/* Form */
div.form { margin-top: 20px; }
div.form p { margin: 5px 20px 20px 2px !important }
div.form label { display: block; vertical-align: top; font-weight: bold }
div.form input { width: 450px; padding: 5px; border: 1px solid #ccc; border-top: 2px solid #ccc; background: #fff; font: bold 16px Arial, Helvetica, sans-serif; color: #222 }
div.form div.captcha { margin: 0 0 0 0; }
div.form textarea { width: 450px; height: 140px; padding: 5px; border: 1px solid #ccc; border-top: 2px solid #ccc; background: #fff; font: bold 16px Arial, Helvetica, sans-serif; color: #222  }
div.form button { margin: 5px 0; padding: 4px; border-radius: 5px; }
div.form .required { border: 1px solid #ED1C24; }
div.form #error { color: red; display:none; }
div.form .needsfilled { background: red; color: white; }