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

A minimal collection of pre-formatted stuff for building pages faster

Use the items in the list below in the frameworkbody div, e.g.

<div class="frameworkbody">
your stuff here...
</div>


=====================ALERT MESSAGES=====================
.alert.success-message
.alert.error-message
.alert.warning-message

	
======================FORMS=======================
.simple-form
	.req  -- adds red asterisk for required fields

======================TABLES======================
.grid-table
---------------------------------------------------
A basic table for displaying text-based information.


BUTTONS
======================BUTTONS=====================
	
.link-button
------------------
	.green
	.blue
	.maroon
		

=====================WINDOWS/POPUPS=================

#dynamic-popup-content

====================================================

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



/*global rules*/
.frameworkbody{}
.frameworkbody *{
box-sizing:border-box;
}

/*forms*/
.frameworkbody .simple-form{
padding:10px 0px 10px 0px;
}
.frameworkbody .simple-form label{
padding-right:12px;
display:block;
line-height:33px;
letter-spacing:-0.5px;
color:#525252;
font-weight:bold;
}
.frameworkbody .req::before{
content:'*';
color:red;
margin-right:2px;
}
.frameworkbody .simple-form input[type="text"],
.frameworkbody .simple-form input[type="date"],
.frameworkbody .simple-form input[type="email"],
.frameworkbody .simple-form textarea{
margin: 0px 0px 10px 0px;
box-shadow: 2px 2px 4px #cccccc;
border: 1px solid #bfbfbf;
padding:8px;
}
.frameworkbody .simple-form select{
width:auto;
margin: 10px 0px 15px 0px;
box-shadow: 2px 2px 4px #cccccc;
border: 1px solid #bfbfbf;
padding:8px;
float:none;
}

.frameworkbody .simple-form select:hover,
.frameworkbody .simple-form select option{
cursor:pointer!important;
}
.frameworkbody simple-form input[type="text"]:hover
{cursor:text;}




/*body*/
.frameworkbody h1,h2,h3,h4,h5{margin-top:0;}
.frameworkbody blockquote {
  border-left: 0.3rem solid #d1d1d1;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem;
}
.frameworkbody blockquote *:last-child {
  margin: 0;
}

.frameworkbody code {
  background: #f4f5f6;
  border-radius: 0.4rem;
  padding: 0.2rem 0.5rem;
  margin: 0 0.2rem;
  white-space: nowrap;
}


/*divs and blocks*/

.frameworkbody .box-container{
display:table;
box-sizing:border-box;
width:100%;
}

/** boxes **/
.frameworkbody .box-gutter{position:relative;
background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.23) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(162, 162, 162, 0.2) 100%);
bottom:0;height:24px;
width:100%;text-align:center;
background-color:#e7e7e7;
border-top:1px solid #ccc;
padding-top:4px;
}
.frameworkbody .box-gutter:hover{cursor:pointer;background-color:#dbdbdb;}
.frameworkbody .box-container:after{
content: "";
display: table;
clear: both;
}

.frameworkbody .box{display:table-cell;height:100%;vertical-align:top;width:100%;margin:auto;line-height:1.3;}

.frameworkbody .three-fourths{width:75%;}
.frameworkbody .half{width:50%;}
.frameworkbody .third{width:33%;}
.frameworkbody .quarter{width:25%;}
.frameworkbody .two-thirds{width:66%;}
.center-this{position:relative;left:25%;}



/*tables*/
.frameworkbody .grid-table {
  width: 100%;
  margin-top: 15px;
  margin-bottom:15px;
}

.frameworkbody .grid-table th,
.frameworkbody .grid-table td,
.frameworkbody .grid-table thead {
  border-bottom: 0.1rem solid #e1e1e1;
  padding: 8px;
  text-align: left;
}
.frameworkbody .grid-table th:first-child,
.frameworkbody .grid-table td:first-child {
  padding-left: 0;
}
.frameworkbody .grid-table tr:nth-child(even){
background-color:#f1f1f1;
}
.frameworkbody .grid-table th:last-child,
.frameworkbody .grid-table td:last-child {
  padding-right: 0;
}
.frameworkbody .grid-table th:hover{background-color:#f1f1f1;cursor:pointer;}


.frameworkbody .alert{
  line-height:1.5;
  margin-top:10px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.frameworkbody .alert.success-message{
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.frameworkbody .alert.error-message{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.frameworkbody .alert.warning-message{
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.frameworkbody .alert.information-message{
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

/*buttons*/
.frameworkbody .link-button,
.frameworkbody .basic-button,
.frameworkbody .simple-button,
.frameworkbody .simple-form input[type="submit"]
{
margin:2px;
border-radius:3px;
border-style:initial;
border:1px solid;
border-color:#989898;
color:#232323;
background-color:#f1f1f1;
width:auto;
padding:8 12px 8px 12px;
text-decoration:none;
text-align:center;
vertical-align:middle;
display: inline-block;
text-decoration: none;
-moz-box-shadow: #565656 0px 0px 3px;
-webkit-box-shadow: #565656 0 1px 2px;
padding:10px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.23) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.0) 51%, rgba(162, 162, 162, 0.2) 100%);
}
.frameworkbody .link-button:hover,
.frameworkbody .basic-button:hover,
.frameworkbody .simple-form input[type="submit"]:hover,
.frameworkbody .simple-button:hover{
color:#232323;
background-color:#e8e8e8;
cursor:pointer;
}

.frameworkbody .link-button.green,.frameworkbody .simple-button.green
{
background-color:#2d8006;
border-color:#005600;
color:white;
}
.frameworkbody .link-button.maroon,.frameworkbody .simple-button.maroon
{background-color:#800;
border-color:#790000;
color:white;
}
.frameworkbody .link-button.blue,.frameworkbody .simple-button.blue
{background-color:#4373a2;
border-color:#396188;
color:white;}


.frameworkbody .link-button.green:hover,.frameworkbody .simple-button.green:hover
{background-color:#236305;}
.frameworkbody .link-button.maroon:hover,.frameworkbody .simple-button.maroon:hover
{background-color:#690000;}
.frameworkbody .link-button.blue:hover,.frameworkbody .simple-button.blue:hover
{background-color:#355a80;}


/* image effects and stylized media */
.frameworkbody .circle-img{
background-size: cover;
border-radius:50%;
border:1px solid #333;
width:100px;height:100px;
}


/* popup div */
.frameworkbody #dynamic-popup-content
{
  position: absolute;
  border: solid 1px #555;
  display: none;
  padding:7px 15px 15px 15px;
  width:auto;
  height:auto;
  z-index: 100;
  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
  -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}


/** declarative styles **/
.frameworkbody .v-middle{vertical-align:middle;}
.frameworkbody .v-top{vertical-align:top;}
.frameworkbody .center{text-align:center;}
.frameworkbody .right{text-align:right;}
.no-margin{margin:0;-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

@media screen and (max-width: 600px) { 
	.frameworkbody .box{
		display:inline-block;
		text-align:center;
		height:100%;
		vertical-align:baseline;
		width:100%;
		margin:auto;
		line-height:1.3;
	}
	.center-this{position:initial;}
}
/*
.frameworkbody .three-quarters{width:75%;}
.frameworkbody .half{width:50%;}
.frameworkbody .third{width:33%;}
.frameworkbody .quarter{width:25%;}
.frameworkbody .two-thirds{width:66%;}
.center-this{position:relative;left:25%;}*/
}