/* Last Updated: 8/23/2018 */
/* ************************************************************ */
/* General Setup                                                */
/* ************************************************************ */

/* Note that most of the settings in the General Setup section
   specify options that may have been previously stripped by 
   reset.css.

   This is to be expected as many default CSS settings are not 
   consistent across browsers. So if we reset all of them and then
   impose our own settings we get a more standard look from browser
   to browser.
 */

*
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html
{
    /* keep the page within a maximum bound
    */
    max-width: 2000px;
    margin: 0 auto;
}

body
{
    position: relative;
    /*line-height: 1;*/
    line-height: 1.25em;
    font-size: 1em;
    font-family: 'Source Sans Pro', Geneva, Arial, Helvetica, sans-serif; 
}

/* Note that reset.css takes this out, and this selector puts the bold back in 
    TBD We may want to consider optimizing our reset.css so that we are not
    overriding things in the reset just to get back to default behavior for
    most browsers.
*/
strong, b 
{
    font-weight: bold;
}

/* TBD Move this coloring to a site scheme file. */
a:link
{
    /*color:rgb(0,102,204);*/
    color: #039;
}

a:visited
{
}

a:hover
{
}

a:active
{
}

/* TBD This is not really necessary. The reset.css file takes care of this. */
a img 
{
	border: none;
}

/* TBD This overrides reset.css common margin. May want to optimize here to avoid */
ul, ol
{
    margin-left: 1em;
}

ul li 
{
    margin: 0.25em 0 0.75em 0.5em;
    list-style-image: url("/images/das2017/icons/bullet001-triangle-blue.png");
    line-height: 1.25em;
}

ol
{
    list-style-type: decimal;
}

ol li
{
    margin: 0.25em 0 0.75em .5em;
}

h2
{
    color: #003366;
    font-weight: 400;
    font-size: 1.4em;
    margin-top: 1em;
    margin-bottom: 0.25em;
}

h2 + p
{
    margin: 0.5em 0 1em;
}

h3
{    
    color: #003366;
    font-size: 1.1em;
    margin-top: 1em;
    margin-bottom: 0.25em;
}

p
{
    margin: 1.25em 0; 
}

em
{
    font-style: italic; 
}

@media (max-width: 768px)
{
    /* For smaller screen formats, enlarge the body font size a small bit.
        This should make the site more usable on cell phones and tablets.
    */
    body
    {
        font-size: 1.1em;
        /*line-height: 1.1em;*/
        line-height: 1.25em;
    }
}

/* ************************************************************ */
/* PAGE HEADER CLASSES                                          */
/* ************************************************************ */
/* TODO 7/2/2018 - cat - Need to review the z-index ordering across
    the board. This includes the whole page (except maybe the footer).
    We have the occasional occurence where the large NH site image
    overlays links (blocking them from clicking).

    There have been occurances where the image blocks the navigation
    sidebar (or navigation topbar in horizontal menu sites). Also
    in mobile modes we have had elements of the resource sidebar 
    become inaccessible. 

    Although many of these things have been fixed it would be nice
    to have them fixed permenantly for the future by designing a
    layering order that minimizes these issues.

    This is a suggested layout (with only limited thought behind it):

       L1 (z=0) All normal display elements.
       L2       Navigation, Content, and Resource Sidebar containers
                May need to fine tune which containers and to what extent
       L3       The large NH symbol
       L4       All links and containers which represent clickable area.

*/

#headerContainer
{
    z-index: 10;
    background: linear-gradient(to right, #4b6dd7, black);
}

#headerTopBar, #headerNavbar
{
    z-index: 100;
    position: relative;
    background-color: #003366;
    height: 24px;
    width: 100%;
    text-align: left;
}

/* TODO 7/2/2018 - cat - REMOVE - No longer in use.*/
#fontsizer
{
    z-index: 110;
    position: relative;
    height: 18px;
    position: absolute;
    top: 3px;
    left: 10px;
}

/* This positions the "official SoNH image" that appears in the top right of the page.

    See also the media query below which centers the image when the page
    is in cell phone sized mobile formats.
 */
#officialsite
{
    z-index: 110;
    position: absolute;
    top: 3px;
    right: 10px;
    background-repeat: no-repeat;
    background-position: right;
}

#homepageRightHeaderTitle
{
    z-index: 100;
    position: relative;
    margin: 12px auto auto 5%;
    min-height: 100px;
    font-size: 1.8em;
    line-height: 1.05;
    color: White;
    text-align: left;
}

#homepageRightHeaderTitle div, #homepageRightHeaderTitle h1
{
    font-size: 1.2em;
}

/* This is the "Welcome To" message in the homepage title 
    TBD This is a candidate for the color schemes CSS file.

    NHOCA uses the homepageRightHeaderTitle-x to avoid using 
    this selector so it should be uneffected if this moves.
*/
#homepageRightHeaderTitle > :first-child
{
    font-size: 1.75em;
    font-family: 'Great Vibes';
}

#homepageRightHeaderTitle > :not(:first-child)
{
    font-weight: 400;
}

#rightHeaderTitle
{
    z-index: 100;
    position: relative;
    margin: 12px auto 12px 5%;
    height: 75px;
    font-size: 1.5em;
    line-height: 1.05;
    color: White;
    text-align: left;
}

#rightHeaderTitle div, #rightHeaderTitle h1
{
    font-size: 1.2em;
}

#rightHeaderTitle > :first-child
{
    font-size: 1.25em;
    font-family: 'Great Vibes';
}

#rightHeaderTitle > :not(:first-child)
{
    font-weight: 400;
}

#headerImage
{
    z-index: 50;
}

#headerImage img
{
    height: 123px;
}

/* TBD The z-index for the DAS Public site is 40, and for 
    NHOCA was moved to 102. If I remember correctly this
    had something to do with moving from the standard
    navigation menu to the horizontal navbar.
    
    TODO should remap all of the page elements consistently.
      The commented out differences are caused by a remapping of
      the z-index for the horizontal layout in the NHOCA site.
*/
#headerContainer #leftHeaderImage 
{
    z-index: 40; /* DAS Public */
    /*z-index: 102;*/ /* NH OCA */
    position: absolute;
    left: 0;
    top: 0;
    height: 272px;
    width: 290px;
    background-image: url(/images/das2017/state-seal-13perc.png);
    background-repeat: no-repeat;
}

#searchMobile
{
    display: none;
}

@media (min-width: 500px)
{
    #headerImage
    {
        position: absolute;
        top: 24px;
        right: 0;
        z-index: 90;
    }
}


@media (max-width: 768px)
{
    #homepageRightHeaderTitle, #rightHeaderTitle
    {
        font-size: 1.4em;
    }

    /*
    #headerTopBar, #headerNavbar
    {
        background: #884400;
    }
    */
    
    #homepageRightHeaderTitle div, #homepageRightHeaderTitle h1,
    #rightHeaderTitle div, #rightHeaderTitle h1
    {
        font-size: 1.1em;
    }
}

@media (max-width:500px)
{
    #officialsite
    {
        background-position: center;
    }

    #headerImage
    {
        display: none;
    }
    
    #fontsizer
    {
        display: none;
    }
    
    /*
    #headerTopBar, #headerNavbar
    {
        background: #880033;
    }
    */
    
    #rightHeaderTitle
    {
        height: 120px;
        margin: 0.5em 0 0 0;
        text-align: center;
    }
    
    #homepageRightHeaderTitle
    {
        height: 120px;
        margin: 0.5em 0 0 0;
        text-align: center;
    }
}

/* ************************************************************ */
/* HEADER NAVBAR CLASSES                                        */
/* ************************************************************ */
.headerNavbar 
{
	background-color:#003366;/*rgb(0, 91, 46);*/
	clear:both;
	height:25px;
	left:0px;
	position:absolute;
	text-align:left;
    text-decoration:none;
	top: 115px; /*CAT 3/8/2017 reduce height of banner  top:150px; */
	width:100%;
	z-index: 50;
}

.headerNavbar a:hover
{
	background-color:#CCCCCC;
    text-decoration:none;
    color: #101060 !important;
}

.navbarMenu 
{
	background-color:transparent;
	color:white;
    display:inline-block;
	font-weight: normal;
    line-height:25px;
    padding-left:10px;
    padding-right:10px;
	text-decoration:none;
    position:relative;
    top:-5px;
    font-size: 0.9em;
}

/* 6/16 - cat - This is the Contact Us link. 
   TODO May want to rethink how we are doing this and the search box.  
        I believe there was a reason I didn't do float:right, but I forget why.
*/
.navbarMenuRight
{
    position: absolute;
    top: -1px; 
    right: 0;
}

#headerContainer #searchBox
{
    position: absolute;
    top: -1px; 
    right: 6em;
}

#headerContainer #searchBox :not(:last-child)
{
    margin-right: 0.25em;
}

.navbarMenu:link, 
.navbarMenu:visited, 
.navbarMenu:active
{
	color:white;
}

.navbarMenu:hover 
{
	text-decoration: underline;
}

/* //TODO CAT 4/18/2017 - this is used by the header navigation elements - consider making it part of the navbarMenu */
.verticalLine
{
    border-left:solid thin #AAAAAA; 
    display:inline-block; 
    height:19px; /* Adjust according to the space the line is in */
    margin-top:3px;
    width:1px;
}

/* @media (max-width: 968px) */
@media (max-width: 1100px)
{
}

@media (max-width: 768px)
{    
    #searchMobile
    {
        display: block;
    }
    
    /* we don't support the search box at this 
       resolution, use the search mobile link 
       to get to the search page directly 
     */
    #searchBox
    {        
        display: none;
    }

    #headerNavbarLinks
    {
        display: none;
    }
}

/* ************************************************************ */
/* Navigation Sidebar                                           */
/* ************************************************************ */
/* 20180608 - cat 
    This CSS takes car of the navigation sidebar for the DAS Public
    site. Other code would be used for the horizontal navigation bar.

    TBD Either move the navSidebar stuff out of here an into a navigation css 
    file or merge the two navigation sidebars in a way that they do not
    conflict.
*/
/* //BEGIN NS-cyx */
#navSidebar
{
    text-align: left;
    background: transparent;
    border-style: none;
}

#navSidebar #menuBar
{
    border: none;
    display: block;
    float: left;
    padding-top: 5px;
    text-align: left;
    vertical-align: text-top;
    width: 290px;
}

#navSidebar #menuBar a
{
    text-decoration: none;
    /* font-family: 'Source Sans Pro' , 'Arial Narrow'; */
    font-size: 0.9em;
    color: white;
}

#navSidebar #menuBar a:hover
{
    color: #5286AD;
    text-decoration: underline;
}

#navSidebar #menuBarDiv
{
    /*background-color:rgba(0, 91, 46, 0.85);*/ /*0,128,64*/ /* #023467;*/
    background-color: rgba(0, 51, 102, 1.00); /*(86, 115, 215, 0.85);*/ /*#5673D7;*/
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.3);
    padding: 15px 10px 15px 0;
    width: 275px;
}

#navSidebar #contentSection
{
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 40px;
    border: none;
    vertical-align: text-top;
    background: transparent;
}

#navSidebar #menuBar .subMenuItem
{
    padding-top: 3px;
    background-position: 35px center;
}

#navSidebar #menuBar .subMenuItem
{
    padding-top: 3px;
    background-position: 35px center;
}

/* //END NS-cyx */
/* //BEGIN BRD-cyx */
/* TBD 20180608 - cat 
    The navigation path (breadcrumb) positioning was adjusted between DAS Public
    and NHOCA. Either merge the two so that they do not conflict or move them to
    a seperate CSS file that can be included by the seperate projects.
*/

.navigationPath
{
    display: inline;
    padding-top: 1em;
}

.navigationPath > div
{
    margin: auto 310px auto 290px;
    position: relative;
    z-index: 50;
}

@media (max-width: 1100px)
{
    .navigationPath > div
    {
        margin: auto 0 auto 290px;
    }    
}

@media (max-width: 1100px)
{
    .navigationPath > div
    {
        margin: auto 0.5em;
    }    
}

/* //END BRD-cyx */

/* ************************************************************ */
/* Navigation Menu Checkbox                                     */
/* ************************************************************ */

/* //BEGIN NS-CB-cyx */
/* TBD 20180608 - cat
    The navigation sidebar checkbox implementation changed significantly
    between DAS Public and NHOCA. The NHOCA method should be implemented
    when time allows. For now consider moving this CSS to a separate CSS
    file so it can be included by the projects separately. 
*/

#navSidebarCheckbox, #navSidebarCheckbox+label
{
    display: none;
}

#navSidebarCheckbox+label
{
    margin: 0.25em;
}

@media (max-width: 768px)
{
    #navSidebar #menuBarDiv
    {
        padding: 15px 10px 15px 35px;
    }

    .navigationPath
    {
        margin-left: 0.5em;
    }

    #navSidebarCheckbox, #navSidebarCheckbox+label
    {
        display: block;
    }
    
    #navSidebarCheckbox
    {
        position: absolute;
        top: -9999px;
        left: -9999px;
        width: 0;
        height: 0;

        z-index: 60;
        
        float: left;
    }
    
    #navSidebar, #menuBarDiv, #mainMenu
    {
        float: none;
    }
    
    #navSidebar #menuBarDiv, #navSidebar #menuBar
    {
        float: none;
        width: 100%;
    }
    
    #navSidebar #menuBarDiv
    {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    #navSidebarCheckbox+label
    {
        position: relative;
        z-index: 60;
        float: left;

        background-image: url(/images/das2017/icons/40x40-ico-hamburger.png);
        height: 40px;
        width: 40px;
        
        margin-right: 1em;
        
        top: 5px;
    }
    
    #navSidebarCheckbox + label:hover
    {
        cursor: pointer;
    }
    
    input[type=checkbox]:checked#navSidebarCheckbox ~ #menuBar
    {
        display: block;
        position: relative;
        top: 0;
        left: 0;
    }
            
    input[type=checkbox]#navSidebarCheckbox ~ #menuBar
    {
        display: none;
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    #menuBar
    {
        -moz-animation-name: leftRightMenuSlide;
        -moz-animation-iteration-count: 1;
        -moz-animation-timing-function: ease-in;
        -moz-animation-duration: 0.5s;
        -webkit-animation-name: leftRightMenuSlide;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-duration: 0.5s;
        animation-name: leftRightMenuSlide;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: 0.5s;
    }

    @-moz-keyframes leftRightMenuSlide 
    {
        0% 
        {
            -moz-transform: translateX(-100%);
        }
        100% 
        {
            -moz-transform: translateX(0);
        }
    }
    
    @-webkit-keyframes leftRightMenuSlide 
    {
        0% 
        {
            -webkit-transform: translateX(-100%);
        }
        100% 
        {
            -webkit-transform: translateX(0);
        }
    }
    
    @keyframes leftRightMenuSlide 
    {
        0% 
        {
            transform: translateX(-100%);
        }
        100% 
        {
            transform: translateX(0);
        }
    }
}

/* //END NS-CB-cyx */

/* ************************************************************ */
/* Main Menu (inside the navigation menu control)               */
/* ************************************************************ */
.mainMenuItemFocused:hover, .mainMenuItemUnfocused:hover, .subMenuItem:hover
{
    background: #CCC;
}
        
.mainMenuItemFocused:hover a, .mainMenuItemUnfocused:hover a, .subMenuItem:hover a
.mainMenuItemFocused a:hover, .mainMenuItemUnfocused a:hover, .subMenuItem a:hover
{
    color: #101060 !important;
}

/* Hover on menu text */
.mainMenuItemFocused a:hover, .mainMenuItemUnfocused a:hover, .subMenuItem a:hover
{
/*	color:#5673D7 !important;*/
	text-decoration:none !important;
}	

.mainMenuItemFocused a, .mainMenuItemUnfocused a, .subMenuItem a
{
	display:block;
	width:100%;
    padding:4px;
}

/* This controls the appearance of the individual menu item divs that make up each
   line of the menu. Each of these divs also contain an anchor tag (a link) to the
   destination of the menu item.
*/
#mainMenu div
{
	background-repeat: no-repeat;
    border:none;
    margin:0px 10px 0px 0.5em;   /* Spacing for menu elements */
    z-index:60;                  /* This brings the menu item above the background seal.
                                   Do it here so that the seal can bleed through entirely
                                   and the topmost menu items can be selectable. */    
    position:relative;          /* Required for z-index */
}

#mainMenu .mainMenuItemFocused, #mainMenu .mainMenuItemUnfocused
{
	background-position: left center;
	background-image:none;
}

#mainMenu .mainMenuItemFocused
{
    /* background-color: rgba(0, 61, 122, 0.75); */
}

#mainMenu .subMenuItem
{
	background-position:15px center;
	padding-left:2em;
}

#mainMenu .mainMenuItemFocused a:link, #mainMenu .mainMenuItemFocused a:active
{
    color: #9CF;
}    

#mainMenu .mainMenuItemUnfocused, #mainMenu .mainMenuItemFocused, #mainMenu .subMenuItem
{
    /* font-family:'Source Sans Pro', 'Arial Narrow'; */
    font-weight:400;
}

@media (max-width: 768px)
{
    #mainMenu div
    {
        margin: 0 10px 0 20px;
    }
}

/* ************************************************************ */
/* Content Area Classes                                         */
/* ************************************************************ */

/* //BEGIN COLS-cyx */
/* 
    TBD 20180608 - cat

    The layout goes from three column (nav, content, resource sb) to two 
    (content, resource sb) between DAS Public and NHOCA. Consider methods
    of merging these two different paradigms with minimal changes between
    the CSS files.
*/
/* This is the three column version. */
#contentContainer
{
    /* the left/right margin are set to fit within the two sidebars */
    margin: auto 310px auto 290px;
    padding-top: 1em;
    text-align: left;            
}

/* @media (max-width: 968px) */
@media (max-width: 1100px)
{
    #contentContainer
    {
        margin: auto auto auto 290px;
    }
}

@media (max-width: 768px)
{
    #contentContainer
    {
        margin: auto 0.25em auto 0.25em;
        padding-top: inherit;
    }
}

/* //END COLS-cyx */

/* ************************************************************ */
/* Right Sidebar                                                */
/* ************************************************************ */
/* The resourceSidebar-x classes are used by NHOCA to declare their
    version of the sidebar. In NHOCA the page layout changed from 
    three column to two, as a result some of the requirements for
    the resource sidebar also changed.

    TBD 20180608 - cat
    For the moment an attempt has been made to move the code in so
    that it neither layout (2 col vs. 3 col) interacts with the 
    other. Consider methods of merging these changes so that both
    formats use the same resource sidebar.
*/


/* //BEGIN RSB-COL2-cyx */
#resourceSidebar-x
{
    max-width: 99%;
}

#resourceSidebar-x > .contentResourceBox-x
{
    display: inline-block;
    width: 100%;
    margin: 0.25em 0.5em 0.25em 0.25em;
}

#resourceSidebar-x > .contentResourceBox-x .background
{
    height: 100%;
}

/* //END RSB-COL2-cyx */
/* //BEGIN RSB-COL3-cyx */

/* Do not show underlines on anchors anywhere in the resource sidebar     
    ... except on hover
*/
/*#resourceSidebar a, 
#resourceSidebar-x a
{
    text-decoration: none;
}

#resourceSidebar a:hover,
#resourceSidebar-x a:hover
{
    text-decoration: underline;
}

#resourceSidebar a:active, 
#resourceSidebar-x a:active
{
    color: black;
}*/

#resourceSidebar
{
    text-align: left;
}

#resourceSidebar ul
{
    padding: 0 0 0 1em;
}

/* The homepage does not have the breadcrumb trail so this
    was added to prevent the resource sidebar from brushing against
    the page header.
*/
#resourceSidebar.homepage
{        
    margin-top: 1em;
}

/* @media (min-width: 968px) */
@media (min-width: 1100px)
{
    #resourceSidebar 
    {        
        float: right;
        padding-right: 0.25em;
    }

}

@media (max-width: 1100px)
{
    #resourceSidebar
    {
        padding: 1em 0 1em 0;
        margin: 0 1em 0 290px;
    }
    
    #resourceSidebar > *
    {
        display: inline-block;
        position: relative;
        vertical-align: top;        
        width: 47%;
        margin: 0 1.25% 1em;
        height: 100%;
        min-height: 8em;
    }
}

@media (max-width: 768px)
{
    #resourceSidebar
    {
        margin: auto 0.5em;
    }
    
    #resourceSidebar > *
    {
        margin: 0.75em 0.75em 0;
        display: block;
        width: auto;
        min-height: 0;
        float: none;
    }
}

/* //END RSB-COL2-cyx */

/* ************************************************************ */
/* Footer Classes                                               */
/* ************************************************************ */

/* The html, body, form, and content tweaks are here to support
   the sticky footer.
 */
#content:after
{
    height: auto;
}

html, body, form, #searchPage
{
	height: 100%;
	display: table;
	width: 100%;
}

form > *, #searchPage > *
{
    height: 0;
	display: table-row;
}

/* these types should not be displayed under any circumstances */
form > style, form > script,
#searchPage > style, #searchPage > script
{
    display: none;
}

#content
{
	height: auto;
	position: relative;

	margin-bottom: 0; /* beat STD.css */
	min-height: 0;    /* beat STD.css */
}
       
#footer
{
	height: 1px;
}

#footer #footerContainer a
{
    color: white;
}

#footer #footerContainer 
{
    color: white;
    background-color: #003366;
    height: auto;
    text-align: left;
}

#footer #footerContainer #footerLeftElement
{
    background-image: url(/images/das2017/iconseal.gif);
    background-repeat: no-repeat;
    background-position: 5px 5px;
    min-height: 35px;
    padding: 11px 0 0 35px;
}

#footer #footerContainer #footerRightElement
{
    padding: 0 0 1em 35px;
}

#footer a
{
    text-decoration: none;
}

#returnToTop
{
    margin: auto 1em 0.5em auto; 
    text-align: right;
}

#addresscontainer
{
    border-top: solid 2px #003366;
    margin: 1em auto;
    text-align: center;
    padding-top: 1em;
}

@media screen and (min-width: 768px)
{
    #addresscontainer
    {
        margin: 1em auto 1em 290px;
    }

    #footer #footerContainer #footerLeftElement
    {
        display: inline-block;
    }
    
    #footer #footerContainer #footerRightElement
    {
	    padding: 11px 1em 0 0;
        float: right;
    }
}

@media (min-width: 1100px)
{
    #addresscontainer
    {
        margin: 1em 310px 1em 290px;
    }
}

/* ************************************************************ */
/* Notifications / Messages                                     */
/*                                                              */
/* Notifications are important messages that will typically     */
/* be posted only for a specific period of time.                */
/*                                                              */
/* Messages are similar but may be posted with the intent that  */
/* they will not be removed.                                    */
/*                                                              */
/* ************************************************************ */

.notification-panel, .message-panel
{
    border-radius:8px;
    box-shadow:3px 3px 8px rgba(0,0,0,0.3);
    left:0px;
    top:0px;
    padding:5px 10px 5px 10px;
    position:relative;
    z-index:1;
}

.notification-panel
{
    padding: 5px 10px 5px 10px;
    margin: 1em 0.5em;
}

.message-panel
{
    background: white;
    width: 80%;

    padding: 5px 10px 5px 10px;
    margin: 2em auto;
}

/* TODO - consider making centered just a standard 
   modifier class that can be applied to anything */
.message-panel.centered
{
    text-align: center;
}

.notification-caption, .message-caption
{
    margin-bottom:10px;
    font-weight:bold;
}

.notification-type-alert
{
    background-color:rgb(169,14,21);
    border:solid thin rgb(116,10,15);
    color:white;
}

.notification-type-warning
{
    background-color:rgb(243,236,199);
    border:solid thin #CCCCCC;
    color:black;
}

.notification-type-notice
{
    background-color:white;
    border:solid thin #CCCCCC;
    color:black;
}


/* ************************************************************ */
/*     Skip Link classes                                        */
/* ************************************************************ */
/* Reference: http://webaim.org/techniques/skipnav/
     Used the blog to get an overview and debugger to see how 
     they implemented their version.
 */
#skip-link a
{
    padding: 6px;
    position: absolute;
    top: -40px;
    left: 0px;
    color: white;
    background: #003366;
    border: 1px solid white;
    z-index: 400;
}

#skip-link a:focus
{
    position: absolute;
    left: 2px;
    top: 2px;
}

/* ************************************************************ */
/* Column Handling                                              */
/* ************************************************************ */
.row
{
    
}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12
{
    position: relative;
    min-height: 1px;
    padding-right: 0.5em;
    padding-left: 0.5em;
}

/* anything over 768px is multi-columned as defined by the col-sm-* class, but 
   when the window drops below the columns become 100% of the width and 
   wrap one on top of another.

   Refer to bootstrap behavior for intended behavior.
        http://getbootstrap.com/examples/grid/

   Interesting note - latest WIP for bootstrap is using flex instead of
   float.
 */
@media (min-width: 768px)
{
    .row
    {
        /* do nothing, for now */
    }
    
    /* Adding this seemed like a good idea as it would allow rows with uneven rows
       to sit cleanly one on top of another. In practice it causes a problem
       in that the clear:both for the first row causes the second row to drop below
       the height of the navigation menu.
     */
    /*
    .row:after
    {
        clear: both;
        display: table;
        line-height: 0;
        content: "";
    }
    */

    /* The normal behavior of a row is to float left on the page.
       If you have less than 12 columns defined on a row the 
       appearance may be unappealing. Add the class 'center' to the 
       row to force the row to center on the page.

       This selector will remove the float from the col-sm-* elements
       and set them to display inline-block so that they line up
       side-by-side. Test carefully when using to ensure that no side
       effects appear.

          Example:
            <div class="row center">
                <div class="col-sm-4">
                </div>
                <div class="col-sm-4">
                </div>
                <!-- only 8 columns used, instead of the full 12 -->
            </div>

    */
    .row.center [class^="col-sm-"]
    {
        float: none; /* override the float */
        display: inline-block;
    }

        
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12
    {
        float: left;
        padding-right: 0;
        padding-left: 0;
    }
    
    .col-sm-1
    {
        width: 8.3333333333%;
    }
    
    .col-sm-2
    {
        width: 16.666666666%;
    }
    
    .col-sm-3
    {
        width: 25%;               
    }

    .col-sm-4
    {
        width: 33.33333333333%;               
    }

    .col-sm-5
    {
        width: 41.6666666666%;
    }

    .col-sm-6
    {
        width: 50%;
    }

    .col-sm-7
    {
        width: 58.3333333333%;
    }
    
    .col-sm-8
    {
        width: 66.6666666667%;
    }
    
    .col-sm-9
    {
        width: 75.0000000000%;
    }
    
    .col-sm-10
    {
        width: 83.3333333333%;
    }
    
    .col-sm-11
    {
        width: 91.6666666667%;
    }
    
    .col-sm-12
    {
        width: 100%;               
    }

    .col-sm-pull-12
    {
        right: 100%;
    }
    .col-sm-pull-11
    {
        right: 91.6666666667%;
    }
    .col-sm-pull-10
    {
        right: 83.3333333333%;
    }
    .col-sm-pull-9
    {
        right: 75%;
    }
    .col-sm-pull-8
    {
        right: 66.6666666667%;
    }
    .col-sm-pull-7
    {
        right: 58.3333333333%;
    }
    .col-sm-pull-6
    {
        right: 50%;
    }
    .col-sm-pull-5
    {
        right: 41.6666666666%;
    }
    .col-sm-pull-4
    {
        right: 33.33333333333%;
    }
    .col-sm-pull-3
    {
        right: 25%;
    }
    .col-sm-pull-2
    {
        right: 16.666666666%;
    }
    .col-sm-pull-1
    {
        right: 8.3333333333%;
    }
    .col-sm-pull-0
    {
        right: auto;
    }

    .col-sm-push-12
    {
        left: 100%;
    }
    .col-sm-push-11
    {
        left: 91.6666666667%;
    }
    .col-sm-push-10
    {
        left: 83.3333333333%;
    }
    .col-sm-push-9
    {
        left: 75%;
    }
    .col-sm-push-8
    {
        left: 66.6666666667%;
    }
    .col-sm-push-7
    {
        left: 58.3333333333%;
    }
    .col-sm-push-6
    {
        left: 50%;
    }
    .col-sm-push-5
    {
        left: 41.6666666666%;
    }
    .col-sm-push-4
    {
        left: 33.33333333333%;
    }
    .col-sm-push-3
    {
        left: 25%;
    }
    .col-sm-push-2
    {
        left: 16.666666666%;
    }
    .col-sm-push-1
    {
        left: 8.3333333333%;
    }
    .col-sm-push-0
    {
        left: auto;
    }
}

/* Visible/Hidden classes
    Provide the ability to hide or show elements at various viewport sizes.
 */

.hidden-xs
{
    display: none !important;
}

.visible-xs
{
    display: block !important;
}

.hidden-sm
{
    display: block !important;
}

.visible-sm
{
    display: none !important;
}

.hidden-lg
{
    display: block !important;
}

.visible-lg
{
    display: none !important;
}

@media (min-width: 1100px)
{
    .hidden-lg
    {
        display: none !important;
    }

    .visible-lg
    {
        display: block !important;
    }
}

/*@media (min-width: 768px) and (max-width: 991px)*/
@media (min-width: 768px) and (max-width: 1100px)
{
    .hidden-sm
    {
	    display: none !important;
    }

    .visible-sm
    {
        display: block !important;
    }
}


@media (min-width: 768px)
{
    .hidden-xs
    {
        display: block !important;
    }

    .visible-xs
    {
        display: none !important;
    }
}