@media screen {

/************* C S S   R E S E T ************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit; 
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

img {
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}


/*********** END CSS RESET *************/



/****** B A S I C   S T Y L E S ******/

body {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	background-color: #20004A;
	font-family: 'Lato', Verdana,Geneva,sans-serif;
}


i, em, cite, .i {
	font-style: italic;
}

b, strong, .b {
	font-weight: bold;
}

h1,h2 {
	font-family:Merriweather,serif;
	font-weight:700;
}

h1 {
	margin: 0 0 0.5em;
	font-size: 2em;
	line-height:1.2em;
}

h2 {
	margin: 0 0 10px;
	font-size: 1.3em;
}

a {
	text-decoration: none;
	color: #286ea0;
}

.under { /* a:hover */
	text-decoration: underline;
}

/****** END BASIC STYLES ******/


/****** M A I N   D I V S ******/

.sitebanner {
	height: 130px;
	width: 960px;
	position: relative;
	z-index: 20;
	background-color: #20004A;
	background-image: url(http://a.yu8.us/i_asan_i.png);
	background-repeat: no-repeat; /* Playful is too small */
	background-position:center;  /* ASAN is too small */
	}

.wrap_3cols { 
	position: relative;
	z-index: 20;
		color: #303030;
	background-color: white;;
}

.wrap_2leftcols {
	width: 810px;
	float: left;
}


article { background: url("http://a.yu8.us/bg-tile-parch.gif")
						repeat scroll center top ;
	background-color: white; 
	float: right;
	width: 650px;
	border-width: 0 10px 0 10px;
	border-style: solid; 
	border-left-color: transparent;
	border-right-color: transparent; 
	padding: 0 10px 0 10px;
	font-size: .95em;
	line-height: 1.3em;
	text-align: left;
}


.leftmenu { 
	margin: 0 650px 0 0;
	padding: .5em; /* need the left on laugh */
	background-color: #555555;
	color: white;
	line-height: 1.75em; 
/*	font-family: Arial, Helvetica, sans-serif; */
	font-size: 86%;
}

.leftmenu ul{
	font-size: 1.1em; 
	line-height: 2em; 
}

.leftmenu a {
	display: block; 
	color: white;
	text-decoration: underline; 
}

.leftmenu a:hover {
	background-color: #eaffd2;
	color: #555555;
	border-radius: 5px;
	text-decoration: none;
	padding-left:4px; /* Pads the text within the button */
}

.leftmenu a.thispage {
	background-color: #ffff99;
	color: #555555;
	border-radius: 5px;
	text-decoration: none;
	padding-left:4px; /* Pads the text within the button */
}

.topanchor {
	width: 960px;
	position: fixed;
	z-index: 10;
	top: 10px;
	left:50%;
	margin-left:-480px; /* half of 960 */
}

.rightcolumn {
	z-index: 20;
	width: 150px;
	margin-left: 810px;
	padding: 1em 0;
	font-size: 0.9em;
	border-radius: 7px;
	background-color: white;background: url("http://a.yu8.us/bg-tile-parch.gif")
			repeat scroll center top ;
}


footer {
	clear: both;
	text-align: center;
	color: #9380FF;
	font-size: 1.3em;
}

/****** END MAIN DIVS ******/


/*********** THE TOP MENU **************/
.glossymenu{
	position: relative;
	z-index: 20;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background: url(http://a.yu8.us/menu_band-blue.gif) repeat-x; /*tab background image path*/
	background-color: #20004A;
	height: 46px;
	list-style: none;
}
.glossymenu li{
	float:left;
}
.glossymenu li a{
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
}
.glossymenu li a b{
	float: left;
	display: block;
	padding: 0 14px 0 0px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
	color: #fff;
	background: url(http://a.yu8.us/menu_left-blue.gif) no-repeat; /*left tab image path*/
	background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
	color: #fff;
	background: url(http://a.yu8.us/menu_right-blue.gif) no-repeat right top; /*right tab image path*/
}
/****** END THE TOP MENU *********/



/****** G E N E R A L   C L A S S E S ******/

.bulletlist li { /* basic bullets */
	list-style-type: disc;
	list-style-position: inside; 
	padding-left: 1.25em; /* push the text out 
	text-indent: -1em;  /* first line */
	line-height: 1.2em;
	margin-bottom: .3em;
	}


.searchbox {
	background: #FEE07D;
	font-size: 0.9em;
	font-style: italic;
	border-radius: 5px;
	box-shadow: inset 0 0 10px rgba(255,255,255,.75);
}


.goldborder {
	border: solid 2px #cba77a;
	}

.dropshadow {
	box-shadow: 2px 2px 4px rgba(0,0,0,.5);
	}	
.textshadhow {
	text-shadow: 3px 3px 5px #888;
	}
	
.redtext, .redtext a { color:#800; }
.greytext, .greytext a { color: rgb(102, 102, 102); }


.em8 {	font-size: .8em; }
.em9 {	font-size: .9em; }
.em2 {	font-size: 2em; }
.mt1 {	margin-top: 1em; }
.mt2 {	margin-top: 2em; }

.pre { white-space: pre-wrap; }

code {
font-family:  Consolas, Menlo, Monaco, monospace; 
display-style: inline-block;
white-space: pre;
border-style: solid;
border-width: 1px 0;
margin: .2em 0;
padding: 1px 5px;
border-color: #e9ac00;
background-color: #ffffce;
border-radius: 5px;
}


.mono {
      font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}


.socode {
      display-style: inline-block;
      background-color: #DDD;
      font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
      padding: 1px 5px;
      white-space: pre-wrap;
      border-radius: 3px;
}


code.good {
border-color: #009900;
background-color: #eaffd2;
}
code.bad {
border-color: #fb0505;
background-color: #f7cece;
}

.codebox  {
	background: #F0F5FD; 
	border: 2px solid #D7E8F0; 
	font-family: Consolas, Menlo, Monaco, monospace; 
	font-size: 1em;
	line-height: 1.1em;
	padding: 10px;
	margin: 0 1em;
	border-radius: 8px;
}
/* Some of these colors are used for tables */
.green {background-color: #dffddf;}
.blue {background-color: #b7dee8; padding: 1px 5px;}
.brown {background-color: #dcb86a; }
.beige {background-color: #f7e4a1; }
.gold {background-color: #e8af3b; }
.wasabi {background-color: #a3be62; }
.greentea {background-color: #c9dc9a; }
.pink {background-color: #FFE3CD;}
.pinklaugh {background-color: #f95a79;}
.yellow {background-color: #ffffce;}
.yglo {background-color: yellow; padding: 1px 5px;}

hr {
	color: #f0f0f0;
	width: 80%;
}


blockquote {
	background: url(http://b.yu8.us/0_quote-start.png) top left no-repeat;
}

blockquote div {
	background: url(http://b.yu8.us/0_quote-end.png) bottom right no-repeat;
	font-family: georgia,serif;
	line-height:1.5em;
	padding-left: 30px;
	padding-right: 15px;
}


.pullquote {
	width: 240px;
	background: #C0C0C0 url(http://b.yu8.us/pullquote_top.gif)
			top left no-repeat;
	padding: 10px;
	font-family: Georgia,serif;
	font-size: 1.3em;
	line-height:1.5em;
}

.pullquote.L { float: left; text-align: center; margin: 5px 15px 5px 0; }
.pullquote.R { float: right; text-align: center; margin: 5px 0 5px 15px; }


article img.box {
	border: 4px solid #f0f0f0;
	padding: 1px;
	background: #cccccc none repeat scroll 0%;
}

sup {
    font-size: 0.7em;
    vertical-align: super;
}

.left {
	margin: 10px 10px 5px 0;
	float: left;
}
.right {
	margin: 10px 0 5px 10px;
	float: right;
}
.rtext {
	text-align: right;
}
.cintable {
	margin-left: auto;
	margin-right: auto;
}
.cinter {
	display: block;
	margin: auto;
	text-align: center;
}
.tabtext2 {
	padding-left:2em;
}
.tabtext4 {
	padding-left:4em;
}
.hide {
	display: none;
}
.hilite {
	background-color: #FFFFCC;
	color: #B22222;
}


.fbtweet {
	padding: 0;	
}

/* What Follows is SPRITE stuff
should use OPACITY instead */

a.tw-roll {
	display: block;
	width: 55px;
	height: 20px;
	text-decoration: none;
	background: url("http://a.yu8.us/0_tweet.png");
	}
a.tw-roll:hover {
	background-position: -55px 0;
}

a.fb-roll {
	display: block;
	width: 50px;
	height: 64px;
	text-decoration: none;
	background: url("http://a.yu8.us/0_fb-like-trans2.png");
	}

a.fb-roll:hover {
	background-position: -50px 0;
}

.info, .success, .attention, .error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://a.yu8.us/knob-info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('http://a.yu8.us/knob-success.png');
}
.attention {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('http://a.yu8.us/knob-attention.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('http://a.yu8.us/knob-error.png');
}

/********* BUTTONS *************/

.tag {
    display: inline-block;
/* blue	color: rgb(62, 109, 142); */
	color: #fce700;
/* blue    background-color: rgb(224, 234, 241); */
    background-color: #f95a79;
    border-bottom: 1px solid rgb(179, 206, 225);
    border-right: 1px solid rgb(179, 206, 225);
    padding: 3px 4px;
    margin: 2px 2px 2px 0px;
    text-decoration: none;
    font-size: 90%;
    line-height: 1.2;
	font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
	border-radius: 8px;
}

.tag:hover {
/*	blue background-color: rgb(196, 218, 233); */
	background-color: #e70033;
	border-bottom: 1px solid rgb(196, 218, 233);
	border-right: 1px solid rgb(196, 218, 233);
}


/****************** MESSAGES ******************/
.messages {
font-family: tahoma,verdana,sans-serif;
font-size: 1em;
line-height: 1.3em;
background-color: #ffffcc;
color: #005555;
border: 1px solid #999999;
padding: .2em;
margin: .2em;
}

.messages a {
text-decoration: underline;
color: #005555;
}


div.pagecontent { 
margin-top: 10px;
padding: 3px 9px 5px 9px;
background-color: #ffffcc;
}


@-webkit-keyframes tada {
	0% {-webkit-transform: scale(1);}	
	10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
	100% {-webkit-transform: scale(1) rotate(0);}
}
@-moz-keyframes tada {
	0% {-moz-transform: scale(1);}	
	10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
	100% {-moz-transform: scale(1) rotate(0);}
}
@-o-keyframes tada {
	0% {-o-transform: scale(1);}	
	10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
	100% {-o-transform: scale(1) rotate(0);}
}
@keyframes tada {
	0% {transform: scale(1);}	
	10%, 20% {transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
	100% {transform: scale(1) rotate(0);}
}

@-webkit-keyframes pulsechain {
    0%,6%,100% { -webkit-transform: scale(1); }	
	3% { -webkit-transform: scale(1.1); }
}
@-moz-keyframes pulsechain {
    0%,6%,100% { -moz-transform: scale(1); }	
	3% { -moz-transform: scale(1.1); }
}
@-o-keyframes pulsechain {
    0%,6%,100% { -o-transform: scale(1); }	
	3% { -o-transform: scale(1.1); }
}
@keyframes pulsechain {
    0%,6%,100% { transform: scale(1); }	
	3% { transform: scale(1.1); }
}


@-webkit-keyframes bounceInLeft {
	0% { opacity: 0;
		-webkit-transform: translateX(-2000px);	}
	60% { opacity: 1;
		-webkit-transform: translateX(30px); }
	80% { -webkit-transform: translateX(-10px);	}
	100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes bounceInLeft {
	0% { opacity: 0;
		-moz-transform: translateX(-2000px); }
	60% { opacity: 1;
		-moz-transform: translateX(30px); }
	80% { -moz-transform: translateX(-10px); }
	100% {	-moz-transform: translateX(0);	}
}
@-o-keyframes bounceInLeft {
	0% { opacity: 0;
		-o-transform: translateX(-2000px);	}
	60% { opacity: 1;
		-o-transform: translateX(30px);	}
	80% { -o-transform: translateX(-10px);	}
	100% { -o-transform: translateX(0);	}
}
@keyframes bounceInLeft {
	0% { opacity: 0;
	transform: translateX(-2000px);	}
	60% { opacity: 1;
		transform: translateX(30px); }
	80% { transform: translateX(-10px);	}
	100% { transform: translateX(0); }
}

@-webkit-keyframes fadein {	0% {opacity: 0;} 100% {opacity: 1;} }
@-moz-keyframes fadein { 0% {opacity: 0;} 100% {opacity: 1;} }
@-o-keyframes fadein {	0% {opacity: 0;} 100% {opacity: 1;} }
@keyframes fadein {	0% {opacity: 0;} 100% {opacity: 1;} }


@-webkit-keyframes bouncechain {
	0%,1.5%,3%, 100% {-webkit-transform: translateY(0);}
	0.75% {-webkit-transform: translateY(-30px);}
	2.25% {-webkit-transform: translateY(-15px);}
}
@-o-keyframes bouncechain {
	0%,1.5%,3%, 100% {-o-transform: translateY(0);}
	0.75% {-o-transform: translateY(-30px);}
	2.25% {-o-transform: translateY(-15px);}
}
@-moz-keyframes bouncechain {
	0%,1.5%,3%, 100% {-moz-transform: translateY(0);}
	0.75% {-moz-transform: translateY(-30px);}
	2.25% {-moz-transform: translateY(-15px);}
}
@keyframes bouncechain {
	0%,1.5%,3%, 100% {transform: translateY(0);}
	0.75% {transform: translateY(-30px);}
	2.25% {transform: translateY(-15px);}
}


/* need to add -moz- etc */
@keyframes spin {
0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}
}



@keyframes pulse {
  0%,100% {transform: scale(1);}
  50% {transform: scale(1.1);}
}
.pulse { animation:pulse 3s infinite forwards; }

.pulse1st {
	-webkit-animation: pulsechain 30s linear infinite normal 10s forwards;
	-moz-animation: pulsechain 30s linear infinite normal 10s forwards;
	-o-animation: pulsechain 30s linear infinite normal 10s forwards;
	animation: pulsechain 30s linear infinite normal 10s forwards;
}
.pulse2nd {
	-webkit-animation: pulsechain 30s linear infinite normal 11s forwards;
	-moz-animation: pulsechain 30s linear infinite normal 11s forwards;
	-o-animation: pulsechain 30s linear infinite normal 11s forwards;
	animation: pulsechain 30s linear infinite normal 11s forwards;
}
.bounce1st {
	-webkit-animation: bouncechain 30s linear infinite normal 5s forwards;
	-moz-animation: bouncechain 30s linear infinite normal 5s forwards;
	-o-animation: bouncechain 30s linear infinite normal 5s forwards;
	animation: bouncechain 30s linear infinite normal 5s forwards;
}

.bounce2nd {
	-webkit-animation: bouncechain 30s linear infinite normal 6s forwards;
	-moz-animation: bouncechain 30s linear infinite normal 6s forwards;
	-o-animation: bouncechain 30s linear infinite normal 6s forwards;
	animation: bouncechain 30s linear infinite normal 6s forwards;
}
div:hover.hbounce {
	-webkit-animation:  bouncechain 30s linear 1 normal 0s forwards;
	-moz-animation:  bouncechain 30s linear 1 normal 0s forwards;
	-o-animation: bouncechain 30s linear 1 normal 0s forwards;
	animation:  bouncechain 30s linear 1 normal 0s forwards;
}



.bounceInLeft {
	-webkit-animation: bounceInLeft 3s linear 1 normal 0s forwards;
	-moz-animation: bounceInLeft 3s linear 1 normal 0s forwards;
	-o-animation: bounceInLeft 3s linear 1 normal 0s forwards;
	animation: bounceInLeft 3s linear 1 normal 0s forwards;
}

img:hover.tada, div:hover.tada {
	-webkit-animation:  tada 1s linear 1 normal 0s forwards;
	-moz-animation:  tada 1s linear 1 normal 0s forwards;
	-o-animation: tada 1s linear 1 normal 0s forwards;
	animation:  tada 1s linear 1 normal 0s forwards;
}

.dtada {
	-webkit-animation:  tada 1s linear 1 normal 15s forwards;
	-moz-animation:  tada 1s linear 1 normal 15s forwards;
	-o-animation: tada 1s linear 1 normal 15s forwards;
	animation:  tada 1s linear 1 normal 15s forwards;
}


a:hover.spin {
	animation: spin 0.5s linear 1 normal 0s forwards;
}


.fadein {
	-webkit-animation:  fadein 2s linear 1 normal 0s forwards;
	-moz-animation:  fadein 2s linear 1 normal 0s forwards;
	-o-animation: fadein 2s linear 1 normal 0s forwards;
	animation:  fadein 2s linear 1 normal 0s forwards;
}




} // END @media screen

@media print {

* {
	background: white !important;
	color: black !important;
	}

body {
margin: 0 auto;
padding: 0;
font-family: "Times New Roman",Serif;
}

header, .leftmenu, .rightcolumn, .glossymenu, .announce,
.comment-form-wrapper,
.hide 
{
display: none;
}

.wrap_3cols, wrap_2leftcols, article, footer {
float: none !important;
width: auto;
margin: 0;
padding: 0;
font-size: 11pt !important;
}


h1 {
font-size: 20pt !important;
}

h2 {
margin: 0 0 .5em 0;
font-size: 16pt !important;
}

a {
text-decoration: underline;
color: #0000FF;
}

} /* END @media print */