/* v1.0 | Styles */


/* This stylesheet is deadicated to the class style structure of this Web site. If you want to add new ID or structural elements please use the "main.css" file and REMEMBER TO ADD COMMENTS TO YOUR ADDITIONS explaining what they control. Always BACKUP your site BEFORE MAKING CHANGES to this site's structure. */


/*====working named colors====

Black= #000000
Silver= #c0c0c0
Gray= #808080
White= #ffffff
Maroon= #800000
Red= #ff0000
Purple= #800080
Fuchsia= #ff00ff
Green= #008000
Lime= #00ff00
Olive= #808000
Yellow= #ffff00
Navy= #000080
Blue= #0000ff
Teal= #008080
Aqua= #00ffff

Shorthand colors work in CSS but not in html (ex. #f3c instead of ff33cc)
*/



/* GLOBAL STYLES */

.clear { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
  clear:both;
  height:0; /* for IE only */
  font-size: 1px;
  line-height: 0px;
}

div.noSide {
   width: 92%;
   margin-left:25px;
}

cite {
  font-style: italic;
  font-weight: bold;
  color: red;
  background-color: #ddd;
}
  
strong, .bold {
  font-weight: bold;
}

.underline {
	text-decoration: underline;
}

em, .italic {
  font-style: italic;  
}

#right img {
  margin-bottom: 20px;
}

a:link img, a:visited img, a:hover img, a:active img {
border:none;
color:none;
}

/* Content dividing styles */

#mainContent div.grayDivideLine {
    height: 1px;
    width: auto;
    border-top: 1px solid #CCC;
    margin: 5px 25px 5px 15px;
}

/* Text rollover effect styles */

#aboveSearch a:link, #aboveSearch a:visited {
    color: #E37000;
    text-decoration: none;
}

#aboveSearch a:hover {
    color: #30709A;
    text-decoration: underline;
}

#mainContent a:link, #mainContent a:visited {
    color:#31709A;
    text-decoration:underline;
}

#mainContent a:hover {
    color:#E37000
}

#mainContent .toolKitNav a:link, #mainContent .toolKitNav a:visited {
    color: none;
    text-decoration: none;
}
#mainContent .toolKitNav a:hover {
    color: none;
}

div#mainLower a {
  font-size: .9em;
  line-height:1.1em;
}

div#mainLower a:link, div#mainLower a:visited {
  color: #fff;
  text-decoration:underline;
}

div#mainLower a:hover {
  color: #c60;
  text-decoration:none;
}

p a.backToTop {
  display: block;
  width: auto;
  padding: 5px;
  font-size: .8em;
}

/* List styles (except for "#mainNav li". See main.css for that.) */

#mainContent ul {
    margin: 0 0 10px 50px;
    font-size: .9em;
    list-style:none;
}

#mainContent ul.bullets {
  /* list-style: square; */
  list-style:disc;
}

ul.nobullets, ul li.nobullets {
  list-style:none;
}

#mainContent li {
    color: #000000;
    margin: 5px;
    line-height: 1.2em;
}

div#mainLower ul {
  margin: 5px;
  list-style-type: none;
  list-style:none;
}

div#mainLower ul li {
  
}

#right ul.menu {
    list-style: none;
  width: auto;
  padding: 5px;
}

#right ul.menu a:link, #right ul.menu a:visited {
  display: block;
  font-weight: bold;
  text-decoration: none;
  padding: 15px 0 15px 30px;
  background: #066 url(../../../images/njBullet.png) no-repeat left top;
  color: #036;
  border-bottom: #003 solid 1px;
}

#right ul.menu a:hover {
  background: #003 url(../../../images/njBullet-over.png) no-repeat left top;
  color: #fff;
  border-bottom: #003 solid 1px;
}


#right ul.menu li.active a:link, #right ul#menu li.active a:visited {
  color: #666;
}

#footer ul.menu {
  display: block;
  text-align: center;
  background: #808080;
    width: 960px;
    height: 22px;
    float: left;
    font-size: 0.84em;
    font-style: normal;
    color: #FFFFFF;
  padding: 5px 0;
}

#footer ul.menu li {
    display: inline;
  padding: 5px 8px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#footer ul.menu li a:link, #footer ul.menu li a:visited, #footer ul.menu li a:active {
    color: #FFFFFF;
    text-decoration: none;
    font-style: none;
}
#footer ul.menu li a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    font-style: none;
}

/* H1, H2, H3, H4, H5, H6 */

#mainContent h1, #mainContent h2, #mainContent h3, #mainContent h4 {
    color: #31709A;
    font-family: Arial, Helvetica, sans-serif;
}

#mainContent h1 {
    font-size: 1.6em;
    font-weight: bold;
    margin: 0 0 0.4ex;
}
#mainContent h2 {
    font-size: 1.2em;
    margin: 0.4ex 2ex 1ex 2ex;
}
#mainContent h3 {
    font-weight: bold;
  color: #E37000;
    font-size: 0.8em;
    margin-top: 10px;
    padding: 10px 0 0;
}

/* p, pre, dl, dt, dd, ol, ul, li, blockquote, span  */

p { /* default for all p tags with no styling  */
  margin: 0 0 .75em 0;
  line-height: 1.5em;
}

#mainContent p, #right p, #footer p, {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Georgia, sans-serif;
}

.footer p {
    color: #31709a;
    font-size: 0.8em;
    line-height: 1.3em;
}

dt { /* default for all dt tags with no styling  */
  font-size: 125%;
}

dd { /* default for all dd tags with no styling  */
  margin-bottom: 12pt;
}

/*==== EXAMPLE OF SUBNAVIGATION USING CSS ROLLOVERS ====*/

#mainContent ul#stkTopmenu {
    list-style: none outside none;
    margin: 0 auto;
    width: 600px;
    padding-top: 25px;
}
#mainContent ul#stkTopmenu li {
    float: left;
    margin: 0;
    padding: 0;
}
#mainContent ul#stkTopmenu a {
    border: medium none;
    display: block;
    font-family: "Orator Std",Orator,sans-serif;
    font-size: 0.9em;
    height: 50px;
    margin-right: 20px;
    padding-top: 180px;
    text-align: center;
    width: 173px;
}

#mainContent ul#stkTopmenu a.last {
    margin-right: 0;
}

#mainContent ul#stkTopmenu a.aboutstk:link,#mainContent ul#stkTopmenu a.aboutstk:visited { 
  background: url(../../../images/general-stk_off.jpg) no-repeat center top; }

#mainContent ul#stkTopmenu a.bringstk:link,#mainContent ul#stkTopmenu a.bringstk:visited { 
  background: url(../../../images/bring-stk_off.jpg) no-repeat center top; }
#mainContent ul#stkTopmenu a.becomestk:link,#mainContent ul#stkTopmenu a.becomestk:visited { 
  background: url(../../../images/become-stk_off.jpg) no-repeat center top; }
#mainContent ul#stkTopmenu a.facstk:link,#mainContent ul#stkTopmenu a.facstk:visited { 
  background: url(../../../images/facilitator-stk_off.jpg) no-repeat center top; }

#mainContent ul#stkTopmenu a.aboutstk:hover { 
  background: url(../../../images/general-stk_on.jpg) no-repeat center top; }
#mainContent ul#stkTopmenu a.bringstk:hover { 
  background: url(../../../images/bring-stk_on.jpg) no-repeat center top; }
#mainContent ul#stkTopmenu a.becomestk:hover { 
  background: url(../../../images/become-stk_on.jpg) no-repeat center top; }
#mainContent ul#stkTopmenu a.facstk:hover { 
  background: url(../../../images/facilitator-stk_on.jpg) no-repeat center top; }
  
#mainContent.noRight ul#stkTopmenu { /* Same as above series except this works when there is no right sidebar. */
    width: 960px;
    margin: 0 auto;
    list-style: none;
}

#mainContent.noRight ul#stkTopmenu li {
    float: left;
    margin: 0;
    padding: 0;
}

#mainContent.noRight ul#stkTopmenu a {
    width: 70px;
    height: 20px;
    font-family: "Orator Std", Orator, sans-serif;
    font-size: .9em;
    text-align: center;
    padding-top: 100px;
    margin-right: 20px;
    border: none;
    display: block;
}

#mainContent.noRight ul#stkTopmenu a.last {
    margin-right: 0;
}

#mainContent.noRight ul#stkTopmenu a.one { 
  background: url (../../../images/rollovers/one-off.jpg) no-repeat center top; }

#mainContent.noRight ul#stkTopmenu a.two { 
  background: url (../../../images/rollovers/two-off.jpg) no-repeat center top; }
#mainContent.noRight ul#stkTopmenu a.three { 
  background: url (../../../images/rollovers/three-off.jpg) no-repeat center top; }

#mainContent.noRight ul#stkTopmenu a.one:hover { 
  background: url (../../../images/rollovers/one-on.jpg) no-repeat center top; }
#mainContent.noRight ul#stkTopmenu a.two:hover { 
  background: url (../../../images/rollovers/two-on.jpg) no-repeat center top; }
#mainContent.noRight ul#stkTopmenu a.three:hover { 
  background: url (../../../images/rollovers/three-on.jpg) no-repeat center top; }
  

/* Each page has a top div with a page description. This is the styling for that section. */
div#pageDesc {
    border-bottom: thin solid #ddd;
    margin: 10px 10px 20px 10px;
}

div#pageDesc ul {
    margin: 0 0 5px 75px;
    font-size: .9em;
}

div#pageDesc p {
    padding-top: 15px;
  display: block;
}

div#pageDesc img {
  float: left;
  border: none;
  padding: 5px 50px 0 0;
  margin: 5px 5px 30px 5px;
}

/* Extra Styles */
div.foxcontainer a, div.pageclass_sfx, div.foxcontainer a:link, div.foxcontainer a:visited {
    color: #fff;
    font-size:0em;
    background-color: #fff;
    overflow: hidden;
}
/* End Extra Styles */

/*=== BEGIN NJDRIVEREDUCATION SPECIFIC STYLES AND CLASSES BELOW ===*/

div.ccircle {
    background: url("/images/template-graphics/bkg_bianj-sidebar-sponsors.png") no-repeat scroll left top #FFFFFF;
    margin: 0 0 20px 0;
    padding: 65px 0 0;
    float: left;
}

.logo {
	padding: 30px 0 5px 20px;
    height: 143px;
    width: 500px;
}

#headerRight { 
    background: url("../../../images/pencilpaper.gif") no-repeat scroll right top #FFFFFF;
	width: 360px;
}

#aboveSearch {
    padding: 10px 10px 45px 0;
}

.blueCalloutBox, .greenCalloutBox, .yellowCalloutBox, .orangeCalloutBox {
	margin-bottom: 25px;
    width: 250px;
}

#right div.blueCalloutBox p, #right div.greenCalloutBox p, #right div.yellowCalloutBox p, #right div.orangeCalloutBox p {
	margin: 10px;
	padding: 0 0 10px 0;
}

.blueCalloutBox {
    background-color: #FFFFFF;
    border-top: 8px solid #317099;
}

.greenCalloutBox {
    background-color: #FFFFFF;
    border-top: 8px solid #409443;
}
.yellowCalloutBox {
    background-color: #FFFFFF;
    border-top: 8px solid #D0B411;
}

.orangeCalloutBox {
    background-color: #FFFFFF;
    border-top: 8px solid #E37000;
}

#right div.blueCalloutBox img, #right div.greenCalloutBox img, #right div.yellowCalloutBox img, #right div.orangeCalloutBox img {
padding: 0;
margin: 0;
}


.orangeBold {
    color: #E37000;
    font-weight: bold;
}

.redBold {
    color: #D91F26;
    font-weight: bold;
}

ul.arrow li {
    line-height: 20px;
    list-style-image: url("../../../images/arrow.gif");
    margin-left: 16px;
    margin-top: 10px;
}
ul.circle li {
    line-height: 20px;
    list-style-image: url("../../../images/circle.gif");
    margin-left: 40px;
    margin-top: 10px;
}

div#lessonplan, div#bulletinboard {
    float: left;
    margin: 20px 0 0;
    padding: 0;
    width: 99%;
}
.border {
    border: 1px solid #666666;
}
div#lessonplan img {
    float: left;
    margin: 0;
    padding: 0 20px 0 0;
}
div#lessonplan h2 {
    background-color: #507383;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding: 10px 0 10px 15px;
}
div#lessonplan h3 {
    background-image: url("../../../images/appleBullet.jpg");
    background-position: 218px 3px;
    background-repeat: no-repeat;
    color: #256787;
    font-size: 15px;
    font-weight: bold;
    padding: 1px 0 0 240px;
}
#lessonplan .lessonplanlist .lessonTopicsH1 {
    color: #C41A01;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 16px;
    margin: 0;
    padding: 5px 0 0 30px;
    text-decoration: underline;
}
.lessonplanlist p {
    color: #666666;
    letter-spacing: normal;
}

p.appleBulletLink a {
    background-image: url("../../../images/appleBullet.jpg");
    background-position: 30px 2px;
    background-repeat: no-repeat;
}
#lessonplan p.appleBulletLink a {
    padding-left: 50px;
}
.speakersBureau p.appleBulletLink a,.mediaCenter p.appleBulletLink a {
    background-image: url("../../../images/appleBullet.jpg");
    background-position: 0 2px;
    background-repeat: no-repeat;
    padding-left: 18px;
}
#lessonplan ul {
    margin: 0;
    padding: 5px 0 0 65px;
}
#lessonplan ul li.insideBulletLink {
    line-height: 16px;
    padding-left: 20px;
}
#lessonplan .lessonplanlist li.insideBulletLink {
    background-image: url("../../../images/appleBullet2.jpg");
    background-position: 5px center;
    background-repeat: no-repeat;
    color: #6B5B53;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8em;
    letter-spacing: normal;
    line-height: 15px;
    list-style-type: none;
    margin: 0;
    padding: 0 0 2px 20px;
}
.lessonLink {
    color: #006699;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
}
.lessonLink a:link, .lessonLink a:visited {
    color: #006699;
}
.lessonLink a:hover {
    color: #BE0C0B;
}
	
.speakersBureau {
	border: 1px solid #dddddd;
	width: 270px;
	height: 300px;
	margin: 30px 0px 0px 0px;
	padding: 0px;
}

.mediaCenter {
	border: 1px solid #dddddd;
	width: 270px;
    height: 300px;
	margin: 30px 0px 0px 0px;
	padding: 0px;
	float: right;
}

.speakersBureau p, .mediaCenter p{
	margin: 0px;
	padding: 10px 10px 10px 25px;}

#stickycallbox {
	background: url(../../../images/sticky-curled.png) no-repeat !important;
	width: 222px;
	height: 225px;
	padding: 55px 15px 0px 15px ;
	margin: 0px 0px 0px 0px;}

#stickycallbox p {
	padding: 0px;
	margin: 0px;
	line-height: 180%;}





.bluelist li{
	padding:0px;
	margin:0px 0px 0px 30px;
	}

.bluelist li{
	padding-left: 15px;
	margin-top: 8px;
	background-image: url(../../../images/arrow-right-blue-trans.png);
	background-repeat: no-repeat;
	background-position: 0 .5em;
}

.bluelist a{
	color:#31709A;
	text-decoration:underline;
}

.bluelist a:hover{
	color: #d91f26;
}

.homeblueTitle{
	border-top:none;
	padding: 20px 0 0px 0px;
	color: #31709a;}
.homeorangeTitle{
	color: #e37000;
	border-top: none;
	padding: 20px 0 0px 0px;}

.sidebarbluelist li{
	padding:0px;
	margin:0px 0px 0px 0px;
	}

.sidebarbluelist li{
	padding-left: 15px;
	margin-top: 8px;
	background-image: url(../../../images/arrow-right-blue-trans.png);
	background-repeat: no-repeat;
	background-position: 0 .5em;
}

#mainContent div#media div.stackedContent ul {
    margin: 0;
    padding: 0 0 15px 0;
}

#mainContent div#media div.stackedContent ul img {
    clear: both;
    float: left;
    padding: 0 15px 0 15px;
}

#mainContent div#media div.stackedContent ul li {
    float: left;
    font-size: 1.1em;
    font-variant: small-caps;
    font-weight: bold;
    border: 1px #ccc solid;
    padding: 0;
    margin: 10px 10px 10px 0;
    height: 160px;
    width: 180px;
}

#mainContent div#media div.stackedContent ul p {
    display: block;
    float: left;
    padding: 0;
    text-align: center;
    width: 150px;
    font-size: .7em;
    font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
    font-weight: normal;
}

div.lpInfo {
	width: 430px;
	float:right;
}

/*=== END NJDRIVEREDUCATION SPECIFIC STYLES AND CLASSES ===*/

/* Helpful font combinations with descriptions. Research Web Fonts for more customization. */

.times { font-family: Times, "Times New Roman", serif }
/* Usually the default font on a browser. Times New Roman is a Microsoft variation on Times. Was designed 100 years ago for newsprint. */

.helvetica { font-family: Helvetica, Arial, sans-serif } 
/* Arial is a Microsoft variation on Helvetica. Was designed 100 years ago for phone books. */

.courier { font-family: Courier, "Courier New", monospace }
/* On Microsoft Windows system, the font names "Courier" is a bitmapped font. It will look horrible. Courier New is not much better (lightweight, thin, hard to read) Avoid it... Use monospace or Lucida Console, monospace instead. */

.georgia { font-family: Georgia, serif }
/* ==FAVORITE SERIF== Georgia and Verdana were both commissioned by Microsoft specifically to look good on a bitmapped screen. They were given away for free and are on almost all computers. Make it your default font on your browser. */

.verdana { font-family: Verdana, sans-serif }
/* ==FAVORITE SANS-SERIF== Georgia and Verdana were both commissioned by Microsoft specifically to look good on a bitmapped screen. They were given away for free and are on almost all computers. */

.trebuchet { font-family: "Trebuchet MS", Trebuchet, sans-serif }
/* Designed for the screen. Pretty Font, on all systems that have microsoft office installed. On all Microsoft computers and Macs. Safe to use.  */

.impact { font-family: Impact, sans-serif }
/*Commonly available. Difficult to read. Good for headlines only really.*/

.lucidaSans { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif }
/*Lucida Sans Unicode is the Microsoft version. Lucida Grande is the Macintosh version of Lucida Sans. Commonly available on all machines that have Microsoft Office. Clean, easy to read.*/

.lucidaConsole { font-family: Lucida Console, monospace }
/*Commonly available on all machines that have Microsoft Office. Clean, easy to read. Very readable monospace font.*/

.serif { font-family: serif }
/* Default serif font on the users computer. serif= with feet. */

.sansSerif { font-family:  sans-serif }
/* Default sans-serif font on the users computer. sans-serif= without feet. */

.monospace { font-family: monospace }
/* Default monospace font on the users computer. It's a non-proportional font whose letters and characters each occupy the same amount of horizontal space. This contrasts to variable-width fonts, where the letters differ in size to one another. Useful for computers with limited graphical capabilities. */

.cursive { font-family: cursive }
/* Default cursive font on the users computer. */


/* Helpful font attributes */
.textAttributes {
    font-weight: bold;
    /*
    font-weight: bolder;
    font-weight: lighter;
    font-weight: normal;
    font-weight: 900;
    font-style: italic; / * sans-serif and fonts that do not have an italic variation and just look weird tend to get slanted */
    /*
    font-style: normal;
    font-variant: small-caps;
    font-variant: normal;
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;
    text-transform: none;
    text-decoration: underline;
    text-decoration: overline;
    text-decoration: line-through;
    text-decoration: blink;
    text-decoration: none;
    */
}

#mainContent ul.fltLeft {
width:600px;
float:left;
margin:0;
padding:0;
}

#mainContent ul.fltLeft li {
float:left;
margin:0;
padding:0;
}

#mainContent ul.fltLeft li img {
margin:0;
padding:0;
}

.stackedContent {
    width: 600px;
    float:left;
    clear:both;
    padding: 20px 0;
    border-bottom: 1px #666 groove;
}

.stackedContent img {
    float:left;
    padding: 0 20px 20px 0;
}

#mainContent div.stackedContent .keepRight {
    padding-left: 160px;
}

#mainContent div.stackedContent ul {
    padding-bottom: 15px;
}

#mainContent div.stackedContent li.facLocation {
    font-size: 1.1em;
    font-variant: small-caps;
    font-weight: bold; 
}