/*

----------------------------------------------------
--- FINAL
----------------------------------------------------
PMS 286 C 	- 17468F - Main Blue - OI Text
PMS 872 C 	- 8E744B - Dark Gold-Brown - OI Logo foreground
PMS 7499 C	- F3E7B2 - cream - oi logo background
		 	- 000000 - black 
		 	- FFFFFF - white

PMS 294 C 	- 002F6C - darker blue
PMS 123 C 	- FFC72C - light gold/yellow
PMS 291 C 	- 9BCBEB - cyan
PMS 418 C 	- 51534A - dark gray
Warm Grey 1C- D7D2CB - warm gray

*/


a.PageButton, a.PageButtonSmall, a.PageButtonTiny, a.LeadersMenuButton, a.LeadersMenuButtonSel,
a.PageButtonSel, a.PageButtonBig, a.PageButtonHuge, input.PageButton, input.PageButtonSmall,
.ui-dialog-buttonset button, .gsc-search-button input, 
button.PageButton, button.PageButtonSmall
{ 
    line-height:100%;

	display:inline-block;
	margin:3px 5px 5px;
	padding:3px 15px;

	font-size:9pt;
	font-weight:bold;
	text-align:center; 

	color:#17468F;
	background-color:#F3E7B2;
	border:solid 1px #8E744B;
	border-radius:5px;

	text-decoration:none;	
}

a.PageButtonSel { 
	color:#FFF;
	background-color:#8E744B;
}


.ui-dialog-buttonset button {
	border-radius:5px;
	margin:2px 5px;
	padding:2px 8px;
	font-size:8pt !important; 
	font-weight:normal;
}


a.PageButtonSmall, input.PageButtonSmall, button.PageButtonSmall {
	border-radius:5px;
	margin:2px 5px;
	padding:2px 8px;
	font-size:8pt; 
	font-weight:normal;
}

a.PageButtonTiny {
	border-radius:5px;
	margin:1px 0px;
	padding:1px 3px;
	font-size:7pt !important; 
	font-weight:normal;
}

a.PageButtonBig, a.PageButtonHuge {
	border-radius:5px;
	margin:5px 10px;
	padding:10px 15px;
	font-size:14pt; 
}


a.LeadersMenuButtonSel { 
	color:#FFF;
	background-color:#8E744B;
}

a.PageButton:hover, a.PageButtonSmall:hover, a.PageButtonTiny:hover, a span.PageButton:hover, a.LeadersMenuButton:hover,
a.PageButtonBig:hover, a.PageButtonHuge:hover, input.PageButton:hover, input.PageButtonSmall:hover, a.PageButtonSel:hover,
.ui-dialog-buttonset button:hover,
button.PageButton:hover, button.PageButtonSmall:hover
{ 
	color:#000;
	background-color:#FFC72C;
	text-decoration:none;	
	cursor:pointer; 
	cursor:hand;
}

a.PageButtonSel:hover { 
	color:#FFF;
	background-color:#C69C38;
}



a.LeadersMenuButtonSel:hover { 
	color:#FFF;
	background-color:#C69C38;
	text-decoration:none;	
	cursor:pointer; 
	cursor:hand;
}

a.PageButton:visited, a.PageButtonSmall:visited, a.PageButtonTiny:visited, a span.PageButton:visited, a.LeadersMenuButton:visited { 
	text-decoration:none;	
}

a.PageButton span, a.PageButtonSmall span, a.PageButtonTiny span {  /* change color back, if color was cahnged by another class */
	color:#17468F;
}




div.Arrow {
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	width:15px;
	height:15px;
}

div.ArrowFirst {
	background-image:url('../gif/page_first_sico.gif');
}

div.ArrowPrevious {
	background-image:url('../gif/page_previous_sico.gif');
	background-size:80%;
}

div.ArrowNext {
	background-image:url('../gif/page_next_sico.gif');
	background-size:80%;
}

div.ArrowLast {
	background-image:url('../gif/page_last_sico.gif');
}


/* button left-margin spacing */
a.pad10	 { margin-left:10px; }
a.pad20, span.pad20  { margin-left:20px; }
a.pad25	 { margin-left:25px; }
a.pad30, span.pad30 { margin-left:30px; }
a.pad40  { margin-left:40px; }
a.pad50, span.pad50 { margin-left:50px; }
a.pad100 { margin-left:100px; }
a.pad150 { margin-left:150px; }
a.pad200 { margin-left:200px; }
a.pad250 { margin-left:250px; }
a.pad300 { margin-left:300px; }
a.pad400 { margin-left:400px; }
a.pad500 { margin-left:500px; }

a.padR10  { margin-right:10px; }
a.padR20  { margin-right:20px; }
a.padR25  { margin-right:25px; }
a.padR30  { margin-right:30px; }
a.padR40  { margin-right:40px; }
a.padR50  { margin-right:50px; }
a.padR100 { margin-right:100px; }
a.padR200 { margin-right:200px; }
a.padR300 { margin-right:300px; }
a.padR400 { margin-right:400px; }
a.padR500 { margin-right:500px; }

.debug { border: 1px dotted #446688; }






/* Mainly used in   /include/isLoggedIn.inc */
div.LeadersMenuBar {
	font-size:9pt;
	color:#000;
	background-color:#E7EEF6;
	border-top:solid 1px #86A9CE;
	border-bottom:solid 1px #3868A6;
	margin:0; 
	padding:3px 0; 
	text-align:center;
}

div.LeadersMenuBarButtons { 
	width:100%;
	max-width:100%;
	
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
	-webkit-flex-wrap:wrap;
	flex-flow:wrap;
	
	-webkit-box-align:center;
	-moz-box-align:center;
	-ms-flex-align:center;
	-webkit-align-items:center;
	
	align-items:center;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-ms-flex-pack:center;
	-webkit-justify-content:center;
	justify-content:center;
	
}  
	
div.LeadersMenuBarButtons a {
	width:auto;
	min-width:225px;
	max-width:225px;
	text-align: center;
	
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
}


/* Mainly used in   /leaders/SelectClub.cfm */
div.OfficersSelRow {
	width:100%;
	height:auto;
	
	display:-webkit-flex; /* Safari */
	-webkit-flex-wrap:wrap; /* Safari 6.1+ */
    display:flex;
	flex-flow:wrap;
}

div.OfficerBox, div.OfficerBoxSel {
	display:inline-block;
	position:relative;
	float:none;

	font-size:8pt;
	margin:2px 5px 0 0;
	padding:3px 10px;

	text-align:center;
	vertical-align:top;

	color:#17468F;
	background-color:#F3E7B2;
	border:solid 1px #8E744B;
	border-radius:5px;

	width:auto;
	height:auto;
}

div.OfficerBoxSel:hover { 
	color:#000;
	background-color:#FFC72C;
	cursor:pointer;	
}


div.ClubSelButtons { 
	display:-webkit-flex; /* Safari */
	-webkit-flex-wrap:wrap; /* Safari 6.1+ */
    display:flex;
	flex-flow:wrap;
}  
	
div.ClubSelButtons a {
	-webkit-flex: 1;  /* Safari 6.1+ */
	-ms-flex: 1;  /* IE 10 */    
	flex: 1;
}


div.OfficerSelect {
	display:block;
	width:100%;
	height:auto;

	margin:2px 5px 2px 5px;
	padding:0;

	display:-webkit-flex; /* Safari */
	-webkit-flex-wrap:wrap; /* Safari 6.1+ */
    display:flex;
	flex-flow:wrap;
	
	align-items:left;
	/*
	align-items: center;
	justify-content: center;
	*/
}

div.OfficerSelect a {
	width:auto;
	min-width:300px;
	max-width:400px;
	margin:2px 5px 2px 5px;
	padding:3px;
}

div.lvlZoneBlock {
	display:block;
	width:100%;
	height:auto;

	margin:2px 5px 10px 5px;
	padding:0;

	display:-webkit-flex; /* Safari */
	-webkit-flex-wrap:wrap; /* Safari 6.1+ */
    display:flex;
	flex-flow:wrap;
	
	/*border:2px dotted #266;*/
}


div.lvlZoneBlock a {
	width:auto;
	min-width:200px;
	
	margin:2px 5px 3px 5px;
	padding:3px 5px 3px 5px;
	text-align:left;
	width:auto;
	font-size:9pt;
}



/* Mainly used in   /leaders/reports/reports.cfm */
span.Button_ReportMenu { 
	display:inline-block;
	margin:2px;
	padding:3px 8px;

	color:#77084C; 
	font-size:0.8em; 
	font-weight:normal; 
	text-align:center; 

	background-color:#F8C638;
	border:solid 1px #F8C638;
	border-radius:10px;
}

span.Button_SelectDistrict, a.Button_SelectDistrict { 
	display:inline-block;
	margin:2px;
	padding:3px 8px 2px 8px;

	color:#77084C; 
	font-size:1.0em; 
	font-weight:normal; 
	text-align:center; 

	background-color:#F8C638;
	border:solid 1px #F8C638;
	border-radius:7px;
}

span.Button_SelectZone, a.Button_SelectZone { 
	display:inline-block;
	margin:2px;
	padding:3px 8px 1px 8px;

	color:#77084C; 
	font-size:1.0em; 
	font-weight:normal; 
	text-align:center; 

	background-color:#F8C638;
	border:solid 1px #F8C638;
	border-radius:8px;
}

span.Button_SelectClub1, a.Button_SelectClub1 { 
	display:inline-block;
	margin:1px 0 3px 10px;
	padding:2px 5px;
	width:98%;
	
	font-weight:normal; 
	text-align:left; 

	color:#17468F; 
	background-color:#F3E7B2;
	border:solid 1px #8E744B;
	border-radius:5px;
}

span.Button_SelectClub2, a.Button_SelectClub2 { 
	display:inline-block;
	margin:1px;
	padding:1px 3px;
	width:98%;
	
	color:#77084C; 
	color:#000; 
	font-weight:normal; 
	text-align:left; 

	background-color:#F2E2D9;
	border-radius:4px;
}

a.Button_SelectClub1:hover {
	color:#000; 
	background-color:#FFC72C;
	text-decoration:none;
	cursor: pointer; cursor: hand; 	
}



div.OfficersBlock {
	font-size:9pt;
	
	text-align:center;
	
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: flex-start;
	
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
    display:flex;
	flex-flow:wrap;
}

div.OfficersBlock a {
	width:auto;
	min-width:250px;
	max-width:250px;
	margin:2px 5px 3px 5px;
	padding:3px 5px 3px 10px;

	color:#000;
	background-color:#F8F1D6;
	border:solid thin #8E744B;

	text-align:center;
	font-size:10pt;
	font-weight:normal;
	text-decoration:none;	
	border-radius:5px;

	-webkit-flex:1;  /* Safari 6.1+ */
	-ms-flex:1;  /* IE 10 */    
	flex:1;
}

div.OfficersBlock a:hover {
	background-color:#FFE18E;
}

div.OfficersBlock span {
	width:auto;
	min-width:250px;
	max-width:250px;
	margin:2px 5px 3px 5px;
	padding:3px 5px 3px 10px;

	text-align:left;
	font-size:10pt;
	font-weight:normal;
	text-decoration:none;	
	border-radius:5px;

	-webkit-flex:1;  /* Safari 6.1+ */
	-ms-flex:1;  /* IE 10 */    
	flex:1;
}




div.MemberBlock {
	font-size:9pt;
	/*height:200px;*/
	
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
    display:flex;
	flex-flow:wrap;
	/*flex-direction:column;*/
	flex-direction:row;
}

div.MemberBlock > a {
	width:auto;
	min-width:300px;
	max-width:300px;
	
	margin:2px 5px 3px 5px;
	padding:3px 5px 3px 10px;

	color:#000;
	background-color:#F8F1D6;
	border:solid thin #8E744B;
	
	text-align:left;
	font-size:10pt;
	font-weight:normal;
	text-decoration:none;	
	border-radius:5px;

	-webkit-flex:1;  /* Safari 6.1+ */
	-ms-flex:1;  /* IE 10 */    
	flex:1;
}

div.MemberBlock > a:hover {
	background-color:#FFE18E;
}


div.MemberBlock > a.Adjustment {
	background-color:#CFF7E8;
}

div.MemberBlock > a.Adjustment:hover {
	background-color:#D1D6A9;
}



div.ReportsSections {
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
    display:flex;
	flex-flow:wrap;
	flex-direction:row;
	justify-content:center;
	width:auto;
}


div.ReportsSections div.ReportsButtonsBox { 
	background-color:#F7F7F6;
	border:solid 1px #B8DAF1;
	border-radius:5px;
	
	margin:5px 10px 10px 0;
	padding:10px 10px 10px 10px;

	min-width:300px;
	/*max-width:auto;*/
	/*max-width:600px;*/
	max-width:33%;
	z-index:1;
}


div.ReportsButtonsHeader { 
	position:relative;
	font-size:10pt;
	font-weight:bold;
	color:#000;
	background-color:#E7EEF6;
	border:solid 1px #3868A6;
	border-radius:5px 5px 0 0;
	margin:0; 
	padding:3px 5px; 
	text-align:left;
	
	left:-11px;
	top:-11px;
	width:100%;
	width:calc(100% + 22px);  /* cool trick */
	z-index:2;
}

div.ReportsButtonsHeader span { 
	font-size:8pt;
	font-weight:normal;
	font-style:italic;
	padding-left:10px;
}


div.ReportsButtons { 
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
	-webkit-flex-wrap:wrap;
	flex-flow:wrap;

	align-items: center;
	justify-content: center;
	/*
	*/
	margin:2px 5px 2px 5px;
}  
	
div.ReportsButtons a {
	width:auto;
	min-width:100px;
	max-width:350px;
	text-align:center;
	
	/*
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	*/
	margin:2px 5px 2px 5px;
	padding:3px 10px;
}

div.LeadersButtons {
	padding: 3%;
	height: 100%;
	background-color: #FFF;
  	
	margin-top:5px;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
  
	-webkit-flex-flow: row wrap;
	justify-content: flex-right;
	justify-content: center;
}

div.LeadersButtons a, div.LeadersButtons button {
	border:thin solid #8E744B;
	margin-right:30px;
	vertical-align:middle;
}

a.TextMoveDown {
	padding-top:8px;
}

div.LeadersBottomButtons, div.LeadersTopButtons, div.ReportButtons, div.RptBtns {
	padding:3%;
	/*height:100%;*/
	width:100%;
	background-color: #FFF;
  	
	margin-top:5px;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
  
	-webkit-flex-flow: row wrap;
	justify-content: center;
}

div.LeadersTopButtons {
	margin-top:0;
}

div.LeadersBottomButtons a, div.LeadersTopButtons a, div.ReportButtons a {
	border:thin solid #8E744B;
	margin:10px;
	
	width:auto;
	min-width:200px;
	max-width:200px;
	text-align:center;
}

div.LeadersBottomButtons a, div.LeadersTopButtons a {
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
}

/* Generic Flex Button */

div.FlexSelect {
	font-size:9pt;
	
	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
    display:flex;
	flex-flow:wrap;
	flex-direction:row;
}

div.FlexSelect > div {
	width:auto;
	min-width:100px;
	max-width:800px;
	
	margin:2px 5px 3px 5px;
	padding:3px 5px 3px 10px;

	color:#000;
	background-color:#FDFCF4;
	border:solid thin #FFC72C;
	
	text-align:left;
	font-size:10pt;
	font-weight:normal;
	text-decoration:none;	
	border-radius:5px;
	
	height:auto;

	/*-webkit-flex:1;*/  /* Safari 6.1+ */
	/*-ms-flex:1;*/  /* IE 10 */    
	flex:none;
}

div.FlexSelect > div:hover {
	background-color:#FFE18E;
}

div.FlexSelect > div > a {
	display:inline;
	position:relative;
	float:right;
	margin-right:5px;
	margin-left:5px;
}

div.FlexSelect > div.fcHiLit {
	background-color:#FFC72C;	
}