@charset "utf-8";
@import url("../css/reset.css");
@import url("../css/960.css");

/* :::::::::::::::::::::::::: VARIABLES  ::::::::::::::::::::::::::*/
:root {
    --primary: #0163b5;
    --secondary: #2ebbe2;
    --tertiary: #fb3640;
/*	--tertiary: #bdc3c6;*/

	--grey: #999;
	--lightgrey: #eee;
	--red: #ff3340;
	
	--primary-alpha: #0163b570;
	--primary-alpha-2: #00366dab;
	--secondary-alpha: #2ebbe270;
	--tertiary-alpha: #fb364070;

	--logo: url('../images/IIBEC-logo-blue.svg');
	--logo-w: url('../images/IIBEC-logo-w.svg');
}
/* :::::::::::::::::::::::::: VARIABLES  ::::::::::::::::::::::::::*/

/* ------------------------------------------
		GENERAL STYLING
--------------------------------------------- */

*, *:before, *:after { 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

body						{ font-family: Arial, Helvetica, sans-serif; background-color: #FEFEFE; font-size: 14px; color: #666; }

p								{ color: #858585; line-height: 1.5rem;margin: 1.2rem 0;}
.login p						{ color: #fff;}

h1,h2,h3,h4,h5,h6 			{ font-family: Tahoma, Geneva, sans-serif; margin-top: 10px; font-weight: normal; margin-bottom: 10px; color: var(--secondary); letter-spacing: -0.5px;}

h1 								{ font-size: 26px; }
h2 								{ font-size: 24px;}
h3 								{ font-size: 21px; }
h4 								{ font-size: 17px;}
h5 								{ font-size: 16px;}
h6 								{ font-size: 14px; font-weight: bold;}


ul 								{ margin-top: 8px; margin-bottom: 8px;}
blockquote 					{ margin:22px 40px; color:#575757; padding: 0px 50px; background: transparent url("../images/blockquote.gif") no-repeat 0 0; }



/* ================================== BOXES ================================ */

.box-1, .box-1-3, .box-1-2, .box-2-3, .box-1-4, .box-1-5 { float:left; margin-top: 10px; margin-bottom: 10px; margin-left:1%; margin-right:1%; padding:20px 10px; line-height:1.3; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position:relative;}

.box-1 { width: 100%; margin-left:0; margin-right:0; display:block; clear:both; } 

.box-1-3 { width: 31%; float:left;}
.box-1-3.nomargin { width: 32.9%; float:left; }

.box-1-2 { width: 47.5%; float:left; }
.box-1-2.nomargin { width: 49.8%; float:left; }

.box-2-3 { width: 64%; float:left; } 
.box-2-3.nomargin { width: 66.9%; float:left; } 

.box-1-4 { width: 22.1%; float:left; } 

.box-1-5 { width: 17%; float:left; } 

.l { margin-left:0; }
.r { margin-right:0; }

.floatleft {float:left}
.floatright {float:right}

.nomargin { margin:0;}
.nopadding { padding:0;}

.border { border: 1px solid #ccc; }

.box-1 h4, .box-1 h5, .box-1-3 h2, .box-1-3 h3, .box-1-3 h4, .box-1-3 h5, .box-1-2 h2, .box-1-2 h3, .box-1-2 h4, .box-1-2 h5, .box-2-3 h4, .box-2-3 h5 { line-height:1.0; margin-top:10px; }
.box-1 p, .box-1 p, .box-1-3 p, .box-1-3 p, .box-1-2 p { margin:0; padding:4px 0; }

.whitebox {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background: #FFF;
	border:1px solid #f2f2f2;
}
.greybox {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background-color: #efefef;
	border:1px solid #f3f3f3;
}
.shadow {
	-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.09);
	-moz-box-shadow:    0px 1px 5px rgba(0,0,0,0.09);
	box-shadow:         0px 1px 5px rgba(0,0,0,0.09);
	border:1px solid #f2f2f2;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.shadow:hover {
	-webkit-box-shadow: 0px 2px 11px rgba(0,0,0,0.28);
	-moz-box-shadow:    0px 2px 11px rgba(0,0,0,0.28);
	box-shadow:         0px 2px 11px rgba(0,0,0,0.28);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.height100, .height-100 { height:100px; overflow:hidden }
.height150, .height-150 { height:150px; overflow:hidden }
.height180, .height-180 { height:180px; overflow:hidden }
.height200, .height-200 { height:200px; overflow:hidden }
.height225, .height-225 { height:225px; overflow:hidden }
.height250, .height-250 { height:250px; overflow:hidden }
.height275, .height-275 { height:275px; overflow:hidden }
.height300, .height-300 { height:300px; overflow:hidden }
.height350, .height-350 { height:350px; overflow:hidden }
.height400, .height-400 { height:400px; overflow:hidden }
.height500, .height-500 { height:500px; overflow:hidden }
.height600, .height-600 { height:600px; overflow:hidden }
.height700, .height-700 { height:700px; overflow:hidden }

.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* =============================== BUTTON ================================ */

a.button, button.button {
	border-radius: 3px;
	border:0;
	color: #fff;
	display: inline-block;
	font-size: 16px;
	margin: 20px 0;
	padding: 9px 20px;
	text-align: center;
	background-color: var(--primary);
	line-height: 1;
}

a.buttonsmall, button.buttonsmall   {
	border-radius: 2px;
	border:0;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	margin: 0;
	padding: 3px 9px;
	text-align: center;
	background-color: var(--primary);
	line-height: 1;
}

a.button:hover, a.buttonsmall:hover, button.button:hover, button.buttonsmall:hover {
	color: #fff;
	background: var(--tertiary); 
	background-color: var(--tertiary); 
}

/* ======================== LOGIN FORMS ======================== */
.login {
  margin:20px auto;
  padding: 60px 140px;
  /*width: 100%;*/
  max-width: 800px;
  background-color: var(--primary);
  position: relative;
	color:#fff; 
	font-size: 18px;
}

.login h1,.login h2,.login h3,.login h4,.login h5  	{ color: #fff; }

.login input {
    display: block;
    padding: 10px;
    margin-bottom: 20px;
    width: 100%;
    border: 1px solid #FFF;
    background-color: rgba(255,255,255,0.9);
    color: #777;
    font-size: 16px;
}

.login input:focus {
  outline: none;
  color: #444;
}
.login input:focus + i.login-icon {
  opacity: 1;
  left: 23px;
  transition: all 0.25s ease-out;
}
.login a {
  font-size: 0.9em;
  color: #fff;
  text-decoration: none;
}
.login a:hover {
  color: var(--secondary);
}
.login .title {
  color: #fff;
  font-size: 2em;
  font-weight: 600;
  margin: 10px 0 20px 0;
}
.login button, form input.button {
	cursor: pointer;
	padding: 9px 24px;
  color: #fff;
  border: 2px solid #fff;
  display: inline-block;
  background: rgba(255,255,255, 0.2);
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-shadow: none;
  font-size: 1.25rem;
}
.login button:hover, form input.button:hover {
	background: rgba(0,0,0, 0.93);
	border:2px solid #fff;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.login-icon.user {
	background: url(../images/admin/login-icon-user.svg);
	width:28px;
	height:28px;
}
.login-icon.key {	
	background: url(../images/admin/login-icon-key.svg);
	width:28px;
	height:28px;
}

::-webkit-input-placeholder { /* Chrome, Safari */
   color: #bbb;
   font-size: 14px;
}

:-moz-placeholder {           /* Firefox 18- */
   color: #bbb;
   font-size: 14px;
}

::-moz-placeholder {          /* Firefox 19+ */
  color: #bbb;
  font-size: 14px;
}

:-ms-input-placeholder {      /* Internet Explorer */
  color: #bbb;
  font-size: 14px;
}

/* =================== Flex container ================= */
.flex-container {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;  /* create a flex layout context */
	padding: 0;
	margin: 0;
	list-style: none;
	-webkit-flex-flow: row wrap;
	justify-content: center;
	flex-wrap: wrap;
}

.flex-item {
	align-items:stretch;
/*	min-width:180px;*/
}



/* ------------------------------------------
		CONTROL PANEL - SETTINGS  IN HEADER
--------------------------------------------- */

#placeholder 		{
						height: 200px;
						width: 620px;
						margin-top: 10px;
						margin-bottom: 10px;
						font-size: 93%;
						color: #CCCCCC;
					}
.png_bg {}



#tooltip			{	 font-size: 10px; font-weight: bold;}
#header 			{
						background-color: var(--secondary);
						overflow: hidden;
						padding-top: 25px;
					}


/* -------------------------------------------------------
		LOGO - COULD JUST USE YORU OWN IMAGE FOR A LOGO
----------------------------------------- ----------------*/

#logo h1 {
	font-size: 32px;
	letter-spacing: -1px;
	font-family: Tahoma, Geneva, sans-serif;
	color: #F1F1F1;
	margin: 0px;
	font-weight: 400;
}

#logo h1 span 	{ font-weight: normal;}
#admin_wrapper {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 100px;
	margin-bottom: 50px;
	overflow: hidden;
	padding-top: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
	padding-left: 25px;
}
#admin_wrapper form #logo h1 {
	color: #333;
	margin-bottom: 19px;
}

#head_wrap 		{ overflow: hidden;}


/* ------------------------------------------
		CONTROL PANEL - SETTINGS  IN HEADER
--------------------------------------------- */

#controlpanel ul 		{ float: right;}
#controlpanel ul li 	{ display: inline; font-size: 11px; color: #F1F1F1;}


#controlpanel ul li a, #navigation ul li a  {
    float: left;
    display: block;
    background-color: var(--tertiary);
    text-decoration: none;
    color: #efefef;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
	border-top-color: #fff;
    border-right-color: var(--grey);
    border-bottom-color: var(--grey);
    border-left-color: #fff;
    font-weight: bold;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
}

#controlpanel ul li a:hover, #navigation ul li a:hover {
	background-color: #F2F2F2;
	color: #202020;
	border: 1px solid #F2F2F2;
}

#controlpanel ul li .last, #navigation ul li .nav_last {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #222222;
}



#controlpanel ul li p {
	padding: 6px;
	margin-right: 15px;
	float: left;
	color: #FFF;
}


/* ---------------------------------------
		NAVIGATION
----------------------------------------- */
#navigation { margin-top: 40px; }

#navigation ul li a {
	float: left;
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	padding-top: 7px;
	padding-right: 15px;
	padding-bottom: 7px;
	padding-left: 15px;
}
#navigation ul li { display: inline;}

#navigation ul li .active {
	background-color: #F2F2F2;
	color: #3F3F3F;
	border: 1px solid #F2F2F2;
}

/* ---------------------------------------
		SUBNAVIGATION
----------------------------------------- */

#sub_nav {
	background-color: #F2F2F2;
	overflow: hidden;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-top: 15px;
	padding-bottom: 15px;
}
#subnav ul li a {
	text-decoration: none;
	color: #999;
	font-size: 14px;
	float: left;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 15px;
	text-transform: uppercase;
	font-weight: bold;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCC;
}
#subnav ul li 							{ display: inline;}

#subnav ul li .sub_nav_active 			{ color: #000; font-weight: bold;}
#subnav_wrap #subnav ul li a:hover 		{ color: #333; text-decoration: underline;}
#subnav ul li .sub_nav_last 			{ border-right-style: none;}


#main_content_wrap { clear: both; margin-top: 20px; padding: 0 10px 40px; }

/* ---------------------------------------
		ICON DOCK
----------------------------------------- */

#icondock ul li a img { margin-bottom: 10px;}

#icondock ul li a {
	float: left;
	height: 60px;
	width: 60px;
	padding: 15px;
	margin-right: 12px;
	position: relative;
	text-decoration: none;
	border: 1px solid #CCC;
	background-color: #F2F2F2;
	margin-bottom: 20px;
	margin-left: 0px;
	text-align: center;
	color: #666;
	font-size: 12px;
	font-weight: bold;
	margin-top: 5px;

	/*Mozilla Browsers Only */
	-moz-border-radius: 5px;

}
#icondock ul li 						{ display: inline;}
#icondock ul li a:hover 				{ background-color: #FFF; border: 1px solid #999; color: #333;}

#icondock ul li a span {
	position: absolute;
	height: 8px;
	text-decoration: none;
	background-color: #E60000;
	padding: 7px;
	color: #FFF;
	font-weight: bold;
	font-size: 9px;
	left: 75px;
	top: -8px;
	right: 0px;
	bottom: 0px;
	line-height: 9px;
	width: 8px;
	text-align: center;
	z-index: 1;

	/*Mozilla Browsers Only */
	-moz-border-radius: 5px;

}

/* ---------------------------------------
		NOTICES
----------------------------------------- */

#notices 			{ clear: both;}
#notices ul li a 		{
	display: block;
	height: 16px;
	line-height: 16px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 25px;
}

#notices ul li a 			{ font-size: 11px; text-decoration: none; color: #666;}
#notices ul li a:hover	 	{ text-decoration: underline;}


/*  These are the styles for the notices. Because you could use them for almost everything, I've
	left them as generic class names and used 7 different 16 x 16 icons from the FAT COW HOSTING ICONS

	You can download the full set from http://www.fatcow.com/free-icons

*/

.notice-icon1, .notice-icon2, .notice-icon3, .notice-icon4, .notice-icon5, .notice-icon6 , .notice-icon7 {
	background-repeat: no-repeat;
	background-position: left center;
}

.notice-icon1 { background-image: url(../images/icondock/16x16/comment_add.png);}
.notice-icon2 { background-image: url(../images/icondock/16x16/wishlist_add.png);}
.notice-icon3 { background-image: url(../images/icondock/16x16/date_add.png);}

.notice-icon4 { background-image: url(../images/icondock/16x16/newspaper_add.png);}
.notice-icon5 { background-image: url(../images/icondock/16x16/basket.png);}
.notice-icon6 { background-image: url(../images/icondock/16x16/bell.png);}
.notice-icon7 { background-image: url(../images/icondock/16x16/support.png);}


.btn-del, .btn-reply {
	text-decoration: none;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 30px;
	display: block;
	float: left;
	margin-right: 5px;
	color: #999;
	text-transform: uppercase;
	font-size: 11px;
	-moz-border-radius: 5px;
	line-height: 16px;
	height: 16px;
}

.btn-del:hover, .btn-reply:hover	{ color: #666; }
.btn-del { background-image: url(../images/email_delete.png); background-repeat: no-repeat; background-position: 5px; }
.btn-reply { background-image: url(../images/email_edit.png); background-repeat: no-repeat; background-position: 5px; }

/* -------------------------------------------
		NOTIFICATIONS
-------------------------------------------- */

.notification {
	cursor: pointer;
	clear: both;
	height: 40px;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	padding-top: 15px;
	padding-right: 30px;
	padding-bottom: 15px;
	padding-left: 65px;
	font-size: 12px;
	position: relative;
}
.notification  p {
	color: #333;
	line-height: 40px;
}

.warning {
	background-image: url(../images/icondock/error.png);
	background-position: 15px center;
	background-repeat: no-repeat;
	border: 2px solid #FFC44A;
	background-color: #FFDB91;
}
.success {
	background-image: url(../images/icondock/accept.png);
	background-position: 15px center;
	background-repeat: no-repeat;
	border: 2px solid #99C600;
	background-color: #E2FF7D;
}

.failure {
	background-image: url(../images/icondock/exclamation.png);
	background-position: 15px center;
	background-repeat: no-repeat;
	border: 2px solid #EB5339;
	background-color: #F5B5A9;
}

.information {
	background-image: url(../images/icondock/information.png);
	background-position: 15px center;
	background-repeat: no-repeat;
	border: 2px solid #418ACC;
	background-color: #B3CFEA;
}

.lightbulb {
	background-image: url(../images/icondock/lightbulb.png);
	background-position: 15px center;
	background-repeat: no-repeat;
	border: 2px solid #D3A350;
	background-color: #FEEFCB;
}

.messages {
	background-image: url(../images/icondock/email.png);
	background-position: 15px center;
	background-repeat: no-repeat;
	border: 2px solid #42B4FF;
	background-color: #9DDFFF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 0px;
}

.message p {
	font-size: 20px;
	color: #5e1111;
	line-height: 20px;
	font-weight: bold;
}

.message-error p {
	font-size: 20px;
	color: red;
	line-height: 20px;
	font-weight: bold;
}

.message-success p {
	font-size: 20px;
	color: green;
	line-height: 20px;
	font-weight: bold;
}

.message h3 {
	font-size: 22px;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: normal;
	padding-bottom: 8px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	margin-bottom: 10px;
	margin-top: 10px;
}

.message h3 span	{
	font-size: 14px;
	color: #999;
	font-style: italic;
}


/* ---------------------------------------
		TABLE STYLING
----------------------------------------- */

	td 			{
	padding: 8px;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #E5E5E5;
}
	th 			{
	color: #333333;
	text-align: left;
	background-color: #EBEBEB;
	padding: 7px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999;
}

/* ----------------------------
		TABLE AND LINKS
------------------------------ */

table 				{
	width: 100%;
	color: #217EBC;
	padding: 5px;
	margin-top: 7px;
	margin-bottom: 7px;
}
td a, td a:visited	{ color: #258CD1;}

/*This is for the zebra striping */
.even { background-color: #F0F0F0;}

table.dataTable tbody tr:hover, tr:hover {background-color: #f2f2f2;}


/* ----------------------------
		TIPSY TOOLTIPS
------------------------------ */
.tipsy {
	padding: 5px;
	font-size: 10px;
	opacity: 0.8;
	filter: alpha(opacity=80);
	background-repeat: no-repeat;
	background-image: url(../images/tipsy.gif);
	margin-top: 12px;
}
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
  .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-north { background-position: top center; }
  .tipsy-south { background-position: bottom center; }
  .tipsy-east { background-position: right center; }
  .tipsy-west { background-position: left center; }



/* ----------------------------
		FORMS
------------------------------ */

/* ------------ SUBMIT BUTTONS ------------ */

	form input.submit {
	line-height: 15px;
	border: 0;
	font-size: 9px;
	font-weight: normal;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	vertical-align: middle;
	background-color: #00769D;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height: 25px;
	background-image: url(../images/button_highlighter.png);
	background-repeat: repeat-x;
	margin-top: 0px;
	margin-right: 7px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
		}

form input.submit.special	{ background-color: #000000; }
form input.submit:hover 	{ text-decoration: underline; background-color: #333333;}

form p {
	overflow: hidden;
	clear: both;
	margin-top: 15px;
	margin-bottom: 12px;
	padding-top: 5px;
	padding-bottom: 5px;
	}
form label {
	font-size: 13px;
	font-weight: bold;
	color: #555;
	margin-right: 10px;
	vertical-align: middle;
	text-transform: uppercase;
	clear: both;
	}
form div.form-row label { display: inline; }
form p .valid {
	color: #090;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	margin-left: 8px;
}
form p .error {
	color: #900;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	margin-left: 8px;
}


form input.text {
	width: 410px;
	background: #fefefe;
	border: 1px solid #bbb;
	font-size: 14px;
	color: #333;
	padding: 7px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	vertical-align: middle;
	clear: both;
	margin-top: 8px;

	}

form input.text.medium { width: 600px; }
form input.text.large { width: 93%; }
form input.text.cal { width: 120px; margin-right: 10px; }


form textarea {
	width: 98%;
	height: 140px;
	padding: 5px;
	background: #fefefe;
	border: 1px solid #bbb;
	font-size: 14px;
	color: #333;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	outline: none;
	margin-top: 15px;
	}

input.text:focus, #forms form textarea:focus
	{ background-color: #F2F2F2; border: 1px solid #999999;}
form .select					{
	padding: 2px;
	height: 25px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
	background-image: url(../images/button_highlighter.png);
	background-repeat: repeat-x;
}

/* --------------------------------------------------------------
   IMAGE GALLERY
-------------------------------------------------------------- */


.imglist li
{
	list-style-type: none;
	display: block;
	border: 1px solid #CCC;
	float: left;
	margin: 7px;
	padding: 7px;
	float: left;
	position: relative;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	text-align: center;
	}


.imglist li:hover { border-color: #999; }

.imglist li .actions
{
	width: 100px;
	height: 100px;
	display: block;
	z-index: 10;
	position: absolute;
	text-align: center;
	left: 0;
	top: 0px;
	display: none;
	padding: 5px;
	line-height: 100px;
}



.imglist li:hover .actions { display: block; }

a.imglistbutton	{
	background-color: #FFF;
	padding: 9px;
	height: 16px;
	width: 16px;
	display: block;
	border: 1px solid #FFF;

}

a.imglistbutton:hover	{ background-color: #EBEBEB; border: 1px solid #CCC;
}

/* ----------------------------
		PAGINATION
------------------------------ */


#pagination li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination a           {
	border:1px solid #CCC;
	margin-right:2px;
	color: #00769D;
}
#pagination .previous-off,
#pagination .next-off   {
	border:solid 1px #DEDEDE;
	color:#888888;
	display:block;
	float:left;
	font-weight:bold;
	margin-right:2px;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 6px;
	padding-left: 8px;
}
#pagination .next a,
#pagination .previous a { font-weight:bold; }
#pagination .active     {
	color:#FFFFFF;
	font-weight:bold;
	display:block;
	float:left; /* savers */
	margin-right:2px;
	background-color: #00769D;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 6px;
	padding-left: 8px;
}
#pagination a:link,
#pagination a:visited   {
	color:#00769D;
	display:block;
	float:left;
	text-decoration:none;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 6px;
	padding-left: 8px;
}
#pagination a:hover     { border:1px solid #00769D;}



/* ----------------------------
		TABS
------------------------------ */

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	width: 100%;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #ccc;
	border-left-color: #ccc;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #ccc;
	border-right-color: #ccc;
	border-bottom-color: #ccc;
	border-left-color: #ccc;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}


.tab_container {
	overflow: hidden;
	clear: both;
	float: left;
	width: 100%;
	background: #fff;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ccc;
	border-right-color: #ccc;
	border-bottom-color: #ccc;
	border-left-color: #ccc;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}



/* ----------------------------
		ACCORDION
------------------------------ */


h3.acc_trigger {
	padding: 0;
	height: 46px;
	line-height: 46px;
	font-size: 20px;
	font-weight: normal;
	background-image: url(../images/h2_trigger_a.gif);
	background-repeat: no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 0;
	text-decoration: none;
	letter-spacing: -1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
h3.acc_trigger a {
	color: #555555;
	text-decoration: none;
	display: block;
	padding: 0 0 0 50px;
}
h3.acc_trigger a:hover {
	color: #000;
}
h3.active {background-position: left bottom;}
.acc_container {
	margin: 0 0 5px;
	padding: 0;
	overflow: hidden;
	clear: both;
	background: #f0f0f0;
	border: 1px solid #d6d6d6;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.acc_container .block {
	padding: 20px;
}





/* ----------------------------
		FOOTER
------------------------------ */

#footer		{ text-align: center; font-size: 11px; margin-top: 12px; margin-bottom: 12px;}
#footer a 	{ color: #00769D;}

/* ----------------------------
		WYSIWYG EDITOR
------------------------------ */

div.wysiwyg {
	border: 1px solid #bbb;
	padding: 0;
	background-color: #fefefe;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	width: 880px !important;
}

div.wysiwyg * { margin: 0; padding: 0; outline: none; }

div.wysiwyg ul.panel {
	border-bottom: 1px solid #cccccc;
	float: left;
	width: 875px;
	padding: 5px;
	margin: 0;
}

div.wysiwyg ul.panel li 				{ list-style-type: none; float: left; padding: 0; margin: 2px 2px 3px 0;  background: #ffffff; height: 16px; overflow: hidden; }
div.wysiwyg ul.panel li.separator 	{ height: 16px; margin: 3px 4px 0; border-left: 1px solid #cccccc; }
div.wysiwyg ul.panel li a 			{ text-indent: -5000px; opacity: 0.85; filter:alpha(opacity=85); display: block; width: 16px; height: 16px; background: url('../assets/img/admin/jquery.wysiwyg.gif') no-repeat -64px -80px; border: 0; cursor: pointer; padding: 0; margin: 1px; }
div.wysiwyg ul.panel li a:hover, div.wysiwyg ul.panel li a.active { opacity: 1.00; filter:alpha(opacity=100); }
div.wysiwyg ul.panel li a.active 	{ background-color: #f9f9f9; border: 1px solid #cccccc; border-left-color: #aaaaaa; border-top-color: #aaaaaa; padding: 0; }

div.wysiwyg ul.panel li a.bold 			{ background-position: 0 -17px; }
div.wysiwyg ul.panel li a.italic 		{ background-position: -16px -17px; }
div.wysiwyg ul.panel li a.strikeThrough 	{ background-position: -32px -17px; }
div.wysiwyg ul.panel li a.underline 		{ background-position: -48px -16px; }

div.wysiwyg ul.panel li a.justifyLeft 	{ background-position: 0 0; }
div.wysiwyg ul.panel li a.justifyCenter 	{ background-position: -16px 0; }
div.wysiwyg ul.panel li a.justifyRight 	{ background-position: -32px 0; }

div.wysiwyg ul.panel li a.indent 		{ background-position: -64px 0; }
div.wysiwyg ul.panel li a.outdent 		{ background-position: -80px 0; }

div.wysiwyg ul.panel li a.subscript 		{ background-position: -64px -16px; }
div.wysiwyg ul.panel li a.superscript 	{ background-position: -80px -16px; }

div.wysiwyg ul.panel li a.undo 			{ background-position: 0 -63px; }
div.wysiwyg ul.panel li a.redo 			{ background-position: -16px -65px; }

div.wysiwyg ul.panel li a.insertOrderedList 		{ background-position: -32px -48px; }
div.wysiwyg ul.panel li a.insertUnorderedList 	{ background-position: -16px -48px; }
div.wysiwyg ul.panel li a.insertHorizontalRule 	{ background-position: 0 -48px; }

div.wysiwyg ul.panel li a.h1 					{ background-position: 0 -32px; }
div.wysiwyg ul.panel li a.h2 					{ background-position: -16px -32px; }
div.wysiwyg ul.panel li a.h3 					{ background-position: -32px -32px; }
div.wysiwyg ul.panel li a.h4 					{ background-position: -48px -32px; }
div.wysiwyg ul.panel li a.h5 					{ background-position: -64px -32px; }
div.wysiwyg ul.panel li a.h6 					{ background-position: -80px -32px; }

div.wysiwyg ul.panel li a.cut 					{ background-position: -32px -64px; }
div.wysiwyg ul.panel li a.copy 					{ background-position: -48px -64px; }
div.wysiwyg ul.panel li a.paste 					{ background-position: -64px -64px; }

div.wysiwyg ul.panel li a.increaseFontSize 		{ background-position: -16px -80px; }
div.wysiwyg ul.panel li a.decreaseFontSize 		{ background-position: -32px -80px; }

div.wysiwyg ul.panel li a.createLink 			{ background-position: -80px -48px; }
div.wysiwyg ul.panel li a.insertImage 			{ background-position: -80px -80px; }

div.wysiwyg ul.panel li a.html 					{ background-position: -47px -46px; }
div.wysiwyg ul.panel li a.removeFormat			{ background-position: -80px -64px; }

div.wysiwyg ul.panel li a.empty					 { background-position: -64px -80px; }

div.wysiwyg iframe { border: 0; clear: left; margin: 0; width: 860px !important; min-height: 500px !important; padding: 10px; }

.clearfix:before, .clearfix:after { content:""; display:table; }
.clearfix:after { clear:both; }
.clearfix { zoom:1; }

.pagination a, .pagination strong { display: inline-block; margin-right: 8px; font-size: 16px; font-weight: bold; }
.pagination a { color: #258CD1; text-decoration: none; }
.pagination a:hover { text-decoration: underline; }

table.data_horiz th { border-top: none; border-bottom: 1px solid #e5e5e5; background: none; }

.form-group {
	margin: 10px 0;
}

#generate_invoice_status .loading-spinner { display: none; }
#generate_invoice_status.loading .submit-btn { display: none; }
#generate_invoice_status.loading .loading-spinner { display: block; }

/* event reg styles */
.field-option {
	border: thin solid;
	padding: 10px;
	margin: 10px 0;
}
.field-option .control-group {
	display: inline-block;
	margin-right: 10px;
}


.ui-widget-overlay
{
  opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;

  background: rgb(50, 50, 50) !important; /* This will make it darker */
}


/* =================== START Mobile Overrides ================= */

@media screen and (max-width: 780px) {
	#admin_wrapper {
		width: 100%;
		margin-top: 50px;
		margin-bottom: 25px;
		 padding-top: 10px; 
		 padding-right: 10px; 
		 padding-bottom: 10px; 
		 padding-left: 10px; 
	}
	.login {
		padding: 20px;
	}
	h1 {
		font-size: 24px;
	}
}
/* =================== END Mobile Overrides ================= */