/* =-=-=-=-=-=-=-=-=-==-=-==-=-==-=-=
bc4hkids.com principle css file
FileName:    style.css
Created:    20080320
Modified:	20100702

Alternates
----------

Colors

2D63B4		bright dark blue
1756B5		very nice medium blue
FFFEE9		pretty pale yellow
FFF9B5		background alternate?
73a0c5		original blue 
06c         sky blue
4A59FF		deep sky blue
147         deep blue
4f4f4f		light gray
959596      nondescript gray
b85b5a		muted red
749F3B		olive green
94CD02		darker olive green
4F4F5A		navy-gray
696979		gray tinted with navy
81902E		another olive green
8AA155		a beatiful, creamy olive green
E4F8C5		pale green
049D29		shamrock green
478484		darkish aqua
FF4416		reddish orange
7F7F7F		medium gray
7b7b7b		darkish gray
E6E6E6		pale gray
B3C5C5		pale aqua
003757		navy-aqua
D5E7C9		pale green
BADCC2		pale gray tinted green
E5E9DB		very pale green
74B1AC		light aqua-gray
DCD4CD		red tinted light gray
A9FF92		nice neon-almost green, not too bright
003757		navy darkish blue
59586F		fine light charcoal gray for type
496A94		Medium-dark blue
496acc		Medium blue
f2662d		Logo orange
243f91		Bright-hued dark blue

CEF88C		Bright soft green
AAE361		Darker green
F69052		Logo orange
F49557			a bit darker 
067DBE		Logo blue
98CA53		Logo green
599F00		Alt green
515170		Dark gray-blue
293974		Dark midnight blue
395788		Midnight blue
3A5989		Dark heather blue
77859B		Lightish grey-blue
FEFAC8		whitish yellow
078DD3		Aquamarine blue
4183A6		Turquoise blue
5082B1		Darkish-sultry blue

/* -=-=-=-=-=-=-=-=-=-=-=-=-==-=-==-=-==-=-= */

body {
    text-align: center;
    margin: 0;
    padding: 0; 
    font-size: 90%;
    line-height: 136%;
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    color: #3E3F62; background: #FFFDF0 url(http://thewei.com/sandbox/bc4hkidsplayground/indigoice.gif);
	}
p {
    margin: 0 0 6px;
	}
ul {
	list-style-position: inside;
    margin: 0 0 6px;
    padding: 0;
	}
ol {
	list-style-position: outside;
	text-align: left;
	margin: 0;
	}
ul li {
	list-style-position: outside;
	}
ul.notype li {
    list-style-type: none;
	}
ul li h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0;
	}
a { outline: none; 
	text-decoration: none; 
	}
a:link {color: #6DB70E;
	border-bottom: 1px dotted #6DB70E;
	 }
a:visited {color: #6DB70E; text-decoration: none; }
a:hover {
	color: #6DB70E; background: transparent;
	border-bottom: 1px solid #6DB70E;
	}
img {
	display: inline;
	border: none;
	}
	
/* ~~~~~~~~~~~~~~
   Headers
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
h1, h2, h3 {
	margin: 0; text-align: center;
	}
h1 {
	text-align: center;
	margin: .5em .5em 0;
    padding: .6em 0 .4em;
    border-top: 2px solid #FFF400;
    border-bottom: 2px solid #FFF400;
    color: #6B78BE; background: #F7FFA8; 
    font-size: 1.15em;
    line-height: 130%;
    font-weight: 900;
	}	
h2 {	
	text-align: center;
    margin-top: .4em;
    padding: 2.5px 0;
    color: #fff; background: #62A6B9; 
    font-size: 1.12em;
    line-height: 130%;
    font-weight: 900;
	}
h3 {
    margin: 0;
    padding: .1em 0 .4em;
    border: none;
    color: #FF7408; background: transparent;
    font-weight: 900;
    font-size: 1.1em;
	}
h4 {
    text-align: left;
    margin: 0 0 .15em;
    padding: 7px 0 0;
    border: none;
    color: #8FB94D; background: transparent;
    font-weight: 900;
    font-size: 1.1em;
	}
h4 a:link {
	color: #9FD452;
	border-bottom: 1px dotted #9fd452;
	}
h4 a:hover {
	color: #067DBE;
	border-bottom: 1px solid #9fd452;
	}
h5 {
    text-align: center;
    margin: 0 0 .3em;
    padding: .2em 0 0;
    color: #8FB94D;
    font-weight: 900;
    font-size: 1.1em;
	}
h6 {
    text-align: right;
    margin: 0;
    padding: .55em 0 .8em;
    color: #A4B886; background: transparent;
    font-weight: 900;
    font-size: .95em;
	}
	
	
/* ~~~~~~~~~~~~~~
   MAJOR ELEMENTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#wrapper {
	width: 960px;	
	margin: 0 auto;
	border: 2px solid #AAE361;
    color: #4F4F5A; background: #fff;
	background: #F6FFEE;
	}
#header {
	padding: .7em 0 0;
	border-top: 8.7px solid #AAE361;
	background: #E0F8BC;
	font-size: 1em;
	}
#header img {
	margin-top: 1em;
	display: inline;
	}
#header a:hover {
	border-bottom: none;
	}
#main {
	margin: 0 0 .5em 0;
	border-top: 7px solid #336ABD;
	background: #F6FFEE;
	}
#copy {
	width: 64%;
	float: left;
	margin: .4em .5em 0;
	padding: 0 1.5em 2.5em;
	color: #2E4AA9; background: #FDFBE5/*#F6FFEE*/;
 	}
#copy h3 {
	font-size: 1.1em;
	margin: 1em 0 .4em;
	padding: 0;
	}
#copy h4 {
    text-align: center;
    margin: 0;
    padding: .5em 0 .25em;
    border: none;
    color: #8FB94D; background: transparent;
    font-weight: 900;
    font-size: 1.1em;
	}
#copy a:hover {
	border-bottom: 1px solid #6DB70E;
	}
#colctr {
	width: 80%;
	margin: 1em auto 0;
	padding: 0 1.8em 2.5em;
	text-align: left;
	color: #545496; background: #F6FFEE;
	margin-top: 12px;
	padding-top: 9px;
	border: 1.5px solid #545496;
	border-top: 2.5em solid #F49557;
	border-bottom: 4px solid #F49557;
	border-left: 1.5px solid #F49557;
	border-right: 1.5px solid #F49557;	
 	}
#colctr h1 {
	text-align: center;
    margin: -2em -1.6em 1em;
    padding: 1.5px 0 .3em;
    border: none;
    color: #fff; background: #F49557; 
    font-size: 1.15em;
    line-height: 125%;
    font-weight: 900;
	}
#colctr h2 {	
	text-align: center;
    margin-top: 0;
    padding: 2.5px 0;
    color: #336ABD; background: transparent; 
    font-size: 1.12em;
    line-height: 130%;
    font-weight: 900;
	}
#colctr h4 {
	color: #FF7408;
	font-size: 1.15em;
	}


	
/* ~~~~~~~~~~~~~~~~~~
   MINOR ELEMENTS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#nav {
	padding: 1.1em 0 0;
	/*border-bottom: 11px solid #CEF88C;*/
	background: #E0F8BC;
	}
* html ul.nav {
margin: 0;
 }
ul.nav {
	display: table;
	text-align: center;
	margin: 0 auto;
 	}
ul.nav li {
 display: inline-block;
 height: 1%;
 	}
ul.nav li {
	display: inline;
 	}
ul.nav li {
	display: table-cell;
	}
ul.nav li {
	color: #fff; background: transparent;
	border-right: 2px solid transparent;
	}
ul.nav li.last {
	border-right: none;
	}
ul.nav a {
	display: block;
	text-decoration: none;
	border: none;
	margin: 0;
	padding: 2px 6px 0;
	color: #fff; background: #AAE361;
	font-weight: bold;
	text-align: center;
	}
ul.nav a:hover {
	color: #AAE361; 
	background: #FFFDF0 url(http://thewei.com/sandbox/bc4hkidsplayground/indigoice.gif);
	}
#sidebar {
    float: right;
	width: 28%;
	vertical-align: top;
    margin: 0 .5em;
    padding: .2em 0 2em 0;
    color: #003757; /*background: #CEF88C*/;
	font-size: 95%;
	}
#sidebar a:link {
	color: #067DBE;
	}
#sidebar a:hover {
	border-bottom: 1px solid #067DBE;
	}
#sidebar ul.boxes {
	text-align: left;
	margin: 4px 0 0;
    padding: 3px 6px 6px;
    }
#sidebar ul li {
	list-style-type: none;
	margin: 0 0 6px;
	}
#sidebar ul li.nm {
	margin: 0;
	}
#sidebar h2 {
    margin: .4em 0;
    padding: 4px 0;
    color: #fff; background: #336ABD;
    font-weight: 900;
    font-size: 1.1em;
	}
#sidebar h2.first {
    margin: 0;
    }
#sidebar h3 {
    margin: 0;
    padding: 6px 0 0;
    color: #52698F; background: transparent;
    font-weight: 900;
    font-size: 1.1em;
	}
#sidebar h4 {
    text-transform: uppercase;
    margin: .25em 0 0;
    padding: 0;
    color: #AAE361; background: transparent; 
    font-weight: 700;
    font-size: 1em;
	}
#sidebar h5 {
	display: inline;
    margin: 0;
    padding:0;
	color: #003757; background: transparent;
	font-size: 95%;
    font-weight: 900;	
	}
#footer {
    clear: both;
    margin: 0 6%;
    padding: 14px 0;
    font-size: .9em;
    color: #628394; background: #FFFDF0;
	}
#footer p {
	text-align: left;
	}
.page {
	text-align: right;
	margin: 2em 0 -1.4em;
	color: #294C78;
	}
.page a {
	padding: 1px 2px;
	color: #fff; background: #336ABD;
	}
.page a:hover {
	padding: 1px 2px;
	border-bottom: 1px dotted #336ABD;
	color: #336ABD; background: transparent;
	}	
.recent {
	margin: .5em 0 .6em;
	padding: .4em 0 .3em;
	/*border: 1.5px solid #6B78BE;
	border-top: 2.7em solid #6B78BE;*/
	border-bottom: 4px solid #6B78BE;
	/*border-left: 1.5px solid #6B78BE;
	border-right: 1.5px solid #6B78BE;	*/ 
	/*background: #F7FFA8;*/
 	}
.recent h1 {
	text-align: center;
    margin: -2.3em 0 2em;
    padding: 1.5px 0 0 15px;
    border: none;
    color: #fff; background: #6B78BE; 
    font-size: 1.15em;
    line-height: 100%;
    font-weight: 900;
    }
.recent ul {
	list-style-type: none;
	}
/* ~~~~~~~~~~~~~~
   Effects
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.credittop {
	text-align: right;
	font-style: italic;
	margin-top: .6em;
	padding-bottom: .5em;
	color: #A4B886;
	}
.creditbtm {
	text-align: center;
	font-style: italic;
	padding: 1em 0 .5em;
	color: #A4B886;
	}
.pullquote {
    text-align: left;
    margin: 1em 3em;
    font-style: italic; 
	}
.pullquote p {
	margin-bottom: .75em;
	color: #294C78;
	}
.turqbox {
	border: 2px solid #62A6B9;
	margin: 0;
	padding-bottom: .5em;
	}
.turqbox h2 {
	text-align: center;
 	margin: 0 0 1em;
	padding: 2.5px 0;
    color: #fff; background: #62A6B9; 
    font-size: 1.12em;
    line-height: 130%;
    font-weight: 900;
	}
.turqbox h3 {
	text-align: center;
	margin-top: 1.2em;
	padding: 2.5px 0;
    color: #fff; background: #62A6B9; 
    font-size: 1.12em;
    line-height: 130%;
    font-weight: 900;
	}
.turqbox p {
	text-align: left;
	margin: 0 1em .4em;
	}
.turqbox ul {
	list-style-type: none;
	text-align: left;
	margin: 0 1em .4em;
	}
ul.box  {
	text-align: left;
	margin: 0 auto;
	}
ul.box {
	display: table;
	}
ul.box>li {
	vertical-align: middle;
	display: table-cell;
	position: relative;
	padding: 0 .8em;
	}
ul.orange {
    border: 2px solid #FD7979;
    background: #FFBB96;
    }
ul.yellow {
    border: 2px solid #FFF053;
    background: #FDFBE5;
    }
ul.violet {
    border: 2px solid #8522EB;
    background: #EDDFFE;
    }   
.straightlist {
	list-style-type: square;
	text-align: left;
	margin: 0 7em;
	}
.straightlist ul {
	list-style: inside;
	list-style-type: square;
	}
.straightlist ul p, .straighlist li {
	margin-bottom: .4em;
	}
.lefted p {
	text-align: left;
	}
.tbborders {
    margin: 0;
    padding: 0;
    border-top: 2.5px solid #A4B886;
    border-bottom: 2.5px solid #A4B886;
    color: #A4B886; background: transparent;
    font-size: .95em;
    line-height: 110%;
    }   
.caption {
	text-align: center;
	padding-bottom: .5em;
	color: #A4B886; background: transparent;
	}
.center {
	text-align: center;
    margin: 0 auto;
	}
.left {
	float: left;
	}
.right {
	float: right;
	}
ul.lefttext {
	text-align: left;
	}
img.right {
	margin: 4px 10px 4px 0;
	}