html {
	background-color: #44b;

	font-size: 16px;
}

body {
		background-image: url("images/borontransrnd.svg");
	background-size: 15%;
}

/* Splash Start */

.splash {
	display: inline;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 3;
	width: 0%;
	height: 0%;
	margin: 0%;
	max-height: 100%;
	max-width: 100%;
	background-color: rgba(68,68,187,.8);
	overflow: hidden;
	animation-name: splashonoff;
    animation-duration: 12s;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	}	

@keyframes splashonoff {
    0%   {width: 0%; height: 0%; top: 50%; left: 50%;}
    5%  {width: 100%; height: 100%; top: 0px; left: 0px;}
    90%  {width: 100%; height: 100%; top: 0px; left: 0px;}
    100% {width: 0%; height: 0%; top: 50%; left: 50%;}
}

.blanker {
	width: 90%; 
	height: 90%; 
	max-width: 90%;
	max-height: 90%;
	border: .5em dashed #f33; 
	border-radius: .75em; 
	margin: 2% 4%;	
	overflow: auto;
	background-image: url("images/ciaorgbrndimg.svg");
    background-color: #def;
	background-size: 30%;
}

#blankercialogo {
float: left;
margin: 2em .1em 1em 2em;
padding: 1em;
border: .5em dotted rgba(200,200,200,.75);
border-radius: .5em;
background-image: url("images/ciaorglogo.svg");
background-repeat:no-repeat;
    background-color: rgba(255,255,255,.65);
	background-size:  100%;
}


.splash button {
	float: right;
	font-size: 2em;
	font-family: 'Press Start 2P', mono;
	margin: .5em .5em .5em .1em;
	padding: .2em;
}

.splash h1, .splash h2, .splash h3 {
font-family: verdana, arial, sans-serif;
width: 43%;
background-color: rgba(255,255,255,.75);
margin: .5em;
padding: .3em;
border: 5px dotted rgba(150,150,150,.9);
border-radius: 5px;

}

.splash h1 {
	font-size: 2em;
	text-align: right;
	float: right;
	background-color: rgba(255,255,225,.75);
}

.splash h2 {
font-size: 1.5em;
float: left;
background-color: rgba(255,240,247,.75);
}

.splash h3 {
	font-size: 1.25em;
	float: left;
	background-color: rgba(245,255,255,.75);
}

@media screen and (max-width: 900px) {
    #blankercialogo {
		margin: 1.5em .1em 1em 1.5em;
    }
	
	.splash h1, .splash h2, .splash h3 {
	width: 42%;
	margin: .2em;
}
}

@media screen and (max-width: 640px) {
    #blankercialogo {
		margin: 1em .5em .2em .5em;
    }
	
	.splash button {
	margin: .2em;
}

.splash h1, .splash h2, .splash h3 {
	width: 85%;
}

.splash h1 {
	font-size: 1.5em;
}

.splash h2 {
	font-size: 1.25em;
}

.splash h3 {
	font-size: 1em;
}
}


@media screen and (max-width: 480px) {
    #blankercialogo {
		margin: .5em .2em .2em .5em;
		padding: .3em;
		border: .3em dotted rgba(200,200,200,.75);
		border-radius: .5em;
    }
	
	.splash button {
	font-size: 1.5em;
	margin: .2em;
}

.splash h1, .splash h2, .splash h3 {
	width: 90%;
}

.splash h1 {
	font-size: 1.25em;
}

.splash h2 {
	font-size: 1.10em;
}

.splash h3 {
	font-size: 1em;
}
}

/* Splash End */

/* Container Start */
#container {
	overflow: auto;
	width: 100%;
	height: 96%;
	min-width: 300px;
}

/* Container End */

/* Dress Up Doll Start */

#dressupdoll {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	border: 5px solid #44b;
}

#dressup {
	background-image: url("images/boronbrnd.svg");
	background-color: #44f;
	background-size: 35%;
}

#ciaLogo {
	opacity: 0.65;
}

#backstage {
	display: inline;
	opacity: .85;	
}

/* Dress Up Doll End */

/* Buttons Begin */

/* Title Formatting */
.titleBut h1, .titleBut h2, .titleBut h3, .titleBut a {
	font-family: "Press Start 2P", mono;
    color: #a00;
	background-color: #dceeff;
	padding: 4px 5px 2px;
}

.titleBut h1 {
	font-size: 1em;
	margin: .2em;
	text-transform: uppercase;
}

.titleBut h2 {
	font-size: .9em;
	margin: .2em;
}

.titleBut h3 {
	font-size: .75em;
	margin: .2em;
	text-transform: uppercase;
}

.titleBut h3 a, .titleBut h3 a:visited {
	color: blue;
	text-decoration: underline;
	line-height: 150%;
}

.titleBut h3 a:hover, .titleBut h3 a:active {
	color: dodgerblue;
	text-decoration: underline;
}

#titleButfoot {
	text-align: right;
}

.titleBut button {
	display: inline;
}

/* Section Formatting */
.butdiv {
	background-color: #0e0;
	padding: .3em;
	position: relative;
	margin: 0 .3em;
	z-index: 1;
	min-width: 240px;
}

.groupbut {
border: 2px solid #0000ff;
background-color: #accaac;
padding: .15em;
margin: .5em 0em;
}

.buttitle {
	font-family: 'Press Start 2P', mono;
	font-size: .9em;
	color: #a00;
	text-transform: uppercase;
	padding: 4px 5px 2px;
	margin: .2em auto;
	width: 90%;
	background-color: #cceacc;
}

button, .titleBut .topBut, .titleBut .outfitsBut {
	margin: .2em;
	padding: 0em .2em;
	font-family: 'VT323', mono;
	font-size: 1.5em;
	color: #a00;
	text-transform: uppercase;
	cursor: pointer;
}

button:hover, .titleBut .topBut:hover, .titleBut .outfitsBut:hover {
	opacity: 0.8;
}

.titleBut .topBut, .titleBut .outfitsBut {
	-webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
	display: inline;
	padding: .075em .25em;
	text-decoration: none;
}


.clearbut, #forgirls {
	width: 100%;
	margin: .2em auto;
	padding: .2em;
	font-family: 'Press Start 2P', mono;
	font-size: .75em;
}

.clearbut, .titleBut .shareBut, .titleBut .topBut, .titleBut .outfitsBut {
	display: none;
}

#forgirls {
	background: pink;
	border: 2px solid red;
	font-size: 1.25em;
	padding: .4em;
}



.titleBut .outfitsBut, #allBut .buttitle {
	!background-color: lightgreen;
	
}

/* Buttons End */

/* MULTI BUTTONS - BEGIN */

.borongamebut, .titleBut .borongamebut {
	display: inline-block;
	background-color: yellow;
	text-decoration: underline;
	font-family: Arial, sans-serif;
	color: black;
	font-weight: 700;
	padding: .2em;
	margin: .2em;
	font-size: 1.1em;
}

.splash .borongamebut {
	font-size: 3em;
	margin: .3em;
	border: 5px dotted rgba(150,150,150,.9);
    border-radius: 5px;
	display: inline-block;
}

.borongamebut:hover {
	background-color: pink;
}

/* END - MULTI BUTTONS */

/* Raster Image for Search Posts */

.raster {
	display: inline;
	z-index: 0;
	max-height: 6px;
	max-width: 4px;
	opacity: .1;
	position: absolute;
}

.raster img {
	max-height: 6px;
	max-width: 4px;
	opacity: .1;
	position: absolute;
}

/* END Raster Image for Search Posts */

/* PRINT */
/* Print Display */

.paperdoll {
	display: inline;
	z-index: 1;
}

#p1dressup {
	width: 0px;
	height: 0px;
	z-index: 1;
}
/* Print Display END */

@media print {
	
html {
	background-color: transparent;
}

#p1dressup {
	width: 630px;
	height: 900px;
	z-index: 1;
}

#p1backstage {
	display: none;
}

.splash, .butdiv {
	display: none;
}

#container {
	background: transparent;
}

#dressupdoll {
	z-index: 1;
	position: relative;
	border: 0px;
	}

#dressup {
	max-width: 338px;
	min-width: 338px;
	max-height: 518px;
	min-height: 518px;
	background: none;
} /* 125% = 99% aprox */

#backstage {
	display: none;
}

.raster {
	display: none;
}

}

/* Print End */