body { margin: 0; font: 16px 'Sintony', Arial, sans-serif; background-color:#ffffff; }

a { color: #ffffff; text-decoration:none; font-size:18px }

#slider { background: #ffffff; margin:auto}

#topright {float:right; width: 650px; text-align:right; margin-right:20px; margin-top:5px; }	

#topright2 {float:right; width: 450px; text-align:right; margin-right:20px; margin-top:5px; }	

#toprightnav { margin-top:5px; }
#toprightnav ul { display:inline; }
#toprightnav li {padding:8px 15px 8px 15px; display:inline;}
#toprightnav a{color: #ffffff;font-size:14px; }

.main {background-color: #b6b2a8}
.mainactive {ackground-color: #b6b2a8; border:#838078 2px solid}

.resin {background-color:#0081C3}
.resinactive {background-color:#0081C3; border:#015079 2px solid}

.additives {background-color:#48C1B5; }
.additivesactive {background-color:#48C1B5; border:#338981 2px solid}

.application {background-color:#002057; color:#ffffff}
.applicationactive {background-color:#002057; color:#ffffff;  border:#6f7ca5 2px solid}

.manufacturing {background-color:#FFC20F}
.manufacturingactive {background-color:#FFC20F; border:#bb8d06 2px solid}

.deionization {background-color:#F6891F}
.deionizationactive {background-color:#F6891F; border:#ba5c01 2px solid}


select { font-family : inherit;  font-size: 100%; }




    /* ----------------------------------
        RESET
    ---------------------------------- */

    ::-moz-focus-inner { border: 0; padding: 0; }
    a { color:#000000 }
    a img { border: 0; }
    button { padding: 0; border: 0; font-family: 'Sintony', Arial, sans-serif; background: transparent; cursor: pointer;
        -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -ms-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; transition: color 300ms ease-in-out, background-color 300ms ease-in-out; }
    h1,h2,h3,h4,h5,h6 { margin: 0; }
    iframe { border: 0; }
    img { max-width: 100%; }
    input, textarea { font-family: 'Sintony', sans-serif; outline: 0; }
    ol, ul, li { margin: 0; padding: 0; list-style-type: none; }
    p { margin: 0 0 30px 0; line-height: 1.5em; }
    var { display: none; }

    /* ----------------------------------
        UTILITY CLASSES
    ---------------------------------- */

    .centered { text-align: center; }
  
/* -----------------------------------------------------------------------------

    5.) HEADER

----------------------------------------------------------------------------- */

	header { position: relative; width:100%; height:130px; background:#a5a095; border-bottom:#ffb91d solid 3px;}


    /* BRANDING */

    #branding { padding: 40px 20px 20px 35px; width:80%; font-size:40px; line-height:30px; }
	#branding img { padding-right: 35px; max-width:250px; }    
	#slider { background: #ffffff; margin:auto}

/* -----------------------------------------------------------------------------

    11.) BOTTOM Footer

----------------------------------------------------------------------------- */

	
	footer { color: #b0b0b0;  font-size: 0.95em; background-color:#001342; clear:both; padding: 20px; position:relative; bottom:0; }		


/* -----------------------------------------------------------------------------

    13.) RESPONSIVE

----------------------------------------------------------------------------- */

    /* ----------------------------------
        LARGE DESKTOP (default)
    ---------------------------------- */

    #screen-width,
    #screen-width span:before { content: "1200"; }   
   
    /* ----------------------------------
        SMALL DESKTOP/iPad Width
    ---------------------------------- */

    @media (max-width: 1199px) {    
    
	
	#branding { max-width: 90%; font-size:30px; padding: 20px 20px 20px 35px; line-height:28px}
	#branding img { max-width: 20%; }
	#topright img { max-width: 95%;}

	
    }	

    /* ----------------------------------
        LARGE TABLET/iPad Mini Height
    ---------------------------------- */

    @media (max-width: 979px) {

	header { height:140px; }   
	#branding { max-width: 80%; font-size:20px;padding: 20px 20px 20px 35px; position:fixed; top:0px}
	#branding img {max-width: 25%; }   
	#topright img { max-width: 55%;}
	footer .copyright { float: none; text-align: center; }
	nav.footer { float: none; margin-top: 30px; text-align: center; }
	#screen-width,
    #screen-width span:before { content: "979"; }
#topright {float:none; width: 650px; text-align:right; right:0; margin-top:0px;position:fixed; top:10px  }	
    }	

    /* ----------------------------------
        SMALL TABLET
    ---------------------------------- */

    @media (max-width: 767px) {

	body { padding: 0; }
	#branding { max-width: 60%; }
	#bottom { padding: 0 20px; }
	.bottom-inner { padding-bottom: 0; }
    footer { padding: 0 20px; }
	#screen-width,
	#screen-width span:before { content: "767"; }
    }
	
    /* ----------------------------------
        PHONE
    ---------------------------------- */

    @media (max-width: 480px) {

      /* SCREEN WIDTH */
	.touch {font-size:14px; line-height:30px; }
    #screen-width,
    #screen-width span:before { content: "480"; }

    }