@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: #000099;
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:auto; 
}

/************************************************************************************
HEADER
*************************************************************************************/
.header {
border-top: thin;
width: 100%;
height:auto;
background-image:url(../images/banner_semi.jpg);
background-repeat: no-repeat;
background-color:#0001cd;
}

/************************************************************************************
TITLE
*************************************************************************************/
.title 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;
}
.title h2{
margin-top:-0.5em;
margin-bottom:0.75em;
font-size: 2em;
font-family: Abadi,Arial-narrow,Helvetica,sans-serif;
color: #99ccff;
padding: 10px;
font-weight:bolder;
}

/************************************************************************************
Homebar = TOPIC MENU
*************************************************************************************/
#homebar{
height:auto;
width:100%;
background: url('../images/homebar_bg.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: 0.5em 0.5em 0em 0em ;
}
#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:#3366ff;
padding:0.3em;
border-radius: 0.25em 0.25em 0.25em 0.25em;
}

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

#pagetitle h3{
float:left;
font-size:1.3em;
color: #3333cc;
padding: 0;
margin: 10px 0 0 10px;
}

/************************************************************************************
GOOGLE APPS
*************************************************************************************/
.googlebox {
margin: 0.5em;
height:auto;
}
/**TRANSLATE***********************/
#translate{
text-align:right;
padding-right:0.5em;
margin-top:0em;
width: auto;
height: auto;
float:right;
}
/*SEARCH************************/
.search{
margin-top:0em;
padding-top:0.2em;
min-width: 20%;
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;
}

/************************************************************************************
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: #6699ff;
border-radius: 0.5em 0.5em 0em 0em ;
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:#3366ff;
padding:0.3em;
border-radius: 0.25em 0.25em 0.25em 0.25em;
}
/*********************************************************************************
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: 0em 0em 0.5em 0.5em;
box-shadow:0.5em 0.5em 0.5em #888;
}
.topbar ul {
border-bottom: 0em ;
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:#3366ff;
padding:0.3em;
margin-left:0em;
border-radius: 0.25em 0.25em 0.25em 0.25em;
}
/************************************************************************************
CONTENT
*************************************************************************************/
#content {
width: 100%;
max-width:1274px;
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: #3333cc;
padding: 0;
margin: 20px 0 10px 10px;
}

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

#content h3{
font-size:1.3em;
color: #3333cc;
padding: 0;
margin: 5px 0 5px 10px;
}

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

#content h5{
font-size:1.3em;
color: #3333cc;
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;
}


.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;
}


/************************************************************************
LEARNING BOX
*************************************************************************/
#learningbox {
float: left; 
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: #3333cc;
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;
margin: 20px 5px 0 10px;
border: 0px;
}

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

.rightimage{
float: right;
margin-left: 5px;
border: 0px;
}

.replaceimg{
float: right;
margin-left: 5px;
border: 0px;
}

.reducepic{
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;
}


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

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

.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: #990000;
padding: 0;
margin: 0px 0 0px 0px;
text-align:center;
max-width:320px;
display:block;
margin-left:auto;
margin-right:auto;

}

.printpic{
display:none;
}

/****************************************************************
SWAP IMAGES
******************************************************************/

.swap {
        width: 400px;
        height: 261px;
        position: relative;
        display: inline-block;
        margin: 5px;
}
.swap .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
}
.swap:hover .img-top {
        display: inline;
}
/****************************************************************
VIDEO
******************************************************************/
video {
width:320px !important;
height:auto !important;
}
/************************************** Used to clear floated divs ********************************/
.clearit{
clear: both;
}

.clearleft{
clear: left;
}

#content p.right{
float: right;
}

.clearright{
clear: right;
}

/*****************************Box text************************************/
.box{
width: auto;
max-width:220px;
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;
}

.box ff{
width: auto;
width:220px;
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(../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;
}

.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;
}


/***********************************************************************************
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;
}

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

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

#answers{
display:none;
}
/************************************************************************************
TABLES
*************************************************************************************/
.table-semi {
margin-left:auto;
margin-right:auto;
margin-top:0.5em;
margin-bottom:0.5em;
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-semi 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: #99ddFF;
height:auto;
}

.table-semi 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:#ffffff;
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: #333966;
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;
}


.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;
}
/************************************************************************************
MEDIA QUERIES replacing video elements on print output
*************************************************************************************/

@media print{
.movie{display:none;}
}

@media screen{
.poster{display:none;}
}
/************************************************************************************
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%;}


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;  
}  
video {
width:260px !important;
height:auto !important;
}
}

/************************************************************************************
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 : 768px) {  

img { max-width: 100%;}
.reducepic{max-width: 45%;}
.toppic{max-width: 47%;}
.rightimage{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: 50%;
}

#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;
}
video {
width:280px !important;
height:auto !important;
}
}  
/************************************************************************************
MEDIA QUERIES       Mobile Portrait(320x480)
*************************************************************************************/
@media only screen and (max-width : 491px) {

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

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;
}
video {
width:300px !important;
height:auto !important;
}
}
/************************************************************************************
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{width: 100%;}
.reducerightpic{max-width: 100%;}
.reducecenterpic{max-width: 100%;}
#learningbox { width:100%; background-color:#FF0000;}
.emphasisbox { width:92%; }
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;
}

}