/* Styles used in Sitefinity for NW3C site */
/* 

  Basic docs on CSS classes Reference - http://www.sitefinity.com/documentation/designers-guide/css-classes-reference.aspx 

  Looks like a good article on Customizing a Control/Widget
        http://www.automatedresults.com/Learn/Sitefinity_Blog/11-11-16/Customize_a_Sitefinity_4_x_Control_or_Widget.aspx

  intersting article on creating a basic layout
      http://www.alistapart.com/articles/holygrail  
      http://css-discuss.incutio.com/wiki/Star_Html_Hack - this hack is referenced in the previous article 

  sometimes there are issues with loading the proper files
        http://www.sitefinity.com/blogs/joshmorales/posts/11-02-23/installing_sitefinity_4_on_iis_6.aspx
 
*/

/*  
   #263C53 - band on Homepage images
   #35577C - another shade in the Homepage images
   #41627E !important;#3E648B
   #3E648B - another shade in the Homepage images


   #153E7E - Dodger Blue 4 
   #25587E - Deep Sky Blue 4
   #2B547E - Steel Blue 4   (heavy use)
   #41627E - Sky Blue 4
   #4863A0 - Steel Blue      (maybe too light)
*/

/*
    NOTE:  Changing the Background Color of the "Page" Requires changing the following Classes
                search for "BACKGROUND-CHANGE" to see the changess needed
    .sfPublicWrapper (Should probably add our own class to manage this 
    .RadTabStripVertical ul li a.rtsLink (Vertical menu links)
    .nw3cBreadCrumbDiv (Breadcrummb)
*/


/*  Make a Div transparent that has the Id="transparent" */
/*  http://kiveo.net/blog/transparent-backgrounds/  good link showing the effect we want on the homepage  */
#transparent
{
    filter: alpha(opacity=40);
    opacity: 0.40;
}

/*  TODO - Add a more specific Class to the Body generated - issue with IFRAME BODY element used with TEXTAREA RedEditor for Comments */
body
{
    background-color: #2B547E; /* steelblue; */
    font-family: Arial,Verdana,Sans-serif;
    font-size: 12px;
    line-height: 1.5;
    min-width: 985px;
}


/* 
    Body background color for Comment Editor (RadEditor in IFRAME - Style Sheets passed from Global Theme Folder)  
    Required since it was inheriting from the Body CSS above (i.e. background-color: #2B547E) 
*/
body.sfreContentArea
{
    background-color: white !important;
}

.nw3cLoginAndSearch
{
    /* padding-right: 10px; */
    text-align: right;
}

/*  trying to make the Comments background not the Blue of the Body element  */
.sfCommentsForm
{
    background-color: white !important;
}


.sfPublicWrapper
{
    background-color: #eeeeee !important; /*  BACKGROUND-CHANGE  changed from White;   */
    margin: 20px auto;
    padding: 30px;
    width: 920px;
}

/*  Generic HR to match color  */
hr
{
    height: 1px;
    border: 0px #2B547E solid;
    color: #2B547E;
    background-color: #2B547E;
}


/*  Class to add when a control is to be hidden - use jQuery .hide() when possible   */
.nw3cHidden
{
    visibility: hidden;
}

.nw3cTODO
{
    color: White !important; /* Black !important; */
    background-color: #C0C0C0 !important; /* White !important; */
    font-weight: 700; /* display: none;  */ /* Use to hide all the Red TODO notations  */
}

.nw3cWarning
{
    /*  color: White !important;   */
    background-color: Yellow !important;
    font-size: 1.25em;
    font-weight: 600;
}

.nw3cError
{
    color: White !important;
    background-color: Red !important;
    font-size: 1.25em;
    font-weight: 600;
}

.nw3cFileNote 
{
    color: Gray;
    font-size: 0.9em;    
}

.nw3cHorzCenterBlock
{
    margin-left: auto;
    margin-right: auto;
}

.nw3cHorzCenterInline
{
    text-align: center;
}

.nw3cDivFullWidth
{
    width: 100%;
}

/*  styling for Div containing the breadcrumb  */
.sfBreadcrumbWrp
{
    margin-top: 3px;
    margin-bottom: 6px; /*  if this color is changed you need to change the "rootNodeStyle" class "nw3cBreadCrumbRoot" and/or the SiteMaps "RootNodeStyle" as well  */
    background-color: #eeeeee; /*  BACKGROUND-CHANGE  changed from White;   */
}


.sfBreadcrumbWrp  .RadSiteMap .rsmOneLevel .sfBreadcrumbNavigation .rsmLink
{
    text-decoration: none;
}

/*  styling for the BreadCrumb separator  */
.sfBreadcrumbNodeSeparator
{
    color: #2B547E;
    margin-left: 5px;
    margin-right: 5px;
}

/*  styling used on the Title in the Header of the "Master" template */
.nw3cTitle
{
    color: #660000;
    font-size: 1.25em;
    font-weight: 700;
    padding-top: 20px;
    text-align: center;
}

.nw3cTitleDiv
{
    /*  display: none;  */
}

.nw3cPageTitleDiv
{
    display: none;
}

/*  SubTitle that should appear on all section pages */
.nw3cSubTitle
{
    font-size: 2em; /*  2.25em;  */
    font-variant: small-caps;
    color: white;
    background: #2B547E; /* #4863A0;  */
    padding-left: 10px;
    display: none;
}

/*  SubTitle that should appear on only the Home page (Gray subtitle bar)*/
.nw3cSubTitleHome
{
    font-size: 2em; /*  2.25em;  */
    font-variant: small-caps;
    color: white;
    background: gray;
    padding-left: 10px;
    display: none;
}

/*  Page title that should appear on most content pages */
.nw3cPageTitleText, .nw3cPageTitle, .nw3cPageTitleLong, .nw3cPageTitleMax
{
    color: #2B547E;
    font-size: 1.50em;
}

div.nw3cPageTitle
{
    width: 50%;
    border-bottom: #2B547E 1px solid;
    margin-bottom: 15px;
}

div.nw3cPageTitleLong
{
    width: 70%;
    border-bottom: #2B547E 1px solid;
    margin-bottom: 15px;
}

div.nw3cPageTitleMax
{
    width: 100%;
    border-bottom: #2B547E 1px solid;
    margin-bottom: 15px;
}

/*  styling for the Topic Title in a Main Content box   */
.nw3cContentTopicTitle
{
    color: #2B547E;
    font-weight: 500;
    font-size: 1.5em;
}

/*  Smaller styling for the Topic Title in a Main Content box   */
.nw3cContentTopicTitleSmaller
{
    color: #2B547E;
    font-weight: 500;
    font-size: 1.25em;
}

/*  styling for the Topic Sub Title in a Main Content box   */
.nw3cContentTopicSubTitle
{
    color: #4863A0;
    font-weight: 500;
}


/*  Main Menu Bar */
.nw3cNav
{
    height: 36px;
    background-image: url(../Images/MenuBackground.jpg);
}

/*  Generic Page Content and Sub-Navigation Area */
.nw3cContentAndNav
{
    height: 100%;
    width: 900px;
    margin-left: 20px;
	margin-bottom: 20px;
}

/*  Generic Page Content Area */
.nw3cMainContent {
}

.nw3cContent
{
    height: 100%;
    min-height: 350px;
    width: 660px !important;
    padding-left: 10px;
    padding-right: 10px;
    background-color: White; /* BACKGROUND-CHANGE  #F1F1F1  */
}

/*  Generic SubPage Content Area */
.nw3cSubPageContent
{
    height: 100%;
    width: 900px !important;
    padding-left: 10px;
    padding-right: 10px;
    background-color: White; /* BACKGROUND-CHANGE  #F1F1F1  */
    margin-bottom: 20px;
}

/*  Generic Page Sub-Navigation */
.nw3cSubNav
{
    height: 100%;
    width: 215px !important;
    padding-left: 5px;
}

/*  styling for Footer on Master Page  */
.nw3cFooter
{
    color: white;
    height: 33px;
    background-color: transparent;
    background-image: url(../Images/MenuBackground.jpg);
}

.nw3cFooterLinkText {
	color: White;
	font-size: .6em;
	text-decoration: none;
}

/*  styling for the main title in a Callout box (usually along the bottom of the page)  */
.nw3cCalloutTitle
{
    color: #2B547E; /*  font-family: Helvetica;  */
    font-weight: 600;
    font-size: 1.75em;
}

/*  styling for the Sub title(s) in a Callout box (usually along the bottom of the page)  */
.nw3cCalloutSubTitle
{
    /*  font-family: helvetica;  */
    color: #4863A0;
    font-weight: 600;
}

/*  styling for the Content of a Callout box (usually along the bottom of the page)  */
.nw3cCallOutBody
{
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px; /*  height: 100%;  Need to have a container element with a height that is set/determined for this attribute to work  */
}

/*  styling for the Content of the center Callout box with borders (usually along the bottom of the page in the center)  */
.nw3cCalloutWithBorders
{
    border-left: #2B547E 1px solid;
    border-right: #2B547E 1px solid;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px; /*  height: 100%;  Need to have a container element with a height that is set/determined for this attribute to work  */
}

/*  styling for the Contact table in the Contact Call out box   */
.nw3cContactTable
{
}



/*  Sitefinity added a border to tables/cells in Content blocks */
table.NoBorder, table.NoBorder td, .NoBorder table, .NoBorder table td {
	border: 0px none;
}

a.NoBorder > span > img, img.NoBorder {
    text-decoration:none;
    border: 0px none;
    outline:none;
}


/*  Used to style "Current" numeric Pager element on a ListView */
span.nw3cPagerCurrent
{
    background-color: #2B547E;
    border: 1px solid #2B547E !important;
    color: white !important;
}

/*  Used to Style the Numeric Links on a ListViewPager */
.nw3cPagerNumeric a:link, .nw3cPagerNumeric a:visited, .nw3cPagerNumeric a:active, .nw3cPagerNumeric span
{
    padding: 1px 6px;
    color: #2B547E;
    border: 1px solid white;
}

.nw3cPagerNumeric a:hover
{
    color: #2B547E;
    border: 1px solid #2B547E;
}

.nw3cGridLabel
{
    color: #2b547e;
    font-weight: bold;
    font-size: 1.25em;
}

td.TopLeftAlign
{
    text-align: left; 
    vertical-align:top;
}

table.nw3cOCRTable
{
    border-width: 1px;
    border-style: outset;
    border-color: #25587E;
}

table.nw3cOCRTable th
{
    background: #2B547E;
    color: white;
    padding: 2px 6px;
}

table.nw3cOCRTable td
{
    border-width: 1px;
    border-color: #25587E;
    border-style: inset;
    padding: 2px 6px;
    min-width: 100px;
}

table.nw3cOCRTable td.OCRAddendum
{
    border-width: 1px;
    border-color: #25587E;
    border-style: inset;
    padding: 2px 6px;
    text-align: center;
    min-width: 50px;
}

table.nw3cOCRTable td.OCRRegistration
{
    min-width: 70px;
}

.nw3cButton
{
    /* width: 100px; */
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

.nw3cSubmitButton
{
    /* width: 100px; */
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 5px;
    text-align: center;
    min-width: 80px;
    overflow: visible;
}

.nw3cCancelButton
{
    /* width: 100px; */
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    text-align: center;
    min-width: 80px;
    overflow: visible;
}

.nw3cLookupButton
{
    width: 20px;
    height: 20px;
    text-align: center;
}

.nw3cHomeNavButton
{
    position: absolute;
    background-color: #4682b4;
    color: white;
    font-size: 1em;
    top: 242px;
    height: 22px;
    left: 0px;
    z-index: 100;
    padding-left: 10px;
    padding-right: 10px;
    width: 325px; /*  width was being inherited from parent DIV in IE (not Chrome)  */
}

.nw3cHomeComplaintButton
{
    position: absolute;
    background-color: #4682b4;
    color: white;
    font-size: 1em;
    top: 218px;
    height: 22px;
    left: 0px;
    z-index: 100;
    padding-left: 10px;
    padding-right: 10px;
    width: 325px; /*  width was being inherited from parent DIV in IE (not Chrome)  */
}

.nw3cHomePageCourseList
{
    position: absolute;
    background-color: #4682b4;
    color: white;
    font-size: 1em;
    top: 218px;
    left: 0px;
    z-index: 100;
    width: 400px;
}

.nw3cFormRowDiv
{
    width: 100%;
    padding: 2px;
    text-align: left;
    clear: both;
}

.nw3cFormRowEnd
{
    /* clear: both;  */
    margin-left: -10px;
    padding-left: -10px;
    display: none;
}

.nw3cFormLabelDiv
{
    width: 25%;
    text-align: right;
    float: left;
    padding-bottom: 0px;
    padding-top: 4px;
    padding-right: 5px;
}

.nw3cFormLabelText
{
    color: #4863A0;
    font-weight: 600;
}

.nw3cFormEntryDiv
{
    /* width: 100%; */
    text-align: left;
    padding-bottom: 2px;
    padding-top: 2px;
    float: left;
}

.nw3cFormDataDiv
{
    /* width: 100%; */
    text-align: left;
    padding-bottom: 0px;
    padding-top: 4px;
    float: left;
}

.nw3cFormEntryFullRow
{
    /* width: 100%; */
    text-align: left;
    padding-left: 10px;
    padding-right: 12px;
    padding-bottom: 2px;
    padding-top: 2px;
}

.nw3cValidation
{
    color: red;
    clear: both;
}

.nw3cValidationSummary
{
    color: red;
    font-weight: 600;
    background-color: white;
    border: red solid 1px;
    padding-left: 10px;
    margin: 0px 10px 10px 10px;
}

.nw3cValidationErrorImage
{
    padding-left: 10px;
    padding-top: 2px;
    width: 20px;
    height: 20px;
    text-align: center; /* clear: both; */
}

FieldSet.nw3cForm
{
    border-width: 1px;
    border-style: solid;
    border-color: #4863A0;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px; /*  added to override the "10pt" assigned by ".ajax__tab_xp .ajax__tab_body"  */
}

div.nw3cFormFieldSetLabel
{
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: -2px;
    color: #4863A0;
    font-size: 15px;
    font-weight: 700;
}


.innerFieldset
{
    border: thin solid #4863A0;
    margin-left: 5px;
    margin-right: 10px;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.innerLegend
{
    font-size: 1.125em;
    font-weight: 600;
    color: #2b547e;
    padding-left: 8px;
    padding-right: 4px;
}

.nw3cFormRowDiv2
{
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 2px;
    text-align: left;
    clear: both;
}

.nw3cFormLabelDiv2
{
    width: 80%;
    text-align: left;
    float: left;
    padding-top: 4px;
    padding-bottom: 6px;
    padding-left: 7px;
}

.nw3cFormEntryDiv2
{
    /* width: 100%; */
    text-align: left;
    padding-top: 6px;
    padding-bottom: 4px;
    float: left;
}


/*  Initial styling for the member Controls created by Brian  */
/*  
    Probably need to create some classes that can be used for "display" and "edit" modes 
    - ideally they would be the same as any classes used in the registration process
*/
.Table
{
    border-width: 1px;
    border-style: solid;
    border-color: #4863A0;
}

.TableHeader /*  nw3cFormTableLabel   */
{
    width: 25%;
    text-align: right;
    padding-bottom: 0px;
    padding-top: 4px;
    padding-right: 5px;
    color: #4863A0;
    font-weight: 600;
    border: 0px;
}

.TableData /*  nw3cFormTableEntry  */
{
    text-align: left;
    padding-bottom: 2px;
    padding-top: 2px;
    border: 0px;
}


/*  styling for the Stay Connected portion of the Contact Callout  */
.nw3cStayConnectedDiv
{
    text-align: center;
}


/*  Classes required for the Home Page "subNavigation" */
/*   
    Classes are being added (nw3cHidden) and removed on the DIV elements that are children of the referenced DIV element
    based on the FeatureList JavaScript. There is probably a better way to handle the selection of the DIV elements being
    used for displaying the different HomePage sub navigation elements (i.e. just include this class on each element). 
*/
div#nw3cHomeShowItems div {
  float: left; 
  position: absolute; 
  /* z-index: 10; */
  color: white; 
  top: 30px; 
  left: 50px; 
  width: 740px; 
  height: 285px; 
  /* border: white 1px solid; */
}

.nw3cShowItems 
{
    position: relative;
    font-size: 1.25em; 
    font-weight: 600; 
    width: 500px;
}

div.nw3cHomeNavTriangle
{
    width: 0px;
    height: 0px;
    font-size: 0px;
    float: right;
    margin-top: 32px;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
}

a.nw3cHomeNavLink
{
    float: right;
    clear: right;
    width: 150px;
    display: inline; /*  line-height: 6em; */
    line-height: 81px;
    font-size: 1.125em;
    font-weight: 500; /* bold; */
    font-variant: small-caps;
    border-bottom: transparent 1px solid;
    border-top: transparent 1px solid;
    background-color: transparent;
    padding-left: 10px;
}


a.nw3cHomeNavLink:hover
{
    border-bottom: #E9E9E9 1px solid;
    border-top: #E9E9E9 1px solid;
    background-color: #E9E9E9;
}

a.nw3cHomeNavLink:hover + div
{
    border-right-color: #E9E9E9;
}


a.nw3cHomeNavLink.current
{
    color: White;
    background-color: #2B547E;
}

div.nw3cHomeNavTriangle.current
{
    border-right: 10px solid #2B547E;
}

a.nw3cHomeNavLink.current:hover
{
    border-bottom: #2B547E 1px solid;
    border-top: #2B547E 1px solid;
    background-color: #2B547E;
}

a.nw3cHomeNavLink.current:hover + div
{
    border-right-color: #2B547E;
}


.nw3cEventTitle {
	color: #2B547E;
	font-size: 16px;
	font-weight: bold;
}

td.nw3cEventTimeColumn {
	width: 180px;
	text-align:left;
	vertical-align: top;
}


.nw3cNewsThumbnail 
{
    width: 100px;
}

.nw3cNewsPostListItem 
{
    padding-bottom: 25px !important;
}


/*  OVERRIDE  Sitefinity  class defaults  -  Should be done via Skin/theme ?  */

.sflistTitle
{
    color: #2B547E;
    display: None;
}

.sflistItemTitle
{
    color: #4863A0;
}



/*  New Navigation styling for Sitefinity 7 (and above) Horizontal Drop 

DIV container for UL element - Horiziontal   - sfNavWrp sfNavHorizontalDropDownWrp          [ RadMenu RadMenu_nw3cPublic ]
UL container for LI elements - Horizontal    - sfNavList sfNavHorizontalDropDown            [ rmRootGroup rmHorizontal ]
    role="menubar"                             k-widget k-reset-k-header k-menu k-menu-horizontal  
LI container for A elements  - Horizontal    -   <no "standard" classes>                    [ rmItem (rmFirst, rmLast) ] 
    role="menuitem"                            k-item k-state-default k-first
A container for text element - Horizontal ?  - sfSel                                        [ rmLink (rmFocused rmSelected) ] 
                                               k-link
   
 */

div.nw3cPublic
{
    margin-top: 4px;
    margin-bottom: 0px; /* 4px; */
    height: 35px;
    line-height: 35px; 
    background-color: transparent;
    background-image: url(../Images/MenuBackground.jpg);
}

.nw3cPublic .sfNavHorizontalDropDown
{
    line-height: 35px;
    height: 35px; 
    color: white !important;
    background-color: transparent !important;
    border-right: 1px solid white;
}

.sfNavHorizontalDropDown .k-item > a.k-link
{
    text-decoration: none;
    height: 35px; 
    line-height: 35px; 
    font-weight: bold; 
    background-color: transparent !important;  /* background-color: #2B547E !important; /* #25587E */
    color: white !important; 
}

/*  selected menu item  .sfSel */
.sfNavHorizontalDropDown > .k-item > a.k-link.sfSel, .sfNavHorizontalDropDown > .k-item > a.k-link.sfSel:hover, .sfNavHorizontalDropDown > .k-item > a.k-link:hover
{
    height: 35px;
    line-height: 35px;
	margin-top: -1px;
	padding-top: 1px;
    background-color : #3E648B  !important;  /*  #41627E !important;  */
}

/*  
   the following 2 selectors were added after putting site on wv-sftst server to make the background-color behave properly 
     the background of all the LI elements was the default grey and 
     the LI element containing the A:hover element was no the proper blue
*/
.sfNavHorizontalDropDown .k-popup {
	background-color: #2B547E;
}

.sfNavHorizontalDropDown .k-popup li.k-state-hover
{
	background-color: #3E648B;
}


.k-group > .k-item > a.k-link
{
    text-decoration: none;
    height: 35px; 
    line-height: 35px; 
    font-weight: bold; 
    background-color: #2B547E !important; /* #25587E */
    color: white !important; 
}

.k-group > .k-item > a.k-link.sfSel, .k-group > .k-item > a.k-link.sfSel:hover,  .k-group > .k-item > a:hover {
    height: 35px; 
    line-height: 35px; 
    margin-top: 0px;
    background-color : #3E648B  !important;  /*  #41627E !important;  */
}

div.nw3cPublic > ul.sfsfNavVertical > li 
{
    border: 0px none;
}


.sfNavVertical li {
	border: 0px none;
}

.sfNavVertical a {
    font-weight: bold; 
	color: #3e648B;
	padding-left: 4px;
	padding-right: 4px;
	white-space: nowrap;  /* text in the element will NOT wrap if it goes beyond the width of the element  */
}

.sfNavVertical a.sfSel {
    font-weight: bold; 
    background-color: #2B547E !important; /* #25587E */
    color: white !important; /*   BACKGROUND-CHANGE    */
}


/*group.k-popup.k-reset {
	overflow:visible;
} 
*/
*:first-child + html UL.k-group.k-popup.k-reset{
	overflow:visible !important;
}


/*  styles for the Slideshow  */
/*   source:  http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited   */
ul.slideshow
{
    list-style: none;
    width: 220px;
    height: 96px;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

ul.slideshow li
{
    position: absolute;
    left: 0;
    right: 0;
}

ul.slideshow li.show
{
    z-index: 500;
}

ul img
{
    border: none;
}

#slideshow-caption
{
    width: 220px;
    height: 96px;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    background: #000;
    z-index: 500;
}

#slideshow-caption .slideshow-caption-container
{
    padding: 5px 10px;
    z-index: 1000;
}

#slideshow-caption h3
{
    margin: 0;
    padding: 0;
    font-size: 14px;
}

#slideshow-caption p
{
    margin: 5px 0 0 0;
    padding: 0;
}