/*******************************************************************************************
*******************************************************************************************
/shared/css/modules/_popout.css
*******************************************************************************************
*******************************************************************************************/

.popout {
	display: inline-block;
	position: relative;
	z-index: 10;
}
.popout.active,
.active > .popout,
.active .assignmentSelector > .popout {
	z-index: 20;
}

.popoutContent { 
	background: #fff;
	border: solid 3px #0b3b83;
	border-radius: 10px;
	box-shadow: 0 0 5px #666;
	box-sizing: border-box;
	display: block;
	font-size: 13px !important; /* override h1 which has !important to override normalize */
	font-weight: normal;
	line-height: 1.4;
	padding: 0 11px;
	position: absolute;
	text-transform: none;
	top: 30px;
	width: 300px;
}	
.popoutContent .popoutArrow { 
	border-left: solid 10px transparent;
	border-right: solid 10px transparent;
	border-bottom: solid 10px #0b3b83;
	bottom: auto;
	display: block;
	left: 15px;
	position: absolute;
	top: -13px;
	vertical-align: top;
	z-index: 999;
}
.popoutContent p {
	margin: 12px 0;
}
.popoutContent-bg {
	background: #efefef;
}
	.popoutContent-bg .box-bg {
		background: #fff;
	}

/*************/
/* ALIGNMENT */

.popout-above .popoutContent {
	top: auto;
	bottom: 30px;
}		
.popout-above .popoutContent .popoutArrow {
	border-bottom: none;
	border-top: solid 10px #0b3b83;
	bottom: -13px;
	top: auto;
}	

.popout-alignMiddle .popoutContent {
	left: 50%;
	margin-left: -150px;
}
.popout-alignMiddle .popoutContent .popoutArrow {
	left: 50%;
	margin-left: -10px;
}

.popout-alignRight .popoutContent {
	right: 0;
}	
.popout-alignRight .popoutContent .popoutArrow {
	left: auto;
	right: 15px;
}
.popout-right .popoutContent {
	right: auto;
	left: -310px; /*10px more than the width */
	top: -30px;
}
.popout-right .popoutContent .popoutArrow {
	border-top: solid 10px transparent;
	border-bottom: solid 10px transparent;
	border-left: solid 10px #0b3b83;
	border-right: 0;
	top: 30px;
	left: auto;
	right: -13px;
}
		
		
/*********/		
/* SIZES */		
.popout-lg .popoutContent {
	width: 600px;
}
	.popout-lg.popout-alignMiddle .popoutContent {
		margin-left: -300px;
	}
	.popout-lg.popout-alignRight .popoutContent {
		right: 0;
	}
	.popout-lg.popout-right .popoutContent {
		left: -610px;
	}
.popout-md .popoutContent {
	width: 450px;
}
	.popout-md.popout-right .popoutContent {
		left: -460px;
	}
.popout-xl .popoutContent {
	width: 910px;
}
.popout-sm .popoutContent {
	width: 300px;
}
	.popoutContent-scienceLibrary {
		width: 950px;
		right: -330px !important;
	}
	.popoutContent-scienceLibrary .popoutArrow {
		left: 565px;
	}
/*******************/
/* POPOUT SWITCHES */
.popoutSwitch {}


/************/
/* tooltips */
.popout-toolTip .popoutSwitch .icon {
	color: #999;
}
.popout-toolTip .popoutSwitch:hover .icon,
.popout-toolTip .popoutSwitch.active .icon {
	color: #0b3b83;
}	
.popout-toolTip.popout-alignRight .popoutContent {
	right: -20px;
}
.popout-toolTip.popout-alignLeft .popoutContent {
	left: -18px;
}

/* tooltip in table header */
.table-data th .popout-toolTip .icon {
	color: #2872b8;
}
.table-data th .popout-toolTip .icon:hover,
.table-data th .popout-toolTip .active .icon {
	color: #0b3b83;
}
.table-data th .popout-toolTip .popoutContent {
	font-weight: normal;
}

/**********/
/* alerts */
.popout-alert .popoutSwitch .icon {
	color: #bb1a03;
	font-size: 20px;
}
.popout-alert .popoutSwitch:hover .icon,
.popout-alert .popoutSwitch.active .icon {
    color: #fe2203;
}   
.popout-alert.popout-alignRight .popoutContent {
    right: -20px;
}
.popout-alert.popout-alignLeft .popoutContent {
    left: -18px;
}

/* position popoutContent a little lower down when using buttons and pills for popoutSwitch */
.popout-btnSwitch-sm .popoutContent { top: 38px; }
.popout-btnSwitch .popoutContent { top: 42px; }
.popout-btnSwitch-lg .popoutContent { top: 46px; }
.popout-btnSwitch-xl .popoutContent { top: 50px; }
	
	
/*****************/	
/* STATIC POPOUT */

.popout-static {
	display: block;
}
.popout-static .popoutContent {
	display: block;
	padding: 0 15px;
	position: relative;
	top: 12px;
	width: auto;
}
.popout-tabbed.popout-static .popoutContent {
	top: 0;
}

/*********************/
/* TABBED POPOUT NAV */

.popout-tabbed {
	left: -10px;
}
.popout-tabbed .popoutContent {
	display: block;
	padding: 0 15px;
	top: 31px;
	width: 746px;
}
.popout-tabbed .popoutContent-first {
	border-radius: 0 10px 10px 10px;
}

/* tabs */
.popoutTabs {
	display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}		
	.popoutTabsItem {
		display: inline-block;
		position: relative;
		z-index: 51; /* above popoutContent */
	}
		.popoutTabsItem a {
			cursor: pointer;
			display: block;
			font-weight: bold;
			font-size: 14px;
			margin: 0;
			padding: 6px 10px;
			text-decoration: none;
		}
			.popoutTabsItem:last-child a {
				border: none;
			}
			.popoutTabsItem a.active /* for simplePopout */ {
				background: #0a4d90;
				background: -webkit-linear-gradient(#0861a0, #0b3b83); /* Safari */
				background: -moz-linear-gradient(#0861a0, #0b3b83); /* Firefox */
				background: linear-gradient(#0861a0, #0b3b83);
				border: solid 1px #0b3b83;
				border-bottom: none;
				border-radius: 7px 7px 0 0;
				color: #fff;
				padding: 5px 9px 6px 9px;
				text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
			}	
		.popoutTabsItem .arrow {
			border: solid 5px transparent;
			border-top: solid 5px #333;
			display: inline-block;
			margin: 6px 0 0 0;
			vertical-align: top;	
		}
			.popoutTabsItem a.active .arrow {
				border-top: solid 5px #fff;
			}