﻿@media screen, projection {    
    /* ++++++++++++++++++++ RESET TAGS +++++++++++++++++++++ */
	* {	margin:0; padding:0; font-family: Arial, HelveticaNeue, Helvetica, Geneva, sans-serif;  font-size:100%; color:#4f194a; text-decoration:none; }
	html { height:100%; background-color:#fff; color:#4f194a; }
	body { height:100%; background-color:#fff; color:#4f194a; margin:0; padding:0; text-align:left; font-size:62.5%; }
	fieldset { border:0px solid #fff; }
	table, td, th { border-collapse:collapse; text-align:left; }
	img { border:none; }
	ul { width:auto; list-style:none; }
	* html li { height:1%; }
	/* ++++++++++++++++++++ End RESET TAGS ++++++++++++++++++++ */
    
    /* ++++++++ GLOBAL LAYOUT +++++++ */ 
	body, html { background:#fff;    }
    form { }
    #Header { height:160px; width:100%;  background:#fff url(../media/images/backgrounds/header.gif) 0 100% repeat-x; }        
	#Content { padding:0 0 40px 0; clear:both;}
        .page-content { max-width: 1160px; margin: 0 auto; }
        .cover { background-position:center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size: cover;  }
        .indent { padding:0 5.6%;  }
        .row { width:100%; overflow:hidden; padding-bottom:20px; }
    #Footer { background-color:#0869af; width:100%; padding:25px 0 15px 0; }

    .hide { display:none; }
    
    header, footer, section { display:block; }
    /* END GLOBAL LAYOUT =============================================================================================================================  */ 
	

    #Header { }
        #HeaderHolder { width:100%; overflow:hidden; }
            #LeftHeader { float:left; padding:9px 0 0 55px; }
                #Logo1 {  width:145px; height:94px; }
            #RightHeader { float:right;  }
                #ContactHeader { display: block; float:left; font-size:1.4em; line-height:1.3em; color:#067ec4; font-weight:bold; padding:9px 0 0 0; }    
                    #ContactHeader a { color:#067ec4; text-decoration:underline;  }    
                #Cook1 { display: block; margin:0; float:left; height:151px; width:170px; }    
                #LanguagePanel { display: block; overflow:hidden;  float:right; width:126px; padding:9px 0 0 0; }    
                    #LanguagePanel a { display:block; background:#c5c5c5; float:left; padding:8px; float:left; font-size:1.4em; margin-right:3px; }    
                        #LanguagePanel a.active {background:#0869af; color:#fff; }    
        
    /* Fonts ---------------------- */
    h2 { font-family:Trebuchet MS, Arial, Geneva, Helvetica, sans-serif; font-size:32px; color:#0869af; text-align:center; padding:30px 0 20px 0; width:100%; line-height:1em; }  
    
    p { font-size:1.8em; line-height:1.3em; padding:0 0 22px 0; color:#4f194a;   }
        p.center { text-align:center; }
        p.small {font-size:1.2em; }

    #Content p a { color:#067ec4; }
      /* End Fonts ---------------------- */
     

    /* Elements -------------------------------------------- */
    #Carousel { overflow:hidden; position:relative; }
        .carousel-item { padding:20px 0 0 0; }
        h1 { font-family:Trebuchet MS, Arial, Geneva, Helvetica, sans-serif; font-size:3.6em; color:#fff; text-align:center; position:absolute; bottom:20px; width:100%; line-height: 0.9em; }  
            h1 span { font-family:Trebuchet MS, Arial, Geneva, Helvetica, sans-serif; font-size:70%; color:#fff;  }  
    	
	#InnerActionPanel {  width:960px; height:150px; overflow:hidden; background-color:#fff; margin:0 auto; border-radius:8px; }
        #InnerActionPanel a { width:480px; height:150px; float:left; text-indent:-999em;  }
    
    a#LoginButton1 { display:block; background:#0869af url(../media/images/buttons/login-customer.gif) 100% 50% no-repeat;  padding:8px 54px 8px 20px; color:#fff; font-size:1.4em; float:right; margin:16px 54px 0 0; }

     #Content .highlight { background-color:yellow; margin:30px 0 20px 0; padding:0 15px; }     
    
     #Content a.button { display:inline-block; background:#0869af;  padding:8px 20px 8px 20px; color:#fff; font-size:1.4em; }     
   
    #Content .two-columns { width:100%; overflow:hidden; }
         #Content .two-columns .column { float:left;  width:49.9%; }

     #Content .visual-insert {  width:334px; }
        #Content .visual-insert h2  {  font-size:2.6em; padding-bottom:10px; }
                #Content .visual-insert h2  a { font-family:Trebuchet MS, Arial, Geneva, Helvetica, sans-serif; color:#113a58; }
                    #Content .visual2 h2  a {  color:#395710; }

             #Content .visual-insert a.visual { border-radius:8px; display:block; text-indent:-999em;  margin-bottom:12px; }
                    #Content .visual1 .visual { width:334px; height:240px; background-image: url(../media/images/visuals/food2.jpg);  }
                    #Content .visual2 .visual { width:334px; height:240px; background-image: url(../media/images/visuals/nonfood.jpg);  }

            #Content .visual-insert p  { font-size:1.6em; }
             
    #Footer {  }
        #Footer .two-columns {  width:78%;  margin:0 auto; overflow:hidden; }
            #Footer .two-columns .column { width:49.9%; padding:0 0 20px 0;  float:left; }
             
        #Footer h2 {  font-size:1.8em; font-family:Trebuchet MS, Arial, Geneva, Helvetica, sans-serif; color:#fff; padding-bottom:12px; font-weight:normal;}
        #Footer p { color:#fff; font-size:1.4em; padding-bottom:16px;  }
        #Footer li { color:#fff; font-size:1.4em; padding-bottom:6px; }
        #Footer a { color:#fff; border-bottom:1px solid #fff; }    

     /* Conditonal css */
    @media (max-width:767px) { 
        body:after { content: 'phone'; } 
        
         #Header { height:90px;  background:#fff url(../media/images/backgrounds/header.gif) 0 131% repeat-x;  }        
	        #LeftHeader { padding:5px 0 0 10px; }
            #ContactHeader { display:none; }
            #Cook1 { height:76px; width:85px; }
            #Logo1 {  width:73px; height:47px; }
            #LanguagePanel { width:80px; padding:5px 0 0 0; }    
                    #LanguagePanel a { display:block; background:#c5c5c5; float:left; padding:4px; float:left; font-size:1.4em; margin-right:1px; }    
                        #LanguagePanel a.active {background:#0869af; color:#fff; }    

        #InnerActionPanel {  width:288px; height:45px;  }
            #InnerActionPanel a { width:144px; height:45px; }

         h1 { font-size:2.3em; bottom:10px; }
         p { font-size:1.4em; padding:0 0 12px 0;  }
            p.small { font-size:1.1em; }    
         
          a#LoginButton1 { margin:12px 32px 0 0; }

        #Content .two-columns { width:100%; overflow:hidden; }
            #Content .two-columns .column { float:none;  width:100%; } 

        #Footer .three-columns {  width:100%;  }
            #Footer .three-columns .column1,  #Footer .three-columns .column2,  #Footer .three-columns .column3  { width:80%; float:none; margin:0 auto; }
            #Footer .three-columns .column1 li,  #Footer .three-columns .column3 li {  float:none; width:100%; }

        #Content .visual-insert { width:220px; padding:0; margin:0 auto; float:none; }
            #Content .visual-insert .visual1 { width:220px; height:155px; }
            #Content .visual-insert .visual2 { width:220px; height:155px; }

       #Content .visual-insert { width:220px; }
            #Content .visual1 .visual,  #Content .visual2 .visual { width:220px; height:155px; }

             #Content .visual-insert h2  {  font-size:1.8em;  }
            #Content .visual-insert p  { font-size:1.4em; }  

        #Footer .two-columns { width:100%; }        
           #Footer .two-columns .column1 { width:80%; float:none; margin:0 auto;}
           #Footer .two-columns .column2 { width:80%; float:none; margin:0 auto; }
    }


    @media (min-width: 768px) and (max-width: 1023px) { 
        body:after { content: 'tablet'; } 
        
         #Header { height:133px;  background:#fff url(../media/images/backgrounds/header.gif) 0 110% repeat-x;  }        
	        #LeftHeader { padding: 9px 0 0 30px; }
            #Cook1 { height:124px; width:139px; }
            #Logo1 {  width:120px; height:78px; }

       #InnerActionPanel {  width:672px; height:105px;  }
            #InnerActionPanel a { width:336px; height:105px; }  

         a#LoginButton1 { margin:12px 32px 0 0; }

         p { font-size:1.5em;  padding:0 0 16px 0; }
            p.small { font-size:1.2em; }    

        #Content .visual-insert h2  {  font-size:2em;  }
            #Content .visual-insert p  { font-size:1.5em; }              
         
         #Footer .three-columns .column1,  #Footer .three-columns .column2,  #Footer .three-columns .column3  { width:33%; }
            #Footer .three-columns .column1 li,  #Footer .three-columns .column3 li {  float:none; width:100%; }
    }

    @media (min-width: 1024px) and (max-width: 1299px) { 
        body:after { content: 'desktop'; } 

        #InnerActionPanel {  width:634px; height:100px;  }
            #InnerActionPanel a { width:317px; height:100px; }
                
         p { font-size:1.7em;  padding:0 0 20px 0; }
            p.small { font-size:1.3em; }   
    }

    @media (min-width: 1300px) { 
        body:after { content: 'desktop-large'; }
    }

    body:after { display:none; }
}