* 									{ margin: 0; padding: 0; }
body								{ font: 14px Helvetica, Sans-Serif; } 
#page-wrap							{ width: 800px; margin: 25px auto; } 
a									{ text-decoration: none; }
ul									{ list-style: none; }
p                                   { margin: 15px 0; }

/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover		            { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; 
									  border-bottom: 1px solid #ccc; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

.flex-container {
    display: flex;
    flex-wrap: nowrap;
    background-color: DodgerBlue;
    overflow-x: auto; 
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;

  }


/*
Accordion
*/

.accordiaolgue {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordiaolgue:hover {
  background-color: #ccc; 
}


.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 2 5px;
  display: none;
  background-color: white;
  overflow: hidden;
}



/*
Add Resource Dialogue
*/

			.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 10%;
  left: 10%;
  width: 70%;
  height: 90%;
  padding: 1px;
  border: 1px solid orange;
  background-color: lightgray;
  z-index: 1002;
	font-size: 10;
  overflow: auto;
}
.group {
  margin-bottom: 5px;
}
.group label {
  font-size: 12px;
}
.group2 label {
  font-size: 4px;
}

.btn {
  background-color: antiquewhite;
  border: 2;
  color: yellowgreen;
	offset-position: top;
  align-items: left;
  padding: 0px 5px;
  font-size: 16px;
  cursor: pointer;
}




html, body{
  min-height:100%;
}

body{
  		background-image: -webkit-linear-gradient(top, #edecec, #cecbc9);
			background-image: linear-gradient(top, #edecec, #cecbc9);
}

.buttonHolder{
  margin:80px auto;
  width:400px;
}


		.button{
			background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
			background-image: linear-gradient(top, #f4f1ee, #fff);
			border-radius: 50%;
			box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
			float:left;
			height: 70px;
			margin: 0 30px 30px 0;
			position: relative;
			width: 70px;			
			-webkit-transition: all .1s linear;
			transition: all .1s linear;
		}

		.button:after{
			color:#e9e6e4;
			content: "";
			display: block;
			font-size: 30px;
			height: 30px;
			text-decoration: none;
			text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
			position: absolute;
			width: 30px;
		}


		.heart:after{
			content: "❤";
			left: 21px;
			top: 16px;
		}

		.flower:after{
			content: "✿";
			left: 23px;
			top: 14px;
		}

		.tick:after{
			content: "✔";
			left:23px;
			top:16px;
		}

		.cross:after{
			content: "✖";
			left: 24px;
			top: 15px;
		}

		.button:hover{
			background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);
			background-image: linear-gradient(top, #fff, #f4f1ee);
			color:#0088cc;
		}

		.heart:hover:after{
			color:#f94e66;
			text-shadow:0px 0px 6px #f94e66;
		}

		.flower:hover:after{
			color:#f99e4e;
			text-shadow:0px 0px 6px #f99e4e;
		}

		.tick:hover:after{
			color:#83d244;
			text-shadow:0px 0px 6px #83d244;
		}

		.cross:hover:after{
			color:#eb2f2f;
			text-shadow:0px 0px 6px #eb2f2f;
		}

		

		.button:active{
			background-image: -webkit-linear-gradient(top, #efedec, #f7f4f4);
			background-image: linear-gradient(top, #efedec, #f7f4f4);
			box-shadow: 0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);
		}

		.button:active:after{
			color:#dbd2d2;
			text-shadow: 0px -1px 1px #bdb5b4, 0px 1px 1px white;
		}