/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

   
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { 
	display: block; 
}
audio, canvas, video { 
	display: inline-block; 
	*display: inline; 
	*zoom: 1; 
}
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { 
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%; }
	
html, button, input, select, textarea { 
	font-family: sans-serif; 
	color: #222; 
}

::-moz-selection { 
	background: #fe57a1; 
	color: #fff; 
	text-shadow: none; 
}
::selection { 
	background: #fe57a1; 
	color: #fff; 
	text-shadow: none; 
}


a { color: #B40404; }   /* a is an element : anchor */
/* a { color: #00e; }  -- the regular blue*/
/*a:visited { color: #B40404; }   Mark says it might be disabled ? */
/*a:visited { color: #551a8b; } */
a:hover { color: #06e; }       /*a light blue*/
a:focus { outline: thin dotted; }    /* focus?- in data window for example  
                                       but don't see dotted line */
a:hover, a:active { outline: 0; } 

abbr[title] {
	border-bottom: 1px dotted; 
}
b, strong { 
	font-weight: bold; 
}
blockquote { 
	margin: 1em 40px; 
}
dfn { font-style: italic; }   /* dfn definition */
      
hr { 
	display: block; 
	height: 1px; 
	border: 0; 
	border-top: 1px solid #ccc; 
	margin: 1em 0; 
	padding: 0; 
	}
/* ins - used for markup of inserted text */
ins { 
	background: #ff9; 
	color: #000; 
	text-decoration: none; 
}
/*mark  - used for indicating text as marked or highlighted for reference purposes */
mark { 
	background: #ff0; 
	color: #000; 
	font-style: italic; 
	font-weight: bold; 
}
pre, code, kbd, samp { 
	font-family: monospace, serif; 
	_font-family: 'courier new', monospace; 
	font-size: 1em;
}
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

/* QUOTES */
q { quotes: none; }
q:before, q:after { 
	content: ""; 
	content: none; }
/* q - for indicating short quotations (i.e. quotations that needs to display within a non-quoted paragraph).*/
/*   quotes:none - specifies that the "open-quote" and "close-quote" values of the "content" 
      property will not produce any quotation marks */

	  small { font-size: 85%; }

/* SUBSCRIPT / SUPERSCRIPT */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { 
	margin: 1em 0; 
	padding: 0 0 0 40px;
}

/* dd - item in definition list */
dd { margin: 0 0 0 40px; }   /* Definition List */

/* defines a section of navigation links.
    not all links of a doc must be in a <nav> element. 
    ..it is intended only for major block of navigation links.*/
nav ul, nav ol { 
	list-style: none; 
	list-style-image: none; 
	margin: 0; 
	padding: 0; }

img { 
	border: 0; 
	-ms-interpolation-mode: bicubic; 
	vertical-align: middle;
}

/*Scalar Vector Graphics*/
svg:not(:root) { 
	overflow: hidden; 
}   

figure { margin: 0; }


/*----------------------- FORM ---------------------------------------- */
form { margin: 0; } /* to create an HTML form for user input   */

/*fieldset (tag  used to group related elements in a form; 
            tag draws box around the related elements.
            ( <legend> tag defines caption for <fieldset> element )
			( <name> specifies name for a fieldset)            */
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; } /*defines a label for an <input> element  */
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

/*button tag defines a clickable button. */
button, input, select, textarea {
	font-size: 100%; 
	margin: 0; 
	vertical-align: baseline; 
	*vertical-align: middle; 
}
button, input { 
	line-height: normal; 
}
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }

                       /*input (specifies an input field where the user can enter data) */
input[type="checkbox"], input[type="radio"] { 
	box-sizing: border-box; 
	padding: 0; *width: 13px; 
	*height: 13px; }

input[type="search"] {
	-webkit-appearance: textfield; 
	-moz-box-sizing: content-box; 
	-webkit-box-sizing: content-box; 
	box-sizing: content-box; }
	
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none; }

button::-moz-focus-inner { border: 0; padding: 0;}
input::-moz-focus-inner { border: 0; padding: 0;}

           /* textarea (defines a multi-line text input control) */
textarea { 
	overflow: auto; 
	vertical-align: top; 
	resize: vertical;
}

input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* DROP-DOWN LIST:
   the 'select' element creates a drop-down list
   option tags inside the -select- element define available options in list)
   optgroup (used to group related options in a drop-down list)
   
 ALSO: 
    datalist (specifies a list of pre-defined options for an <input> element.
    output (represents the result of a calculation (like one performed by script).) 
    <buttonL> vs <input> can put content/text/images inside <button> element , 
       This is the difference between this element and 
	   buttons created with the <input> element.
*/
/*-------------------------------------------------------     */

table { 
	border-collapse: collapse; 
	border-spacing: 0; }
	
td { vertical-align: top; }

.chromeframe { 
	margin: 0.2em 0; 
	background: #ccc; 
	color: black; 
	padding: 0.2em 0; 
}


/* ===== Primary Styles ========================================================
   Author:  ................... from my static/index.html practice
   ========================================================================== */

/* classes for list styles: usage - UL class="a"  */
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-roman;}
ol.e {list-style-type:upper-alpha;}
ol.f {list-style-type:lower-alpha;}
ol.g {list-style-type:decimal;}
ol.h {list-style-type:decimal-leading-zero;}


#bwlogomap { }
#bunnymap { }

#bigfont {
	font-size: 2.55em;
	color: black;
}


.whitefont {color:white;}

.blackfont {color:black;}	

.blkfont20 {color:black; font-size:20pt;} 

.goldfont {color:#FFCC00;}

.tanfont {color:#F1DDA9;}

.bigfontbwshadow{
	font-size: 2.55em;
	color: black;
	padding: 0 0 0 .5em;
	margin: .5em;
	text-shadow: 1px 1px 0 white;
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}


.navback1 {padding: 0.2em; width: 3em; font-size: 11pt; background-color:#F8F8F8 ; }
.navback2 {padding: 0.4em; width: 14em; font-size: 11pt; background-color:#F0F0F0 ; }	
.navback2a {padding: 0.4em; width: 15em; font-size: 11pt; }	


 .navigation {       
	width: 61.05em;
	background-color:GoldenRod;
	/*border:1px solid black;*/
	margin: -1em 0 0 0;
	padding:.5em .5em .5em .5em;
	display=inline;
}

.linkbox {
	background-color:white;
	margin: 1em;
	padding: .5em;
	width: 5em;
	height: 8em;
}

.practicebox { 
	background-color:SteelBlue; /*#006BB2; CadetBlue ; DeepSkyBlue; #660000; */
	height:120em;
	width: 50em;
	margin:0 5em 0 10em;
	/*box-align:center;   doesn't work
	-moz-box-align:center; */
	/*position:relative;*/
	margin: 0 0 0 0;
	padding:.5em 2em 2em 2em;
}

.buttonbox { 
	background-color:#505050 ; /*#996600; */
	border:1px solid black;
	height: 15em;
	width: 38em;
	padding: .5em;
	/*position: relative;*/
}

.changecolor {  
	padding-left: 10px;
	padding-top: 1px;
	padding-bottom: 1px;
	font-size:14pt;
	background-color:#D0D0D0;      /*  #669900;         good green #CCCC66; */
	width: 30em;
  /*padding: 15px;*/
	border-radius: 15px;  /* ROUNDED CORNERS */
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
}

.changecolor2 {                          /* practicelive.html */
	margin: 0 0 0 0;
	padding-left:10px;
	padding: 0 0 0 10px;
	font-size:14pt;
	background-color:BurlyWood ;
	width: 29em;
	border-radius: 15px; 
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
}

/*
column-count    the number of columns an element should be divided into
column-fill     how to fill columns
column-width    the width of the columns
column-gap      the gap between the columns

column-rule         shorthand property for setting all column-rule-* properties 
column-rule-color   the color of the rule between columns
column-rule-style   dotted, dashed, solid, double, groove, ridge, hidden, insert, outset
column-rule-width   the width of the rule between columns

column-span         how many columns an element (title for example) should span across
columns             shorthand property for setting column-width and column-count
content
*/

.col2 {
	background-color:#CCCC66;
	border:1px solid black;
	padding: 20px;
	column-width: 25px;
	margin:57px;
	-moz-column-count: 2;      
	-webkit-column-count: 2;    
	column-count: 2;
	-moz-column-gap: 30px;     
	-webkit-column-gap: 30px;
	column-gap: 30px;
	-moz-column-rule: 5px dotted black; 
	-webkit-column-rule: 5px dotted black;
	column-rule: 6px dotted black;
}

.col3 {
	background-color:white;
	border:1px solid black;
	padding:15px;
	
	-moz-column-count: 3;       /* Firefox */
	-webkit-column-count: 3;    /* Safari and Chrome */
	column-count: 3;
	
	-moz-column-gap: 30px;     /* the margin between the left rule and the text */
	-webkit-column-gap:30px;
	column-gap:30px;
	
	-moz-column-rule: 3px outset #ff00ff;      /* (rule: width, style, color)*/
	-webkit-column-rule: 3px outset #ff00ff;
	column-rule: 3px outset #ff00ff;	
}
	
.col3a {
	padding-left: 60px;
	padding-bottom: 20px;
	
	-moz-column-count: 3;       /* Firefox */
	-webkit-column-count: 3;    /* Safari and Chrome */
	column-count: 3;
	
	-moz-column-gap: 30px;     /* the margin between the left rule and the text */
	-webkit-column-gap:30px;
	column-gap:30px;
	
	/*-moz-column-rule: 3px outset; black 
	-webkit-column-rule: 3px outset;
	column-rule: 3px outset;   
	*/
}	

.homestudy { 
	margin: 2em 0 3em 5em;
	/*margin-top: 2em;
	  margin-right: 0;
	  margin-left: 5em;
	  margin-bottom: 1em; */
	background-color: #F1DDA9;     /* F2E8D0 */
	box-shadow:20px 20px Gray;
	width: 50em;    /* 40em; */
	/*padding: 6px; */
	padding: .35em 1em .5em 1em;
	
	border-radius: 15px;          /* ROUNDED CORNERS */ 
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
  /*-moz-transform: skewx(10deg) translatex(150px);  
	-moz-transform-origin: bottom left;
  */
}
/* px * 0.0626 = em */
/* For instance,
15px * 0.0626 = 0.939em
80px * 0.0626 = 5.008em */


.tablebox { 
	margin: 2em 0 3em 3em;
	/*margin-top: 2em;
	  margin-right: 0;
	  margin-left: 5em;
	  margin-bottom: 1em; */
	background-color: #F1DDA9;     /* F2E8D0 */
	box-shadow:20px 20px Gray;
	width: 50em;    /* 40em; */
	/*padding: 6px; */
	padding: .35em 1em .5em 1em;
	
	border-radius: 15px;          /* ROUNDED CORNERS */ 
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
  /*-moz-transform: skewx(10deg) translatex(150px);  
	-moz-transform-origin: bottom left;
  */
}


.meetups {       
	width: 58em;
		/*margin-top: 2em;
		  margin-bottom: 1em; */
	margin: 2em 2em 1em 1em;
	background-color:#F1DDA9;
	/*padding: 8px 5px 5px 10px;*/
	/*padding: .5em .3em .3em  .6em;*/
	padding: .5em 2em .3em  .6em;
	  /* padding-top: 5px;
		padding-right: 10px;
		padding-bottom: 5px;
		padding-left: 10px;  */
}


.readings { 
	margin: 1em 0 1em 12em;
	background-color: #8fbc8f;
	/*box-shadow:20px 20px Gray;*/
	width: 42em;
	padding: 4px 4px 4px 6px;
	
	border-radius: 15px;     /* ROUNDED CORNERS */   
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
  /*-moz-transform: skewx(10deg) translatex(150px);  
	-moz-transform-origin: bottom left;    */
}

/* - - - - - - - - - - - - - - - - - - - - */
.meetups2 {       
	width: 46.5em;
	margin: -1em 3em 2em 5em;
	background-color:#F1DDA9;
	padding: .25em 0.5em 0em;
}
.readings2 { 
	width: 41em;
	margin: 2em 2em 3em 2em ;
	background-color: #8fbc8f;
	/*box-shadow:20px 20px Gray;*/
	
	padding: .3em 1em .3em .6em ;
	
	border-radius: 15px;     /* ROUNDED CORNERS */   
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
  /*-moz-transform: skewx(10deg) translatex(150px);  
	-moz-transform-origin: bottom left;    */
}
/* - - - - - - - - - - - - - - - - - - - - */

.upcoming {
	margin-left: 28.5em;
	width: 30em; 
	background-color:white;
	padding: .01em 1.2em 1em .35em;
}

.picture-left {
	/*float:left; */
	margin-left:1em;
	width:15em;
	position:absolute;       /* was absolute originally, in working deployed
	                           bunny map in line with upcoming 
							   then relative; changing
	                           back doesn't fix it --- ah, yes it did ! */
}
.picture-right {
	float:right;
	margin: 5em .5em 0 0;
	/* margin-top: .5em;
	   margin-right: .5em;  */
}

/* - -  headingbox of CAN contains logo and titlebars of page  - -  - */

.headingbox {
		height: 26em;
		width: 62em;
		position: fixed;
		background-color: white;
		margin-top: -1.5em;
		border: .15em solid black; 
}

.containerbox {
		height: 20em;
		width: 49em;
		padding: 0 0 0 1em;
		position: relative;
		border: .025em dotted gray;
			/*background-color: white;*/
		margin: -1.5em 0 0 4.5em;
			/* margin-top: -1.5em;
				margin-left: 4.5em;
				margin-bottom: 0;   */
}
.restofpage {                     /* slide-under */
		margin-top: 465px;
		border: .20em solid black; 
}
		
			
/*  - - for practice.htmlcss.html - - */		
.headingbox2 {
		height: 6.75em;
		width: 60em;
		position: fixed;
		background-color: #E65C00;   /* orange */
		margin-top: -16em;
		/*margin-bottom: 0; */
		/*border: .15em solid black; */ 
}


			.headingbox38 {
					height: 4em;
					width: 62em;
					position:relative;
					background-color: whit;e  /* makes no sense: but all disappears without this*/
					margin-top: -16em;
					/*border: .05em solid black; */
					}

/*  - - for meetups, javascript, jquery */		
.headingbox3 {
		height: 5em;
		width: 62em;
		position:relative;
		/*margin-top: -16em; */
		/*border: .05em solid black; */
		}		
		
		
.headingbox4 {             /*  - - for menus - - */   
		height: 6em;
		width: 23em;
		position:relative;
		margin: 25em 0 0 6em;
}


.restofpage2 { 
		margin-top: 310px;  /* with no text,280px leaves an inch between heading and rest*/
		/*position: relative; */         /* this makes it scroll over headingbox2 */
		/*border: .20em solid black;  */
		
}

.vertbutton
	{clear:left;}


/* - - - - - - - - - - - - - - - -  */

.logobar {    
   /* position: fixed;  */
		height: 180px;                
		width: 60em;
		margin-top: -50px;	  
		padding: 0 0 .5em .15em;
		clear:right;
   /*border:.01em dotted black; */
}

.titlebar {
	  position: relative;    
	  height: 8em;     /*285px; = 7em*/    
      margin: 1.2em 0 0 0;	  /* added for scroll test */ 
	  width: 61.5em;
	  padding: 0 0 24px 10px;
	  /*padding-left: 10px;
	  padding-bottom:24px; */
	  background-color:GoldenRod;    /*#F2E8D0;  #BDBDBD; */  
  /*  border:.5em solid black; */
	  clear:right;
}	
	
	
/* CCCC66  a good green */

.skew {
	margin-top: 1em 0 2em 0;
    z-index:auto;          /* no value 9999, 1, 0 or auto will make this scroll under */
	position: relative;
	width: 40em;
	box-shadow: 15px 15px 80px 10px steelblue inset;     /* left top __ __*/
	background-color:white;
	border:1px solid black;
	padding:10px;
	border-radius: 15px; 
	 -moz-border-radius: 15px;
	 -webkit-border-radius: 15px;
	 -ms-border-radius: 15px;
	 -o-border-radius: 15px;
	
	 -moz-transform: skewx(10deg) translatex(150px);  
	 -moz-transform-origin: bottom left;
	 -webkit-transform: skewx(10deg) translatex(150px);  
	 -webkit-transform-origin: bottom left;
     -ms-transform: skewx(10deg) translatex(150px);  
	 -ms-transform-origin: bottom left;
	 -o-transform: skewx(10deg) translatex(150px);  
	 -o-transform-origin: bottom left;
		  /* display: box;
			 display:-moz-box;
			-moz-box-orient:horizontal;
			-moz-box-pack:center;
			-moz-box-align:center;
		  */
}

div.transi {            /* why isn't the box showing up? */
	width: 96px;
	height: 8em;
	background-color: #F1DDA9;
	padding: 0 0 0 .5em;
		  /*padding-top: 0;
			padding-right: 0;
			padding-bottom:0;
			padding-left:.5em;  */
	margin: 0 0 0 1.25em;
	transition: width 4s;
	 -moz-transition:width 4s;
	 -webkit-transition:width 4s;
	 -o-transition: width 4s;
}

div.transi:hover {
	margin: 0 0 0 5em;
	padding: 15px;
	height:275px;
	-moz-height:275px;
	-webkit-height:250px;
	-o-height:250px;
	width: 460px;
	-moz-width: 470px;
	-webkit-width: 460px;
	-o-width:460px;
	color: dark-gray;
	font-size: .2em;
	   /*background:url(images/cute_bunny.jpg);*/
	background:url(http://www.varbak.com/images/photos-of-yawning-rabbits-nb18966.jpg);
	background-color:black;
}

 .navigate {       
	width: 61.05em;
	background-color:GoldenRod;
	     /*border:1px solid black;*/
	margin: -1em 0 0 0;
	padding:.5em .5em .5em .5em;
	display=inline;
}


/* - - - - - - - - - - - - - - - - -  MENU   - - - - - - - - - - - - - - - - -   */
 ul#navigation { 
	width: 12em; 
	font-style: Arial;
}
 
 ul#navigation li {
	list-style: none;
    /* background-color: #039;      /* what background?   039 is bright blue*/
	background-color: gray;          /*base color*/
	border-top: solid 2px black;   /* the border of each menu item block*/
	                                /* there is a blue border-bottom : see below*/
	text-align: left;
	margin: 0;
	font-family: Calibri;
 }


/* ======================================================================== */
/*  For Vertical Hightlight/Hover Menu     -- Experimental
/* ======================================================================== */

.navigationvertical {
	width: 10em;
}

 ul.navverthover { 
	width: 15em; 
	font-style: Arial;
}
 
 ul.navverthover li {          /* each menu item block*/
	list-style: none;
	text-align: left;
	margin: 0;
	font-family: Calibri;
	border-top: solid 2px black;     /* border of each menu item block*/
	                                 /* there is a blue border-bottom : see below*/
   /* background-color: #039;         /* 039 is bright blue*/
   /* background-color: firebrick;*/  /*base color*/
 }
 
 ul.navverthover li.bgbrick {
	background-color: firebrick;          /*base color*/
 }
 
 ul.navverthover li.bgorange {
	background-color: #E65C00; 
	border-bottom: 3px solid #3399FF;
 }
 
 ul.navverthover li.bgblueviolet {
	background-color:  #443266; 
	border-bottom: 2px solid yellow;
 }
 
/* GREAT COMBINATION - Color palette 158 contains
   #cba327, #90510a, #ed808b, #1c6475, #05a225 
    tan      brown    pink     teal      green*/
 
 ul.navverthover li a {
	display: block;
	font-family: Arial;
	text-decoration: none;
	padding: .25em;
	/* border-bottom: 3px solid #3399FF;     blue*/
	border-right: 1px solid #3399FF;
 }
 
 
 /* 
 ul#navigation li a {
	display: block;
	font-family: Arial;
	text-decoration: none;
	padding: .25em;
	border-bottom: 3px solid #3399FF;    
	border-right: 1px solid #3399FF;
 }
 
 
 a:visited { color: white; }   no longer used /
 a:link { color: #FFFFFF; }            / what IS this one? /
 a:link {color: white;}

 a:hover, a:active { color: #000000;}   / = black  /
 a:hover { background-color: #fff; }
 
 ul#navigation li#youarehere a { 
	background-color: #09f; 
} 
*/

/* ----------------------------------------------------------------------- */
/*
/* ----------------------------------------------------------------------- */



/* ============================================================= */
/*      CSS FLIP       Experimental                        */
/*             http://davidwalsh.name/css-flip             */
/* ============================================================= */

/* The perspective property is not supported in any browser 
   Chrome and Safari support an alternative, 
   the -webkit-perspective property. 

	... defines how many pixels a 3D element 
	is placed from the view.
	...allows you to change the perspective on how 3D elements are viewed.
	When defining the perspective property for an element, 
	it is the CHILD elements that get the perspective view, 
	NOT the element itself.
	Note: The perspective property only affects 3D transformed elements!
	Tip: Use this property together with the perspective-origin property, 
	which allows you to change the bottom position of 3D elements.
*/

/* THIS ONE IS DESIGNED FOR THE "Things I Wish I Had Time For" box */


/* entire container, keeps perspective */
.flip-container {
	background-color:FireBrick;  /*ivory; */
		-webkit-perspective: 1000;         
		-moz-perspective: 1000;            /* changing this does nothing */         
		-o-perspective: 1000;
	perspective: 1000;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	  /*background-color: pink; --- ignored */
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	}

/* THIS IS THE STATIONARY BOX, invisible becasue 'ivory' above */

.flip-container, .front, .back {      /* orig only width, height */
	/*width: 320px; 
	height: 380px;*/
    width: 58em;           
	border-radius: 15px;          
	-moz-border-radius: 15px;    /* all but top left of 'front' ?? */
	                             /* and top right and left of 'back' */
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	       
       /* THESE are WHAT CAUSES THE 'separation' of boxes
	      margin: 2em 0 3em 8em;
	      padding: .35em 1em .5em 1em;  
      */
}	

.back {
 box-shadow:15px 15px Gray;
}


/* The transform property applies a 2D or 3D transformation to an element. */
/*  ... allows you to rotate, scale, move, SKEW, etc., elements. */
/* http://www.w3schools.com/cssref/css3_pr_transform.asp */
	
	

/* flip speed goes here */
.flipper {
	background-color:FireBrick;  /* ivory this shows in the top left corner */
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* HIDE BACK OF PANE during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;  /* changing this to relative: flipper div gets tall,green*/
	top: 0;
	left: 0;	
}

/* front pane, placed above back */
.front {
	background-color: FireBrick;    /*#F1DDA9;*/
	z-index: 2;
	padding: 0 1em .5em 1em;
	
}

/* back, initially hidden pane */
.back {
	background-color:tan;
margin-left:-3em;        /* I don't know why this is necessary */
	padding: 0 1em .5em 1em; 
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}





/* =============================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {
	/* Style adjustments for viewports that meet the condition */
}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

/* ir is "image replacement helper" */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; 
	background-color: transparent; background-repeat: no-repeat; 
	text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; 
	overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; 
	height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* Exactly Center an Image/Div Horizontally and Vertically
.center {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}
Negative margins are exactly half the height and width,
which pull the element back into perfect center. 
Only works with elements of a fixed height/width.
*/



/* =============================================================================
   Print Styles
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; 
	text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
	/* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
	/* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

.practicelivebg {background-color:gray;}

/*body { margin: 0; font-size: 1em; line-height: 1.4; }*/
body {
		font-family:"Trebuchet MS";
					/*font-family:"Comic Sans MS";*/
	                /*font-family: Verdana, Helvetica, sans-serif; */
        font-size: 1.2em;     /*-- 1.15?  1.5 is 80% of default size--*/
		color: black; 
		background-color: FireBrick;     /*rgb(220,220,220);*/
	   	  /*background-color: rgb(100,100,100); */
		  /*background-color: #DDDDDD;  */
		  /*line-height:1.4; */
				/*margin: 0em;
				margin: 3em; */
				/*margin: 5%;
				-webkit-margin: 5%;
				-moz-margin: 5%;
				-ms-margin: 5%; */
				/*margin-right:3em;
				margin-left:3em; */
	/*	border-style: dotted;
		border-width: 3px;
		border-left-width: 3px;
		border-right-width: 3px;
		border-color: brown;  */
}

h1{
	font-size: 1.6em;
	color: black;            /* the green of "reaings" is too light for text: #8fbc8f; */
	font-weight: bold;
}                           /* olive #006600  */ 

/* h1{font-size: 1.5em; color: black;}*/

h2{
	font-size: 1.3em;
	color: black;
	font-weight: bold;
}

h3{
	font-size: 1.2em;
	color: black;
	font-weight: bold;
}

/*
h3{font-size:0.75em;color:blue;font-family:verdana;text-transform: uppercase;}

h4{
		font-size:1.5em;
		font-style: italic;
		color:black;
		text-transform:lowercase;
		margin-top: 1em; 
		margin-left: 1em;
		/*padding:1em;*/
		/*padding-top:3em;*/
		/*border-style: dashed;
		border-width: 2px;
		border-left-width: 2px;
		border-right-width: 2px;
		border-color: red;
}
h5{}
h6{}
*/