/*
    ========================================
        Table of Contents
    ========================================

        ::Navigation
        ::Form Behavior Classes
        ::Validation Classes
        ::Buttons

*/

/* base font styles */
html {
    font-family: "myriad-pro-n3", "myriad-pro", sans-serif;
    font-size: 16px;
    font-weight: 300;
}

.valign {
    display:table;
    width:100%;
}

.valign > .inner {
    display:table-cell;
    vertical-align:middle;
}

/* vertical-align polyfill for IE7 */
.lt-ie8 .valign > .inner {
    margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}

hr.vertical {
    width: 1px;
    height: 1px;
    margin: 0 auto -2000px;
    padding: 0 0 2000px;
    background: rgb(177,177,177);
    border: 0;
}

/*
    ========================================
        ::Navigation
    ========================================
*/
/*
* 
* Note: optional usage of the parent ".content > .inner" being classed ".content > .nav-inner"
*       this allows for adjusting the padding around the nav (usually at the mobile size, where we would have no padding)
* 
* 
* Navigation Structure:
* 
*   <nav id="mainNav" class="skin_main-nav no-nav-js">
* 
*       <a id="mobileMenuCtrl"></a>
* 
*       <ul class="nav-menu">
* 
*           <li class="nav-item has-drop">
* 
*               <a class="nav-link">Level 1 Item<span class="drop-menu"></span>
* 
*               <ul class="nav-menu">
* 
*                   <li class="nav-item">
*                       <a class="nav-link">Level 2 Item</a>
*                   </li>
* 
*                   [ repeat as needed ]
* 
*               </ul>
*           </li>
* 
*           [ repeat as needed ]
* 
*           <li class="nav-item">
*               <a class="nav-link">Level 1 Item (no drop)</a>
*           </li>
* 
*       </ul>
* 
*   </nav>
*/
   
    /* (default) mobile skins */

/* the hamburger menu */
#mobileMenuCtrl {
    background: url(https://www.ebsco.com/apps/global/ada/css/img/mobile-menu-icon_1.png) 50% 50% no-repeat transparent;
    display: block;
    float: left;
    height: 19px;
    margin-top: -38px;
    padding: 10px;
    width: 34px;
}
    /* hover / focus state */
    #mainNav.skin_main-nav:hover #mobileMenuCtrl, 
    .skin_main-nav #mobileMenuCtrl:hover,
    .skin_main-nav #mobileMenuCtrl:focus {
        background: url(https://www.ebsco.com/apps/global/ada/css/img/mobile-menu-icon_2.png) 50% 50% no-repeat rgb(53, 53, 53);
        border-color: transparent;
    }
    
/* the navigation container */
#mainNav { 
    float: left;
    /* top margin give space for when cta btn is on same horizontal as site logo */
    margin-top: 35px;
    width: 100%;
}
.skin_main-nav #mainNav {
    background-color: transparent;
    border: none;
}

/* the nav group */
.nav-menu {
    clear: left;
    display: block;
    list-style: none;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    /* transition */
    -webkit-transition: max-height 0.5s ease-in-out, opacity 0.35s ease-in-out;
    transition: max-height 0.5s ease-in-out, opacity 0.35s ease-in-out;
}
.skin_main-nav .nav-menu {
    background-color: rgb(53, 53, 53);
    color: rgb(255, 255, 255);
}

/* nav items and links */
.nav-menu > .nav-item { margin: 0; padding: 0 10px; }
.nav-menu > .nav-item .nav-link {
    display: block;
    padding: 25px 0 21px;
}
.skin_main-nav .nav-link {
    border-bottom: 1px solid transparent;
    color: rgb(255, 255, 255);
    text-decoration: none;
}
.skin_main-nav .nav-menu > .nav-item:hover,
.skin_main-nav .nav-menu > .nav-item .nav-link:hover,
.skin_main-nav .nav-menu > .nav-item:focus,
.skin_main-nav .nav-menu > .nav-item .nav-link:focus {
    background-color: rgb(70, 70, 70);
    text-decoration: none;
}

/* suppress drop menus at default */
.nav-menu .nav-menu { display: none; }
    
/* open state */

.no-nav-js #mobileMenuCtrl:hover ~ .nav-menu,
.no-nav-js #mobileMenuCtrl ~ .nav-menu:hover, 
.no-nav-js #mobileMenuCtrl:focus ~ .nav-menu,
.no-nav-js #mobileMenuCtrl ~ .nav-menu:focus { 
    max-height: inherit;
}

/* nav back button */
.nav-back {
    clear: left;
    display: block;
    float: left;
    margin: 0 0 16px;
}
    .nav-back a {
        border: none;
        display: block;
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
        position: relative;
    }
    .nav-back a:before {
        border: none;
        content: "";
        display: none;
    }
    .nav-back a:hover { border: none; }
    
.nav-back.active {
    display: block;
}

/* ie7 fallback - no sub-menus */
.lt-ie8 .top-nav .sub-menu {
    display: none;
}

/* 2-col drop menu on tablet size */
@media screen and (min-width: 481px) and (max-width: 720px) {
    .nav-menu > .nav-item {
        float: left;
        width: 45%;
    }
}

/* show horizontal nav at tablet sizes */
@media screen and (min-width: 721px) {

    /* if using .content > .nav-inner, set the desktop padding here */
   .nav-inner { padding: 0 10px; }
    
    /* hide nav-back */
    .nav-back { display: none; }
    
    /* desktop skins */
    .skin_main-nav .nav-menu { 
        background-color: transparent;
    }
        .skin_main-nav .nav-menu .nav-link {
            border-bottom: 1px solid transparent;
            color: rgb(59, 59, 59);
            text-decoration: none;
        }
        .skin_main-nav .nav-menu > .nav-item:hover,
        .skin_main-nav .nav-menu > .nav-item .nav-link:hover,
        .skin_main-nav .nav-menu > .nav-item:focus,
        .skin_main-nav .nav-menu > .nav-item .nav-link:focus,
        .skin_main-nav .nav-menu > .nav-item.current > .nav-link {
            background-color: transparent;
            text-decoration: underline;
        }
    .skin_main-nav .nav-menu .nav-menu {
        background-color: rgb(53, 53, 53);
        z-index: 1;
    }

            /* sub-menu hover state */
            .skin_main-nav.no-nav-js .nav-menu .nav-item:hover .nav-menu,
            .skin_main-nav.no-nav-js .nav-menu .nav-menu:hover,
            .no-nav-js .has-drop:hover .nav-menu {
                display: block;
            }

        .skin_main-nav .nav-menu .nav-menu a {
            /* border-right: 1px solid rgb(255, 255, 255); */
            color: rgb(255, 255, 255);
        }

        /* css triangle pointer above each sub menu */
        .nav-link { position: relative; }
       
        .skin_main-nav .has-drop > .nav-link::before,
        .skin_main-nav .has-drop.current > .nav-link.no-point::before {
            border-color: transparent transparent rgb(53, 53, 53) transparent;
            border-style: solid;
            border-width: 0 15px 15px;
            content: " ";
            display: block;
            height: 0;
            left: 50%;
            margin-left: -15px;
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            position: absolute;
            top: 43px;
            width: 0;
        }

        .skin_main-nav .has-drop:hover > .nav-link::before,
        .skin_main-nav .has-drop:focus > .nav-link::before,
        .skin_main-nav .has-drop.current > .nav-link::before {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            top: 34px;
            /* transition */
            -webkit-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
            transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
        }

    #mainNav {
        margin-top: 0;
    }
    #mainNav.has-sub { margin-bottom: 54px; }
    #mobileMenuCtrl { display: none; }
    .nav-menu {
        max-height: 500px;
        overflow: visible;
    }
        /* default list items
         * options: .drop, .wrap-block, .after-wrap
         */
        .nav-menu .nav-item {
            display: inline-block;
            float: left;
            line-height: 42px;
            list-style: none;
            margin: 0;
            overflow: visible;
            padding: 0;
            width: auto;
        }
        .nav-menu .nav-link { padding: 0; }
        .nav-menu .nav-item > .nav-link {
            padding: 0 40px;
        }
        
        .nav-menu .nav-item:first-child > a {
            padding-left: 0;
        }
            
            /* default sub-menu */
            .nav-menu .nav-menu {
                display: none;
                left: 0;
                margin: 0 -10000px 0;
                padding: 0 10000px;
                position: absolute;
                top: 43px;
                width: 100%;
            }
            .current .nav-menu {
                display: block;
            }
                /* default sub-menu list items */
                .nav-menu .nav-menu > .nav-item { 
                    /*float: none;*/
                    padding: 0;
                }
                .lt-ie9 .nav-menu .nav-menu > .nav-item {
                    display: block;
                    float: left;
                }
                .nav-menu .nav-menu .nav-link {
                    line-height: 0.8;
                    margin: 20px 0;
                    padding: 0 20px;
                }
                
                .skin_main-nav .nav-menu .nav-link.active { text-decoration: underline; }

    /* level 1 nav drop indicator */
   .drop-menu,
   .has-drop.current .no-point .drop-menu {
       border-width: 5px 0 5px 5px;
       border-color: transparent transparent transparent rgb(175,175,175);
       border-style: solid;
       content: " ";
       display: block;
       position: absolute;
       top: 16px;
       right: 30px;
   }
   .current .drop-menu,
   .skin_main-nav .has-drop:hover > .nav-link .drop-menu,
   .skin_main-nav .has-drop:focus > .nav-link .drop-menu {
       border-width: 5px 5px 0 5px;
       border-color: rgb(175,175,175) transparent transparent transparent;
       border-style: solid;
       content: " ";
       display: block;
       position: absolute;
       top: 20px;
       right: 28px;
   }

}           



/*
    ========================================
        ::Form Behavior Classes
    ========================================
    
    Assumed Markup:
    
    <form class="form-behavior">
        <div class="field">
            <label for="name-id">Your Label</label>
            <input type="text / email / tel" name="" id="name-id" class="required [optional]" />
        </div>
        
        <div class="field radio">
            <label for="name-id">
                <input type="radio" id="name-id" />Your Label
            </label>
        </div>
    </form>
    
    NOTES:
    form-behavior class required for label fading and validation
    the 'for' attribute is required to traverse between label and input / textarea
*/
div.field {
    position:relative;
    margin:0 0 2%;
    padding:0;
    border:0;
}

div.radio {
    /*height:30px;*/
    margin:0 0 6px 0;
}

div.field label {
    cursor:text;
}

div.radio label {
    cursor:pointer;
}

.js div.field label {
    position:absolute;
    top:0;
    left: 0;
    z-index:1;
    padding:0 1%;
    line-height:32px;
    opacity: 1;
    transition: all 0.35s ease-in-out;
}


.js div.radio label {
    padding: 0 15px 0 0;
    line-height:30px;
    transition:background .2s ease-out;
    -moz-transition:background .2s ease-out;
    -webkit-transition:background .2s ease-out;
    -ms-transition:background .2s ease-out;
    -o-transition:background .2s ease-out;
}

/* a group of radio buttons displayed vertically */
.js div.radio-group {
    height: auto;
}
.js div.radio-group label {
    float: left;
    margin-left: 16px;
    position: relative;
}
.js div.radio-group input[type="radio"] {
    left: 0;
    position: absolute;
    top: 0;
}


div.field input[type=text],
div.field input[type=password],
div.field input[type=email],
div.field input[type=tel],
div.field textarea {
    width:98%;
    height:32px;
    line-height:32px;
    margin:0;
    padding:0 1%;
    border:0px;
    background:#fff;
    outline: 1px solid rgb(154,154,154);
    transition:background .2s ease-out;
    -moz-transition:background .2s ease-out;
    -webkit-transition:background .2s ease-out;
    -ms-transition:background .2s ease-out;
    -o-transition:background .2s ease-out;
}

div.field input[type=email]:invalid,
div.field input[type=email]:-moz-ui-invalid {
    outline:0px none;
    box-shadow:none;
}

div.field input[type=radio] {
    float:left;
    height:30px;
    margin:0 5px 0 0;
}

div.field input[type=file] {
    display:none;
    visibility:hidden;
}

textarea {
    width:98%;
    padding:7px 1%;
    line-height:26px;
    border:0;
    resize: vertical;
}
div.select {
	overflow: hidden;
}
div.select select {
    -moz-appearance: none;
    background: none repeat scroll 0 0 transparent;
	border: 1px solid rgb(154, 154, 154);
    padding: 4px 0 0 1%;
    position: relative;
    width: 110%;
    z-index: 1;
}
div.select select.disabled {
	background: rgb(154,154,154);
}
div.select.disabled select {
    color: rgb(153, 153, 153) !important;
}
.js div.select.disabled select option {
    display: none;
}
div.select.disabled:hover span, div.select span {
    background: none repeat scroll 0 0 rgb(154, 154, 154);
    color: rgb(255, 255, 255);
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 30px;
}
div.select:hover span {
    background: none repeat scroll 0 0 rgb(18,68,151);
}
option:checked {
	/*background: rgb(40, 76, 105);*/
}

/*** form labels (new version of framework) ***/


select {
	width: 100%;
	height: 32px;
	line-height: 32px;
}
	select option {
		/*height: 40px;
		line-height: 40px;*/
		font-size: 14px;
	}

div.checkbox {
	height: 30px;
	line-height: 30px;
	margin-bottom: 20px;
}
	.form-behavior div.field.checkbox label {
	    cursor: default;
		line-height: 30px;
		padding-left: 16px;
	}
div.field textarea {
    height: 192px;
}

@media screen and (min-width: 721px) {
	select option {
		/*height: 40px;
		line-height: 40px;*/
		font-size: 16px;
	}
	
}


/* interaction classes */
.js div.field label {
    
}
.js div.field label.hasValue {
    opacity: 0.3;
}
.js div.field label.hasValue.hasBlur {
    opacity: 0;
    /*left: auto;
    right: 0;*/
}



/*
	PUSH-LABEL :: extends form base
		
		Assumed markup:
		
	    <form class="form-behavior push-label">
	        <div class="field">
	            <label for="name-id">Your Label</label>
	            <input type="text / email / tel" name="" id="name-id" class="required [optional]" />
	        </div>
	    </form>		
	    
	    NOTES:
	    Optionally include js to trigger validation cues (.hasValue, .hasError)
*/
	
		.push-label p ~ div.field,
        .push-label h2 ~ div.field,
        .push-label h3 ~ div.field,
        .push-label h4 ~ div.field,
		.push-label p ~ div.field ~ div.field,
        .push-label h2 ~ div.field ~ div.field,
        .push-label h3 ~ div.field ~ div.field,
        .push-label h4 ~ div.field ~ div.field {
			margin-top: 2em;
		}
        .push-label .field.select {
            /*margin-top: 0;*/
        }
		.push-label .field {
			margin-bottom: 2em;
		}
		.push-label div.field label {
			left: 10px;
			padding: 0; 
			text-align: left;
			color: rgb(125,125,125);
			-moz-transition: top 0.75s, color 0.75s ease-in-out, font-size 0.75s ease-in-out;
			-webkit-transition: top 0.75s, color 0.75s ease-in-out, font-size 0.75s ease-in-out;
			-o-transition: top 0.75s, color 0.75s ease-in-out, font-size 0.75s ease-in-out;
			-ms-transition: top 0.75s, color 0.75s ease-in-out, font-size 0.75s ease-in-out;
            transition: top 0.75s, color 0.75s ease-in-out, font-size 0.75s ease-in-out;
		}
		
		/* optional validation classing */
		.js .push-label div.field label.hasValue {
			top: -2em;
			color: rgb(125,125,125);
			font-size: 90%;
			opacity: 1;
		}
	/*}*/

/*
    ========================================
        ::Validation Classes
    ========================================
*/
.disabled {
    background: rgb(192, 192, 192);
    cursor:default !important;
}
.disabled:after {
    border-color: transparent transparent transparent #C0C0C0 ;
}

.invalid {
    background:#FFFFDE !important;
    outline:2px solid #FFFE94 !important;
}

.error {
    background: #FF9494 !important;
}
.error:after {
    border-color: transparent transparent transparent #FF9494 !important;
}

input.error,
textarea.error,
.radio label.error {
    outline:2px solid #FF2E2E !important;
}

/* status group: prev/next btns; error note */
.status-group {
    
}
    .status-group .note {
        clear: both;
        font-size: 90%;
        padding-top: 10px;
        text-align: right;
    }
    .status-group .note.highlight {
        color: rgb(223,91,87);
    }


/*
    ========================================
        ::Buttons
    ========================================
*/
.button {
    background: none repeat scroll 0 0 rgb(8, 164, 111);
    border: medium none;
    color: rgb(255, 255, 255);
    display: block;
    font-family: "myriad-pro-n4","myriad-pro",sans-serif;
    font-size: 20px;
    font-weight: 400;
    /*line-height: 40px;*/
    margin-bottom: 16px;
    padding: 5px 12px;
    text-decoration: none;
    transition: all 0.35s ease-in-out 0s;
}
.button:hover {
    background: none repeat scroll 0 0 rgb(24, 48, 83);
}
.button.button-right {
    float: right;
}
.button.trial-button {
    background: none repeat scroll 0 0 rgb(215, 137, 83);
    bottom: -64px;
    left: 50%;
    margin-left: -91px;
    position: absolute;
    text-align: center;
    width: 150px;
}
.button.trial-button:hover {
    background: none repeat scroll 0 0 rgb(171, 199, 227);
    color: rgb(24, 48, 83);
}
.button.button-inline {
    float: left;
    margin-right: 1em;
}

/*
    ========================================
        ::Pattern: ITT (image-title-text)
    ========================================

 * A pattern of image - title - text; images are fluid (responsive) by default
 * 
 * Layout options:
 * 		itt_stacked :: stacked - image on top; title below; text last
 * 		itt_img-left :: image left - image block on left; title and text block on right
 * 		itt_img-right :: image right - image block on right; title and text block on left
 * 		
 * Assumed markup:
 * 		<div class="itt [itt_option]">
 * 			<div class="itt_img-content">
 * 				<img class="itt_img" src="http://placekitten.com/100/100" alt="image description" />
 * 			</div>
 * 			<h1|h2|h3|h4|h5|h6|p class="itt_title">Title text</h1|h2|h3|h4|h5|h6|p>
 * 			<p class="itt_text">Text paragraph</p>
 * 		</div>
 * 
 * 
 * */


.itt {
	margin-bottom: 1em;
	position: relative;
}
	.itt_img_content { }
		.itt_img {
			float: left;
			margin: 0 1em 0.5em 0;
		}
	.itt_title {
		display: block;
		margin: 0 0 0.5em;
	}
	.itt_text { }
		.itt_text li {
			margin-left: 1em;
		}
	.itt_text { }

/** stacked **/
.itt_stacked { }
	.itt_stacked .itt_img {
		float: none;
		margin: 0 0 0.5em;
		width: 100%;
	}
	.itt_stacked .itt_title {
		display: block;
		margin-bottom: 0.5em;
	}
	.itt_stacked .itt_text { }

/** image left **/
.itt_img-left {
	overflow: hidden;
}
	.itt_img-left .itt_img-content {
		width: 50%;
	}
		.itt_img-left .itt_img {
			display: block;
			margin: 0 5% 0 0;
			width: 95%;
		}
	.itt_img-left .itt_title {
		display: block;
		width: 50%;
		float: right;
	}
	.itt_img-left .itt_text {
		display: block;
		width: 50%;
		float: right;

	}
	.itt_img-left .itt_link {
		display: block;
		width: 50%;
		float: right;
		clear: right;
	}

/** image right **/
.itt_img-right {
	overflow: hidden;
}
	.itt_img-right .itt_img-content {
		float: right;
		width: 50%;
	}
		.itt_img-right .itt_img {
			display: block;
			margin: 0 0 0 5%;
			width: 95%;
		}
	.itt_img-right .itt_title {
		display: block;
		width: 50%;
		float: left;
	}
	.itt_img-right .itt_text {
		display: block;
		width: 50%;
		float: left;

	}
	.itt_img-right .itt_link {
		display: block;
		width: 50%;
		float: left;
		clear: left;
	}




	.thumb-aside .cornerstone-hdr,
	.thumb-aside .cornerstone-desc,
	.thumb-aside .cornerstone-link {
		width: 60%;
	}
	.thumb-aside .image-content {
		width: 40%;
	}

	.icon-aside .cornerstone-hdr,
	.icon-aside .cornerstone-desc,
	.icon-aside .cornerstone-link {
		width: 75%;
	}
	.icon-aside .image-content {
		width: 20%;
	}




.cornerstone.promobox {
	margin-bottom: 3em;
	background: url('/images-nursing/ui/promo-header-rule.jpg') 50% 1em no-repeat;
	box-shadow: 0 0 21px rgb(40,40,40);
	box-shadow: 0 0 21px rgba(0,0,0,0.4);
}
	.promobox .cornerstone-hdr {
		padding-top: 3em;
		font-size: 1.7em;
	}
	.promobox .fw_content {
		padding-bottom: 1em;
	}

.cornerstone.feature-sample {
	
}
	.cornerstone.feature-sample .cornerstone-hdr {
	}
	.cornerstone.feature-sample .image-content {
		text-align: center;
	}
	.cornerstone.feature-sample .cornerstone-image {
		/* width/height is specific to image icon */
		width: 100px;
		height: 145px;
	}


/*
    ========================================
        ::Pattern: lists
    ========================================
*/

/* using <dl> 
 * 
 * <dl class="basic-list">
 *     <dt>term/label</dt>
 *     <dd>description/definition</dd>
 *     ....
 * </dl>
 * 
 */
.basic-list {
    overflow: hidden;   
}
    .basic-list dt {
        display: block;
        float: left;
        /* usually 150px using 16px font base */
        width: 9.375em;
    }
    .basic-list dd {
        display: block;
        /* usually provides 10px margin between dt and dd @ 16px base font */
        margin-left: 10em;
    }

    /* "snug" */
   .basic-list.snug dt {
       width: 3em;
   }
   .basic-list.snug dd {
       margin-left: 3.625em;
   }


/*
 * fluid videos
 */
.videoWrapper {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
	z-index: 2;
    /*transition: all 0.75s ease-in-out;
    -webkit-transition: all 0.75s ease-in-out;*/
}
.videoWrapper iframe,
.videoWrapper .video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
	.videoWrapper.expanded {
		bottom: 0;
		left: 0;
		margin: auto;
		position: fixed;
		right: 0;
		top: 0;
	}




/* Pattern: Images */
.image-fluid {
	width: 100%;
}
.image-thumb {
	float: left;
	margin-right: 1em;
}
.image-label {
	text-align: center;
}
/* list of images - center aligned usually */
.image-list {
	display: block;
	width: 100%;
	margin: 0 0 1em;
	text-align: center;
}
	.image-list .list-item {
		display: inline;
		margin: 1em 2em;
	}
.image-header {
	margin-bottom: 1em;
}


/* text helpers */
.txt-smaller {
    font-size: 90%;
}



/*
 * helper classes
 */

.hidden { display: none; }

.even-columns {
    overflow: hidden;
}
    .even-columns > * {
        margin-bottom: -20000px;
        padding-bottom: 20000px;
    }