/**********************************************************************
 **********************************************************************
 GLOBAL

 NOTE:
 Structure is enhanced with jquery. See config.structure.php and
 config.structure.js located in the '/common/js/' directory.

 **********************************************************************
 **********************************************************************/


/**************************************************
     Variables
 **************************************************/
:root{

	/*Body*/
	--body--width: 100%;
	--body--min-width: 360px;
	--container-outer--width: 100%;
	--container-inner--width: var(--container-outer--width);


	/*Container*/
	--container-inner--height: calc(100% - var(--header-total--height) - var(--footer-total--height));


	/*Header*/
	--header-outer-1--height: 90px;
	--header-outer-2--height: 0px;
	--header-outer-3--height: 0px;
	--header-outer--height: calc(var(--header-outer-1--height) + var(--header-outer-2--height) + var(--header-outer-3--height));
	--header-inner--height: 0px;
	/*--header-total--height: 90px;*/
	--header-total--height: calc(var(--header-outer--height) + var(--header-inner--height));


	/*--content-left--display: */
	--content-left--width: 180px;
	--content-right--width: 180px;
	/*--content-center--width: calc(100% - (var(--content-left--width) + var(--content-right--width)));*/
	--content-center--width: 100%;

	/*border width*/
	--border-width-1: 1px;
	--border-width-1-combined: 2px;

	/*padding*/
	--container-padding: 10px;
	--container-padding-combined: 20px;

	/*scroll offset*/
	/*--scroll-offset: 110px;*/
	/*--scroll-offset: 116px;*/
	/*--scroll-offset: 134px;*/

	/*sidebar*/
	--sidebar-width: 150px;
	--sidebar-width-right: 150px;


	/*Footer*/
	--footer-outer-1--height: 0px;
	--footer-outer-2--height: 0px;
	--footer-outer-3--height: 50px;
	--footer-outer--height: calc(var(--footer-outer-1--height) + var(--footer-outer-2--height) + var(--footer-outer-3--height));
	--footer-inner--height: 0px;
	/*--footer-total--height: 50px;*/
	--footer-total--height: calc(var(--footer-outer--height) + var(--footer-inner--height));





}


/**************************************************
     Global Styles
 **************************************************/
/**{*/
/*margin: 0 auto;*/
/*padding: 0;*/
/*}*/

/*html, body{*/
/*height: 100%;*/
/*}*/

/*body{*/
/*background-color: var(--body--background-color);*/
/*background-image: var(--body--background-image);*/
/*background-repeat: repeat;*/
/*background-position: center center;*/
/*background-attachment: fixed;*/
/*background-size: cover;*/
/*}*/


/**********************************************************************
 **********************************************************************
 CONTAINERS

 There are several nested containers or wrappers that are used to set
 the formatting of the application. They are as follows.

 body
 container_outer
 container_outer_pad (buffer pad between outer and inner containers
 container_inner

 **********************************************************************
 **********************************************************************/


/**************************************************
 This div is the top level container that allow
 nested containers to be aligned relative to it.
 It should remain fixed at 100% width.
 **************************************************/
#body{
	/*position: relative;*/
	display: block;
	width: 100%;
	/*min-width: var(--body--min-width);*/
	height: 100%;
	/*position:fixed;*/
}


/**************************************************
 This div is the second highest level container and
 is parent to three outer headers and footers as well
 as #container_inner which contains main content.
 **************************************************/
#container-outer{
	position: relative;
	/*display: none;*/ /*This is for testing purposes only, as it will hide all nested elements when set to none.*/

	/**************************************************
     This is for limiting the width of the outer
     container. Container will align center.
     **************************************************/
	max-width: var(--container-outer--width);
	/*max-width: 1000px;*/
	/*min-width: 800px;*/
	height: 100%;


	/**************************************************
     This is for adding a border to the outer container
     for aesthetic purposes.

     These should remain commented if #container_outer
     max-width is not set, though not required.
     **************************************************/
	/*border: solid 1px;*/
	/*border-left: solid 1px; !*used when #body padding is not set*!*/
	/*border-right: solid 1px; !*used when #body padding is not set*!*/
	/*border: solid 1px #000;*/


	/**************************************************
     This is for adding transparency (via image rather
     that style) to #container_outer when max-width
     is set. It is for aesthetic purposes only
     **************************************************/
	/*background-image: var(--container-outer--background-image);*/
	/*background-repeat:  repeat;*/

}


/**************************************************
 This div is the third highest level container and
 is parent #inner_container.

 This div serves only to add padding between the
 inner and outer containers without causing page
 width to increase in size.

 These values should remain commented if max-width
 for #container_outer is not set, though this
 is not required.
 **************************************************/
#container-outer-pad{
	position: relative;
	width: 100%;
	/*max-width: 1000px;*/
	/*display: none;*/ /*This is for testing purposes only, as it will hide all nested elements when set to none.*/

	/*background-color: #F00;*/

	/**************************************************
         Padding
         20px 20px 0 20px; (no bottom padding
         padding: 0 20px; (no top or bottom padding)
         padding: 20px; (padding all around)

         THIS IS NOW HANDLED IN RESPONSIVE SECTION
         AT THE BOTTOM OF THIS PAGE.
     **************************************************/
	/*padding: 20px 20px 0 20px;*/
	/*padding: 0 20px;*/
	/*padding: 20px;*/
	padding: 0;
}


/**************************************************
 This div is the fourth highest level container and
 is parent to three inner headers and footers as well
 as main content and side columns.
 **************************************************/
#container-inner{
	/*display: flex;*/
	/*flex-direction: column;*/
	/*justify-content: center;*/
	position: absolute;
	/*width: 100%;*/
	max-width: 1140px;
	/*height: 100%;*/
	/*height: calc(100% - var(--header-total--height));*/
	/*min-height: calc(100% - calc(var(--header-total--height) + var(--footer-total--height)));*/
	min-height: var(--container-inner--height);

	/*background-color: var(--container-inner--background-color);*/
	background-color: rgba(255, 255, 255, 1);
	/*background-color: rgba(255, 255, 255, 0.6);*/
	/*border: solid 1px;*/
	/*border-left: solid 1px;*/
	/*border-right: solid 1px;*/

	/*Test border*/
	border-left: solid 1px #cccccc;
	border-right: solid 1px #cccccc;
}



/**********************************************************************
 **********************************************************************
 HEADERS

 There are several header divs used in the application. Three in the
 outer container and three in the inner container. These are helpful
 for displaying different elements in a stacked fashion such as a banner
 with a menu either above it or below it.

 This section will handle styles for those header divs individually
 and in group.

 Header divs are as follows.

 header_outer
   header_outer_1
   header_outer_2
   header_outer_3

 header_inner
   header_inner_1
   header_inner_2
   header_inner_3

 **********************************************************************
 **********************************************************************/


/******************************
     Outer Headers
 ******************************/
#header-outer{
	position: relative;
	width: var(--container-outer--width);
	top: 0;
	z-index: 99;

	/*border: solid 3px #FF0;*/
}

#header-outer-1{
	position: relative;
	/*display: none;*/
	width: 100%;
	height: var(--header-outer-1--height);

	background-color: var(--header-outer-1--background-color);
	color: var(--header-outer-1--font-color);
}

#header-outer-2{
	position: relative;
	display: none;
	width: 100%;
	height: var(--header-outer-2--height);

	background-color: var(--header-outer-2--background-color);
	color: var(--header-outer-2--font-color);
}

#header-outer-3{
	position: relative;
	display: none;
	width: 100%;
	height: var(--header-outer-3--height);
	/*min-height: 30px;*/

	/*background-color: var(--header-outer-3--background-color);*/
	/*border-bottom: solid 1px #20558a;*/

	color: var(--header-outer-3--font-color);
	text-align: right;
}

/*links*/
#header-outer, #header-outer a{
	/*color: var(--header-outer--font-color);*/
	text-decoration: none;
}

#header-outer a:hover{
	text-decoration: underline;
}

#header-outer-pad{
	height: 0;
}



/******************************
     Inner Headers
 ******************************/
#header-inner{
	/*display: none;*/
	/*width: var(--container-inner--width);*/
	/*border-bottom: double 3px #000;*/
	/*border: solid 5px #000;*/
	/*height: 100px;*/
}

#header-inner-1{
	/*display: none;*/
	/*height: 10px;*/
	/*border-bottom: dashed 1px #aaa;*/
	/*border: solid 10px #000;*/
}

#header-inner-2{
	/*display: none;*/
	/*height: 10px;*/
	/*border-bottom: dashed 1px #aaa;*/
}

#header-inner-3{
	/*display: none;*/
	/*height: 0px;*/
}

/*links*/
#header-inner, #header-inner a{
	color:  var(--header-inner--font-color);
	text-decoration: none;
}

#header-inner a:hover{
	text-decoration: underline;
}




/**********************************************************************
 **********************************************************************
 CONTENT

 There are several header divs used in the application. Three in the
 outer container and three in the inner container. These are helpful
 for displaying different elements in a stacked fashion such as a banner
 with a menu either above it or below it.

 This section will handle styles for those header divs individually
 and in group.

 Header divs are as follows.

 content
   content_left
   content_center
   content_right
   sidebar-container
   sidebar-div


 **********************************************************************
 **********************************************************************/

[id*="content__wrapper-"]::-webkit-scrollbar {
	/*display: none;*/
	width: 5px;
	background-color: transparent;
}
[id*="content__wrapper-"]::-webkit-scrollbar-thumb{background-color: transparent;}



/******************************
 Content Wrapper
 This is parent to the following

 content_left
 content_center
 content_right
 sidebar-container
   sidebar-div
 ******************************/

/*#content_wrapper{*/
/*display: block;*/
/*!*height: 1000px;*!*/
/*}*/


#content{
	position: relative;
	/*display: table;*/
	display: flex;
	/*display: none;*/
	width: 100%;
	/*max-width: 1000px;*/
	/*height: 100%;*/	/*** DO NOT SET THIS VALUE. IT WILL BE SET WITH WRAPPER RESIZE ***/
	border-spacing: 0;
	margin: 0;
	padding: 0;

	/*Test border*/
	/*border: solid 1px #0F0;*/
}


/******************************
 Left Sidebar
 ******************************/
#content-left{
	position: relative;
	display: none;
	height: 100%;
	min-width: var(--content-left--width);
	/*margin-bottom: -20px;*/
	text-align: left;
	vertical-align: top;

	/*Test border*/
	/*border-right: solid 2px #f00;*/
}

#content-left-wrapper{
	width: 100%;
	/*max-height: calc(100vh - var(--scroll-offset));*/ /*set in wrapper.resize.js*/
	/*overflow-y: auto;*/
	/*overflow-x: hidden;*/

	/*Mozilla only*/
	/*scrollbar-color: transparent transparent;*/
	/*scrollbar-width: auto;*/
}

/*display scrollbar*/
/*#content-left:hover #content-left-wrapper::-webkit-scrollbar{background-color: var(--scrollbar__track--color);}*/
/*#content-left:hover #content-left-wrapper::-webkit-scrollbar-thumb{background-color: var(--scrollbar__thumb--color);}*/
/*#content-left:hover #content-left-wrapper{scrollbar-width: auto; scrollbar-color: var(--scrollbar__track--color) var(--scrollbar__thumb--color)} !*Mozilla only*!*/



/******************************
 Main Content Div
 ******************************/
#content-center{
	position: relative;
	flex: 100%;
	width: var(--content-center--width);
	text-align: left;
	vertical-align: top;
	/*border: solid 1px #00F;*/
}

#content-center-wrapper{
	position: relative;
	/*overflow-y: auto;*/
	/*overflow-x: hidden;*/

	/*Mozilla only*/
	/*scrollbar-color: transparent transparent;*/
	/*scrollbar-width: auto;*/

	/*Test border*/
	/*border: solid 3px #F00;*/
}

#content-center-buffer{
	padding: 20px;
}

/*display scrollbar*/
/*#content-center:hover #content-center-wrapper::-webkit-scrollbar{background-color: var(--scrollbar__track--color);}*/
/*#content-center:hover #content-center-wrapper::-webkit-scrollbar-thumb{background-color: var(--scrollbar__thumb--color);}*/
/*#content-center:hover #content-center-wrapper{scrollbar-width: auto; scrollbar-color: var(--scrollbar__track--color) var(--scrollbar__thumb--color)} !*Mozilla only*!*/


/******************************
 Right Sidebar
 ******************************/
#content-right{
	position: relative;
	display: none;
	height: 100%;
	min-width: var(--content-right--width);
	/*margin-bottom: -20px;*/
	text-align: left;
	vertical-align: top;

	/*Test border*/
	/*border: solid 1px #f00;*/
}


#content-right-wrapper{
	width: 100%;
	/*max-height: calc(100vh - var(--scroll-offset));*/ /*set in wrapper.resize.js*/
	/*overflow-y: auto;*/
	/*overflow-x: hidden;*/

	/*Mozilla only*/
	/*scrollbar-color: transparent transparent;*/
	/*scrollbar-width: auto;*/
}

/*display scrollbar*/
/*#content-right:hover #content-right-wrapper::-webkit-scrollbar{background-color: var(--scrollbar__track--color);}*/
/*#content-right:hover #content-right-wrapper::-webkit-scrollbar-thumb{background-color: var(--scrollbar__thumb--color);}*/
/*#content-right:hover #content-right-wrapper{scrollbar-width: auto; scrollbar-color: var(--scrollbar__track--color) var(--scrollbar__thumb--color)} !*Mozilla only*!*/


/******************************
 Sidebar Container
 ******************************/
.sidebar_container{
	display: table;
	width: 80%;
	padding: 10px;
	/*border-radius: 5px;*/
	/*background: #d1d1d1;*/
	/*width: var(--sidebar-width);*/
	/*border: solid 1px #fff;*/
}


/******************************
 Sidebar Container Nested Div
 ******************************/
.sidebar_div{
	/*display: table-cell;*/
	border-radius: 10px;
	padding: 5px;
}


/******************************
 Sidebar Container Nested Div
 ******************************/
.sidebar_icon{
	display: table-cell;
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
}


/******************************
 Sidebar Container Nested Div
 ******************************/
.sidebar_text{
	display: table-cell;
	height: 25px;
	padding: 1px 3px 0 5px;
	/*padding: 10px;*/
	vertical-align: middle;
}




/**********************************************************************
 FOOTERS

 There are several footer divs used in the application. Three in the
 outer container and three in the inner container. These are helpful
 for displaying different elements in a stacked fashion such as a banner
 with a menu either above it or below it.

 This section will handle styles for those footer divs individually
 and in group.

 Header divs are as follows.

 #footer-outer
   #footer-outer-1
   #footer-outer-2
   #footer-outer-3

 #footer-inner
   #footer-inner-1
   #footer-inner-2
   #footer-inner-3

 **********************************************************************/


/******************************
     Inner Footers
 ******************************/
#footer-inner{
	display: none;
	font-family: arial;
	font-size: 0.8em;
}

#footer-inner-1{
	/*display: none;*/
	height: 10px;
	border-bottom: dashed 1px #aaa;
}

#footer-inner-2{
	/*display: none;*/
	/*display: block;*/
	height: 30px;
	/*padding: 0 10px;*/
	background-color: var(--footer-inner-2--background-color);
	/*border: solid 1px #f00;*/
	/*vertical-align: middle;*/
}

#footer-inner-3{
	/*display: none;*/
	/*height: 10px;*/
	background-color: var(--footer-inner-3--background-color);
}

/*links*/
#footer-inner, #footer-inner a{
	color: var(--footer-inner--font-color);
	text-decoration: none;
}

#footer-inner a:hover{
	text-decoration: underline;
}



/******************************
     Outer Footers
 ******************************/
#footer-outer{
	position: fixed;
	width: var(--container-outer--width);
	bottom: 0;
	/*display: none;*/
	/*font-family: arial;*/
	/*font-size: 0.8em;*/

	z-index: 98;
}

#footer-outer-1{
	display: none;
	height: var(--footer-outer-1--height);
	/*border-bottom: dashed 1px #aaa;*/
}

#footer-outer-2{
	display: none;
	height: var(--footer-outer-2--height);
}

#footer-outer-3{
	/*display: none; !*set to none for small responsive design*!*/
	height: var(--footer-outer-3--height);
	background-color: var(--footer-outer-3--background-color);
	border-top: solid 5px #22558a;
	/*padding: 0 10px;*/

	color: var(--footer-outer--font-color);
	/*color: white;*/
}

/*links*/
#footer-outer, #footer-outer a{
	color: var(--footer-outer--font-color);
	text-decoration: none;
}

#footer-outer a:hover{
	text-decoration: underline;
}

#footer-outer-pad{
	height: 0;
}





/**********************************************************************
 * OVERLAY
 **********************************************************************/

#overlay{
	position: absolute;
	display: none;
	height: 100%;
	width: 100%;
	background-color: transparent;
}

#overlay-close{
	position: absolute;
	top: 20px;
	right: 20px;
}

#overlay-close:hover{
	cursor: pointer;
}




/**********************************************************************
 * RESPONSIVE CSS
 **********************************************************************/

@media all and ( min-width: 475px )
{

	#container-inner{position: relative;}

	#header-outer{position: fixed;}
	#header-outer-pad{height: var(--header-outer--height);}

	/*#footer-outer{position: fixed;}*/
	#footer-outer-pad{height: var(--footer-outer--height);}


	/*#content-right {display: table-cell;}*/
	/*}*/

	/*@media all and ( min-width: 750px )*/
	/*{*/
	/*!*#container-inner{border: none;}*!*/
	/*#container-outer-pad{padding: 0 20px;}*/
	/*#header-outer-2{display: block;}*/
	/*#content-left {display: table-cell;}*/
	/*#footer-inner-2{display: block;}*/
	/*#footer-outer-2{display: block;}*/
}