@charset "utf-8";
/* CSS Document */

<style type="text/css">
/************************************************************************************
RESET CSS VALUES
*************************************************************************************/
body {
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend 

 vertical-align: baseline;
 font-family: inherit;
 font-weight: inherit;
 font-style: inherit;
 font-size: 62.5%;
 outline: 0;
 padding: 0;
 margin: 0;
 border: 0;
 }

/* remember to define focus styles! */

:focus {
 outline: 0;
 }

body {
 background: #ffffff;
 line-height: 1;
 color: black;
 }
 
ol {list-style-type:decimal;


}

ul {
 list-style: none;
 }
 
/* tables still need cellspacing="0" in the markup */
table {
 border-collapse: separate;
 border-spacing: 0;
 }
 
caption, th, td {
 font-weight: normal;
 text-align: left;
 }
 
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
 content: "";
 }

blockquote, q {
 quotes: "" "";
}

a {
color: #335599;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}


/************************************************************************************
PAGE WRAPPER
*************************************************************************************/
#wrapper {
width: 100%;
max-width:1288px;
background-color:#ffffff;
 font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
margin:0px;
padding:0px;
display:block;
margin-left:auto;
margin-right:auto;
}

/************************************************************************************
HEADER
*************************************************************************************/
#banner {
width: 100%;
height: auto;
background-image: url(../ac_theory/images/banner_card.jpg);
background-repeat: no-repeat;
background-color:#FFFFFF;
}
/************************************************************************************
BANNER (Title)
*************************************************************************************/

#banner h1{
font-size: 3em;
margin-top:0em;
margin-bottom:0em;
font-family: Abadi,Arial-narrow,Helvetica,sans-serif;
color: #ffffff;
padding: 10px;
font-weight: lighter;
}
#banner h2{
position:relative;
margin-left:1em;
top: -40px;
font-size: 2em;
font-family: Abadi,Arial-narrow,Helvetica,sans-serif;
color: #ccbb99;
padding: 0px;
font-weight:bolder;
}


/************************************************************************************
Homebar = TOPIC MENU
*************************************************************************************/
#homebar{
height:auto;
width:100%;
background: url('../ac_theory/images/homebar_bg_card.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
border-radius: 0em 1em 1em 1em ;
box-shadow:0.5em 0.5em 0.5em #888;
padding-bottom:0.75em;
margin-bottom:1em;
margin-top:-1.75em;
}

#homebar ul {
margin-top:0em;
margin-bottom:0em;
padding-left:0.5em;
border-radius: 10px 10px 0px 0px ;
}

#homebar ul li{
font-size:1em;
height:auto;
color: #000000;
padding-top:0.5em;
margin:0em 0.75em 0 0.5em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
display:inline-block;
width:auto;
}

#homebar ul li a{
color:#000000;
}

#homebarsel {
font-weight:bold;
color:#ffffff;
background-color:#990000;
padding:0.3em;
border-radius: 5px 5px 5px 5px;
}



/************************************************************************************
MENU BAR (controls top half of menu bar - list of modules)
*************************************************************************************/
#menubar {
float:left;
height:auto;
width: 99%;
margin-left:auto;
margin-right :auto;
}

#menubar ul {
margin-top:0em;
margin-bottom:0em;

padding-left:0.5em;
background-color: #cccccc;
border-radius: 10px 10px 0px 0px ;
box-shadow:0.5em 0.5em 0.5em #888;
}

#menubar ul li{
text-align:center;
font-size:1em;
height:1.5em;
color: #000000;
padding-top:0.5em;
margin:0em 0.5em 0 0.5em;
font-family: 'PT Sans', Arial, sans-serif;
font-weight:  600;
display:inline-block;
width:auto;

}

#menubar ul li a{
color:#000000;
}

.menusel {
font-weight:bold;
color:#ffffff;
background-color:#990000;
padding:0.3em;
border-radius: 5px 5px 5px 5px;
}

/*********************************************************************************
SECTION MENU (controls bottom half of menu bar - sections within a module)
*********************************************************************************/
.topbar{
float:left;
height:auto;
width: 99%;
margin-left:auto;
margin-right :auto;
margin-bottom:1em;
text-align:left;
font-family: 'PT Sans', Arial, sans-serif;
font-size: 1em;
font-weight:600;
background-color:#e0dacc;
padding:0em;
border-right:none;
border-radius: 0px 0px 10px 10px;
box-shadow:0.5em 0.5em 0.5em #888;
}

.topbar ul {
border-bottom: 0px ;
list-style-type: none ;
margin: 0em;
padding: 0em;
}

.topbar ul a{
color: #113300;
display: inline-block;  
}

.topbar ul li {
float:left;
display: inline-block;
padding: 0em;
margin:0.5em 0em 0.5em 1em;
}

#topbarsel{
color:#ffffff;
font-weight:bold;
background-color:#990000;
padding:0.3em;
margin-left:0em;
border-radius: 5px 5px 5px 5px;
}

/************************************************************************************
PAGE TITLE (Controls step by step icon & module number)
*************************************************************************************/
#pagetitle h1{
float:left;
font-size:2em;
font-family:  Arial, Helvetica, sans-serif;
color: #990000;
padding: 0;
margin-left:0.5em;
margin-top:0.5em;
}

#pagetitle h3{
float:left;
font-size:1.3em;
font-family:  Arial, Helvetica, sans-serif;
color: #990000;
padding: 0;
margin: 10px 0 0 10px;
}
/************************************************************************************
GOOGLE APPS
*************************************************************************************/
.googlebox {
margin: 0.5em;
height:auto;
}
/**TRANSLATE***********************/
#translate{
text-align:right;
padding-right:10px;
margin-top:0em;
width: 150px;
height: auto;
float:right;
}

/*SEARCH************************/
#search{
margin-top:0em;
padding-top:0.2em;
min-width: 30%;
height: auto;
float:right;
}

/************************************************************************************
LINKBAR (controls icons, google and clustrmaps)
*************************************************************************************/

.linkbar{
float:left;
height:auto;
width: auto;
margin-left:auto;
margin-right :auto;
margin-bottom:0em;
text-align:left;
font-family: 'PT Sans', Arial, sans-serif;
font-size: 1em;
font-weight:600;
background-color:#ffffff;
padding:0em;
}

.linkbar ul {
border-bottom: 0em ;
list-style-type: none ;
margin: 0em;
padding: 0em;
}

.linkbar ul a{
color: #113300;
display: inline-block;  
}

.linkbar ul li {
float:left;
display: inline-block;
padding: 0em;
margin:0.5em 0em 0.5em 3em;
}



/************************************************************************************
CONTENT
*************************************************************************************/
#content {
width: 100%;
background-color:#ffffff;
 font-size: 0.8em;
float: left;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}

/*****************************Text Formatting************************************/
#content h1{
font-size:2em;
font-family:  Arial, Helvetica, sans-serif;
color: #990000;
padding: 0;
margin: 20px 0 10px 10px;
}

#content h2{
font-size:1.5em;
color: #990000;
padding-top: 0;
margin: 20px 0 -10px 10px;
}

#content h3{
font-size:1.3em;
color: #990000;
padding: 0;
margin: 20px 0 10px 10px;
}

#content h4{
font-size:1.3em;
color: #990000;
padding: 0;
margin: 20px 0 -10px 10px;
}

#content h5{
font-size:1.3em;
color: #335599;
text-align:center;
padding: 0;
margin: 0px 0 -10px 10px;
max-width:320px;
}

#content p{
font-size:1.2em;
line-height: 1.5em;      /* Sets line height to allow for sub and sup*/
margin: 1em 0 0 1em;
text-align:justify;
color:#000000;
}

#content p sub, sup{    /* Sets line height to allow for sub and sup*/
line-height: 0;
}

#content p center{
margin: 10px 0 0 10px;
text-align:center;
color:#000000;
}

#content p a{
color:#0000ff;
text-decoration:underline;
}
#content p a:hover{
color:#6666ff;
}

#content p a:visited{
color:#ff66ff;
}

.indentp{
padding-left:2em;
}

#right h1{
text-align:right;
font-size:200%;
font-family:  Arial, Helvetica, sans-serif;
color: #660000;
padding: 0;
margin: 10px 0 20px 10px;
}

#right h2{
text-align:right;
font-size:150%;
color: #660000;
padding: 0;
margin: 10px 0 20px 10px;
}

#rightalign{
text-align:right;
}

#content ul li{
color: #000000;
font-size:1.2em;
line-height:1.7em;



}

#content ol li{
font-size:1.2em;
line-height:1.5em;
color: #000000;
list-style-type: decimal;
padding: 4px 6px 5px 5px;
}

.formula {
	font-family: "Times New Roman", Times, serif;
	font-size: 200%;
	font-style: italic;
	text-align:center;
	line-height: normal;
	font-weight: bold;
	color: #0000;
}

/************************************************************************
LEARNING BOX
*************************************************************************/
#learningbox {
float: left; 
max-width:45%;
height:auto;
padding:0.5em;
margin-right:1em;
}

#headerDiv, #contentDiv {
float: left; 
width:100%;
border-radius: 10px 10px 10px 10px;
box-shadow:3px 3px 3px #666666;
margin-right:1em;
}

#titleText {
float: left;
font-size:1.5em;
font-weight:bold;
color: #990000;
padding: 0;
margin: 10px 0 0 10px;
}

#myHeader {
font-size: 1.1em;
font-weight: bold;
margin: 0px;
display:block;
height:2em;
}

#headerDiv {
background-color:#e0dacc;
color: #333966;
 margin-top:1em;
}

#contentDiv {
background-color:#FFFFFF;
margin: -0.5em 2em 1em 0em;
border-radius:0px 0px 10px 10px ;
}

#myContent {
margin: 0em;
padding:0em;
display:block;
background-color:#e0dacc;
border-radius:0px 0px 10px 10px ;
font-family:Arial, Helvetica, sans-serif;
}

#myContent ul{
list-style-type:none;
padding-left: 0.5em;
margin: 0;
font-size:1em;
}

#myContent a{
display:block;
font-size:1.2em;
color:#0000ff;
}

#myContent ul li{
font-size:1.1em;
padding:5px 0px 5px 5px;
}

#headerDiv a {
color: #FFFFFF;
float: right;
margin: 10px 10px 5px 5px;
}

#headerDiv a:hover {
color: #FF0000;
}

/****************************************************************
IMAGES
******************************************************************/
.leftimage{
float: left;
text-align:center;
margin-right: 5px;
margin-left: 10px;
margin-bottom: 10px;
border: 0px;
}

.imgcenter {
float: none;
display: block;
text-align:center;
margin-right:auto;
margin-left:auto;
margin-top:10px;
border: 0px;
}

.imagectr {
float: none;
display: block;
text-align:center;
margin-right:auto;
margin-left:auto;
margin-top:10px;
border: 0px;
}

.rightimage{
float: right;
text-align:center;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 0px;
}

.reduceleftpic{
float: left;
text-align:center;
margin-right: 5px;
margin-left: 10px;
margin-bottom: 10px;
border: 0px;
}

.animation{
float: left;
margin-right: 5px;
margin-left: 0px;
margin-bottom: 10px;
border: 0px;
max-width:100%;
}

.reducecenterpic{
float: none;
display: block;
text-align:center;
margin-right:auto;
margin-left:auto;
margin-top:10px;
border: 0px;
}

.reducerightpic{
float: right;
text-align:center;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 0px;
}

.logisimpic{
float: right;
text-align:center;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 0px;
}

.toppic{
float: right;
text-align:center;
margin-left: 10px;
border: 0px;
}

.printpic{
display:none;
}

.leftbullet{
float: left;
margin: 0px 5px 20px 10px;
border: 0px;
}

.smlimage{
margin: 20px 5px 0 10px;
border: 0px;
}

.A4image{
width:inherit;
margin: 20px 5px 0 10px;
border: 0px;
}

.digcap{
font-size:1.3em;
font-weight:bold;
color: #335599;
padding: 0;
margin: 0px 0 0px 0px;
text-align:center;
max-width:320px;
display:block;
margin-left:auto;
margin-right:auto;
}

video {
  width: 100%;
  height: auto;
}

/**************************** ROLLOVER IMAGE *********************************************/
#rollover  {
	display:block;
	width:200;	
	height:200;
	background: url(../ac_theory/images/Fig-10-2-4x.gif) no-repeat top left;/* rollover state*/
	/*margin:5px*/
	
}
#rollover a{
	display:block;
	width:200;
	height:200;
	background:url(../ac_theory/images/Fig-10-2-4.gif) no-repeat top left;/* normal state*/
	
	/*text-align:center*/
}
#rollover a:hover{
background:transparent;
}

/**************************** ROLLOVER IMAGE 2*********************************************/
#rollover2  {
	display:block;
	width:400;	
	height:229;
	background: url(../ac_theory/images/toroid-comp.jpg) no-repeat top left;/* rollover state*/
	/*margin:5px*/
	
}
#rollover2 a{
	display:block;
	width:400;
	height:229;
	background:url(../ac_theory/images/toroid-whole.jpg) no-repeat top left;/* normal state*/
	
	/*text-align:center*/
}
#rollover2 a:hover{
background:transparent;
}
/************************************************************************************
TOPADS
*************************************************************************************/

.topads {
height: auto;
width: auto;
/*padding:5px;
border-style:solid;
border-width: thin;
border-radius: 1em 1em 1em 1em ;
box-shadow:0.5em 0.5em 0.5em #888;*/
}
/************************************************************************************
SIDEADS
*************************************************************************************/
.sideads {
background-color:#ffffff;
padding:0.5em;
margin:0.5em;
max-width: auto;
float:right;
/*border-style:solid;
border-width: thin;*/
border-radius: 1em 1em 1em 1em ;
box-shadow:0.3em 0.3em 0.5em #888;
}
/************************************************************************************
BOTTOMADS
*************************************************************************************/
.bottomad{
width:auto;
background-color:#FFFFFF;
float: none;
display: block;
text-align:center;
margin-right:auto;
margin-left:auto;
margin-top:0.5em;
border: 0em;
}

/*********************************************************************
FLOAT CLEARING
/*********************************************************************/

.clearit{
clear: both;
}

.clearleft{
clear: left;
}

#content p.right{
float: right;
}

.clearright{
clear: right;
}

/*****************************************************************
BOXES
/*****************************************************************/

.box{
width: auto;
min-width:320px;
margin:1em 1em 1em 1em;

padding:1em;
border-radius: 10px 10px 10px 10px;
box-shadow:3px 3px 3px #666666;
float: left;
text-align:justify;
display:inline;
background-color:#e0dacc;
}

#centerbox{
padding: 0.5em;
margin: 1em;
background-color:#e0dacc;
max-width:320px;
text-align:left;
color: #000000;
display: block;
border-radius: 10px;
box-shadow:3px 3px 3px #666666; 
}

.box h3{
margin: 0;
/*border-right: 1px solid #00000; */
padding-right: 5px;
}

.box p{
margin: 0;
/*border-right: 1px solid #000000; */
padding-right: 5px;
}
.highlightbox {
float:left;
padding: 0.5em;
margin: 1em;
background-color:#e0dacc;
max-width:320px;
text-align:left;
color: #000000;
display: block;
border-radius: 10px;
box-shadow:3px 3px 3px #666666; 
}

.sidebox {
padding: 0.5em;
margin: 0.5em;
margin-top: 0em;
width:auto;
background-color:#eeeebb;
color: #000000;
display: block;
background-image:url(file:///C|/wamp/Oscillators/images/button_osc.jpg); height:auto;
border-radius: 10px;
}

.sidebarbox {
padding: 0.5em;
margin: 0.5em;
margin-top: 0.5em;
max-width:100%;
text-align:left;
font-size:0.8em;
background-color:#e0dacc;
color: #000000;
display: block;
border-radius: 10px;
box-shadow:3px 3px 3px #666666; 
}

.emphasisbox {
float:right;
padding: 0.5em;

margin: 1em 0em 1em 1em;

width:45%;
text-align:left;
background-color:#e0dacc;
color: #000000;
display: block;
border-radius: 10px;
box-shadow:3px 3px 3px #666666; 
}
.colboxctr {

text-align:center;
padding: 0;
margin: 10px;
width: auto;
background-color:#e3e0d0;
color: #000000; 
border-style: solid;
border-width: 1px;
border-color: #000000;
border-radius: 10px;
border-left:none;
border-top:none;
display: block;
padding: 6px;
}

#colboxright {
float:left;
padding: 0;
margin: 10px;
width: auto;
border-radius: 15px;
background-color:#e3e0d0;
color: #000000;
border-style: solid;
border-top:hidden;
border-left:hidden;
border-width: 1px;
border-color: #000000;
display: block;
padding: 6px;

}
#colboxright p {
margin: 10px 0 0 10px;
color: #000000;
}

#colboxright h3{
color: #990000;
padding: 0;
margin: 20px 0 0 10px;
}

.simbar{
width:auto;/*holder for sim-icon to allow for no display on mobiles*/
}

/********************************************************************************
BUTTONS
*********************************************************************************/
input#btn {
/* Button styling from http://cssdemos.tupence.co.uk/button-styling.htm */
padding: 4px 20px;
/*give the background a gradient*/
background:#7a9fe7; /*fallback for browsers that don't support gradients*/
background: -webkit-linear-gradient(top, #7a9fe7, #081c74);
background: -moz-linear-gradient(top, #7a9fe7, #081c74);
background: -o-linear-gradient(top, #7a9fe7, #081c74);
background: linear-gradient(top, #7a9fe7, #081c74);
border:2px outset #dad9d8;
/*style the text*/
font-family: Arial, sans-serif; 
font-size:1.1em;
letter-spacing:0.05em;
text-transform:uppercase;
color:#fff;
text-shadow: 0px 1px 10px #000;
/*add to small curve to the corners of the button*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*give the button a drop shadow*/
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
}
/****NOW STYLE THE BUTTON'S HOVER STATE***/
input#btn:hover, input#btn:focus {
border:2px solid #dad9d8;
}

.butn{
background-color:#FF0000;
color:#0099FF;
}

.butn label{
background-color:#FF00ff;
color:#0099FF;

}



/***********************************************************************************
QUIZ FORMATTING
*************************************************************************************/
#quiz{
float: left;
width:100%;
overflow:auto;
}
.

#quiz p {
margin: 10px 0 0 10px;
color: #000000;
}
.quizq{
padding: 5px;
font-weight:bold;
width: 90%;
clear: left;
font-size:100%;
color: #000000;
border-top: 1px solid #000000;
}

.quizq form ul li{
color: #990000;
}

.quizans{
padding: 5px;
float:left;
width: 20%;
font-size:100%;
color: #000000;
margin-bottom: 30px;
}

.submit-button {
width: 197px;
height: 32px;
background:url(../ac_theory/images/submit_ans_red.jpg);
border: none;
cursor: pointer;
cursor: auto; /* For IE 5.0 and 5.5 */
vertical-align: top;
}

label {
    background:#fff;
    color:#000;
    border-radius:8px;
	padding-top:0.5em;
    padding-bottom:0.1em;
	margin:1em;
    cursor:pointer;
}

label:hover {
    background:#ccc;   
}

input {
    margin-right:1em;   
}

#answers{
display:none;
}
/************************************************************************************
TABLES
*************************************************************************************/
.table-card {
font-size:1.2em;
border-width: thin thin thin thin;
border-spacing: 0px;
border-style:solid ;
border-color: #000000;
border-collapse: separate;
background-color: white;
text-align:center;
}

.table-card th {
border-width: 1px 1px 1px 1px;
padding: 2px 2px 2px 2px;
border-style: solid;
padding:0.5em;
text-align:center;
font-weight:bold;
color:#ffffff;
border-color: #eeeeee;
border-bottom-color:#000000;
background-color:#990000;
height:auto;
}

.table-card td {
border-width: 1px 1px 1px 1px;
width: auto;
text-align:center;
padding: 2px 2px 2px 2px;
border-style:solid;
border-color:#dddddd;
background-color:#ffffff;
min-height:2em;
}

.printdata{
display: none;
} 

/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
background-color:#fffff;
max-width:190px;
width: 18%;
padding:2%;
text-align:center;
float: left;
}

#sidebar h1{
font-size:1.5em;
font-family:  Arial, Helvetica, sans-serif;
color: #990000;
padding: 0;
margin: 20px 0 10px 10px;
}

#sidebar h2{
font-size:1.5em;
color: #990000;
padding-top: 0;
margin: 20px 0 0 10px;
}

#sidebar h4{
font-family:  Arial, Helvetica, sans-serif;
font-size:1em;
color: #990000;
padding-top: 0;
margin: 20px 0 10px 10px;
}

#sidebar h3{
margin-top:0em;
margin-bottom:0em;
font-size: 1em;
font-family: Abadi,Arial-narrow,Helvetica,sans-serif;
color: #990000;
padding: 10px;
}


#content p{
font-size:1.2em;
line-height: 1.5em;      /* Sets line height to allow for sub and sup*/
margin: 1em 0 0 1em;
text-align:justify;
color:#000000;
}

#content p sub, sup{    /* Sets line height to allow for sub and sup*/
line-height: 0;
}

#content p center{
margin: 10px 0 0 10px;
text-align:center;
color:#000000;
}

#content p a{
color:#0000ff;
text-decoration:underline;
}
#content p a:hover{
color:#6666ff;
}
#content p a:visited{
color:#ff66ff;
}

/*COOKIES*******************/
#cookies{
margin-left:1em;
padding-top:0;
padding-left:1em;
min-width: 10em;
max-width:100%;
height: auto;
float:none;
}

#revision {
max-width:20em;
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#e0dacc;
text-align:center;
font-family: 'PT Sans', Arial, sans-serif;
font-size: 90%;
border-radius: 5px;
box-shadow:0.5em 0.5em 0.5em #888;
padding-top:0.1em;
padding-bottom:0.1em;
}


/************************************************************************************
FOOTER
*************************************************************************************/
#footer {
clear: both;

max-width:40em;
height:auto;
margin-left:auto;
margin-right:auto;
border-radius: 10px;
text-align:center;
background-color:#ddd6cc;
color: #000000;
display: block;
box-shadow:3px 3px 3px #666666; 
}

#footer p {
font-size:0.7em;
padding:0.5em;
}
/********************************************************************************
SLIDESHOW
*********************************************************************************/
#container{
max-width:45em;
height:35em;
margin:1em auto;
position:relative;
}
#img{
max-height:100%;
max-width:100%;
position:absolute;
}
#left_holder{
height:100%;
width:22%;
position:absolute;
left:0em;
top:0em;
}
#right_holder{
height:100%;
width:22%;
position:absolute;
right:0em;
top:0em;
}
.left{
height:10%;
width:30%;
position:absolute;
top:40%;
left:-0.25em;
}
.right{
height:10%;
width:30%;
position:absolute;
top:40%;
right:-0.5em;
}

/********************************************************************************
SLIDESHOW_LPF

#container_LPF{
height:35em;
width:45em;
margin:1em auto;
position:relative;
}
#img_LPF{
height:100%;
width:100%;
position:absolute;
}
#left_holder_LPF{
height:100%;
width:22%;
position:absolute;
left:0em;
top:0em;
}
#right_holder_LPF{
height:100%;
width:22%;
position:absolute;
right:0em;
top:0em;
}
.left_LPF{
height:10%;
width:30%;
position:absolute;
top:40%;
left:-0.25em;
}
.right_LPF{
height:10%;
width:30%;
position:absolute;
top:40%;
right:-0.5em;
}
*********************************************************************************/
/************************************************************************************
MEDIA QUERIES screens over 1289px wide
*************************************************************************************/
@media screen and (min-width: 1289px) { 
 
img { max-width: 100%;
}

#content {
width: 100%;
float: left;
padding-right:1em;
}

/*	#sidebar {
width: auto;
float: none;
} */

nav {   
height: auto; 
} 

nav ul {  
width: 100%;  
display: none;  
height: auto;  
}  

nav li {  
width: 25%;  
float: left;  
position: relative;  
}  

nav li a {  
border-bottom: 1px solid #576979;  
border-right: 1px solid #576979;  
}  

nav a {  
text-align: left;  
width: 100%;  
text-indent: 25px;  
}  

nav a#pull {  
display: block;  
color: #ffffff;
background: url('../Oscillators/images/button_bg_osc.jpg') ;    
width: 100%;  
position: relative;  
}  

nav a#pull:after {  
content:"";  
width: 30px;  
height: 30px;  
display: inline-block;  
 position: absolute;  
right: 15px; 
top: 5px;  
}  

}
/************************************************************************************
MEDIA QUERIES Tablet Landscape & desktop (1024x768)
*************************************************************************************/

@media screen and (max-width: 1288px) {  

img { max-width: 100%;}
.toppic{max-width: 47%;}
.reducepic{max-width: 50%;}

#content {
width: 100%;
float: left;
padding-right:1em;
}

nav {   
height: auto; 
}  

nav ul {  
width: 100%;  
display: none;  
height: auto;  
}  

nav li {  
width: 25%;  
float: left;  
position: relative;  
}  

nav li a {  
border-bottom: 1px solid #576979;  
border-right: 1px solid #576979;  
}  

nav a {  
text-align: left;  
width: 100%;  
text-indent: 25px;  
}  

nav a#pull {  
display: block;  
color: #ffffff;
background: url('../Oscillators/images/button_bg_osc.jpg') ;    
width: 100%;  
position: relative;  
}  

nav a#pull:after {  
content:"";  
width: 30px;  
height: 30px;  
display: inline-block;  
 position: absolute;  
right: 15px; 
top: 5px;  
}  

}

/************************************************************************************
MEDIA QUERIES    Small Tablet Landscape & laptops (800x600)
*************************************************************************************/

@media screen and (max-width: 1024px) {  

img { max-width: 100%;}
.toppic{max-width: 47%;}
.reducepic{max-width: 50%;}

#content {
width: 100%;
float: left;
padding-right:1em;
}

nav {   
height: auto; 
}  

nav ul {  
width: 100%;  
display: none;  
height: auto;  
}  

nav li {  
width: 25%;  
float: left;  
position: relative;  
}  

nav li a {  
border-bottom: 1px solid #576979;  
border-right: 1px solid #576979;  
}  

nav a {  
text-align: left;  
width: 100%;  
text-indent: 25px;  
}  

nav a#pull {  
display: block;  
color: #ffffff;
background: url('../Oscillators/images/button_bg_osc.jpg') ;    
width: 100%;  
position: relative;  
}  

nav a#pull:after {  
content:"";  
width: 30px;  
height: 30px;  
display: inline-block;  
 position: absolute;  
right: 15px; 
top: 5px;  
}  

}

/************************************************************************************
MEDIA QUERIES    Tablet Portrait(768x1024)
*************************************************************************************/

@media only screen and (max-width : 801px) {  

img { max-width: 100%;}
.toppic{max-width: 47%;}
.reducepic{max-width: 50%;}

#content {
width: 100%;
float: none;
padding-right:1em;
}

#sidebar {
width: auto;
float: none;
} 
.subheadbox {
width:auto;
max-width:60%;
}

nav {   
height: auto; 
}  

nav ul {  
width: 100%;  
display: none;  
height: auto;  
}  

nav li {  
width: 50%;  
float: left;  
position: relative;  
}  

nav li a {  
border-bottom: 1px solid #576979;  
border-right: 1px solid #576979;  
}  

nav a {  
text-align: left;  
width: 100%;  
text-indent: 25px;  
}  

nav a#pull {  
display: block;  
background-color: #6f4009;  
width: 100%;  
position: relative;  
}  

nav a#pull:after {  
content:"";  
width: 30px;  
height: 30px;  
display: inline-block;  
 position: absolute;  
right: 15px; 
top: 10px;  
}  
.simbar{
display:none;
}
}

/************************************************************************************
MEDIA QUERIES        Small Tablet (600x800)
*************************************************************************************/
@media only screen and (max-width : 601px) {  

img { max-width: 100%;}
.reducepic{max-width: 45%;
background-color:#FF0000;}
.toppic{max-width: 47%;}
.rightimage{max-width: 100%;}
.leftimage{max-width: 100%;}
#content {
width: 100%;
float: none;
padding-right:1em;
}

#sidebar {
width: auto;
float: none;
} 
#learningbox{
max-width:45%;
}

.subheadbox {
width:auto;
max-width:60%;
}

nav {   
height: auto; 
}  

nav ul {  
width: 100%;  
display: none;  
height: auto;  
}  

nav li {  
width: 50%;  
float: left;  
position: relative;  
}  

nav li a {  
border-bottom: 1px solid #576979;  
border-right: 1px solid #576979;  
}  

nav a {  
text-align: left;  
width: 100%;  
text-indent: 25px;  
}  

nav a#pull {  
display: block;  
background-color: #6f4009;  
width: 100%;  
position: relative;  
}  

nav a#pull:after {  
content:"";  
width: 30px;  
height: 30px;  
display: inline-block;  
 position: absolute;  
right: 15px; 
top: 10px;  
}  

.simbar{
display:none;
}

}  
/************************************************************************************
MEDIA QUERIES		Mobile Landscape(480x320)
*************************************************************************************/
/****/
@media only screen and (max-width : 601px) {  

img { max-width: 100%;
}
.toppic{max-width: 47%;}
.reducepic{max-width: 60%;}
.rightimage{max-width: 100%;}
.leftimage{max-width: 100%;}
#learningbox { max-width:100%;
}

nav {   
height: auto; 
}  

nav ul {  
width: 100%;  
display: none;  
height: auto;  
}  

nav li {  
width: 50%;  
float: left;  
position: relative;  
}  

nav li a {  
border-bottom: 1px solid #576979;  
border-right: 1px solid #576979;  
}  

nav a {  
text-align: left;  
width: 100%;  
text-indent: 25px;  
}  

nav a#pull {  
display: block;  
background-color: #6f4009;  
width: 100%;  
position: relative;  
}  

nav a#pull:after {  
content:"";  
width: 30px;  
height: 30px;  
display: inline-block;  
 position: absolute;  
right: 15px; 
top: 10px;  
}  

.simbar{
display:none;
}

}  
/************************************************************************************
MEDIA QUERIES       Mobile Portrait(320x480)
*************************************************************************************/
@media only screen and (max-width : 491px) {

.img { max-width: 100%;}
.rightimage{max-width: 100%;}
.leftimage{max-width: 100%;}
.toppic{max-width: 100%;}
.reducepic{max-width: 100%; }
.animation{max-width: 100%;}
.reduceleftpic{max-width: 60%;}
.reducerightpic{max-width: 60%;}
.reducecenterpic{max-width: 100%;}
#learningbox { width:100%;}
.emphasisbox { width:92%; }
.object {max-width:100%;}

nav li {  
display: block;  
float: none;  
width: 100%;  
}  

nav li a {  
border-bottom: 1px solid #576979;  
}  

nav a#pull {  
display: block;  
background-color: #6f4009;  
width: 100%;  
position: relative;  
}  

nav a#pull:after {  
content:"";  
/*background: url('../Oscillators/images/nav-icon.png') no-repeat;*/
width: 30px;  
height: 30px;  
display: inline-block;  
 position: absolute;  
right: 15px; 
top: 10px;  
}  

.table_osc{
width:100%;
float: none;  
}

.simbar{
display:none;
}

}
/************************************************************************************
MEDIA QUERIES			Mobile portrait screens up to 329px viewport 321wide
*************************************************************************************/
@media only screen and (max-width : 321px) { 

.img { max-width: 100%;}
.rightimage{max-width: 100%;}
.leftimage{max-width: 100%;}
.reducepic{max-width: 95%;}
.reduceleftpic{max-width: 100%;}
.reducerightpic{max-width: 100%;}
.reducecenterpic{width: 100%;}
#learningbox { width:100%; }
.emphasisbox { width:92%; }
.object {width:100%;}
nav li {  
display: block;  
float: none;  
width: 100%;  
}  

nav li a {  
border-bottom: 1px solid #576979;  
}  

nav a#pull {  
display: block;  
background-color: #6f4009;  
width: 100%;  
position: relative;  
}  

nav a#pull:after {  
content:"";  
/*background: url('../Oscillators/images/nav-icon.png') no-repeat;*/
width: 30px;  
height: 30px;  
display: inline-block;  
 position: absolute;  
right: 15px; 
top: 10px;  
}  

.table_osc{
width:100%;
float: none;  
}

.simbar, .printpic, .printleftpic,{
display: none;
}

}