/**
* The Ottawa Hospital
*
* 2010 Redesign of the public Web site.
*
* @project 		TOH REDESIGN
* @version 		1.0
* @author 		Mike Badgley, High Road Communications
* @copyright	2010
*/



/**
* Reset
*
* Global reset of all X/HTML elements. This section MUST appear at the top!
*
* @author 	Eric Meyer, meyerweb.com
* @version	1.0 | 20080212
* @see 		http://meyerweb.com/eric/tools/css/reset/
* @section 	reset
*/
@media all {

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    body {
        line-height: 1;
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }

    a:active {
        outline: 0;
    }

    ins {
        text-decoration: none;
    }

    del {
        text-decoration: line-through;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
}



/**
* Core Layout
*
* Basic styling for most X/HTML elements to give a general layout that is
* usable and shared across all devices and browsing platforms.
*
* @section	core
*/
html {
    font-size: 100.01%;
}

body {
    background-color: /*#f3f3f3*/ white;
    color: #444;
    /*font: normal 12px/18px Arial, Helvetica, sans-serif;*/
    font-family: roboto, sans-serif !important;
    font-size: 0.92rem !important;
}

a {
    color: #224f8b;
    text-decoration: underline;
}

    a:hover,
    a:active,
    a:focus {
        text-decoration: none;
    }

address, p, hr {
    margin: 18px 0;
}

address {
    font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
    margin: 18px 0;
}

h1 {
    color: #000;
    font: bold 2.00em/1 Arial, Helvetica, sans-serif;
    margin: 11px auto 0;
}

h2 {
    color: #265787;
    /*font: bold 1.50em/1 Arial, Helvetica, sans-serif;*/
    margin-top: 0;
    font-size: 1.5rem;
    font-family: montserrat,sans-serif;
    font-weight: 400;
    line-height: 1.11;
}

h3 {
    border-bottom: solid 1px #f4f3f3;
    color: #867363;
    font: bold 1.25em/1 Arial, Helvetica, sans-serif;
    margin: 0 0 -9px 0;
    overflow: hidden;
    padding-bottom: 2px;
}

h4 {
    color: #224f8b;
    font: bold 1.09em/1 Arial, Helvetica, sans-serif;
    margin: 18px 0 9px 0;
}

    h4 + p, h4 + ol, h4 + ol {
        margin-top: 0;
    }

img {
    max-width: 100%;
    -ms-interpolation-mode: bicubic;
}
    /**
	* @subsection Image Alignment (Left or Right)
	*/
    img.alignleft,
    img.alignright {
        background-color: #f3f3f3;
        float: left;
        margin: 3px 18px 9px 0;
        padding: 5px;
    }

    img.alignright {
        float: right;
        margin: 3px 0 9px 18px;
    }

blockquote, dl, ol, ul {
    margin: 18px 0 18px 36px;
}

    blockquote *, dl *, ol *, ul * {
        margin: 0;
    }

ol {
    list-style-type: decimal;
}

ul {
    list-style-type: square;
}

    ul.highlight {
        background-color: #efefef;
        margin: 18px 16px;
        padding: 14px 24px 14px 38px;
    }

    ol li,
    ul li {
        margin-bottom: 9px;
    }

    ul.vanilla {
        list-style-type: none;
        margin-left: 11px;
    }

        ul.vanilla li {
            margin-bottom: 0;
        }

sub, sup {
    font-size: 10px;
    line-height: 1;
}

sub {
    vertical-align: bottom;
}

sup {
    vertical-align: top;
}

form {
}

input.text,
input[type="text"] {
}

textarea {
    overflow: auto;
    position: relative;
}

    textarea:focus {
        border: 1px solid #ccc;
    }

/**
* @subsection Table: Simple Grid
* @notes Simple layout with a horizontal keyline seperating each row.
*/
table.grid.simple {
    width: 100%;
}

    table.grid.simple tbody td,
    table.grid.simple tbody th {
        border-bottom: solid 1px #f4f3f3;
        border-top: solid 1px #f4f3f3;
        padding: 8px 12px 8px 1px;
        vertical-align: top;
    }

    table.grid.simple strong {
        color: #897767;
    }

@media print {

    h1 {
        margin: 18px 0;
    }
}



/**
* Page Layout
*
* Define major sections of the template - header, column(s) and footer.
*
* @section	layout
*/
@media screen {

    /**
	* @subsection Page layout
	*/
    .layout {
        display: block;
        margin: 0 auto;
        position: relative;
        width: 940px;
    }


    /**
	* @subsection Header
	*/
    .header {
        /*background: #406aa3 url(../_images/layout_u_header_151w_112h.png) repeat-x 0 0;*/
        background-color: white;
        font-size: 12px;
        height: auto !important;
        height: 112px;
        line-height: 18px;
        min-height: 112px;
        position: relative;
        width: 100%;
    }

        .header .layout {
            overflow: hidden;
            padding-top: 1px;
        }

    /**
		* @subsection Web Site Name
		* @notes For SEO purposes only. Should be wrapped within an <h1>
		* element for the home page only - <span> or <p> thereafter.
		*/
    .seo {
        left: -50000px;
        margin: 0;
        position: absolute;
    }


    /**
		* @subsection Corporate Logo
		* @notes Typically only displayed on the print/mobile version unless
		* it is being applied to white background.
		*/
    .logo {
        background: transparent no-repeat;
        height: 70px;
        left: 27px;
        position: absolute;
        top: 18px;
        width: 452px;
    }

        .logo img {
            display: none;
        }


    /**
		* @subsection Search
		*/
    .search {
        min-width: 311px;
        position: absolute;
        top: 29px;
        right: 4px;
        text-align: right;
        width: auto !important;
        width: 311px;
    }

    .keywords {
        background: #fff no-repeat;
        display: inline-block;
        *display: inline;
        height: 18px;
        margin-right: 4px;
        *margin-right: 6px;
        overflow: hidden;
        padding: 2px 11px;
        position: relative;
        vertical-align: top;
        width: 221px;
        zoom: 1;
    }

        .keywords input {
            border: 0;
            color: #676767;
            font: normal 11px/normal Arial, Helvetica, sans-serif;
            outline: 0;
            padding: 0;
            width: 221px;
        }



    /**
	* @subsection Content
	* @notes Contains the (page) title, breadcrumb navigation and tools (Display
	* Options, Share This).
	*/
    .subheader {
        /*background: #f3f3f3 url(../_images/layout_u_subheader_21w_51h.gif) repeat-x 0 100%;*/
        background-color: #ECECEC;
        border-bottom: solid 1px #bfbfbf;
        position: relative;
        z-index: 30;
        padding-top: 1px !important;
    }

    /**
		* @subsection Homepage Subheader
		* @notes The homepage has a compressed subheader region - no breadcrumb
		* or page title is visible.
		*/
    .homepage .subheader {
        /*background: transparent;*/
        background-color: #ECECEC;
        border-bottom: 0;
        height: 31px;
    }


    /**
		* @subsection Page Title
		*/
    .subheader h1 {
        width: 920px;
        color: #3f4242;
    }

    .homepage .subheader h1 {
        display: none;
    }


    /**
		* @subsection Breadcrumb Navigation
		*/
    .breadcrumb {
        border-top: solid 1px #d9d8d8;
        padding: 8px 0 2px;
    }

    .homepage .breadcrumb {
        border-top: 0;
        padding: 0;
    }

    .breadcrumb .navigation {
        color: black;
        font-size: 0.91em;
        margin: 0 12px -3px;
    }

    .homepage .breadcrumb .navigation {
        display: none;
    }

    .js .breadcrumb .navigation {
        margin-right: 250px;
    }

    .breadcrumb .navigation li {
        margin-right: 9px;
    }

    .breadcrumb .navigation a {
        color: black;
        margin-right: 9px;
        line-height: 20px;
    }

    /**
				* @subsection Current / Selected Item
				*/
    .breadcrumb .navigation .current {
        background-color: white;
        border: solid 1px #bebebe;
        border-bottom: 0;
        padding: 0 4px;
        border-top-left-radius: 3px;
        -moz-border-radius-topleft: 3px;
        -webkit-border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        -moz-border-radius-topright: 3px;
        -webkit-border-top-right-radius: 3px;
    }

        .breadcrumb .navigation .current a {
            margin-right: 0;
            text-decoration: none;
        }


    /**
		* @subsection Page Tools
		*/
    .pagetools {
        bottom: 4px;
        *bottom: 0;
        position: absolute;
        right: 9px;
    }

    .homepage .pagetools {
        top: 10px;
    }

    .pagetools ul {
        list-style-type: none;
        margin: 0;
    }

    .pagetools li {
        background-image: none;
        display: inline;
        float: right;
        margin: 0;
        padding: 0;
    }

    .pagetools a.bg,
    .pagetools a.addthis_button {
        cursor: pointer;
        height: 21px;
    }

    .pagetools .displayoptions a.bg {
        background-position: 0 -115px;
        width: 132px;
    }

    .pagetools .sharethis a.addthis_button {
        display: block;
        width: 100px;
    }

    .pagetools li .dropdown {
        background-color: #fff;
        border: solid 3px #666;
        font-size: 12px;
        margin-left: -34px;
        padding: 10px 10px 15px;
        visibility: hidden;
        width: 248px;
    }

    .pagetools .dropdown li {
        color: #666;
        display: block;
        float: none;
        height: auto !important;
        height: 26px;
        line-height: 26px;
        margin: 5px 0;
        min-height: 26px;
        padding-left: 44px;
    }

    .pagetools .dropdown .hdr {
        font: bold 16px/1 Arial, Helvetica, sans-serif;
        margin-bottom: 10px;
        min-height: 0;
        padding-left: 0;
    }

    .pagetools .dropdown .fontsize {
        background: transparent url(../_images/icon_u_textsize_26w_13h.gif) no-repeat 6px 50%;
    }

    .pagetools .dropdown .contrast {
        background: transparent url(../_images/icon_u_contrast_26w_26h.gif) no-repeat 6px 50%;
    }

    .pagetools .dropdown .print {
        background: transparent url(../_images/icon_u_printer_20w_20h.gif) no-repeat 10px 50%;
    }

    .pagetools .dropdown a {
        border-bottom: 0;
        font-size: 100%;
        text-decoration: none;
    }

        .pagetools .dropdown a:focus,
        .pagetools .dropdown a:hover {
            text-decoration: underline;
        }



    /**
	* @subsection Content
	*/
    .content {
        /*background: #fff url(../_images/layout_u_content_10w_206h.gif) repeat-x 0 0;*/
        background-color: white;
        display: block;
        float: left;
        padding: 14px 0 50px;
        position: relative;
        width: 100%;
    }

    .homepage .content {
        background-image: none;
    }

    .column {
        display: inline;
        float: left;
        left: 100%;
        position: relative;
    }


    /**
		* @subsection Three Column Layout
		*/
    .three-column {
    }

        .three-column .middleCol {
            background-color: #fff;
            margin-left: -760px;
            padding: 10px 12px 1px;
            width: 499px;
        }

    .landingpage .three-column .middleCol {
        padding: 0;
        width: 523px;
    }

    .three-column .rightCol {
        margin-left: -222px;
        width: 222px;
    }

    .three-column .leftCol {
        margin-left: -934px;
        width: 145px;
    }


    /**
		* @subsection Two Column Layout (Left)
		*/
    .two-column-left {
    }

        .two-column-left .middleCol {
            background-color: #fff;
            margin-left: -760px;
            padding: 10px 12px 1px;
            width: 736px;
        }

        .two-column-left .leftCol {
            margin-left: -934px;
            width: 145px;
        }


    /**
		* @subsection Two Column Layout (Right)
		*/
    .two-column-right {
    }

        .two-column-right .middleCol {
            margin-left: -940px;
            width: 700px;
        }

        .two-column-right .rightCol {
            margin-left: -222px;
            width: 222px;
        }


    /**
		* @subsection One Column Layout
		*/
    .one-column {
    }

        .one-column .middleCol {
            margin-left: -100%;
            background-color: #fff;
            padding: 10px 12px 1px;
            width: 100%;
        }



    /**
	* @subsection Footer
	*/
    .footer {
        background-color: #d1e8ff;
        border-top: 1px solid #1d4662;
        clear: left;
        padding-bottom: 10px;
        /*padding-top: 12px;*/
        position: relative;
        width: 100%;
    }

    /**
		* @subsection Social Networks for TOH
		*/

    .social {
        overflow: hidden;
        position: relative;
        float: left; /*padding-top: 10px;*/
        padding: 10px 10px 7px;
        background-color: #fff;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-bottomleft: 10px;
        -moz-border-radius-bottomright: 10px;
    }

        .social .navigation {
            list-style-type: none;
            padding-left: 0;
        }

        .social.svg a {
            background-image: url('../_images/sprite_e_wrapper3.svg');
            background-size: 620px 25px;
        }

        .social a {
            background-image: url('../_images/sprite_e_wrapper3.svg');
            background-size: 620px 25px;
        }

        /**
			* @subsection Youtube, Facebook and Twitter sites for TOH
			*/
        .social li {
            color: #494949;
            font-size: 17px;
            font-weight: bold;
            line-height: 23px;
            margin: 0 6px 0 0;
            float: left;
        }

            .social li a {
                text-indent: -5000px;
                display: inline-block;
            }

        .social a.youtube {
            background-position: 0px 0px;
            width: 72px;
        }

            .social a.youtube:focus,
            .social a.youtube:hover {
                background-position: -308px 0px;
            }

        .social a.facebook {
            background-position: -72px 0px;
            width: 83px;
        }

            .social a.facebook:focus,
            .social a.facebook:hover {
                background-position: -378.5px 0px;
            }

        .social a.twitter {
            background-position: -155px 0px;
            width: 76px;
        }

            .social a.twitter:focus,
            .social a.twitter:hover {
                background-position: -461px 0px;
            }

        .social a.instagram {
            background-position: -235px 0px;
            width: 76px;
        }

            .social a.instagram:focus,
            .social a.instagram:hover {
                background-position: -541px 0px;
            }

    /**
			* @subsection Links for Sharing and Donating
			*/
    .takeaction {
        background-color: white;
        padding: 7px 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border: 1px solid #ddd;
        border-top: 0px;
        /*position: absolute;
        right: 0;
        top: -10px;*/
        _white-space: nowrap;
        _width: 100px;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -moz-border-radius-bottomleft: 10px;
        -moz-border-radius-bottomright: 10px;
    }

        .takeaction ul li {
            float: none;
        }

        .takeaction a {
            color: #002776;
            display: inline-block;
            *display: inline;
            font-size: 12px;
            font-weight: 600;
            line-height: normal;
            padding: 8px 14px;
            text-decoration: none;
            /*text-transform: uppercase;*/
            zoom: 1;
        }

        .takeaction li:first-child a {
            border-right: dotted 1px #878787;
        }

        .takeaction a:focus,
        .takeaction a:hover {
            color: #6c6c6c;
        }

    /**
			* @subsection Copyright and Privacy-related Information
			*/
    .copyright {
        /*background: transparent url(../_images/layout_u_dottedlines_20w_4h.gif) repeat-x 0 0;*/
        /*color: #9d9283;*/
        font-size: 0.91rem;
        line-height: normal;
        margin-top: 14px;
        padding-top: 1px;
    }

        .copyright a {
            color: #4d4944;
            text-decoration: none;
        }

        .copyright p {
            margin-top: 13px;
        }



    /**
	* @section Miscellaneous
	* @subsection Skip over navigation
	*/
    #skipper {
        position: absolute;
        text-indent: -9999px;
    }


    /**
    * @section Miscellaneous
	* @subsection Graphical headers
	* @note This is a nearly-retired item as Cufon is now the solution for an
	* text replacement that is required.
	*/
    .bg {
        background-color: transparent;
        background-position: left top;
        background-repeat: no-repeat;
        display: block;
        overflow: hidden;
        text-decoration: none;
        text-indent: -5000px;
    }


    /**
	* @section Cufon
	* @subsection Hide all elements being replaced by Cufon to avoid FOUT.
	*/
    .cufon-loading .webtabs a,
    .cufon-loading .primary a,
    .cufon-loading .subheader h1,
    .cufon-loading .banner h1,
    .cufon-loading .social li,
    .cufon-loading .takeaction a {
        visibility: hidden !important;
    }


    /**
	* @section Miscellaneous
	* @subsection Float "clearfix"
	*/
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        line-height: 0;
        visibility: hidden;
    }

    .clearfix {
        display: inline-block;
    }
    /* Hide from IE Mac \*/
    .clearfix {
        display: block;
    }
    /* End hide from IE Mac */

}

@media print {

    #skipper,
    .seo,
    .search,
    .pagetools,
    .leftCol,
    .rightCol,
    .social {
        display: none !important;
    }
}



/**
* Navigation
*
* Styling for the primary, secondary, etc. navigation is found within this
* section.
*
* @section	navigation
*/
@media screen {

    /**
	* @section Global Navigation
	*/
    .navigation {
        _height: 1%;
        list-style-type: none;
        margin: 0;
        overflow: hidden;
        _overflow: visible;
        position: relative;
    }

        .navigation li {
            background-image: none;
            display: inline;
            float: left;
            margin: 0;
            padding: 0;
            position: static;
        }


    /**
		* @subsection Web Site Tabs
		* @notes Tabs at the top of the page that direct the user to other
		* web sites in addition to this one.
		*/
    .webtabs {
        font-size: 0.80rem;
        font-weight: bold;
        line-height: 18px;
        margin-bottom: -1px;
        position: relative;
        text-align: right;
        z-index: 10;
    }

        .webtabs li {
            float: none;
        }

        .webtabs a {
            background-color: #fdb933;
            color: black;
            display: inline-block;
            *display: inline;
            margin: 3px 0 1px;
            padding: 0 9px;
            text-decoration: none;
            /*text-transform: uppercase;*/
            zoom: 1;
        }

        .webtabs li:nth-child(2) a {
            border-top-left-radius: 2px;
            -moz-border-radius-topleft: 2px;
            -webkit-border-top-left-radius: 2px;
        }

        .webtabs li:nth-child(3) a {
            border-top-right-radius: 2px;
            -moz-border-radius-topright: 2px;
            -webkit-border-top-right-radius: 2px;
        }

        /**
				* @subsection Current/Selected Tab
				*/
        .webtabs a:hover,
        .webtabs a:focus,
        .webtabs a.current {
            background-color: #1d466d;
            /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#204475), to(#274c7f));
            background-image: -moz-linear-gradient(top left -90deg, #204475, #274c7f);*/
            border-top: solid 2px #406aa3;
            color: white;
            margin: 0 0 -1px;
            padding: 1px 9px;
            border-radius: 0 !important;
            -webkit-border-radius: 0 !important;
            -moz-border-radius: 0 !important;
        }


    /**
		* @subsection Toolbar
		*/
    .toolbar {
        background-color: #1d466d;
        display: inline;
        float: right;
        margin: 67px 0 16px 0;
        padding: 5px 0 6px 15px;
        text-align: right;
        border-radius: 6px;
        -o-border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
    }

        .toolbar li {
            float: none;
            margin-right: 15px;
        }

        .toolbar a {
            color: #fff;
            text-decoration: none;
        }

            .toolbar a:hover,
            .toolbar a:focus {
                text-decoration: underline;
            }


    /**
		* @subsection Primary
		*/
    .primary {
        background-color: /*#224f8b*/ #265787;
        position: relative;
        z-index: 40;
    }

        .primary .navigation {
            overflow: visible;
        }

        .primary li {
            border-left: solid 1px #25497b;
        }

            .primary li.link6 {
                border-right: solid 1px #437ece;
            }

        .primary a {
            border-left: solid 1px #437ece;
            color: #fff;
            display: block;
            font: bold 14px/normal Arial, Helvetica, sans-serif;
            overflow: hidden;
            padding: 14px 24px;
            text-align: center;
            text-decoration: none;
        }

        .primary .link6 a {
            border-right: solid 1px #25497b;
        }

        .primary .link1 a {
            width: 80px;
        }

        .primary .link2 a {
            width: 105px;
        }

        .primary .link3 a {
            width: 135px;
        }

        .primary .link4 a {
            width: 104px;
        }

        .primary .link5 a {
            width: 113px;
        }

        .primary .link6 a {
            width: 100px;
        }

        .primary .link7 a {
            width: 133px;
        }

        /**.primary .link1 a { width: 77px; }
					.primary .link2 a { width: 76px; }
					.primary .link3 a { width: 78px; }
					.primary .link4 a { width: 84px; }
					.primary .link5 a { width: 63px; }
					.primary .link6 a { width: 85px; }
					.primary .link7 a { width: 117px; }
					*/

        /**
			* @subsection Rollover / Selected State
			*/
        .primary a.current,
        .primary li:hover a,
        .primary a:focus,
        .primary a:hover {
            background-color: #f3f3f3;
            color: #224f8b;
            margin-right: -1px;
            padding-right: 25px;
            position: relative;
        }


    /**
		* @subsection Dropdown
		*/
    .dropdown {
        background: #f3f3f3;
        border: solid 1px #437ece;
        border-top: 0;
        list-style-type: none;
        left: auto;
        margin: 0;
        padding: 1px 10px 1px 10px;
        position: absolute;
        visibility: hidden;
        width: 200px;
    }

    li:focus .dropdown,
    li:hover .dropdown {
        visibility: visible !important;
    }

    .dropdown li {
        background-image: none;
        border: 0;
        float: none;
        display: inline;
        padding: 0;
    }

    .dropdown a {
        border-bottom: solid 1px #ccc;
        border-left: 0;
        border-right: 0 !important;
        color: #224f8b;
        font-size: 12px;
        font-weight: normal;
        margin: 0 !important;
        position: static !important;
        padding: 10px 5px !important;
        text-align: left;
        width: auto !important;
    }

        .dropdown a:focus,
        .dropdown a:hover {
            text-decoration: underline;
        }

    .primary .navigation ul a.last {
        border-bottom: 0;
    }


    /**
		* @subsection Secondary
		*/
    .secondary {
        border-top: dotted 1px #878787;
        font-size: 1.09em;
    }

        .secondary li {
            float: none;
        }

        .secondary a {
            border-bottom: dotted 1px #878787;
            color: #224f8b;
            display: block;
            font-weight: bold;
            font-size: 0.85rem !important;
            padding: 8px 1px 8px 10px;
            text-decoration: none;
            zoom: 1;
        }

            .secondary a.current,
            .secondary a:focus,
            .secondary a:hover {
                background-color: #f3f1ef;
                color: #897767;
            }


    /**
		* @subsection Breadcrumb
		* @notes See subsection Subheader for the definition of this navigation.
		*/
    .breadcrumb {
    }
}

@media print {

    .navigation {
        display: none;
    }
}



/**
* Home Billboard
*
* Billboard rotator that is used specifically for the home page. Spans the
* entire width of the wrapper and rotates through a series of graphical
* billboards.
*
* @section	banners
*/
@media screen {

    .billboard {
        background: transparent url(../_images/layout_u_billboard_1280w_302h.jpg) no-repeat 50% 0;
        border-bottom: solid 1px #c1c1c1;
        height: 302px;
        margin-top: -31px;
        overflow: hidden;
        position: relative;
        z-index: 20;
    }

        /**
		* @subsection Billboard Pane
		* @notes Each billboard is wrapped with this element. Each pane is
		* assigned a unique background image who's file name should remain
		* unchanged in the event it needs updating.
		*/
        .billboard .pane {
            background: transparent no-repeat 0 0;
            display: none;
            height: 148px; /* 302 */
            left: 0;
            padding: 154px 330px 0 38px;
            position: absolute;
            top: 0;
            width: 329px; /* 697 */
        }

    .js .pane1 {
        display: block;
    }

    .billboard .pane h2 {
        left: 38px;
        position: absolute;
        top: 65px;
        max-width: 300px;
        font-size: 1.3rem;
    }

    .billboard .pane p {
        color: #010101;
        font-size: 14px;
        line-height: 15px;
        margin-top: 0;
    }

    .billboard .pane .more {
    }


    /**
		* @subsection Tabs
		* @notes Tab through the available billboards.
		*/
    .billboard .navigation {
        height: 21px;
        left: 292px;
        position: absolute;
        top: 277px;
        width: 360px;
    }

        .billboard .navigation a {
            background: transparent url(../_images/layout_u_billboardtabs_46w_21h.png) no-repeat -23px 0;
            height: 21px;
            width: 23px;
        }

            .billboard .navigation a.current,
            .billboard .navigation a:focus,
            .billboard .navigation a:hover {
                background-position: 0 0;
            }

            .billboard .navigation a.last {
                width: 22px;
            }

    /**
		* @subsection Current Issue
		* @notes Small feature that sits right-aligned to the rotating
		* billboards.
		*/
    .billboard .current-issue {
        /**	background-color: #fff;
		*/
        left: 697px;
        padding: 10px 5px;
        position: absolute;
        top: 58px;
        width: 230px;
    }

    .current-issue h3 {
        border-bottom: 0;
        color: #224f8b;
        font: bold 18px/1 Arial, Helvetica, sans-serif;
        margin: 0 0 10px 0;
        overflow: visible;
        padding: 0;
    }

    .current-issue .photo {
        display: block;
        margin-bottom: 14px;
    }

    .current-issue .more {
        background: transparent url(../_images/icon_u_bluearrow_15w_14h.gif) no-repeat 100% 50%;
        display: inline-block;
        *display: inline;
        font-size: 13px;
        font-weight: bold;
        padding-right: 19px;
        text-decoration: none;
        text-transform: uppercase;
        zoom: 1;
    }

        .current-issue .more:focus,
        .current-issue .more:hover {
            text-decoration: underline;
        }
}



/**
* Banners / Rotator
*
* Graphic-based banner features that are typically found on landing pages and
* may or may not rotate through a series of x panes (also controlled via a
* tabbed interface).
*
* @section	banners
*/
@media screen {

    .banner {
        border-top: solid 3px #000;
        margin-bottom: 23px;
    }

        /**
		* @subsection Banner Pane
		* @notes Each banner is wrapped with this element.
		*/
        .banner .pane {
            background-color: #3570bf;
            color: #fff;
            font-size: 1.18em;
            height: auto !important;
            height: 225px;
            min-height: 225px;
            padding: 1px 25px 1px 200px;
            position: relative;
        }

            .banner .pane * {
                position: relative;
                z-index: 2;
            }

        /**
			* @subsection Photo (Left-aligned)
			*/
        .banner .photo {
            left: 0;
            position: absolute;
            top: 0;
            z-index: 1;
        }

        /**
			* @subsection Main Heading
			*/
        .banner h2 {
            color: #fff;
            font-size: 22px;
            line-height: 1;
            margin-top: 18px;
        }

        /**
			* @subsection More Information Links
			*/
        .banner .moreinfo {
            font-size: 0.91em;
            font-weight: bold;
            list-style-type: none;
            margin-left: 0;
        }

            .banner .moreinfo li {
                display: inline;
                text-transform: uppercase;
            }

            .banner .moreinfo a {
                background: url(../_images/icon_u_whitearrow_15w_14h.gif) no-repeat 100% 50%;
                color: #fff;
                display: block;
                margin-bottom: 9px;
                text-decoration: none;
                width: 12em;
            }

                .banner .moreinfo a:focus,
                .banner .moreinfo a:hover {
                    text-decoration: underline;
                }


        /**
		* @subsection Tabbed Navigation
		* @notes Defaults to 5 tabs. Appropriate 'helper' classes (i.e. tabs-4,
		* tabs-3, etc) are added dynamically via JavaScript.
		*/
        .banner .navigation {
            background: transparent url(../_images/layout_u_rotatortabs_940w_100h.gif) no-repeat -2px 0;
            border-bottom: solid 1px #e5e5e5;
            overflow: visible;
            padding: 0 7px 4px;
            z-index: 10;
        }

            .banner .navigation li {
                margin-left: 1%;
                overflow: hidden;
                padding-top: 6px;
                width: 19%;
            }

        .banner .navigation-4 li {
            width: 24%;
        }

        .banner .navigation li.first {
            _left: 0 !important;
            margin-left: 0;
            width: 20%;
        }

        .banner .navigation-4 li.first {
            width: 25%;
        }

        .banner .navigation a {
            background: transparent url(../_images/layout_u_rotatortabnormal_940w_42h.gif) no-repeat 100% 100%;
            color: #66492f;
            display: block;
            font: bold 12px/15px Arial, Helvetica, sans-serif;
            padding-right: 4px;
            text-decoration: none;
        }

        .banner .navigation span {
            background: transparent url(../_images/layout_u_rotatortabnormal_940w_42h.gif) no-repeat 0 100%;
            cursor: pointer;
            display: block;
            height: 32px; /* 42 */
            padding: 6px 0 4px 4px;
            text-align: center;
        }

        .banner .navigation b {
            display: block;
        }

        /**
			* @subsection Rollover / Selected States
			*/
        .banner .navigation .current,
        .banner .navigation li:focus,
        .banner .navigation li:hover {
            /*background: transparent url(../_images/layout_u_rotatortabarrow_940w_21h.png) no-repeat 50% 0;*/
            background-color: white;
            margin-top: -13px;
            _left: 1%;
            padding-top: 19px;
            position: relative;
        }

            .banner .navigation .current a,
            .banner .navigation li:focus a,
            .banner .navigation li:hover a,
            .banner .navigation .current span,
            .banner .navigation li:focus span,
            .banner .navigation li:hover span {
                background-image: url(../_images/layout_u_rotatortabcurrent_940w_42h.gif);
                color: #3570bf;
            }
}

@media print {

    .banner .pane {
        display: block !important;
    }
}



/**
* Home Tabbed Content
*
* Although the tabbed content interface is used extensively throughout the site,
* the version used on the Home page is considerably different, and as such has
* it's own style declaration.
*
* @section	home-tabs
*/
@media screen {

    .tabinterface {
    }

        /**
		* @subsection Tabs
		* @notes Defaults to two tabs.
		*/
        .tabinterface .navigation {
            background: transparent url(../_images/layout_u_rotatortabs_940w_100h.gif) no-repeat -2px 0;
            border-top: solid 1px #e5e5e5;
            margin-bottom: 10px;
            overflow: visible;
            padding: 0 7px 6px;
            z-index: 10;
        }

            .tabinterface .navigation li {
                margin-left: 1%;
                overflow: hidden;
                padding-top: 4px;
                width: 49%;
            }

                .tabinterface .navigation li.first {
                    _left: 0 !important;
                    margin-left: 0;
                    width: 50%;
                }

            .tabinterface .navigation a {
                background: transparent url(../_images/layout_u_tabinterfacenormal_940w_42h.gif) no-repeat 100% 100%;
                color: #224f8b;
                display: block;
                font: bold 16px/1.2 Arial, Helvetica, sans-serif;
                padding-right: 7px;
                text-decoration: none;
            }

            .tabinterface .navigation span {
                background: transparent url(../_images/layout_u_tabinterfacenormal_940w_42h.gif) no-repeat 0 100%;
                cursor: pointer;
                display: block;
                height: 28px; /* 42 */
                padding: 10px 0 4px 7px;
                text-align: center;
            }

                .tabinterface .navigation span b {
                    display: block;
                }

            /**
			* @subsection Rollover / Selected States
			*/
            .tabinterface .navigation .current,
            .tabinterface .navigation li:hover {
                background: transparent url(../_images/layout_u_tabinterfacearrow_940w_21h.png) no-repeat 50% 100%;
                _left: 1%;
                margin-top: 0;
                margin-bottom: -19px;
                padding-bottom: 19px;
                padding-top: 4px;
                position: relative;
            }

                .tabinterface .navigation .current a,
                .tabinterface .navigation li:hover a,
                .tabinterface .navigation .current span,
                .tabinterface .navigation li:hover span {
                    background-image: url(../_images/layout_u_tabinterfacecurrent_940w_42h.gif);
                    color: #66492f;
                }
}



/**
* Graphical Quick Link Lists
*
* A series of 'quick links' that are styled in a three-column layout. Each
* column is assigned a custom (foreground) image.
*
* @section	feature-quicklinks
*/
@media screen {

    .quicklinks {
        display: inline;
        float: left;
        width: 30.999%;
        position: relative;
    }

        .quicklinks.links2 {
            left: 3.499%;
        }

        .quicklinks.links3 {
            float: right;
        }

        .quicklinks h3 {
            border-bottom: 0;
            color: #66492f;
            font-size: 1.18em;
            height: 1.51em;
            margin: 18px 0 18px 9px;
            overflow: visible;
            padding: 0;
        }

    .homepage .quicklinks h3 {
        font-size: 1.2rem;
    }

    .quicklinks .photo {
        bottom: 0;
        position: absolute;
        right: 0;
    }

    .quicklinks ul {
        background: #f7f7f7 no-repeat 100% 100%;
        border-bottom: dotted 1px #878787;
        display: table;
        *display: block;
        font-size: 0.91em;
        list-style-type: none;
        margin: 0;
        position: relative;
        width: 100%;
    }

    .homepage .quicklinks ul {
        font-size: 0.85rem
    }

    #tab-patients .links1 ul {
        background-image: url(../_images/layout_u_femalepatient_129w_123h.jpg);
    }

    #tab-patients .links2 ul {
        background-image: url(../_images/layout_u_femalenurse_96w_129h.jpg);
    }

    #tab-patients .links3 ul {
        background-image: url(../_images/photo_u_familyshot_97w_128h.jpg);
    }

    #tab-healthcare .links1 ul {
        background-image: url(../_images/layout_u_examinexray_109w_116h.jpg);
    }

    #tab-healthcare .links2 ul {
        background-image: url(../_images/layout_u_femaledoctor_78w_123h.jpg);
    }

    #tab-healthcare .links3 ul {
        background-image: url(../_images/layout_u_resourcefiles_79w_125h.jpg);
    }

    .quicklinks li {
        background: transparent url(../_images/icon_u_brownarrow_15w_14h.png) no-repeat 97% 50%;
        _background-image: none;
        display: table-row;
        *display: list-item;
        margin: 0;
        position: relative;
        zoom: 1;
    }

        .quicklinks li:hover {
            background-image: url(../_images/icon_u_bluearrow_15w_14h.png);
        }

    .quicklinks a {
        border-top: dotted 1px #878787;
        display: table-cell;
        *display: block;
        font-size: 1.09em;
        font-weight: bold;
        height: 4.65em;
        *height: auto;
        text-decoration: none;
        vertical-align: middle;
        padding: 0px 20px 0px 0px;
    }

        .quicklinks a:focus,
        .quicklinks a:hover {
            text-decoration: underline;
        }

    .quicklinks span {
        display: block;
        padding: 10px 23px 10px 9px;
    }
}



/**
* Features
*
* Content features (small widgets) that appear throughout the site. The
* following are global-based rules that are applied to all features. Also
* includes definitions for each type of feature layout available (i.e. rounded
* corners, background color, etc.).
*
* @section	feature
*/
@media screen {

    .feature {
        margin-bottom: 18px;
    }

        .feature a {
            text-decoration: none;
        }

            .feature a:focus,
            .feature a:hover {
                text-decoration: underline;
            }

        .feature address,
        .feature h4,
        .feature p {
            margin: 9px 0;
        }

        .feature .box > p {
            margin-top: 0;
        }


        .feature.alignright {
            display: inline;
            float: right;
            margin: 0 0 9px 18px;
        }

    /**
		* @subsection Rounded
		* @notes Rounded corner box that contains a header (white text on dark
		* brown background) and body content that is on a light brown background
		* and will typically have a custom image (background) assigned to it.
		*/
    .rounded {
        background: #efefef no-repeat 100% 100%;
        color: #4a4f56;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
    }

        /* Main heading. */
        .rounded h3 {
            background-color: #897767;
            border-bottom: solid 2px #d7d5d5;
            color: #fff;
            font: bold 1.18em/normal Arial, Helvetica, sans-serif;
            margin: 0;
            overflow: visible;
            padding: 12px 8px 9px;
            zoom: 1;
        }

        .rounded h3,
        .callout h3 {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            -webkit-border-radius-top-left: 8px;
            -webkit-border-radius-top-right: 8px;
            -moz-border-radius-topleft: 8px;
            -moz-border-radius-topright: 8px;
        }

        /* Body/content area. */
        .rounded .box,
        .callout .box {
            padding: 14px 6px 1px;
        }
        /* Sub-heading. */
        .rounded h4 {
            color: #000;
            font: bold 1.18em/1 Arial, Helvetica, sans-serif;
            margin-top: 0;
        }


    /**
		* @subsection Callout
		* @notes This feature has a rounded corner header and a plain
		* (transparent) background.
		*/
    .callout {
        background: no-repeat 100% 100%;
        color: #4b4b4b;
    }

        .rightCol .callout,
        .callout.alignright {
            background-color: #efefef;
        }

        .callout.alignright {
            width: 222px;
        }


        /* Main heading. */
        .callout h3 {
            background-color: #f3f1ef;
            border-bottom: dotted 1px #9b8373;
            color: #867363;
            font: bold 1.18em/normal Arial, Helvetica, sans-serif;
            margin: 0;
            overflow: visible;
            padding: 12px 5px 9px;
            zoom: 1;
        }

        .rightCol .callout h3,
        .callout.alignright h3 {
            background-color: transparent;
            border-bottom: solid 1px #fff;
        }

        .callout h4 {
            color: #696969;
            font-size: 1.18em;
        }

        /* Generic form fields. */
        .callout select {
            color: #4b4b4b;
            font: normal 1em/1 Arial, Helvetica, sans-serif;
            padding: 2px;
            width: 99%;
        }

    /* Read more link. */
    .feature .more {
        background: transparent url(../_images/icon_u_bluearrow_5w_8h.gif) no-repeat 0 50%;
        padding-left: 9px;
    }


    /**
		* @subsection Buttons
		* @notes Simple text link that has a rounded corner button look.
		*/
    .button {
        background-color: #efefef;
        font-size: 1.18em;
        font-weight: bold;
        margin: 0 0 7px 0;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }

        .button a {
            color: #224f8b;
            display: block;
            padding: 10px;
            text-decoration: none;
        }

            .button a span {
                display: block;
                font-size: 0.91em;
                font-weight: normal;
            }

        .button:focus,
        .button:hover {
            background-color: #224f8b;
        }

            .button:focus a,
            .button:hover a {
                color: #fff;
            }


        /**
			* @subsection RSS
			*/
        .button.rss {
            margin-bottom: 18px;
        }

            .button.rss a {
                background: transparent url(../_images/icon_u_rss_15w_15h.png) no-repeat 8px 50%;
                font-size: 0.82em;
                font-weight: normal;
                padding: 4px 8px 4px 33px;
                text-decoration: none;
            }
}



/**
* Feature: Side-by-Side Features
*
* Display two featues side-by-side. This element should wrap the two features
* you wish to show side-by-side.
*
* @section	feature-sidebyside
*/
@media screen {

    .sidebyside {
        border-bottom: solid 1px #e1ddd9;
        _height: 1%;
        overflow: hidden;
        _overflow: visible;
        padding-bottom: 1px;
        position: relative;
    }

        .sidebyside .feature {
            float: right;
            margin-bottom: 0;
            width: 47.999%;
        }

            .sidebyside .feature:first-child {
                float: left;
            }

        .sidebyside #ftr-search,
        .sidebyside #ftr-subopt {
            _float: left;
        }
}



/**
* Feature: Directions & Maps
*
* A series of links (with icons) for important hospital-related information
* (i.e. directions, parking and accessibility). There are two versions of this
* feature - the primary one that sits within the sidebar (right-hand) and the
* other 'giant' version that sits within the content (body) area.
*
* @section	feature-directions
*/
@media screen {

    .directions {
        margin-bottom: 0;
        *margin-bottom: 18px;
    }

        .directions li {
            line-height: normal;
            margin-bottom: 18px;
            text-align: center;
            width: 33%;
        }

        .directions a:hover {
            text-decoration: underline;
        }

        .directions a {
            display: block;
            height: 2.90em;
            margin: 0 auto;
            padding-bottom: 40px;
            position: relative;
            text-decoration: none;
        }

        .directions img {
            bottom: 0;
            display: block;
            left: 50%;
            margin-left: -20px;
            position: absolute;
        }

    .middleCol .directions {
        background-color: #efefef;
    }

        .middleCol .directions ul {
            list-style-type: none;
            margin: 0;
            overflow: hidden;
            position: relative;
            _height: 1%;
            _overflow: visible;
        }

        .middleCol .directions li {
            border-right: solid 1px #fff;
            float: left;
            font-size: 1.18em;
            font-weight: bold;
            margin-bottom: 0;
            padding: 205px 0 50px;
            position: relative;
        }

            .middleCol .directions li.last {
                border-right: 0;
            }

        .middleCol .directions a {
            height: auto;
            padding-bottom: 0;
            position: static;
        }

        .middleCol .directions img {
            bottom: auto;
            margin-left: -61.5px;
            top: 67px;
        }
}



/**
* Feature: Emergency Wait Times
*
* Displays the current waiting times at the two campuses at TOH. A simplified
* version is also available (campuslist) which just display a list of the
* campuses with an accompanying thumbnail.
*
* @section	feature-emergency
*/
@media screen {

    .emergency {
        background-color: #efefef;
        width: 100%;
    }

        .emergency tr,
        .emergency th,
        .emergency td {
            vertical-align: middle;
        }

        .emergency thead th {
            border-bottom: solid 1px #fff;
            color: #224f8b;
            font-size: 1em;
            font-weight: bold;
            line-height: 1.1;
            padding: 10px 7px;
            text-align: left;
        }

            .emergency thead th span {
                display: block;
                font-size: 1.18em;
            }

        .emergency tbody th {
            color: #6e6e6e;
            line-height: 1;
            font-size: 1.09em;
            padding-left: 5px;
            text-align: left;
        }

        .emergency .civic th {
            background: transparent url(../_images/icon_u_civiccampus_43w_18h.gif) no-repeat 7px 50%;
        }

        .emergency .general th {
            background: transparent url(../_images/icon_u_generalcampus_43w_18h.gif) no-repeat 7px 50%;
        }

        .emergency .time {
            color: #000;
            font: bold 26px/1 Arial, Helvetica, sans-serif;
            padding: 10px 0 20px 0;
            text-align: center;
        }

            .emergency .time .hr,
            .emergency .time .min {
                background-color: #d8e6f9;
                border: solid 1px #9d9d9d;
                display: block;
                padding: 3px 3px;
                position: relative;
                width: 27px;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
            }

            .emergency .time .min {
                margin-right: 15px;
            }

            .emergency .time.sep {
                padding: 4px;
            }

            .emergency .time .lbl {
                color: #636363;
                bottom: -12px;
                font-size: 10px;
                left: 0;
                padding: 0;
                position: absolute;
                text-align: center;
                width: 35px;
            }

        .emergency .lastupdated {
            font-size: 0.91em;
            line-height: normal;
            padding: 10px 7px 5px 7px;
        }

    .campuslist {
        color: #000;
        width: 100%;
    }

        .campuslist td {
            padding: 10px 3px 10px 2px;
            vertical-align: top;
        }

        .campuslist a {
            text-decoration: underline;
        }

            .campuslist a:focus, .campuslist a:hover {
                text-decoration: none;
            }
}



/**
* Feature: Search Departments, Programs, Clinics, & Services
*/
@media screen {

    #ftr-search {
        background-image: url(../_images/feature_u_searchservices_60w_122h.jpg);
        height: 20em;
    }

        #ftr-search .box {
            padding-right: 60px;
        }

        /**
		* @subsection Search
		*/
        #ftr-search form {
            margin: 0 -60px 18px 0;
            white-space: nowrap;
        }
}



/**
* Feature: Physician Directory
*/
@media screen {

    #ftr-physdir form {
        white-space: nowrap;
    }

    #ftr-physdir input {
        vertical-align: top;
    }

    #ftr-physdir .row {
        margin: 9px 0;
    }
}



/**
* Feature: Success Stories
*/
@media screen {

    #ftr-success {
        background-image: url(../_images/feature_u_successstories_58w_128h.jpg);
        height: 20em;
    }

        #ftr-success .box {
            padding-right: 58px;
        }

        #ftr-success h3 {
            padding-top: 19px;
            padding-bottom: 18px;
        }
}



/**
* Feature: Quality & Safety / Cancer Care Stories
*/
@media screen {

    #ftr-quality {
        background-image: url(../_images/feature_u_qualityandsafety_126w_101h.jpg);
    }

        #ftr-quality p {
            margin-right: 65px;
        }
}



/**
* Feature: List of (Success) Stories
*
* Lists the title and teaser of the most recent (success) story for each
* available category (i.e. Volunteer, Patient, etc.).
*
* @section	feature-storylist
*/
@media screen {

    .storylist {
        color: #474747;
    }

        .storylist ul,
        .storylist dl {
            list-style-type: none;
            margin-left: 0;
        }

        .storylist li a:first-child,
        .storylist dd a:first-child {
            text-decoration: underline;
        }

            .storylist li a:first-child:focus,
            .storylist li a:first-child:hover,
            .storylist dd a:first-child:focus,
            .storylist dd a:first-child:hover {
                text-decoration: none;
            }

        .storylist dt {
            clear: left;
            color: #9c9c9c;
            float: left;
            font-weight: bold;
            width: 65px;
        }

        .storylist dd {
            margin: 0 0 9px 85px;
        }

        /**
		* @subsection Footer
		* @notes Contains a link to view all stories / news items, regardless of
		* what category they are associated with.
		*/
        .storylist .viewall {
            background: transparent url(../_images/layout_u_softdottedlines_20w_4h.gif) repeat 0 0;
            border-top: solid 1px #e5e5e5;
            padding: 5px 8px;
            _zoom: 1;
        }
}



/**
* Feature: Stories and/or News Items by Topic
*
* A tag cloud for the various stories and/or news items on TOH.
*
* @section	feature-tagcloud
*/
@media screen {

    .tagcloud ul {
        margin: 0 40px;
        list-style-type: none;
        text-align: center;
    }

    .tagcloud li {
        display: inline;
    }

    .tagcloud a {
        font-weight: bold;
        line-height: normal;
        margin: 0 5px;
        white-space: nowrap;
    }
}



/**
* Feature: Twitter Widget
*
* Plugin (from Twitter.com) to display the latest tweets for TOH.
*
* @section	feature-twitter
*/
@media screen {

    .twitter .twtr-widget {
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .twitter .box {
        padding-top: 1px;
    }

    .twitter .twtr-widget h3 {
        border-bottom: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }
}



/**
* Feature: Context Search
*
* A context-based search field. Uses global rules for 'graphical form fields'
* that are defined previously in this document.
*
* @section	feature-contextsearch
*/
@media screen {

    .contextsearch {
        background-color: #efefef;
        _height: 1%;
        overflow: hidden;
        _overflow: visible;
        padding: 10px 12px;
    }

        .contextsearch label {
            color: #7c6551;
            font-size: 14px;
            font-weight: bold;
            line-height: 1;
            vertical-align: middle;
        }

        .contextsearch .submit {
            vertical-align: middle;
        }

        .contextsearch .col1 {
            float: left;
            width: 47%;
        }

        .contextsearch .col2 {
            float: right;
            width: 47%;
        }

        .contextsearch .col1 .textfield {
        }

        .contextsearch .col1 select,
        .contextsearch .col2 select {
            color: #676767;
            font: normal 11px/normal Arial, Helvetica, sans-serif;
            padding: 2px;
            width: 98%;
        }
}

@media print {

    .contextsearch {
        display: none !important;
    }
}



/**
* Feature: Basic Tabular Inteface
*
* Convert any number of content 'panes' into a tabular (navigation) interface.
*
* @section	feature-tabular
*/
@media screen {

    .tabular {
        border-top: solid 1px #efefef;
        clear: both;
    }
        /**
		* @subsection Define the tab layout.
		* @notes A table needs to be used to ensure a consistent cross-browser
		* layout while preserving the fluid-nature of these items.
		*/
        .tabular table.tabs {
            background: transparent url(../_images/layout_u_softdottedlines_20w_4h.gif) repeat 0 0;
            border-collapse: separate;
            *border-collapse: collapse;
            margin: 1px 0 0;
            overflow: visible;
            padding-top: 1px;
            width: 100%;
        }

            .tabular table.tabs td {
                border-bottom: solid 1px #66492f;
                padding: 9px 15px 8px;
                text-align: center;
                vertical-align: middle;
            }

                .tabular table.tabs td.current {
                    background-color: #fff;
                    border: solid 1px #66492f;
                    border-bottom: none;
                    padding: 8px 14px 9px;
                    -moz-border-radius-topleft: 8px;
                    -moz-border-radius-topright: 8px;
                    -webkit-border-top-left-radius: 8px;
                    -webkit-border-top-right-radius: 8px;
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;
                }

            .tabular table.tabs a {
                color: #224f8b;
                font-size: 1.18em;
                font-weight: bold;
            }

                .tabular table.tabs .current a,
                .tabular table.tabs a:focus,
                .tabular table.tabs a:hover {
                    color: #66492f;
                    position: relative;
                    text-decoration: none;
                }


        /**
		* @subsection Content Panes
		* @notes Each tab points to a specific content pane element.
		*/
        .tabular .pane {
            margin: 18px 0 18px 6px;
        }

    .js .tabular .pane {
        display: none;
    }
}

@media print {

    .tabular table.tabs {
        display: none !important;
    }
}



/**
* Feature: Alpha Index (Navigation)
*
* An alpha/numeric-based index for browsing through an extensive list of items.
*
* @section	feature-alphaindex
*/
@media screen {

    .alphaindex {
        list-style-type: none;
        margin-left: 0;
    }

    .grid tfoot .alphaindex {
        text-align: right;
    }

    .alphaindex li {
        display: inline-block;
        *display: inline;
        zoom: 1;
    }

    .alphaindex a {
        background-color: #eaeaea;
        display: block;
        font-weight: bold;
        *margin-right: 4px;
        padding: 0 3px;
        *padding: 0 2px;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
    }

        .alphaindex a.current {
            background-color: #3f68a1;
            color: #fff;
            text-decoration: none;
        }

    .alphaindex img {
        max-width: none;
    }

    .alphaindex .prev {
        border-right: dotted 1px #878787;
        margin-right: 3px;
        *margin-right: 7px;
        padding-right: 7px;
    }

    .alphaindex .next {
        border-left: dotted 1px #878787;
        margin-left: 3px;
        *margin-left: 7px;
        padding-left: 7px;
    }
}

@media print {

    .alphaindex {
        display: none !important;
    }
}



/**
* Feature: Form Elements
*
* Basic form element layout.
*
* @section	feature-forms
*/
@media screen {

    .feature form {
        margin: 0 17px 18px 0;
    }

    .feature .row {
        margin: 18px 0;
    }

        .feature .row label {
            display: block;
        }

        /* Default form fields. */
        .feature .row .text,
        .feature .row select,
        .feature .row textarea {
            vertical-align: middle;
        }

        .feature .row .text,
        .feature .row select,
        .feature .row textarea {
            color: #676767;
            font: normal 1em/normal Arial, Helvetica, sans-serif;
            margin-top: 2px;
            padding: 4px 0;
            width: 100%;
        }

        .feature .row select {
            padding: 2px;
        }

    /* Graphical text fields. */
    .textfield {
        background: transparent url(../_images/layout_u_textfield_1000w_22h.png) no-repeat 0 -22px;
        display: inline-block;
        *display: inline;
        height: 22px;
        padding-left: 11px;
        vertical-align: top;
        zoom: 1;
    }

        .textfield .textfield {
            background-position: 100% 0;
            height: 18px;
            margin: 0 !important;
            overflow: hidden;
            padding: 2px 11px 2px 0;
        }

        .textfield input {
            border: 0;
            color: #676767;
            font: normal 11px/18px Arial, Helvetica, sans-serif;
            height: 18px;
            outline: 0;
            padding: 0;
            vertical-align: top !important;
        }

    .feature form .submit input {
        vertical-align: middle;
    }
}



/**
* Feature: Specialty Programs
*
* A list of specialty programs that are divided by a keyline.
*
* @section	feature-specprog
*/
@media screen {

    #ftr-specprog {
    }

        #ftr-specprog ul {
            list-style-type: none;
            margin: -10px -6px 0;
        }

        #ftr-specprog li {
            border-bottom: solid 1px #fff;
            margin: 0;
        }

            #ftr-specprog li.last {
                border-bottom: none;
            }

        #ftr-specprog a {
            display: block;
            padding: 7px 12px;
        }
}



/**
* Feature: Related Information
*
* Right-aligned feature box that contains related infomation to the content
* it is in context with.
*
* @section	feature-relatedinfo
*/
@media screen {

    .relatedinfo {
        display: inline;
        float: right;
        margin: 0 0 18px 18px;
        width: 322px;
    }

        .relatedinfo ul {
            list-style-type: none;
            margin-left: 0;
        }

        .relatedinfo li {
            background: transparent url(../_images/icon_u_bluearrow_5w_8h.gif) no-repeat 0 50%;
            margin: 0;
            padding-left: 9px;
            position: relative;
        }
}



/**
* Feature: Resources
*
* Similar functionality as "Related Information" but has a slightly different
* layout.
*
* @section	feature-resources
*/
@media screen {

    .resources {
        background-color: #efefef;
        padding: 16px 16px 1px;
        width: 190px;
    }

        .resources h3 {
            border-bottom: 0;
            color: #575555;
            font-size: 100%;
            overflow: hidden;
            padding: 0;
        }

        .resources ul {
            color: #897767;
            margin-left: 18px;
        }

            .resources ul li {
                margin-bottom: 0;
            }
}



/**
* Feature: Resources
*
* Similar functionality as "Related Information" but has a slightly different
* layout.
*
* @section	feature-resources
*/
@media screen {

    #ftr-teltty {
    }

        #ftr-teltty .icon {
            background: transparent no-repeat 3px 50%;
            color: #406aa3;
            font-size: 18px;
            font-weight: bold;
            line-height: 1.1;
            margin: 1px 0 10px;
            padding: 8px 0 8px 42px;
        }

        #ftr-teltty .tel {
            background-image: url(../_images/icon_u_telephone_34w_34h.gif);
        }

        #ftr-teltty .tty {
            background-image: url(../_images/icon_u_tty_33w_32h.gif);
        }

        #ftr-teltty .icon span {
            color: #464646;
            display: block;
            font-size: 72%;
            font-weight: normal;
        }
}



/**
* Feature: Feedback
*
* Styling for a table layout as shown in the following screenshot:
*
* Docs/Table_Feedback.png
*
* @section	feature-feedback
*/
@media screen {

    .feedback {
        table-layout: fixed;
        width: 100%;
    }

        .feedback caption {
            color: #66492f;
            font-size: 1.18em;
            font-weight: bold;
            padding-bottom: 18px;
            text-align: left;
        }

        .feedback .gutter {
            background-color: transparent;
            border-bottom: none;
            width: 10px;
        }

        .feedback thead th {
            border-bottom: dotted 1px #878787;
            color: #66492f;
            font-weight: bold;
            line-height: normal;
            padding: 0 0 2px 0;
            text-align: left;
            vertical-align: center;
        }

        .feedback tbody td {
            background-color: #f7f7f7;
            color: #454545;
            line-height: normal;
            padding: 6px;
            vertical-align: top;
        }

        .feedback tfoot td {
            background-color: #f7f7f7;
            border-bottom: dotted 1px #878787;
            padding: 6px;
            vertical-align: top;
        }
}



/**
* Feature: Search Results
*
* Display research results for a given query. Styling for a table layout as
* shown in the following screenshot:
*
* Docs/Search_Results.png
*
* @section	searchresults
*/
@media screen {

    .searchresults {
    }

        .searchresults .result {
            border-top: solid 1px #f4f3f3;
            margin-bottom: 18px;
            padding-top: 1px;
        }

        .searchresults h4 {
            margin: 18px 0;
            font-weight: normal;
        }

            .searchresults h4 a {
                text-decoration: underline;
            }

                .searchresults h4 a:focus,
                .searchresults h4 a:hover {
                    text-decoration: none;
                }

        .searchresults .path,
        .searchresults .lastupdate {
            display: block;
        }

        .searchresults .alphaindex {
            border-top: solid 1px #f4f3f3;
            padding-top: 18px;
            text-align: right;
        }
}



.nohover a {
    background-color: transparent !important;
    vertical-align: bottom;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
}

    .nohover a:hover {
        background-color: transparent !important;
        background-image: none !important;
        border-top: none !important;
    }

    .nohover a:focus {
        background-color: transparent !important;
        background-image: none !important;
        border-top: none !important;
    }


#searchsubmit {
    background-color: #fff !important;
    color: /*#274c7f*/ #295d90;
    border: none;
    line-height: 19px;
    padding: 0 !important;
    width: 50px;
    cursor: pointer;
    white-space: nowrap;
}

#searchinput {
    width: 243px;
    height: 22px;
    padding-left: 10px;
    padding-bottom: 3px;
    font-size: 11px;
    -webkit-border-radius: 10px;
    border: 1.5px solid #dadada;
    font-family: Arial,Helvetica,Verdana,sans-serif
}