Grandma Clicker CSS

/*Stylesheet created by morkysherk, owned by Eric*/

#game
{
	background-image:http://www.colorhexa.com/afafaf.png;
	font-size:12px;
	color:rgba(0,0,0,0.9);
	text-shadow:none;
}

.box
{
	text-align:center;
	padding:0px;
	box-shadow:none;
}

.thing,.box-header,.box-footer,.box-bit
{
    background:#7c7c7c;
	border:1px solid rgba(0,0,0,0.9);
	margin:1px;
}
.thing.cantAfford
{
    background:#cf5055;
}


.thing:hover
{
	background:#cccccc;
}
.thing.cantAfford:hover
{
    background:#cc6a6d;
}

.box-header
{
	margin-top:2px;
	margin-bottom:4px;
	display:inline-block;
	font-family:Verdana;
    font-weight:bold;
	border-radius:10px;
	border:3px solid black;
}
.box-footer
{
	margin-top:4px;
}

.title
{
	text-decoration:underline;
}

#box-title
{
	display:inline-block;
	margin-top:0.75%;
	margin-left:0.75%;
	float:left;
}
#box-version
{
	display:inline-block;
	margin-top:0.75%;
	margin-left:0.75%;
	margin-right:0.75%;
	float:right;
}

#box-main
{
	left:0px;
	top:0px;
	bottom:0px;
	overflow:hidden;
	width:60%;
	position:absolute;
	border:5px solid black;
	border-right:0px;
}
#box-buttons
{
	top:0px;
	right:25%;
	bottom:0px;
	left:0px;
	position:absolute;
}
#box-store
{
	right:0px;
	top:0px;
	bottom:0px;
	width:40%;
	position:absolute;
}
#box-buildings,#box-upgrades,#box-achievs,#box-prestige
{
	top:0px;
	bottom:0px;
	width:50%;
	right:0%;
	overflow-x:hidden;
	overflow-y:scroll;
	padding-bottom:48px;/* this is to accommodate the info and settings buttons */
	position:absolute;
	border:solid 5px black;
}
#box-res
{
	border-top:5px solid black;
	border-bottom:2.5px solid black;
	width:150%;
	right:100%;
	bottom:83.5%;
	height:8.5%;
	z-index:100;
	position:absolute;
	overflow-y:scroll;
    background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
}
#box-buildings
{
	right:50%;
	border-right:solid 0px black;
}
#box-achievs
{
	right:100%;
	width:150%;
	top:75%;
	height:25%;
	border-right:solid 0px black;
}
#box-prestige
{
	right:100%;
	top:25%;
	height:50%;
	border-top:solid 0px black;
	border-bottom:solid 0px black;
	border-right:solid 0px black;
}
#box-stats
{
	border-top:2.5px solid black;
	border-bottom:5px solid black;
	width:150%;
	bottom:75%;
	right:100%;
	z-index:100;
	position:absolute;
	overflow-y:scroll;
	height:8.5%;
    background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
}

#box-buildings>.box-header
{
	padding-bottom:16px;
}

#bulkDisplay
{
	margin-top:-2.5px;
	border:solid 1px black;
	background:#7c7c7c;
	width:70px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:200;
}


.thing
{
	display:inline-block;
	padding:0px;
	cursor:pointer;
	font-family:Verdana;
}
.thing:active
{
	opacity:0.5;
}
.upgrade.owned,.achiev.owned
{
	box-shadow:0px 0px 0px 2px rgba(0,0,0,0.5) inset;
    background:#55cf50;
}
.upgrade.owned:hover,.achiev.owned:hover
{
	background:#7dcc7a;
}
.thing.cantAfford
{
	opacity:0.65;
}
.upgrade.cantAfford
{
	border:none;
}

.thing-costs{font-weight:bold;text-shadow:1px 1px 0px rgba(0,0,0,0.5);}
.cost.hasEnough{color:#0f0;}
.cost.notEnough{color:#f00;}


.button>.thing-text
{
	text-decoration:underline;
}

.building
{
	display:block;
	margin-right:0px;
	font-size:14px;
}

.fullWidth
{
	display:block;
	margin-left:0px;
	margin-right:0px;
	z-index:10;
}

.fullWidth,.fullWidth:hover
{
	background:rgba(0,0,0,0.75);
	box-shadow:none;
	color:#fff;
}
.fullWidth:before,.fullWidth:after
{
	content:'';
	height:1px;
	background:rgba(255,255,255,0.75);
	position:absolute;
	left:0px;
	right:0px;
	z-index:-1;
}
.fullWidth .thing-icon
{
	margin-top:-10px;
	margin-bottom:-10px;
}
.fullWidth .thing-text
{
	margin-top:-4px;
	margin-bottom:-4px;
}

.listing
{
	font-weight:normal;
}

.res
{
	vertical-align:middle;
}

#game.filtersOn .thing-icon{filter:drop-shadow(3px 3px 1px rgba(0,0,0,0.5));}

.tag-achievements
{
	margin-bottom:4px;
	display:inline-block;
	font-family:Verdana;
    font-weight:bold;
	border-radius:10px;
	border:3px solid black;
}
.tag-upgradesII
{
	margin-bottom:4px;
	display:inline-block;
	font-family:Verdana;
    font-weight:bold;
	border-radius:10px;
	border:3px solid black;
}
.tag-prestigeII
{
	margin-bottom:4px;
	display:inline-block;
	font-family:Verdana;
    font-weight:bold;
	border-radius:10px;
	border:3px solid black;
}
#box-things-achievements
{
	display:inline-block;
}
#box-things-upgradesII
{
	display:inline-block;
}
#box-things-prestigeII
{
	display:inline-block;
}

#box-things-upgrade
{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.upgrade.notOwned
{
	order:1;
}
#box-things-Upgrades /*if necessary, change this to the name of the box containing your upgrades. it should start with "box-things" and you can use inspect element to find it*/
{
	display:flex;
	flex-wrap:wrap;
	justify-content:center; /*you can change this to "flex-start" if you want upgrades aligned to the left*/
}
.upgrade.notOwned
{
	order:1;
}
.upgrade.owned
{
	order:2;
}