/* *-------------------------* //

// DOCUMENTATION

// generic idle game prototype v0.956
// themed as 'floppy factory'
// by j-m rose 11/30/17
// ***
// this is a work in progress

/* *-------------------------* */

/* BODY SETTINGS */

/* ~ MAIN BODY ~ */
.body_main 
{
    background-color: khaki;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	touch-action: manipulation;
}

/* *-------------------------* */

/* DIV SETTINGS */

/* ~ MAIN DIV ~ */
.div_main
{
    overflow: auto;
	background-color: khaki;
	border: 10px solid indigo;
	border-radius: 25px;
    box-shadow: 0 0 0 2pt black;
    margin: 10px;
	padding-bottom: 10px;
    padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
    text-align: justify;
	position: relative;
}

/* ~ DIV IDS ~ */
#div_wrapper
{
	display: flex;
}
#div_titlebar 
{
	//
}
#div_stats 
{
	width: 100%;
}
#div_creation
{
	//
}
#div_conversion
{
	//
}
#div_safeguarding
{
	//
}
#div_cheevos
{
	//
}
#div_upgrades
{
	//
}
#div_about
{
	//
}
#div_sys
{
	background-color: mediumorchid;
}
#div_message
{
	width: 100%;
}

/* ~ TAB STYLING ~ */
div.tab 
{
    overflow: auto;
    background-color: deeppink;
	float: left;
	border-radius:25px;
	box-shadow: 0 0 0 2pt white;
    text-align: center;
	width: 100%;
	height: 100%;
	min-height: 30px;
	border: 4px solid indigo;
}
div.tab button 
{
    background-color: aqua;
    float: none;
    border: 2px solid white;
    outline: 2px solid indigo;
    cursor: pointer;
    transition: .5s;
	color: white;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
    font-size: 11px;
	font-weight: bold;
	text-shadow: 2px 2px black;
	padding-bottom: 2px;
    padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
}
div.tab button:hover 
{
    background-color: mediumorchid;
}
div.tab button.active 
{
    background-color: indigo;
}
.tabcontent 
{
	width: 100%;
}
div.tab span.game_icon 
{
	background: url(images/floppy_disk_title.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}
div.tab span.tab_icon 
{
	background: url(images/floppy_disk_blue.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}
div.tab span.creation_tab_icon 
{
	background: url(images/floppy_disk_assembly.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}
div.tab span.conversion_tab_icon 
{
	background: url(images/floppy_disk_formatting.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}
div.tab span.safeguarding_tab_icon 
{
	background: url(images/floppy_disk_backup.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}
div.tab span.upgrade_tab_icon 
{
	background: url(images/floppy_disk_upgrade.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}
div.tab span.cheevos_tab_icon 
{
	background: url(images/floppy_disk_cheevos.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}
div.tab span.about_tab_icon 
{
	background: url(images/floppy_disk_about.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}
div.tab span.sys_tab_icon 
{
	background: url(images/floppy_disk_sys.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}

/* ~ REGION BOX STYLING ~ */
div.stats_region
{
    display: flex;
	background-color: deeppink;
	border: 4px solid black;
	float: left;
	width: 50%;
    height: 95%;
    overflow: none;
	position:relative;
	z-index: 55;
}
div.menu_region
{
    display: flex;
	background-color: khaki;
	border: 4px solid black;
	float: right;
	width: 100%;
    height: 5%;
    overflow: none;
	position:relative;
	z-index: 60;
}
div.menu_result_region
{
    display: flex;
	background-color: deeppink;
	/*background-image: url("images/tv_static_background.gif");*/
	background-size: cover;
	border: 4px solid black;
	float: right;
	width: 50%;
    height: 75%;
    overflow: none;
	overflow-y: scroll;
	position:relative;
	z-index: 50;
}
div.message_region
{
    display: flex;
	background-color: aqua;
	/*background-image: url("images/tv_static_background.gif");*/
	background-size: cover;
	border: 4px solid black;
	float: right;
	width: 50%;
    height: 20%;
    overflow: none;
	overflow-y: scroll;
	position:relative;
	z-index: 51;
}

/* *-------------------------* */

/* HEADING SETTINGS */

/* ~ GAME TITLE HEADING ~ */
.game_title
{
	background-color: deeppink;
	border-radius:50px;
	border: 4px solid indigo;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
    font-size: 12px;
	font-weight: bold;
	padding-bottom: 10px;
    padding-left: 10%;
	padding-right: 10%;
	padding-top: 10px;
    text-align: center;
	text-decoration: none;
	text-shadow: 2px 2px black;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;*/
}
.game_title span.game_icon 
{
    background: url(images/floppy_disk_title_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}

/* ~ SECTION TITLE HEADING ~ */
.section_title
{
	background-color: deeppink;
	border: 4px solid indigo;
	border-radius:50px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
    font-size: 20px;
	font-weight: bold;
	padding-bottom: 10px;
    padding-left: 10%;
	padding-right: 10%;
	padding-top: 10px;
    text-align: center;
	text-decoration: none;
	text-shadow: 2px 2px black;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;*/
}
.section_title span.section_icon 
{
    background: url(images/floppy_disk_black_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.section_title span.cheevos_icon 
{
    background: url(images/floppy_disk_cheevos_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.section_title span.sys_icon 
{
    background: url(images/floppy_disk_sys_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.section_title span.assembly_icon 
{
    background: url(images/floppy_disk_assembly_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.section_title span.formatting_icon 
{
    background: url(images/floppy_disk_formatting_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.section_title span.backup_icon 
{
    background: url(images/floppy_disk_backup_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.section_title span.upgrade_icon 
{
    background: url(images/floppy_disk_upgrade_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.section_title span.user_icon 
{
    background: url(images/user_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.section_title span.about_icon 
{
	background: url(images/floppy_disk_about_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}

/* ~ GROSS/NET TITLE HEADING ~ */
.grossnet_title
{
	background-color: mediumturquoise;
	border-radius:50px;
	border: 4px solid indigo;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
    font-size: 12px;
	font-weight: bold;
	padding-bottom: 10px;
    padding-left: 10%;
	padding-right: 10%;
	padding-top: 10px;
    text-align: center;
	text-decoration: none;
	text-shadow: 2px 2px black;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;*/
}
.grossnet_title span.grossnet_icon 
{
    background: url(images/floppy_disk_red.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}
.grossnet_title span.grossnet2_icon 
{
    background: url(images/floppy_disk_blue.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}

/* ~ TOTAL CLICKS TITLE HEADING ~ */
.total_clicks_title
{
	background-color: blueviolet;
	border-radius:50px;
	border: 4px solid indigo;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
    font-size: 12px;
	font-weight: bold;
	padding-bottom: 10px;
    padding-left: 10%;
	padding-right: 10%;
	padding-top: 10px;
    text-align: center;
	text-decoration: none;
	text-shadow: 2px 2px black;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;*/
}
.total_clicks_title span.total_clicks_icon 
{
    background: url(images/floppy_disk_finger.png) no-repeat;
    float: left;
	height: 16px;
    width: 16px;
}

/* *-------------------------* */

/* LINK FORMATTING */

a:link
{
    color: white;
	font-family: "Lucida Console", monospace;
    font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px black;
}

a:visited
{
    color: white;
	font-family: "Lucida Console", monospace;
    font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px black;
}

a:hover
{
    color: white;
	font-family: "Lucida Console", monospace;
    font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px black;
}

a:active
{
    color: white;
	font-family: "Lucida Console", monospace;
    font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 2px 2px black;
}

/* *-------------------------* */

/* PARAGRAPH SETTINGS */

/* ~ MAIN PARAGRAPH ~ */
.p_main
{
	color: white;
	font-family: "Lucida Console", monospace;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-shadow: 2px 2px black;
}

/* *-------------------------* */

/* TABLE SETTINGS */

/* ~ STATS TABLE ~ */
.table_stats
{
    background-color: blueviolet;
	border: 3px solid black;
	border-collapse: separate;
	border-radius:10px;
	-moz-border-radius: 10px;
	border-spacing: 0;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
	font-weight: bold;
	font-size: 12px;
	text-shadow: 2px 2px black;
	width: 100%;
}
.table_stats_th, .table_stats_td, tr 
{
    border-bottom: 2px solid indigo;
	border-left: 2px solid indigo;
    width: 100px;
}
.table_stats_tr:nth-child(odd) 
{
	background-color: darkorchid;
}
.table_stats_tr:nth-child(1) 
{
	background-color: indigo;
}
.table_stats_tr:hover 
{
	background-color: indigo;
}

/* ~ UPGRADE TABLE ~ */
.table_upgrades
{
    background-color: darkorchid;
	border: 3px solid black;
	border-collapse: separate;
	border-radius:10px;
	-moz-border-radius: 10px;
	border-spacing: 0;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
	font-weight: bold;
	font-size: 12px;
	text-shadow: 2px 2px black;
	width: 100%;
}
.table_upgrades_th, .table_upgrades_td, tr 
{
    border-bottom: 2px solid indigo;
	border-left: 2px solid indigo;
    width: 100px;
}
.table_upgrades_tr:nth-child(odd) 
{
	background-color: blueviolet;
}
.table_upgrades_tr:nth-child(1) 
{
	background-color: blueviolet;
}
.table_upgrades_tr:hover 
{
	background-color: indigo;
}

/* ~ ACHIEVEMENTS TABLE ~ */
.table_cheevos
{
    background-color: blueviolet;
	border: 3px solid black;
	border-collapse: separate;
	border-radius:10px;
	-moz-border-radius: 10px;
	border-spacing: 0;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
	font-weight: bold;
	font-size: 12px;
	text-shadow: 2px 2px black;
	width: 100%;
	text-align: center;
}
.table_cheevos_th, .table_cheevos_td, tr 
{
    border-bottom: 2px solid indigo;
	border-left: 2px solid indigo;
    width: 100px;
}
.table_cheevos_tr:nth-child(odd) 
{
	background-color: darkorchid;
}
.table_cheevos_tr:nth-child(1) 
{
	background-color: indigo;
}
.table_cheevos_tr:hover 
{
	background-color: indigo;
}

/* *-------------------------* */

/* LIST SETTINGS */

/* ~ TOOLTIP ~ */
ul.tooltip 
{
    background-color: darkorchid;
	border: 4px solid indigo;
	border-radius:10px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
	font-weight: bold;
	font-size: 12px;
	list-style-image: url('images/floppy_disk_purple.png');
	list-style-position:inside;
	margin: 0;
	padding-bottom: 0px;
    padding-left: 10%;
	padding-right: 10%;
	padding-top: 10px;
	text-align: justify;
	text-shadow: 2px 2px black;
	overflow-y: auto;
}
.highlight
{ 
	background-color:indigo;
}

/* *-------------------------* */

/* BUTTON SETTINGS */

/* ~ CREATE BUTTON ~ */
.button_create 
{
	background-color: fuchsia;
	background: url(images/floppy_disk_red_8x.png) center;
    border: 4px solid white;
	border-radius: 8px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	display: inline-block;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
    font-size: 16px;
    font-weight: bold;
	height: 128px;
	width: 128px;
    padding-bottom: 10px;
    padding-left: 24px;
	padding-right: 24px;
	padding-top: 10px;
    text-align: center;
    text-decoration: none;
	text-shadow: 2px 2px black;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;*/
	cursor: pointer;
}
.button_create:hover 
{
	background-color: orchid;
	opacity: .75;
}
.button_create:active 
{
	background-color: mediumorchid;
	box-shadow: 0 5px black;
	transform: translateY(4px);
}
.button_create span.create_icon 
{
	background: url(images/floppy_disk_red_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}

/* ~ CONVERT BUTTON ~ */
.button_convert 
{
	background-color: aqua;
	background: url(images/floppy_disk_blue_8x.png) center;
    border: 4px solid white;
	border-radius: 8px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	display: inline-block;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    padding-left: 24px;
	padding-right: 24px;
	padding-top: 10px;
	height: 128px;
	width: 128px;
    text-align: center;
    text-decoration: none;
	text-shadow: 2px 2px black;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;*/
	cursor: pointer;
}
.button_convert:hover 
{
	background-color: turquoise;
	opacity: .75;
}
.button_convert:active 
{
	background-color: mediumturquoise;
	box-shadow: 0 5px black;
	transform: translateY(4px);
}
.button_convert span.convert_icon 
{
    background: url(images/floppy_disk_blue_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}

/* ~ UPGRADE BUTTON ~ */
.button_upgrade 
{
	background-color: chartreuse;
    border: 4px solid white;
	border-radius: 8px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	display: inline-block;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px;
    padding-left: 24px;
	padding-right: 24px;
	padding-top: 10px;
	/*height: 128px;*/
	width: 100%;
    text-align: center;
	line-height: auto;
    text-decoration: none;
	text-shadow: 2px 2px black;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;*/
	cursor: pointer;
}
.button_upgrade:hover 
{
	background-color: limegreen;
}
.button_upgrade:active 
{
	background-color: green;
	box-shadow: 0 5px black;
	transform: translateY(4px);
}
.button_upgrade span.upgrade_icon 
{
    background: url(images/floppy_disk_green_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.disabled 
{
    opacity: 0.2;
	pointer-events: none;
    cursor: not-allowed;
}

/* ~ SYSTEM BUTTON ~ */
.button_sys 
{
	background-color: gold;
    border: 4px solid white;
	border-radius: 8px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: white;
	display: inline-block;
	font-family: "Lucida Console", monospace; /*"Lucida Console", monospace;*/
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 10px;
    padding-left: 24px;
	padding-right: 24px;
	padding-top: 10px;
    text-align: center;
    text-decoration: none;
	text-shadow: 2px 2px black;
	width: 100%;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;*/
	cursor: pointer;
}
.button_sys:hover 
{
	background-color: goldenrod;
}
.button_sys:active 
{
	background-color: darkgoldenrod;
	box-shadow: 0 5px black;
	transform: translateY(4px);
}
.button_sys span.save_icon 
{
    background: url(images/floppy_disk_save_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.button_sys span.load_icon 
{
    background: url(images/floppy_disk_load_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.button_sys span.del_icon 
{
    background: url(images/floppy_disk_del_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}
.button_sys span.toggle_icon 
{
    background: url(images/floppy_disk_toggle_2x.png) no-repeat;
    float: left;
	height: 32px;
    width: 32px;
}

/* *-------------------------* */