/* width % */
.w100 { width: 100%; }

/* widths */
.w160 { width: 160px; }
.w240 { width: 240px; }
.w320 { width: 320px; }
.w480 { width: 480px; }
/* height */
.h120 { height: 120px; }
.h180 { height: 180px; }
.h240 { height: 240px; }
.h320 { height: 320px; }
/* screens */
.s800x600 { width: 800px; height: 600px; }
.s480x320 { width: 640px; height: 480px; }
.s320x240 { width: 320px; height: 240px; }
.s240x180 { width: 240px; height: 180px; }
.s160x120 { width: 160px; height: 120px; }
/* obscure-screens */
.s260x160 { width: 260px; height: 160px; }

/* border */
.b1black { border: solid 1px black; }
.b2black { border: solid 2px black; }
.b1blue { border: solid 1px blue; }
.b2blue { border: solid 2px blue; }

/* border radius */
.br10 { border-radius: 10px; }
.br5 { border-radius: 5px; }

/* shadow */
.shadow1 { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; }
.shadow2 { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
.shadow3 { box-shadow:rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; }

/* margin */
.m5 { margin: 5px; }
.m10 { margin: 10px; }
.m20 { margin: 20px; }

/* padding */
.pad4 { padding: 4px; }
.pad10 { padding: 10px; }

/* background-color */
.bg111 { background-color: #191919; }
.bgeee { background-color: #eeeeee; }

/* frame designs */
.frame_white {
	background-color: white;
	background-image: linear-gradient(to bottom,
		white, #cccccc 100% );
}
.frame_blue {
	background-color: black;
	background-image: linear-gradient(to bottom,
		black,
		rgba(0,0,128, 1) 100%);
}
.frame_black {
	background-color: black;
	background-image: linear-gradient(to bottom,
		black, #444444 100% );
}