/* CSS Document */
#container   { 

width: 900px; /* Overall size of the Web Page */
padding-left: 50px; /* Shift the page to the right */

}

#header  {

width: 900px; /* Size of the Ribbon Header */
height:125px;
position:relative; /* Placement of the Ribbon Header */
background-image:  url("images/Header.png");

}

#header_PD  {

width: 900px; /* Size of the Ribbon Header */
height:125px;
position:relative; /* Placement of the Ribbon Header */
background-image:  url("images/PD_Header_PD.png");

}

#Logo  {

width: 50px; /* Size of the Roll Over Logo */
height:50px;
position: absolute; /* Placement of the Roll Over Logo */
top: 0px; /* Distance from the top of the header box */
right: 0px;/* left: 0px; Distance from the right of the header box */

}

#contact { /* Position and formatting of contact information */

height: 450px;
position: inherit;
margin: 0px 0px 0px 50px;

}


/*CSS for Orb buttons on the page*/

#orbs li{
width: 65px; /* width of image container. Should be wider than contained images (before bubbling) */
height:60px; /* height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /* width of each image before bubbling */
height: 60px; /* height of each image */
}

.bubblewrap{
list-style-type:none;
position:absolute; /* Placement of the Bubble button string */
left:190px;
top:50px; 
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
margin: 0px 50px 0px 0px;
zoom:1; /* Trigger haslayout in IE7 and less */
*display:inline; /* For IE7 and less */
position: relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /* default width of each image */
height: 60px; /* default height of each image */
border:0;
}

.bubblewrap .tooltip{ /* CSS for image tooltip (alt attribute of image) */
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}

#title { /* Position and formatting of the SAVE page title */

width: 700px;
height: 1px;
margin: 10px 0px 0px 0px;
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 50px;
color:#339900;

}

#title_PD { /* Position and formatting of the Paradigm Devices page title */

width: 800px;
height: 1px;
margin: 10px 0px 0px 0px;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 33px;
color:#000000;

}

#subtitle { /* Formatting of the text subheadings */

width: 600px;
height: 1px;
margin: 40px 0px 30px 0px;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 15px;
color:#000000;
text-decoration:underline;

}

#subtitle_PD { /* Formatting of the text subheadings */

width: 800px;
height: 1px;
margin: 40px 0px 30px 0px;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 15px;
color:#000000;
text-decoration:underline;

}

#middle_p { /* Text format for body paragraphs */

color: #000066;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: italic;

}

#video { /* Position and formatting of the video window */

width: 560px;
height: 315px;
position:relative;
float:right;
margin: 5px 0px 0px 10px;

}

#Picture { /* Position and sizing for a picture */

width: 500px;
height: 374px;
position:relative;

}

#fadeshow1 { /* Position and formatting of the picture window */

width: 550px;
height: 235px;
position:relative;
float:right;
margin: 0px 0px 0px 10px;

}

#slidemenubar, #slidemenubar2{
position:absolute;
background-image:url(images/menubkgrd.png);
/* border:1.5px solid black;
background-color:#CCCCCC; */
layer-background-color:#CCCCCC;
font: 12px Verdana;
line-height: 25px;
}

#slidemenubar_PD, #slidemenubar2_PD{
position:absolute;
background-image:url(images/menubkgrd_PD.png);
/* border:1.5px solid black;
background-color:#CCCCCC; */
layer-background-color:#CCCCCC;
font: 12px Verdana;
line-height: 25px;

}

#Text_t { /* Text format for title */

color: #000000;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;

}

#Text_p { /* Text format for Paragaph */

color: #000000;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;

}

#poem { /* Position and formatting of the right-side poem container */

position: absolute;
top: 460px;
left: 640px;
margin-left: 10px;
width: 300px; height: 300px;
background-image:url(images/rghtbkgrd.png);
/* See images */

}

#poem_p { /* Text format for Poem */

color: #000000;
padding: 0px 40px 0px 40px;
text-align: center;
font-size: 18px;
font-weight: 500;
font-family:  Arial, Helvetica, sans-serif;

} 

#body { /* Position and formatting container for body text */

margin-top: 70px;
max-width: 580px;

}

#body_p { /* Text format for body paragraphs */

color: #000000;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;

}

#quote_p { /* Text format for quotations */

color: #000066;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style:italic;

}

#question { /* Text format for FAQ questions */

color: #000066;
font-size: 17px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;

}

#answer { /* Text format for FAQ answers */

color: #000000;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;

}

#demo { /* Position and formatting container for demo screens */

position: absolute;
top: 200px;
left: 125px;

}


#footer { /* Position and formatting for footer text */

clear:both;
background-color:#FFFFFF;
border-top: 1px solid #000000;
border-bottom: 10px solid #000000;
text-align: center;
color: #999999;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;

}