
/* - - GENERAL - - */

	div, ul, li, input, button { padding: 0; margin: 0; box-sizing: border-box; }
	ul, li { list-style: none; }
	input, button, textarea, select { outline: none; color: #333; }
	body { margin: 20px 2%; text-align: center; background-color: #222; color: #333; }
	body, textarea, input { font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; }


/* BOOTSTRAP LOOKALIKES */
	.h1, .h2, .h3, h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; font-weight: 500; }
	button, .button { cursor: pointer; }

/* LAY OUT STYLING */
	#top { position: relative; text-align: center; z-index: 5; margin-bottom: 30px; }

	#main { margin-bottom: 15px; }
	#main { position: relative; }
	h3 { font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,.2); }
	h3.main-headline { font-size: 200%; font-weight: 500; margin: 0; margin-bottom: 10px; color: #fff;
		padding: 15px 0 25px 10px; font-style: normal; }
	span.underline { border-bottom: 1px solid #fff; }
	
	.main-box { margin: 20px 0 0; border: 1px solid;
			transition: background-color .3s, border-color .3s; -webkit-transition: background-color .3s, border-color .3s; }
	.main-box.open, .main-box.closed:hover { background-color: #9D7F57; border-color: #6E532F; }
	.main-box.closed, .site-link { background-color: #886535; border-color: #594221; }
	.main-box.ready { background-color: #788C30; border-color: #4E5C1D; }
	.main-box.ready.open { background-color: #9CAD5C; border-color: #708039; }

	.main-box h3.box-headline { position: relative; font-weight: 400; margin: 0; font-style: italic;
		text-shadow: 0 1px 10px rgba(0,0,0,.2); width: 100%; cursor: pointer;
		transition: color .3s, margin .3s, font-size .3s; -webkit-transition: color .3s, margin .3s, font-size .3s; }
	.main-box.open .box-headline { color: #fff; padding: 13px 0 15px; font-size: 170%; }
	.main-box.closed .box-headline { color: #fff; padding: 8px 0; font-size: 160%; }
	.main-box a { text-decoration: none; color: #fff; }
 	
	.live-content { padding: 0 2% 15px; overflow: hidden; }

	.colorable { transition: background-color .2s, color .2s; -webkit-transition: background-color .2s, color .2s; }

/* BUTTONS */
	.buttons { position: relative; clear: both; overflow: hidden; text-align: center; font-size: 17px;
		background-color: #aaa; border-top: 2px solid #555; margin: 0; border-radius: 0 0 7px 7px; padding: 8px; padding-bottom: 10px; }
	/* .buttons { background-color: #806746; border-top: 1px solid #59462E; } */
	.button { position: relative; border: 1px solid #777; display: inline-block; padding: 4px 12px; 
		border-radius: 3px; background-color: #fff; color: #555; font-weight: 400; }
	.button.big { padding: 5px 15px; }
	.button.secondary { background-color: #9CAD5C; color: #fff; border-color: #708039; }
	.button { font-size: 110%; vertical-align: middle; }
	.button.big, .button.primary, .button.secondary { margin: 10px 15px; font-size: 140%; }
	.buttons button.button { margin: 7px 10px; }

	.button.warning { background-color: #B3344D; color: #fff; border-color: #8C142C; }
	.button { transition: all .2s; -webkit-transition: all .2s;
					-webkit-box-shadow: inset 0px 20px 40px -20px rgba(255,255,255,0.25);
					-moz-box-shadow: inset 0px 20px 40px -20px rgba(255,255,255,0.25);
					box-shadow: inset 0px 20px 40px -20px rgba(255,255,255,0.25); }
	.button:hover { transition: all .2s; -webkit-transition: all .2s;
					-webkit-box-shadow: inset 0px 40px 39px -20px rgba(255,255,255,0.25);
					-moz-box-shadow: inset 0px 40px 39px -20px rgba(255,255,255,0.25);
					box-shadow: inset 0px 40px 39px -20px rgba(255,255,255,0.25); }
	.button:active { transition: all .2s; -webkit-transition: all .2s;
					-webkit-box-shadow: inset 0px 40px 39px -20px rgba(0,0,0,0.25);
					-moz-box-shadow: inset 0px 40px 39px -20px rgba(0,0,0,0.25);
					box-shadow: inset 0px 40px 39px -20px rgba(0,0,0,0.25); }
	.button.white:hover {
					-webkit-box-shadow: inset 0px 40px 39px -20px rgba(0,0,0,0.15);
					-moz-box-shadow: inset 0px 40px 39px -20px rgba(0,0,0,0.15);
					box-shadow: inset 0px 40px 39px -20px rgba(0,0,0,0.15); }
 	
	.button#prev { float: left; }
	.button#next { float: right; }
	.button#view { margin-right: 20px; }


/* COLORS */
	.light-grey { background-color: #bbb; color: #555; border-color: #555; }
	.grey { background-color: #999; color: #fff; border-color: #555; }
	.dark-grey { background-color: #666; color: #fff; border-color: #444; }
	.white { background-color: #fff; color: #444; border-color: #555; }
	.red { background-color: #B3344D; color: #fff; border-color: #8C142C; }
	.light-red { background-color: #CC939E !important; color: #fff !important; border-color: #81555E !important; }
	.green { background-color: #559E1A; color: #fff; border-color: #356B0A; }
	.light-green { background-color: #9BBA7B; color: #fff; border-color: #5A783C; }
	.beige { background-color: #886535; color: #fff; border-color: #594221; }
	.light-beige { background-color: #9D7F57; color: #fff; border-color: #6E532F; }

	.red-text { color: #BD4A60; }

/* OTHER */
	.abs-full { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }


/* BOX N ANIMS */
	.big-box { box-shadow: 0 2px 12px 1px rgba(0,0,0,0.25); border-radius: 7px; }
	.box { box-shadow: 0 1px 8px 1px rgba(0,0,0,0.2); border-radius: 4px; }
	.click { cursor: pointer; }


	.hideable { opacity: 1; transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out; }
	.hideMe { opacity: 0; transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out; }
	.hideAway { z-index: -50 !important; opacity: 0; transition: z-index 0.5s step-end, opacity 0.5s linear; -webkit-transition: z-index 0.5s step-end, opacity 0.5s linear; }	
	.slowFade { transition: opacity .4s .2s ease-out; -webkit-transition: opacity .4s .2s ease-out; }
	.anim { transition: all .2s ease-out; -webkit-transition: all .2s ease-out; }
	.invisible, #main .invisible { display: none !important; height: 0; width: 0; margin: 0; padding: 0; }
	.sort-handle { cursor: move; cursor: -webkit-grabbing; }
	.colorhideable { transition: background-color .2s, border-color .2s, opacity .2s !important; -webkit-transition: background-color .2s, border-color .2s, opacity .2s !important; }
