/* This CSS sheet was created and implemented by David Surbey, an employee of UniTek Sealing Solutions.
   It was designed for the purpose of creating a uniform look throughout the UnitekSS.com website. For any questions 
   regarding its functions, please direct them to surbey@gmail.com.
*/


/* Sets the background color for entire site */
body 
{
background-color: white;
margin:0 auto 0 auto;
text-align: center; /* Centers container div for IE */
min-width: 770px;
}

/* This will format the page so that it doesn't shift when you resize the browser*/
#wholepage
{
width: 770px;
margin: 0 auto;
text-align: left; /* Undoes body's center-align */

}

/* This will format the header */
#header
{
background-color: #b0c4de;
text-align: center;
height: 300px;
width: 765px;
border:2px solid #003366;
}

/* These next sections will format the menu bar containing all the websites links */
#links
{

float:left;
text-align: right;
border-top:2px solid #ff6600;
width: 173.67px;
margin:0;
padding:.5px;
background-color: #b0c4de;
}

#links a
{

font-size: 108%;
font-family: "Trebuchet MS", sans-serif ;
float:left;
width:98.25%;
border:1.75px solid #003366;
color:white;

}

#links a:hover 
{
background-color:#ff6600;
color:white;
text-align: center;
border:2px solid #003366;

}

/* This will align the footer on each page */
#footercontainer
{
  float: right;
  
  width: 770px;
  text-align: right;
}


/* This will format the footer */
#footer
{
float: right;
text-align:right;
padding:0.5em;
color:black;
background-color: #b0c4de;
font-size: 70%;
margin-left: auto;
margin-right:auto;
width: 350px;
}

/* This next section will format the content in the body of every page */
#content
{
text-align:justify;
float:right;

width: 560px;
border-top:2px solid #ff6600;
}

h1
{
text-align:center;
color:#003366;
text-decoration: underline;
}

h2
{
text-align:left;
color:#003366;
font-style: italic;
}

li
{
font-family: Tahoma, serifSansSerifMonospace 
}
/* This will format specific pictures that need to be floated right. (I.E. Tokia pictures) */
#pictures
{
float:right;

}

/* This will format the blocks of text that want to stand out beyond their page. (I.E. Contact section on contacts.html) */
#standAlones
{
font-family: "Trebuchet MS", sans-serif ;
color:#003366;
background-color: #b0c4de;
border:2px solid #ff6600;
width: 360px;
}

#standAlones a
{
color:#ff6600;
}
 
#standAlones2
{
font-family: "Trebuchet MS", sans-serif ;
color:#003366;
text-align: right;
background-color: #b0c4de;
border:2px solid #003366;

}

#standAlones2 a
{
color:#ff6600;
}

#standAlones3
{
float:right;
padding:0.25em;
font-family: "Trebuchet MS", sans-serif ;
color:#003366;
background-color: #b0c4de;
border:2px solid #ff6600;
width: 100%;

}

#standAlone3Container
{
width:560;
}

#border_left
{
width:38px;
float:left;
height:100%;
}
/* This will format all the pictures found on the Rubber & Plastic main pages. Buttons 1-4 are for Rubber, 5-8 for Plastic */
#biggerImageContainer
{
float: right;
width: 404px;
margin-left: 6px;
}

#imageContainer 
{ 
float: right;
width: 404px;
background-color: #b0c4de;
height: 214px; 
border-right:2px solid #ff6600;
border-left:2px solid #ff6600;
}

#imageContainer2
{
float: right;
width: 380px;
}

#button1 { position: absolute; }
#button1 a img {
    position: absolute;
    left: 4px;
    top: 5px;
    width: 200px;
    height: 100px;
    border: 0;
}
#button1 a img.primary { z-index: 1; }
#button1 a img.rollover { z-index: -1; }
#button1 a:hover img.rollover { z-index: 2;border-bottom:2px solid #ff6600; }

#button2 { position: absolute; }
#button2 a img {
    position: absolute;
    left: 209px;
    top: 5px;
    width: 189px;
    height: 100px;
    border: 0;
}
#button2 a img.primary { z-index: 1; }
#button2 a img.rollover { z-index: -1; }
#button2 a:hover img.rollover { z-index: 2; border-bottom:2px solid #ff6600; }

#button3 { position: absolute; }
#button3 a img {
    position: absolute;
    left: 4px;
    top: 110px;
    width: 150px;
    height: 100px;
    border: 0;
}
#button3 a img.primary { z-index: 1; }
#button3 a img.rollover { z-index: -1; }
#button3 a:hover img.rollover { z-index: 2; border-bottom:2px solid #ff6600; }

#button4 { position: absolute; }
#button4 a img {
    position: absolute;
    left: 158px;
    top: 111px;
    width: 240px;
    height: 100px;
    border: 0;
}
#button4 a img.primary { z-index: 1; }
#button4 a img.rollover { z-index: -1; }
#button4 a:hover img.rollover { z-index: 2; border-bottom:2px solid #ff6600; }

#button5 { position: absolute; }

#button5 a img {
    position: absolute;
    left: 4px;
    top: 5px;
    width: 160px;
    height: 100px;
    border: 0;
}
#button5 a img.primary { z-index: 1; }
#button5 a img.rollover { z-index: -1; }
#button5 a:hover img.rollover { z-index: 2;border-bottom:2px solid #ff6600; }

#button6 { position: absolute; }
#button6 a img {
    position: absolute;
    left: 169px;
    top: 5px;
    width: 230px;
    height: 100px;
    border: 0;
}
#button6 a img.primary { z-index: 1; }
#button6 a img.rollover { z-index: -1; }
#button6 a:hover img.rollover { z-index: 2; border-bottom:2px solid #ff6600; }

#button7 { position: absolute; }
#button7 a img {
    position: absolute;
    left: 4px;
    top: 110px;
    width: 170px;
    height: 100px;
    border: 0;
}
#button7 a img.primary { z-index: 1; }
#button7 a img.rollover { z-index: -1; }
#button7 a:hover img.rollover { z-index: 2; border-bottom:2px solid #ff6600; }

#button8 { position: absolute; }
#button8 a img {
    position: absolute;
    left: 179px;
    top: 110px;
    width: 220px;
    height: 100px;
    border: 0;
}
#button8 a img.primary { z-index: 1; }
#button8 a img.rollover { z-index: -1; }
#button8 a:hover img.rollover { z-index: 2; border-bottom:2px solid #ff6600; }