@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:0em;
padding:0em;
display:block;
margin-left:auto;
margin-right:auto;
}
/************************************************************************************
HEADER
*************************************************************************************/
.header {
width: 100%;
height: auto;
background-image: url(../Resistors/images/banner_res.jpg);
background-repeat: no-repeat;
background-color:#333333;
}
/************************************************************************************
TITLE
*************************************************************************************/
.title h1{
font-size: 3em;
margin-top:0em;
margin-bottom:0em;
font-family: Abadi,Arial-narrow,Helvetica,sans-serif;
color: #ffffff;
padding: 0.5em;
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: #004444;
padding: 0.5em;
font-weight:bolder;
}
/************************************************************************************
Homebar = TOPIC MENU
*************************************************************************************/
#homebar{
height:auto;
width:100%;
background: url('../Resistors/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:#006666;
padding:0.3em;
border-radius: 0.25em 0.25em 0.25em 0.25em;
}
/************************************************************************************
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: #66bbbb;
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:#006666;
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:#006666;
padding:0.3em;
margin-left:0em;
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: #006666;
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: #006666;
padding: 0;
margin: 1em 0 0 0.5em;
}
/************************************************************************************
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;
}
/************************************************************************************
CONTENT
*************************************************************************************/
#content {
max-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: #006666;
padding: 0;
margin: 1em 0 0.5em 0.5em;
}
#content h2{
font-size:1.5em;
color: #006666;
padding-top: 0;
margin: 1em 0 -0.5em 0.5em;
}
#content h3{
font-size:1.3em;
color: #006666;
padding: 0;
margin: 1em 0 0.5em 0.5em;
}
#content h4{
font-size:1.3em;
color: #006666;
padding: 0;
margin: 1em 0 -0.5em 0.5em;
}
#content h5{
font-size:1.3em;
color: #335599;
text-align:center;
padding: 0;
margin: 0em 0 -0.5em 0.5em;
max-width:31em;
}
#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: 0.5em 0 0 0.5em;
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: 0.5em 0 1em 0.5em;
}
#right h2{
text-align:right;
font-size:150%;
color: #660000;
padding: 0;
margin: 0.5em 0 1em 0.5em;
}
#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 0.25em 0.25em;
}
.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;
}

.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:40%;
height:auto;
padding:0.5em;
margin-right:1em;
}
#headerDiv, #contentDiv {
float: left; 
width:100%;
border-radius: 0.5em 0.5em 0.5em 0.5em;
box-shadow:3px 3px 3px #666666;
margin-right:1em;
}
#titleText {
float: left;
font-size:1.5em;
font-weight:bold;
color: #006666;
padding: 0;
margin: 0.5em 0 0 0.5em;
}
#myHeader {
font-size: 1.1em;
font-weight: bold;
margin: 0em;
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:0em 0em 0.5em 0.5em ;
}
#myContent {
margin: 0em;
padding:0em;
display:block;
background-color:#e0dacc;
border-radius:0em 0em 0.5em 0.5em ;
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:0.25em 0em 0.25em 0.25em;
}
#headerDiv a {
color: #FFFFFF;
float: right;
margin: 0.5em 0.5em 0.25em 0.25em;
}
#headerDiv a:hover {
color: #FF0000;
}
/****************************************************************
IMAGES
******************************************************************/
.leftimage{
float: left;
max-width:100%;
text-align:center;
margin-right: 0.25em;
margin-left: 0.5em;
margin-bottom: 0.5em;
border: 0em;
}
.imgcenter {
float: none;
display: block;
text-align:center;
margin-right:auto;
margin-left:auto;
margin-top:0.5em;
border: 0em;
}
.imagectr {
float: none;
max-width:100%;
display: block;
text-align:center;
margin-right:auto;
margin-left:auto;
margin-top:0.5em;
border: 0em;
}
.rightimage{
float: right;
max-width:100%;
text-align:center;
margin-left: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
border: 0em;
}
.reduceleftpic{
float: left;
max-width:100%;
text-align:center;
margin-right: 0.25em;
margin-left: 0.5em;
margin-bottom: 0.5em;
margin-top: 0.5em;
border: 0em;
}
.animation{
float: left;
margin-right: 0.25em;
margin-left: 0em;
margin-bottom: 0.5em;
border: 0em;
max-width:100%;
}
.reducecenterpic{
float: none;
max-width:100%;
display: block;
text-align:center;
margin-right:auto;
margin-left:auto;
margin-top:0.5em;
border: 0em;
}
.reducerightpic{
float: right;
max-width:100%;
text-align:center;
margin-left: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
border: 0em;
}
.logisimpic{
float: right;
max-width:100%;
text-align:center;
margin-left: 0.5em;
margin-top: 0.5em;
margin-bottom: 0.5em;
border: 0em;
}
.toppic{
float: right;
max-width:40%;
text-align:center;
margin-left: 0.5em;
border: 0em;
}
.printpic{
display:none;
}
.leftbullet{
float: left;
margin: 0em 0.25em 1em 0.5em;
border: 0em;
}
.smallrightpic{
float: right;
max-width:150px;
text-align:center;
margin-left: 0.5em;
margin-top: 1.5em;
margin-bottom: 0.5em;
border: 0em;
}
.smlimage{
margin: 1em 0.25em 0 0.5em;
border: 0em;
}
.A4image{
width:inherit;
margin: 1em 0.25em 0 0.5em;
border: 0em;
}
.digcap{
font-size:1.3em;
font-weight:bold;
color: #335599;
padding: 0;
margin: 0em 0 0em 0em;
text-align:center;
max-width:31em;
display:block;
margin-left:auto;
margin-right: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:0.25em*/
}
#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:0.25em*/
}
#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;
}
/*********************************************************************
FLOAT CLEARING
/*********************************************************************/
.clearit{
clear: both;
}
.clearleft{
clear: left;
}
#content p.right{
float: right;
}
.clearright{
clear: right;
}
/*****************************************************************
BOXES
/*****************************************************************/
.box{
width: auto;
min-width:31em;
margin:1em 1em 1em 1em;

padding:1em;
border-radius: 0.5em 0.5em 0.5em 0.5em;
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:31em;
text-align:left;
color: #000000;
display: block;
border-radius: 0.5em;
box-shadow:3px 3px 3px #666666; 
}
.box h3{
margin: 0;
/*border-right: 1px solid #00000; */
padding-right: 0.25em;
}
.box p{
margin: 0;
/*border-right: 1px solid #000000; */
padding-right: 0.25em;
}
.highlightbox {
float:left;
padding: 0.5em;
margin: 1em;
background-color:#e0dacc;
max-width:31em;
text-align:left;
color: #000000;
display: block;
border-radius: 0.5em;
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: 0.5em;
}
.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: 0.5em;
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: 0.5em;
box-shadow:3px 3px 3px #666666; 
}
.colboxctr {
text-align:center;
padding: 0;
margin: 0.5em;
width: auto;
background-color:#e3e0d0;
color: #000000; 
border-style: solid;
border-width: 1px;
border-color: #000000;
border-radius: 0.5em;
border-left:none;
border-top:none;
display: block;
padding: 6px;
}
#colboxright {
float:left;
padding: 0;
margin: 0.5em;
width: auto;
border-radius: 10.25em;
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: 0.5em 0 0 0.5em;
color: #000000;
}
#colboxright h3{
color: #006666;
padding: 0;
margin: 1em 0 0 0.5em;
}
.simbar{
width:auto;/*holder for sim-icon to allow for no display on mobiles*/
}

/********************************************************************************
SLIDESHOW
*********************************************************************************/
#container {
height:25em;
width:48em;
margin:1em auto;
position:relative;
}
#img{
height:100%;
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:20%;
width:60%;
position:absolute;
top:40%;
left:-0.5em;
}
.right{
height:20%;
width:60%;
position:absolute;
top:40%;
right:-0.25em;
}
/********************************************************************************
BUTTONS
*********************************************************************************/
input#btn {
/* Button styling from http://cssdemos.tupence.co.uk/button-styling.htm */
padding: 4px 1em;
/*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:00.5em;
text-transform:uppercase;
color:#fff;
text-shadow: 0em 1px 0.5em #000;
/*add to small curve to the corners of the button*/
-webkit-border-radius: 10.25em;
-moz-border-radius: 10.25em;
border-radius: 10.25em;
/*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;

}

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

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

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

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

.quizans{
padding: 0.25em;
float:left;
width: 20%;
font-size:100%;
color: #000000;
margin-bottom: 1em;
line-height:2em;
}

.submit-button {
width: 197px;
height: 32px;
background: url(../Resistors/images/submit_ans_res.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:0.5em;
	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: 0em;
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:#006666;
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;
}

table.sample {
float:right;
	border-width: thin thin thin thin;
	border-spacing: 2px;
	border-style:solid ;
	border-color: #ffffff;
	border-collapse: separate;
	background-color: white;
	text-align:center;
}
table.sample th {
	border-width: 1px 1px 1px 1px;
	padding: 2px 2px 2px 2px;
	border-style: solid;
	border-color: #eeeeee;
	background-color:#99CCFF;
	text-align:center;
	font-size:1.2em;

}
table.sample td {
	border-width: 1px 1px 1px 1px;
	padding: 2px 2px 2px 2px;
	border-style:solid;
	border-color:#eeeeee;
	background-color: white;
	text-align:center;
	font-size:1.2em;
	
}

.printdata{
display: none;
} 

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


#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: 0.5em 0 0 0.5em;
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: 0.25em;
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: 0.5em;
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;
}


/************************************************************************************
MEDIA QUERIES    Tablet Portrait(768x1024) Affects 600x 800 portrait and 768 x 1024 portrait
************************************************************************************/
@media only screen and (min-width : 768px) {  
.img{max-width: 100%;}
.rightimage img{max-width: 100%;}
.leftimage img{max-width: 100%;}
.toppic img{max-width: 100%;}
.reducepic img{max-width: 100%; }
.animation{max-width: 100%;}
.reduceleftpic img{max-width: 60%;}
.reducerightpic img{max-width: 100%;}
.reducecenterpic img{max-width: 100%;}
#learningbox{width: 35%;}
.emphasisbox{width:92%; }
.object {max-width:100%;}
#container{width: 31em;}
#content {
max-width:100%;
float: none;
padding-right:1em;
}
.subheadbox {
width:auto;
max-width:60%;
}
}
/************************************************************************************
MEDIA QUERIES        Small Tablet Portrait(600x800)
************************************************************************************/
@media only screen and (min-width : 514px) and (max-width : 767px)  {  
.img{max-width: 100%;}
.rightimage img{max-width: 100%;}
.leftimage img{max-width: 100%;}
.toppic img{max-width: 100%;}
.reducepic img{max-width: 100%; }
.animation{max-width: 100%;}
.reduceleftpic img{max-width: 60%;}
.reducerightpic img{max-width: 100%;}
.reducecenterpic img{max-width: 50%;}
#learningbox{width: 35%;}
.emphasisbox{width:92%; }
.object {max-width:100%;}
#container{width: 31em;}
#content {
max-width:100%;
float: none;
padding-right:1em;
}

.sideads{display:none;}

.subheadbox {
width:auto;
max-width:60%;
}
}  
/************************************************************************************
MEDIA QUERIES       Mobile Portrait(320x480) NONE
************************************************************************************/
@media only screen and (min-width : 320px) and (max-width : 513px) {
.img{max-width: 100%;}
.rightimage img{max-width: 100%;}
.leftimage img{max-width: 100%;}
.toppic img{max-width: 100%;}
.reducepic img{max-width: 100%; }
.animation{max-width: 100%;}
.reduceleftpic img{max-width: 100%;}
.reducerightpic img{max-width: 100%;}
.reducecenterpic img{max-width: 100%;}
#learningbox{width: 100%;}
.emphasisbox{width:92%; }
.object {max-width:100%;}
#container{width: 31em;}
.title h1{font-size: 2em;}
.title h2{
margin-top:-0.5em;
margin-bottom:0.75em;
font-size: 1.5em;}
.sideads{display:none;}

#content {
width: auto;
float: none;
padding-right:1em;
}
}
/************************************************************************************
MEDIA QUERIES			Mobile portrait screens up to 329px viewport 321wide NONE
************************************************************************************/
@media only screen and (max-width : 319px) { 
.img { max-width: 100%;}
.rightimage img{max-width: 100%;}
.leftimage img{max-width: 100%;}
.toppic img{max-width: 100%;}
.reducepic img{max-width: 95%;}
.reduceleftpic img{max-width: 100%;}
.reducerightpic img{max-width: 100%;}
.reducecenterpic img{width: 100%;}
#learningbox {width:100%;}
.emphasisbox { width:92%; }
.object {width:100%;}
#header background-image {height:200px;}

.sideads{display:none;}

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