/* $Id: common-00.css,v 1.2 2014/03/06 23:06:50 tako Exp $ */
/* Table of Contents:
	* Reset
	* Base Elements
	* Typography
	* Grid
	* Header
	* Navigation
	* Content
	* Footer
	* Messages
	* Forms
	* Lists
	* Tabbed Sections
	* Tables
	* Helpers
	* Overrides
	* Shame

	Vertical rythm should be based on default font size and line height.
	Since default font size is 12px and line height 18px then padding and margins should be fractions or multiples of line height.
	In terms of font size, half line height is .75em, full line height is 1.5em. So margins and padding should be in terms of these two numbers.

	Font scale:
	<small> 10, <h1> 36,  <h2> 24, <h3> 16, <p><h4-h6> 12

	--------- 1 ---------|--- 2 ---|--- 3 ---|------ 12 -----|
	6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72

	For font sizing use rem with px fallback

Change Log:
---------------------
v. .8
1. Removed external links based on attribute selector [http:...]
2. Removed  a[rel="tag"]
3. Removed some commented out properties
4. broke up file to smaller
5. Narrowed back to page top implementation | removed nested icon or pseudo icon
6. Removed .opener. Not sure what it was for.
7. Removed .anchor.
8. Changed .permalink from opacity to visibility
9. Removed .mini-icon-link:before

	*/

@import url("_00_reset.css");
@import url("_01_base.css");
@import url("_02_typography.css");
@import url("_03_fonts.css");
@import url("_04_grid.css");
@import url("_05_forms.css");
@import url("_06_tables.css");
@import url("_07_helpers.css");
@import url("_08_spacing.css");
@import url("_12_navigation.css");








/* arrows - http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/ */
	.arrow {
		height: 0;
		width: 0;
		border-style: solid;
		border-width: 4px;
		display: inline-block; /*BG*/
		overflow: hidden; /*BG*/
		}

	.arrow-pseudo {
		border: 0;
		border-color: inherit; /* inherit border-color from .btn font color and pass it to .arrow-pseudo:after */
		}

	.arrow-pseudo:after {
		content: ' ';
		position: absolute;
		display: inline-block;
		height: 0;
		width: 0;
		border-style: solid;
		border-width: 4px;
		top: 50%;
		margin-top: -4px;
		}

	.arrow-up,
	.arrow-pseudo-up:after {
		/* up border-color is inherited from .btn color since the border-color is not explicitly set but has a width */
		border-left-color: transparent; /* in buttons can use inherit to inherit transparent from .btn border-color */
		border-right-color: transparent;
		border-width: 0 .3333333em .5em;
		}

	.arrow-down,
	.arrow-pseudo-down:after {
		border-left-color: transparent;
		border-right-color: transparent;
		border-width: .5em .3333333em 0;
		}

	.arrow-left,
	.arrow-pseudo-left:after {
		border-bottom-color: transparent;
		border-top-color: transparent;
		border-width: .3333333em .5em .3333333em 0;
		left: .25em;
		}

	.arrow-right,
	.arrow-pseudo-right:after {
		border-bottom-color: transparent;
		border-top-color: transparent;
		border-width: .3333333em 0 .3333333em .5em;
		right: .25em;
		}







/* CONTENT --------------------------------- */
	.content {
		clear: both;
		padding: 1px 0;
		margin: 1.5em 25px; /* TODO : change to RUS implementation */
		}


/* FOOTER
	------------------------------------------------------------------ */
	.footer {
		clear: both;
		position: relative; /* establish context for absolutely positioned logo */
		margin: 1.5em 25px; /* TODO : change to RUS implementation */
		border-top: 1px solid #eee;
		padding: 1em .5em 0
		}

	.footer > p { margin: 0 160px .25em 0; }

	.link-logo {
		position: absolute;
		right: .5em;
		top: 1em;
		width: 150px;
		height: 40px;
		}





/* MESSAGES
	------------------------------------------------------------------ */
/* status messages */
/* messages */
	.msg {
		position: relative;
		clear: both;
		margin: 0 0 1.5em;
		padding: .5em 1em; /* 6px 12px */
		border-width: .25em; /* 3px */
		border-style: solid;
		-webkit-border-radius: .8333333333333333em; /* 10px */
		-moz-border-radius: .8333333333333333em;
		border-radius: .8333333333333333em;
		}

	.msg-info,
	.msg-help {
		background-color: #D1EFEF; /*#eff*/
		border-color: #B5DFDF; /*#e8f9f9*/
		color: #008; /* #008; */
		}

	.msg-success {
		background-color: #dfa;
		border-color: #ce9;
		color: #571; /* #390; */
		}

	.msg-error {
		background-color: #fff7ee;
		border-color: #fcc;
		color: #a00; /* #d21034; */
		}

/* message heading */
	.msg-heading {
		font-size: 1.5em; /* 18px */
		line-height: 2; /* 36px */
		margin-bottom: .5em; /* 9px */
		color: inherit;
		border-bottom-width: 1px;
		border-bottom-style: dashed;
		border-color: inherit;
		font-family: inherit;
		}

   .msg-heading > .icon { position:relative; top: -3px; }

/* message close button */
	.close {
		font-size: 1.5em; /* 18px */
		font-weight: 700;
		text-shadow: 0 -1px 0 #777;
		color: inherit;
		cursor: pointer;
		line-height: 2; /* 36px */
		position: absolute;
		right: .6666666666666667em; /* 12px */
		z-index: 100; /* make close button clickable */
		text-decoration: none;
		opacity: .25;
		filter: alpha(opacity=25);
		}

	p > .close { line-height: 1.1; }

	.close:hover {
		color: inherit;
		opacity: 1;
		filter: alpha(opacity=100);
		}

/* icons */
	.icon {
		display: inline;
		padding: 12px 8px 4px; /* padding can be used to align icon with text and is needed to give icon size when it is display inline */
		font-size: 0; /*inherit*/
		background-image: url("/assets/img/sprite8.png");
		background-repeat: no-repeat;
		}

	.icon-success { background-position: 0 0; }
	.icon-error { background-position: -16px 0; }
	.icon-info { background-position: -32px 0; }
	.icon-help { background-position: -48px 0; }
	.icon-x { background-position: -64px 0; }
	.icon-check { background-position: -80px 0; }
	.icon-check-alt { background-position: -96px 0; }
	.icon-stop { background-position: -112px 0; }
	.icon-info-alt { background-position: -128px 0; }
	.icon-edit-alt { background-position: -144px 0; }
	.icon-edit-alt2 { background-position: -160px 0; }
	.icon-alert { background-position: -176px 0; }
	.icon-calendar-alt { background-position: -192px 0; }
	.icon-print-big { background-position: -208px 0; }
	.icon-search-alt, :hover > .icon-search-big { background-position: -240px 0; }
	.icon-search-big { background-position: -256px 0; }

	.icon-check-w, .btn:hover .icon-check-b { background-position: 0 -16px; }
	.icon-edit-w { background-position: -16px -16px; }
	.icon-minus-w, .icon-collapse-w { background-position: -32px -16px; }
	.icon-plus-w, .icon-expand-w { background-position: -48px -16px; }
	.icon-arrow-left-w { background-position: -64px -16px; }
	.icon-arrow-right-w, .icon-arrow-expand-b { background-position: -80px -16px; }
	.icon-arrow-down-w, .icon-arrow-collapse-b { background-position: -96px -16px; }
	.icon-arrow-up-w { background-position: -112px -16px; }
	.icon-new-window-w { background-position: -128px -16px; }
	.icon-calendar-w { background-position: -144px -16px; }
	.icon-print-w { background-position: -160px -16px; }
	.icon-trash-w { background-position: -176px -16px; }
	.icon-x-w { background-position: -192px -16px; }
	.icon-x-w-transparent { background-position: -208px -16px; }
	.icon-calendar-w-alt { background-position: -224px -16px; }
	.icon-home-w { background-position: -240px -16px; }
	.icon-search-w { background-position: -256px -16px; }

	.icon-check-b/*, .btn:hover .icon-check-w*/ { background-position: 0 -32px; }
	.icon-edit-b { background-position: -16px -32px; }
	.icon-minus-b, .icon-collapse-b { background-position: -32px -32px; }
	.icon-plus-b, .icon-expand-b { background-position: -48px -32px; }
	.icon-arrow-left-b { background-position: -64px -32px; }
	.icon-arrow-right-b, .icon-arrow-expand-b { background-position: -80px -32px; }
	.icon-arrow-down-b, .icon-arrow-collapse-b { background-position: -96px -32px; }
	.icon-arrow-up-b { background-position: -112px -32px; }
	.icon-new-window-b { background-position: -128px -32px; }
	.icon-calendar-b { background-position: -144px -32px; }
	.icon-print-b { background-position: -160px -32px; }
	.icon-trash-b { background-position: -176px -32px; }
	.icon-x-b { background-position: -192px -32px; }
	.icon-x-b-transparent { background-position: -208px -32px; }
	.icon-calendar-b-alt { background-position: -224px -32px; }
	.icon-home-b { background-position: -240px -32px; }
	.icon-search-b { background-position: -256px -32px; }

	.icon-close {
		background-position: -190px 0;
		background-color: #aaa;
		font-size: 0;
		border-radius: 16px;
		width: 15px;
		height: 16px;
		display: inline-block;
		padding: 0;
		box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #eee;
		}

	.icon-close:hover {
		background-color: #333;
		box-shadow: 0 0 0 2px #ccc;
		}

	.icon-close-2 {
		background-position: -112px 50%;
		border-radius: 16px;
		background-color: #ddd;
		height: 16px;
		width: 15px;
		font-size: 0;
		display: inline-block;
		padding:0;
		box-shadow: 0 0 0 2px #ddd;
		}

	.icon-close-2:hover {
		background-position: -128px 50%;
		background-color: #ccc;
		box-shadow:0 0 0 2px #999;
		}


/* clickable help icon <a>Help?</a> */
	a.icon-help {
		font-size: 0;
		line-height: 16px;
		margin: 0;
		padding: 12px 8px 4px;
		}

/* TABS --------------------------------- */
.tabs {
	clear: both;
	overflow: hidden;
	margin: 18px 0;
	padding: 1px 0 0;
	width: 100%;
	line-height: normal;
   }

.tabs ul {
	margin: 0;
	padding: 0;
	list-style: none;
   }

.tabs li {
	display: inline;
	margin: 0;
	padding: 0;
   }

.tabs a {
	float: left;
	margin: 0 3px 0 0;
	border-top: 3px solid #fff;
	border-bottom: 1px solid #eee;
	box-shadow: inset 0 -5px 10px -6px #ccc;
	padding: 5px 0 0 9px;
	background: #f2f2f2;
	text-decoration: none;
   }

.tabs a span {
	display: block;
	padding: 2px 15px 2px 6px;
	color: #999;
	font-size: 1.3em;
   }

.tabs a:hover {
	border-top: 3px solid #f2f2f2;
	padding: 3px 0 2px 9px;
   }

.tabs a:hover span {
	color: #333;
   }

.tabs .active-tab a,  .tabs .active-tab a:hover {
	background: #dfdfdf;
	border: 1px solid #ccc;
	border-bottom: 0;
	padding-bottom: 1px;
	cursor: text;
	padding: 5px 0 1px 9px;
	box-shadow: none;
   }

.tabs .active-tab a span {
	padding-bottom: 4px;
	color: #000;
   }




/* TABS (Centered) --------------------------------- */
.tabs-centered {
	float: left;
	overflow: hidden;
	width: 100%;
	background: #fff;
	border-bottom: 5px solid #ddd;
	position: relative;
}
.tabs-centered ul {
	clear: left;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	left: 50%;
	text-align: center;
}
.tabs-centered ul li {
	display: block;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	right: 50%;
}
.tabs-centered ul li a {
	display: block;
	margin: 0 3px 0 0;
	border-top: 3px solid #fff;
	border-bottom: 1px;
	padding: 7px 15px 3px 15px;
	background: #f2f2f2;
	color: #999;
	text-decoration: none;
	line-height: 1.3em;
}
.tabs-centered ul li a:hover {
	color: #333;
	border: 0;
	padding-bottom: 6px;
}
.tabs-centered ul li a.active,  .tabs-centered ul li a.active:hover {
	color: #000;
	background: #dfdfdf;
	font-weight: bold;
	border: 0;
	padding-bottom: 7px;
}
/* TABS (right) --------------------------------- */
.tabs-centered {
	float: left;
	overflow: hidden;
	width: 100%;
	background: #fff;
	border-bottom: 5px solid #ddd;
	position: relative;
}
.tabs-right ul {
	clear: left;
	float: right;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	left: 0;
	text-align: right;
}
.tabs-right ul li {
	float: left;
	right: 0;
}
/* TABS-ALT (Reversed) --------------------------------- */
.tabs-alt {
	border: 0;
	background: #ccc;
} /* url(../img/tab_line.gif) repeat-x left bottom; */
.tabs-alt ul {
	padding: 18px 0 0 20px;
}
.tabs-alt a {
	border-color: #ccc;
	border-bottom: 1px solid #eee;
	box-shadow: none;
}
.tabs-alt a:hover {
	border-top: 3px solid #f2f2f2;
	padding: 3px 0 2px 9px;
} /* #eaeaea */
.tabs-alt .active-tab a,  .tabs-alt .active-tab a:hover {
	border-color: #fff;
	background: #fff;
	padding: 5px 0 2px 9px;
	border-top: 0;
}
.tabs-alt .active-tab a span {
	background: #fff
}
/* TABBED SECTION --------------------------------- */
/* tab navigation */
#nav-tab {
	float: left;
	margin: 1.5em 0 0;
	padding: 1px 0 0;
	width: 100%;
	line-height: normal;
}
.content #nav-tab ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#nav-tab li {
	display: inline;
	margin: 0;
	padding: 0;
}
#nav-tab a {
	float: left;
	margin: 0 3px 0 0;
	border-top: 3px solid #fff;
	padding: 5px 0 1px 9px;
	background: #f2f2f2;
	text-decoration: none;
}
#nav-tab a span {
	float: left;
	display: block;
	padding: 3px 15px 3px 6px;
	color: #999;
}
/* Hide from IE5Mac only \*/
#nav-tab a span {
	float: none;
}
/* End hack */
#nav-tab a:hover {
	border-top: 3px solid #f2f2f2;
	padding: 3px 0 3px 9px;
}
#nav-tab a:hover span {
	color: #333;
}
#nav-tab .active-tab a {
	background: #dfdfdf;
	border-top: 1px solid #dfdfdf;
	padding-bottom: 2px;
}
#nav-tab .active-tab a:hover {
	cursor: text;
	padding: 5px 0 2px 9px;
}
#nav-tab .active-tab a span {
	padding-bottom: 5px;
	color: #000;
	background: #dfdfdf
}
/* tab panel */
.tab-panel {
	clear: both;
	margin: 0 0 2em;
	padding: 9px;
	background-color: #dfdfdf;
}
.tab-content {
	display: block;
}
* html .tab-panel {
	height: 1px;
}
* html .tab-content {
	height: 200px;
}
/* min-height workaround http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/ for Mozilla, Safari, Opera, IE5/Mac */
*>.tab-panel {
	padding-top: 209px; /* stretch the containing box to at least 209px tall; 9px of padding-top */
	min-height: 1px; /* needed to keep containing box open; lack of an explicit height value collapses container (padding included); keep container open by setting min-height to any value; for Opera */
}
/* cancel out the containing box's padding non-IE browsers */
*>.tab-panel div.tab-content {
	min-height: 200px;
	margin-top: -200px;
   }

.tab-panel div.tab-content {
	padding: 10px;
   }









/* COMPONENTS
	------------------------------------------------------------------ */

/* button base <a> | <input> | <button> */

/* normalize (remove extra padding and borders) buttons in FF  */
	button::-moz-focus-inner,
	input[type="reset"]::-moz-focus-inner,
	input[type="button"]::-moz-focus-inner,
	input[type="submit"]::-moz-focus-inner,
	input[type="file"] > input[type="button"]::-moz-focus-inner {
		padding: 0;
		border: 0
		}

	.btn,
	.btn:visited {
		white-space: nowrap;
		position: relative;
		display: inline-block;
		margin: 0 .1666666666666667em;
		border: 1px solid transparent;
		border-bottom: 1px solid rgba(0,0,0,0.25);
		text-align: center;
		padding: .25em .5em; /* .25em .5em. 2em;*/
		line-height: normal; /* normal | FF sets this to normal !important so this will not have any effect in FF */
		font-family: sans-serif; /* <input> and <a> register different font family for sans-serif */
		font-size: 12px; /* need this to normalize font-size for <button> */
		font-size: 1rem;
		font-weight: 400;
		color: #fff; /* fff */
		text-decoration: none;
		/* text-transform: uppercase; */
		background-color: #999; /* aaa */
		cursor: pointer;

		text-shadow: 0 -1px 0 rgba(0,0,0,.25);

		-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
			-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);
				  box-shadow:0 1px 3px rgba(0,0,0,0.25);

	/* normalize box sizing between links and buttons */
		-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
				  box-sizing: border-box;
		 -webkit-border-radius: .35em;
			-moz-border-radius: .35em;
				  border-radius: .35em;/* Xbackground-image: -moz-linear-gradient(center top , #F97458 0%, #D72312 100%); Xbox-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -3px 0 rgba(0, 0, 0, 0.25) inset, 0 -4px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 0 rgba(0, 0, 0, 0.1); */
		}

	.btn:hover,
	.btn:focus,
	.btn:active,
	.btn--active {
		background-color: #888;
		color: #fff; /* #fff */
		text-shadow: none;
		outline: 0;
		}

	.btn:active,
	.btn--active {
		top: 1px;
		outline: 1px dotted #d21034;
		}

	.btn:focus,
	Xa.btn:focus,
	Xbutton:focus,
	Xinput[type="reset"]:focus,
	Xinput[type="button"]:focus,
	Xinput[type="submit"]:focus,
	Xinput[type="file"] > input[type="button"]:focus {
		-webkit-box-shadow: 0 0 2px 1px #C80;
			-moz-box-shadow: 0 0 2px 1px #C80;
				  box-shadow: 0 0 2px 1px #C80;
		}

/* primary and secondary submit buttons <a> | <input> | <button> */
	.btn-primary,
	.btn-secondary {
		font-weight: 700;
		padding: .5em .75em;
		-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,0.2);
			-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,0.2);
				  box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,0.2);
		}

	.btn-primary,
	.btn-primary:visited { background-color: #d21034; color: #fff; }

	.btn-primary:hover,
	.btn-primary:focus { background-color: #BF0B30; color: #fff; }

	.btn-primary:active {
		background-color: rgb(155,9,38);
		color: rgba(242, 242, 242,.75);
		text-shadow: -1px -1px 0 rgba(0,0,0,.25);
		}

/* canel button <input> | <button> - make it look like a link or use a link */
	.btn-cancel,
	.btn-cancel:visited {
		background-color: transparent;
		border-color: transparent;
		box-shadow: none;
		text-decoration: underline;
		text-shadow: none;
		color: #333;
		}

	.btn-cancel:hover,
	.btn-cancel:focus,
	.btn-cancel:active {
		background-color: transparent;
		text-decoration: underline;
		color: blue;
		}

/* close button */
	.btn-close {
		display: inline-block; /*block*/
		height: 0;
		width: 1.5em; /* 1.666666666666667em 20px */
		overflow: hidden;
		padding: 1.5em 0 0; /* 1.666666666666667em */
		-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
				  border-radius: 100%;
		position: relative;
		text-decoration: none;
		background-color: #ddd;
		}

	.btn-close:after {
		content: "\D7"; /* times symbol */
		color: #999;
		display: block;
		text-align: center;
		width: 18px; /*1em*/
		position: absolute;
		top: 0;
		left: 0;
		font-size: 20px;/* 1.5em*/
		line-height: 1;
		height: 18px;
		font-family: monospace, monospace;
		overflow: visible;
		}

	.btn-close:hover {
		background-color: #ccc;
		-webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #999;
			-moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #999;
				  box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #999;
		}

	.btn-close:hover:after { color: #fff; }

/* button modifiers */
/* --disabled <a> | <button> | <input>*/
	.btn--disabled,
	.btn--disabled:visited,
	.btn--disabled:hover,
	.btn--disabled:focus,
	.btn--disabled:active {
		background-color: #eee;
		color: #bbb;
		top: 0;
		border-color: #ddd;
		text-shadow: none;
		cursor: text;
		cursor: not-allowed;
		-webkit-box-shadow: none;
			-moz-box-shadow: none;
				  box-shadow: none;
		}

/* back, next, delete [x Delete] <a> */
	.back:before { content: "\25C4\a0"; } /* use HTML entities on <input> and <button> */
	.next:after { content: "\a0\25BA"; }
	.delete:before { content: "\00D7\a0"; } /* use &times; or &minus; on <input> and <button> */



.popup {
	left: 17em;
	top: auto;
	margin-top: -3em;
	}

/* tooltip */
	.tooltip,
	.tooltip-r,
	.tooltip-b {
		color: #fff;
		font-size: 11px; /* 12px */
		line-height: 1.3em; /* 16px */
		text-align: left;
		background-color: #444;
		border-radius: 0.25em; /* 4px */
		padding: 0.5em; /* 8px */
		max-width: 15em;
		display: block;
		position: absolute;
		padding: .75em;
		z-index: 1001;
		box-shadow: 0 0 1px 1px #fff;
		}

/* tooltip arrows */
	.popup:before,
	.popup:after,
	.tooltip:before,
	.tooltip:after,
	.tooltip-r:before,
	.tooltip-r:after,
	.tooltip-b:before,
	.tooltip-b:after {
		content: " ";
		border: solid;
		border-color: #fff transparent;
		border-width: 1em 1em 0 1em; /* 12px 12px 0 12px */
		display: block;
		position: absolute;
		z-index: 99;
		left: 50%; /* 1em */
		margin-left: -1em;
		top: 100%;
		}

/* arrow above border arrow */
	.tooltip:after {
		border-color: #444 transparent;
		margin-top: -2px;
		}

/* move arrow to the right */
	.popup-r:before,
	.popup-r:after {
		top: 1.25em;
		right: auto;
		bottom: auto;
		left: 0;
		border-color: transparent #ccc transparent transparent;
		border-width: 1em 1em 1em 0; /* 6px 6px 0 6px */
		}

	.popup-r:after {
		border-right-color: #fff;
		margin-top: 0;
		margin-right: 0;
		left: 1px;
		}


/* move arrow above */
	.tooltip-b:before,
	.tooltip-b:after {
		border-color: transparent transparent #fff transparent;
		border-width: 0 1em 1em; /* 6px 6px 0 6px */
		top: auto;
		bottom: 100%;
		}

	.tooltip-b:after { border-bottom-color: #444; margin-top: 0; margin-bottom: -2px; }



/* OVERRIDES
	------------------------------------------------------------------ */

.fm-reason {
	background-color: #fafafa;
	padding: 2em 2em 0;
	overflow: hidden;
	}



/* SHAME
	------------------------------------------------------------------ */



.icon-expand-w,
.icon-expand-b,
.icon-collapse-w,
.icon-collapse-b,
.icon-arrow-expand-b,
.icon-arrow-expand-w {
	margin-right: 6px;
	border: 1px solid transparent;
	}

.icon-expand-w:hover,
.icon-expand-b:hover,
.icon-collapse-w:hover,
.icon-collapse-b:hover,
.icon-arrow-expand-b:hover,
.icon-arrow-expand-w:hover { border-color: #999; }


.btn > .icon,
.dd [class*="icon-arrow"] {
	opacity: .6;
	filter: alpha(opacity=60);
	margin-right: 0;
	} /* override right margin on icon | TODO : use .mr-0 instead */

.btn:hover > .icon,
.dd:hover .icon,
.link-logout .icon {
	opacity: 1;
	filter: alpha(opacity=100);
	}







.collapsible {
	 position: relative;
	 font: 1.2em/2 Arial, sans-serif;
	 margin: 0;
	 clear: both;
	 padding: 0 10px;
	 border-top: #fff 1px solid;
	 background: #ccc;
	 text-decoration: none;
	 text-transform: uppercase;
	 color: #000;
	 cursor: pointer;
	 }

	.collapse-open {
		background: #777;
		color: #fff;
		}

	.collapse-open span, .collapse-close span {
		display: block;
		position: absolute;
		right: 10px;
		top: 0;
		}

	.collapse-open span:before { content: "-"; }

	.collapse-close span:before {
		content: "+";
		position: absolute;
		right: -2px;
		top: 3px;
		}

	.simple {
		padding-left: 18px;
		background: transparent;
		color: #000;
		}

	.simple span {
		position: absolute;
		left: 0;
		top: auto;
		}

	.simple + .collapsible-container > .collapsible-content {
		background: transparent;
		padding-left: 18px;
		}

	.collapse-open.simple span:before {
		content: "\a0\25BC";
		position: relative;
		left: -4px;
		color: #ccc;
		}

	.collapse-close.simple span:before {
		content: "\a0\25B6";
		position: relative;
		left: -2px;
		top: auto;
		color: #ccc;
		}

	div.collapsible-container {
		padding: 0;
		margin: 0;
		}

	div.collapsible-content {
		background: #f0f0f0;
		margin: 0;
		padding: 10px;
		line-height: 1.5em;
		font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
		}

	div.collapsible-content ul, div.collapsible-content p {
		padding: 0;
		margin: 0;
		}

	div.collapsible-content ul li {
		list-style-position: inside;
		line-height: 25px;
		}

	div.collapsible-content ul li a { color: #555; }





/* COURSE module
	---------------------------------------------- */
	.course {
		margin-bottom: .25em;
		border: 1px solid #ddd;
		}

		.course__row {
			background-color: #ddd;
			padding: 1.5em 1em;
			text-align: right; /* align action buttons on the right */
			overflow: hidden; /* needed for rows with floated content only (without buttons) */
			}

			.course__row > .icon {
				float:left;
				}

			.course__number,
			.course__title,
			.course__credits,
			.course__meta-links,
			.course__request-status,
			.course__request-status--denied,
			.course__request-status--pending,
			.course__request-status--approved {
				margin-right: 2em;
				text-align: left;
				float: left;
				}

			.course__title {
				font-weight: bold;
				width: 22em;
				text-transform: uppercase;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				}

			.course__request-status,
			.course__request-status--denied,
			.course__request-status--pending,
			.course__request-status--approved {
				font-weight: 700;
				text-transform: uppercase;
				padding: 0 .5em;
				text-align: center;
				}

			.course__request-status--denied { background-color: #fdd; color: #d21034; }
			.course__request-status--pending { color: #999; }
			.course__request-status--approved { background-color: #dfa; color: #571;}

			.course__request-actions {
				width: 10em;
				white-space: nowrap;
				}

			.course__request-actions > .btn,
			.row--actions > .btn {
				display: inline;
				padding: .5em;
				} /* override .btn */

		.course__notes {
			padding: 1.5em 1.5em 0;
			border-top: 1px solid #ddd;
			max-height: 10em;
			overflow: auto;
			}

.request-reason { }

	.course table,
	table table {
		font-size: 100%;
		margin: 0;
		}

	.sections {
		width: 100%;
		border-top: 3px double #ccc;
		margin: 0;
		}

	.sections th {
		border-bottom: 1px solid #bbb;
		color: #777;
		font-weight: 400;
		padding: .5em .75em;
		text-align: center;
		text-transform: uppercase;
		white-space: nowrap;
		}

	.sections td span {
		display: block;
		line-height: 1.5;
		color: #777;
		}

	.section > td {
		border-top: 3px double #ccc;
		text-align: center;
		vertical-align: middle;
		}

	.sections .meeting-times { text-align: left; }

	.meeting-times span { padding-left: 1.5em; }

	.sn { text-align: center; }

	.sn b {
		font-size: 2em;
		font-weight: normal;
		color: #fff;
		text-shadow: 0 1px 0 #555;
		}

	.sn--open, .sn--open b { background-color: #6AAB38; }

	.sn--special, .sn--special b { background-color: #FFC85F; }

	.sn--closed, .sn--closed b { background-color: #D21034; }

	fieldset:first-child { margin-top: 0; }

	legend h1 { margin: 0; }

	textarea {
		border-right: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		border-radius: 0.2em 0.2em 0.2em 0.2em;
		box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2) inset, 1px 1px 0 #FFF;
		}

	.optional {
		color: #777;
		font-weight: normal;
		}

	.reason {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		}

   select {
      font-family: Verdana, sans-serif;
      font-size: 12px;
      color: #000;
		border-width: 0;
		_font: normal 400 12px/1 Verdana, sans-serif;
		_height: 1.5em;
		}

	.select {
		display: inline-block;
		border: 1px solid red;
		border-color: #777 #ddd #ddd #777;
		margin: 0;
		padding: 2px 2px 0 0;
		background: #fff;
		}

	.select select {
		padding-bottom: 2px;
		}

	.select.error { background: #FFF7EE; } /* may not need this since the drop-down can be made to have a selection ??? */




/* ERS */
.filters {
	padding: .333333em .25em;
	border-top: 3px double #ddd;
	border-bottom: 1px solid #ddd;
	background-color: #fafafa;
	}

.dropdown {
	display: inline-block;
	position: relative;
	z-index: 1000;
	}

.dropdown__toggle { border: 1px solid transparent; display: inline-block; padding-right: .25em; line-height: normal; }

.dropdown__label { margin-right: .25em; border-right: 1px solid #eee; padding: .25em .5em; display: inline-block; }

.dropdown__toggle:hover,
.dropdown__toggle:focus,
.dropdown__toggle--active,
.dropdown__menu { border: 1px solid #ddd; background-color: #fff; border-radius: 4px; }

.dropdown__menu {
	position: absolute;
	min-width: 100%;
	}

.dropdown__toggle,
.dropdown__toggle:hover,
.dropdown__toggle:visited,
.dropdown__menu a,
.dropdown__menu a:hover,
.dropdown__menu a:focus,
.dropdown__menu a:visited {
	text-decoration: none;
	color: #36C;
	white-space: nowrap;
	}

.expanded { background-color: #fafafa; }

table.review tbody {border-top:1px solid #eee; }

th > span { font-weight: 400; }

.tr-reason td, .details, .centered .details  { background-color: #fafafa; position: relative; border-bottom: 1px solid #eee; text-align: left; }
.tr-reason b, .details b { display: block; padding-left: 1.25em; }
.tr-reason .close { display:none; line-height: 1; right: 3px; }
.tr-reason blockquote, .details blockquote { margin: .25em -.75em -.5em; border: 0; padding: .25em 2em .25em; max-height: 10em; overflow: auto; font-size: 1em; font-family: arial, sans-serif;}
.filters > .form-text { padding-top: .25em; padding-bottom: .25em; }
.filters > .btn { vertical-align: middle; }

.form-search {
	position: relative;
	padding: 1.5em;
	border-radius: 4px;
	background-color: #ccc;
	box-shadow: inset 0 -1px 0 #999;
	}
.form-search-alt {
	position: relative;
	padding: 1em 25px;
	background-color: #ddd;
	}
.form-search-alt * { vertical-align: middle; }

.form-search-alt:before,
.form-search:before {
	content: " ";
	border: solid;
	border-color: transparent transparent #ddd ;
	border-width: 0 1em 1em 1em; /* 6px 6px 0 6px */
	position: absolute;
	z-index: 99;
	left: 50%;
	margin-left: -1em;
	bottom: 100%;
	}

.form-search-alt:before {
	left: auto;
	right: 9.5em;
	margin-left: auto;
	}

.form-search-alt .field-search { border-color: #ccc; }
.form-search-alt .required { background-color: #fea; }
.form-search-alt .form-search__label { font-weight: 400; font-size: 1.8em; display: inline; vertical-align: middle; text-transform: uppercase; margin-right: .5em; }
.form-search__close { line-height: 1; padding: 0; }
.form-search__heading {}
.form-search__label { font-weight: 400; }
.form-search__btn:hover {}

.form-search input {
	border: 0;
	box-shadow: inset -1px -1px 0 #fff;
	}

.assistive-text {
	position: absolute;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	}

.field-search {
	text-align: center;
	-webkit-transition-duration: 400ms;
	-webkit-transition-property: background-color;
	-webkit-transition-timing-function: ease;
	-moz-transition-duration: 400ms;
	-moz-transition-property: background-color;
	-moz-transition-timing-function: ease;
	-o-transition-duration: 400ms;
	-o-transition-property: background-color;
	-o-transition-timing-function: ease;

	width: 3em;
	background-color: #fafafa;
	}

.field-search:focus {
	background-color: #fff;
	border-color: transparent;
	}

::-webkit-input-placeholder { color: #aaa; }
:-moz-placeholder { color: #aaa; }
::-moz-placeholder { color: #aaa; }
:-ms-input-placeholder { color: #aaa; }

a[data-toggle*="fm-reason"] {
	color: #36C;
	text-transform: uppercase;
	font-size: 10px;
	text-decoration: none;
	}