/* v1.0 | Main */

/* This stylesheet is deadicated to the main structure and ID's of this Web site. If you want to add new classes please use the "styles.css" file and REMEMBER TO ADD COMMENTS TO YOUR ADDITIONS explaining what they control. */

/*====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)
*/

body {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #333333;
    font-family: georgia, verdana, sans-serif;
    font-size: 90%;
}

body, div#languages  {
    background: #9E9E9E;
}  

/* Languages div appears above #container */

div#languages {
     width: 960px;
     height: 33px;
}

#languages select {
    padding: 1px;
}

#languages #trans {
     text-align: right;
}

#container {
    width: 960px;
    background: #fff url(../../../images/containerBG.jpg) repeat-y left top; /* comment out background to see layout flaws. I use Firebug in Firefox for this usually. Always check in all browsers after making changes. Adobe Browser Lab is helpful. for most changes. */
    height: auto; /* This allows site to expand vertically as new content is added. */
    margin: 0 auto; /* this allows site to remain centered in browser. */
    text-align: left;
    clear: both;
} 

/* Header div appears first inside #container and contains #headerLeft, #headerRight, #aboveSearch, #search and #mainNav */

#header {
    background: #FFFFFF;
    width: 960px;
    float: left;
}

#headerLeft { /* contains logo image. */
    width: 550px;
    float: left;
}

/* Logo */
/* applied to the site logo inside of the header. */
/*See styles.css in the site-specific section for more styles that control this element*/
/*
.logo {
    height: 130px;
    width: 520px;
}
*/

#headerRight { /* contains #aboveSearch and #search */
    float: right;
    margin-right: 10px;
/*See styles.css in the site-specific section for more styles that control this element*/
}   

#aboveSearch { /* appears above #search */
    text-align: right;
    font-size: 1.1em;
    color: #666;
/*See styles.css in the site-specific section for more styles that control this element*/
}

#search { /* appears below #aboveSearch */
  height: 30px;
  text-align: right;
}

/* BEGIN REQUIRED ELEMENTS FOR "SMART SEARCH" MODULE */
ul.autocompleter-choices {
  font-size: .9em;
}

#finder-filter-window {
  
}

#finder-filter-window ul {
   color: #000000;
   margin: 5px;
   line-height: 1.2em;  
}

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

.advanced-search-tip {

}

span.term {
  color: #E37000;
}

select.inputbox {
    margin-left: 20px;
}

div#search-query-explained {
border-bottom: 1px solid #666;
width: auto;
margin: 10px;
}
/* END REQUIRED ELEMENTS FOR "SMART SEARCH" MODULE */

/* Main Navigation styling is controlled through the menu.min.css stylesheet */


/* Want to change rollover colors and styles? See styles.css for "text rollover effect styles" */

/*==== mainContent ====*/

.blog-featured { /* Do not rename. Joomla! required. */
    padding: 10px 0;
    border-top: 3px solid #999;
    margin: 30px 20px 20px 20px;
}

#mainContent { /* Contains #breadcrumbs, #mainLeft, #mainRight, #mainUpper and #mainLower */
    background:#FFFFFF;
    padding-bottom: 30px;
    padding-left: 10px;
    float: left;
}

#breadcrumbs {
  padding: 5px 5px 15px 5px;
  width: auto;
  height: auto;
  color: #999;
  font-size: .8em;
}

#mainContent.withRight { /* This sets mainContent area to 640 pixels wide when there is a right sidebar present. */
  width: 640px;
}
  
#mainContent.noRight { /* This allows mainContent area to expand 100% when there is NO right sidebar present. This is controlled by PHP. */
    width: auto;
}

/* Want to change rollover colors and styles? See styles.css for "text rollover effect styles" */


#mainContent p, dl, dd, #finder-filter-window, fieldset, advanced-search p { /* This is the styling for some of the tags appearing in #mainContent. It also allows the same styling to be applied to the search result pages. You can add more tags to this as needed to keep consistency. */
    color: #2B2C2D;
    font-size: 0.9em;
    line-height: 1.5em;
    margin: 1ex 3ex;
    padding: 0 0 10px;
}

div#mainLeft { /* This is only used on the homepage with modules. It collapses on other pages allowing for content below to move up. */
width: 305px;
float: left;
height: auto;
padding-right:10px;
}

div#mainRight { /* This is only used on the homepage with modules. It collapses on other pages allowing for content below to move up. */
width: 305px;
float: right;
height: auto;
padding-left: 10px;
}

div#mainUpper { /* This is only used on the homepage with jQuery banners. It collapses on other pages allowing for content below to move up. */
  width: 640px;
  height: auto;
}

/* Right Side Bar */
#right {
    float: right;
    width: 250px;
    margin-right: 10px;
    height: 100%;
    margin-top: 20px;
  background: #eef;
  padding: 5px;
}

/* Footer */
#footer { /* This contains four divs that float left. These divs are div.foot1, div.foot2, div.foot3 and div.foot4 */
    background: url("../../../images/bkg_footer.png") no-repeat scroll left top #FFFFFF;
    float: left;
    height: auto;
    margin-bottom: 20px;
    padding-bottom: 10px;
    width: 960px;
}
#footer div.foot1 {
    background-color: #FFFFFF;
    border-right: 1px dashed #666666;
    float: left;
    height: auto;
    margin: 20px 0;
    width: 239px;
}
#footer div.foot2 {
    background-color: #FFFFFF;
    border-right: 1px dashed #666666;
    float: left;
    height: auto;
    margin: 20px 0;
    width: 259px;
    padding-top: 15px;
}
#footer div.foot3 {
    background-color: #FFFFFF;
    border-right: 1px dashed #666666;
    float: left;
    height: auto;
    margin: 20px 0;
    width: 229px;
    padding-top: 15px;
}
#footer div.foot4 {
    background-color: #FFFFFF;
    float: left;
    height: auto;
    margin: 20px 0;
    width: 229px;
    padding-top: 15px;
}

#footer img, #footer ul, #footer p, #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
  padding: 0 10px;
}

#footer h3 {
  font-size: .8em;
  font-weight: bold;
  padding-left: 15px;
}

#footer p {
    font-size: .8em;
    color: #666;
}

#footer p.copyright {
  padding-bottom: 15px;
}

#footer div.foot2 img {
    float: left;
    padding-right: 10px;
}

table.phoneFaxHelpline {
  margin-left: 10px;
  font-size: .8em;
    color: #666;
}

table.phoneFaxHelpline td.left {
  width: 70px;
}

table.phoneFaxHelpline td.right {
  width: 150px;
}


/* 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. */


div#pd-embed-slider #pd-top a.pd-close {
    background: url("http://njteendriving.org/popups/images/close2.png") no-repeat scroll 0 0 transparent !important;
    height: 36px !important;
    line-height: 20px !important;
    line-height: 0\9 !important;
    margin-bottom: -4px !important;
    position: absolute !important;
    right: -10px !important;
    top: 2px !important;
    width: 36px !important;
}

#pd-embed-slider #pd-top a.pd-close {
    background-image: url("http://www.njteendriving.org/popups/images/close3.png") \9 !important;
    height: 36px \9 !important;
    margin: 0 \9 !important;
    padding: 0 \9 !important;
    position: absolute \9 !important;
    left: 0 \9 !important;
    top: 0 \9 !important;
    width: 36px \9 !important;
}

#PDI_container7310200 .pds-box {
    background: url("http://www.njteendriving.org/popups/images/pdbmicro13-bottom-left2.gif") no-repeat scroll left bottom #FFFFFF \9 !important;
}

/* #Page Styles
================================================== */


div.speakers-bureau {
}

div.speakers-bureau #state-wide, div.speakers-bureau #central, div.speakers-bureau #northern, div.speakers-bureau #southern {

}

div.speakers-bureau div.name-plate {

}
  
li.name, li.name1, li.name2, li.title, li.title1,  li.title2, li.location, li.location1, li.location2, li.phone1, li.phone2, li.email, li.email1, li.email2 {

}

div.name-plate {
  width:275px;
  float: left;
}

.name-plate li.name {
  font-family: Trebuchet MS, Trebuchet, sans-serif;
  font-weight: bold;
}
  
.topics {
}

div.bigLink {
    margin:10px;
    padding:5px;
}

#mainContent div.speakers-bureau .bigLink p, #mainContent div.speakers-bureau .bigLink ul {
    background-color: #FFFFFF;
    padding: 5px;
    margin: 5px;
}

.bigLinkHover {
  background-color: #eee;
}

.bigLinkHover p, .bigLinkHover ul, {
    padding: 5px;
    background-color: #fff;
}

.bigLinkHover p, .bigLinkHover ul {
  background-color: #fff;
}