/*  

CORPORATE COLOURS
Dk Green = #005D2A
Lt Green = #0BAD3E
Light Grey = #EBEBE0
    */


@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);


/* --------------------- GLOBAL FORMATING ----------------- */

body {
    margin:0;
    font-family: veranda, helvetica, arial, sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:160%;
    color:#555555;
    background-color:white;
    -webkit-text-size-adjust: none;
    }

@media only screen and (max-device-width: 480px) { body {font-size:18px}  }

/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, article, section {display: block; margin: 0; padding: 0;}

/* clears containers with floated elements, no need for extra markup! */
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clear {clear:both; }

/* -------  SITE WIDE TEXT SETTINGS --------   */

.nav .navbar-nav li a {letter-spacing:1px }

img {border:0 }    
@media only screen and (max-device-width: 480px) { #img {width:100%;}  }


@media only screen and (max-device-width: 480px) { .footer-image a {color:white;  text-decoration:none;}  }             

h1{
   font-size:28px;
   color:#005D2A;
   line-height:140%;
   text-transform:uppercase;
   font-family: 'Oswald', sans-serif;
   font-weight:400;
   letter-spacing:2px
   }
   @media only screen and (max-device-width: 480px) { h1, h2, h3, h4, h4 {padding:0 10px}  }
   @media only screen and (max-device-width: 480px) { h1 {font-size:24px}  }
h2{
   font-size:20px;
   color:#15365D;
   font-family: 'Oswald', sans-serif;
   font-weight:400;
   letter-spacing:2px;
   text-transform:uppercase;
   }
h3{
   font-size:18px;
   color:#005D2A;
   line-height:160%;
   font-weight:bold;
   }
h4{
   font-size:11px;
   color:red;
   line-height:120%;
   font-weight:bold;
   }   

p {
  color:inherit;
  line-height:160%;
  font-size:16px;
  font-weight:normal;
  }
  @media only screen and (max-device-width: 480px) { p, ul, li, ol, dl, a {font-size:18px; padding:0 10px;}  }
  
.page-container ul {
  color:inherit;
  line-height:160%;
  font-size:16px;
  font-weight:normal;
  margin-top:-5px
  }
  @media only screen and (max-device-width: 480px) {.page-container ul {margin-left:20px}  }
  
.page-container ol {
  color:inherit;
  line-height:160%;
  font-size:inherit;
  font-weight:normal;
  margin-bottom:5px;
   margin-top:5px;
   margin-left:20px
  }
  
.page-container>ul>li {
   margin-bottom:5px;
   font-size:16px;
   }
   @media only screen and (max-device-width: 480px) {.page-container>ul>li {font-size:18px; margin-bottom:10px}  }


input[type=text], textarea {width: 280px; }
input[value] {color:DimGray } 

p a {
	color:#555555;
	text-decoration:none;
    text-transform:none;
    font-size:16px;
    font-weight:normal;
    font-family:veranda, arial, sans-serif;
    letter-spacing:0;
    }
    @media only screen and (max-device-width: 980px) {p a {padding:0; font-size:18px}  }

    
    
p a:link {
	color:#555555;
	text-decoration:none;
    font-weight:normal;
    font-family:veranda, arial, sans-serif;
}
p a:hover {
	color:#005D2A;
	text-decoration:none;
    font-weight:normal;
    }       
              
.page-container {
    margin-left:auto;
    margin-right:auto;
    width:1200px;
    border:0px red solid;
    background-color:#fff
    }
    @media only screen and (max-device-width: 980px) {.page-container {width:100%;}  }  
    
    button {
    background-color: #005D2A; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    border-radius:8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

button:hover {
    background-color: #0BAD3E; /* Lt Green */
    color: white;
	}
    
.image-right {float:right; width:650px; margin-left:15px; margin-bottom:10px;}
            @media only screen and (max-device-width: 480px) {.image-right {float:none; width:90%; margin-left:0;}  } 
            
.image-right280 {float:right; width:280px; margin-left:15px; margin-bottom:10px;}
            @media only screen and (max-device-width: 480px) {.image-right280 {float:none; margin-left:0;}  }       
            
.image-left180 {float:left; width:180px; margin-right:15px; margin-bottom:10px;}
            @media only screen and (max-device-width: 480px) {.image-left280 {float:none; margin-left:0;}  }       
            
.extraspace {height:60px; width:100% }            
            @media only screen and (max-device-width: 480px) {.extraspace {height:90px; width:100%}  }
            
/* ----- HEADER -------- */
#header-outer {
    width: 100%;
    border:0px solid green;
    background-color:#fff;
    }
    
header {
    margin-left:auto;
    margin-right:auto;
    width:1200px;
    min-height: 115px;
    border:0px solid pink;
    display: -webkit-flex;
    display: flex;
        }
    @media only screen and (max-device-width: 980px) { header {width:100%; min-height:500px; display:inline;}  }


/* Marshall logo  */   
#header-logo-1{width:500px; padding-top:3px; padding-bottom:8px}
             @media only screen and (max-device-width: 480px) { #header-logo-1 {width:320px; padding-right:40px; text-align:center; margin:3px auto 0 auto; border:0px teal dashed;}  }    
    
/* CA logo  */    
#header-logo-2 {width:250px; margin:40px 0 0 auto}
    @media only screen and (max-device-width: 480px) { #header-logo-2 {width:120px; margin:10px auto 10px auto; border:0px teal dashed;}  }

/* Count logo  */     
/* #header-logo-3 {width:160px; margin:24px 0 0 30px;}
    @media only screen and (max-device-width: 480px) { #header-logo-3 {float:right; width:130px; margin:-120px 10px 0 0; border:0px teal dashed;}  } */

/* Fin logo  */     
/* #header-logo-4 {width:170px; margin:63px 0 0 15px;}
           @media only screen and (max-device-width: 480px) { #header-logo-4 {float:right; width:150px; margin:-40px 10px 0 0; }  } */ 
           


/* --------   Footer  ------------- */  
          
#footer-outer {
	border:0px green dotted;
    background-color:#EBEBE0;
    width:100%;
    margin:0;
    }
    @media only screen and (max-device-width: 480px) { #footer-outer {width:100%;margin-top:-10px;}  }

footer {
	border:0px red dotted;
    width:1200px;
    margin:0 auto 0 auto;
    min-height:150px;
    }
    @media only screen and (max-device-width: 980px) { footer {width:100%;margin-top:10px;}  }

#footer-inner p {
    padding-top:10px;
	margin:0;
    font-size:12px;
    line-height:150%;
    font-family:inherit;
    color:#000;
    }

.footer-logo {float:left; margin:20px 0px 0px 10px; }
              

.footer-logo img {width:250px;}
                 @media only screen and (max-device-width: 480px) {.footer-logo img {width:300px;}  }

.footer-logo p {color:#000 }  


.tags h1 {font-size:9px; color:#999999; line-height:140%; font-family: veranda, helvetica, arial, sans-serif; letter-spacing:0px;}      
        
/* ---- Ideograph Panel -------- */  

#ideo {
    margin-left:auto;
    margin-right:auto;
    border:0px solid green;
    width:1200px;
    padding-bottom:15px;
    padding-top:15px;
    font-family:verdana, sans-serif;
    font-weight:normal;
    font-size:9px;
    color:#FFFFFF;
    text-align:right;
    }
    @media only screen and (max-device-width: 980px) { #ideo {width:100%;}  }
    
#ideo a {
	color:#A6A6A6;
	text-decoration:none;
    font-size:9px;
    font-weight:normal;
    font-family:veranda, arial, sans-serif;
}

    @media only screen and (max-device-width: 480px) { #ideo a {padding-right:10px;}  }
    
#ideo a:link {
	color:#A6A6A6;
	text-decoration:none;
    font-size:9px;
    font-weight:normal;
    font-family:veranda, arial, sans-serif;
}
#ideo a:hover {
	color:#999999F;
	text-decoration:none;
    font-size:9px;
    font-weight:normal;
    }       
              
           

/* ----Home Page ------ */

#home-image-container-outer {
    width:100%;
    background-image:url('images/background-image.jpg');
    background-position:top center;
    background-repeat:no-repeat;
    height:400px;
    margin-top:0px;
    z-index:1;
    }
    @media only screen and (max-device-width: 480px) { #home-image-container-outer {width:100%;background-image:url('images/background-image2.jpg'); background-size:100%; background-position:top center; background-repeat:no-repeat; height:270px;}  }
    
#home-image-container-inner {
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    width:1200px;
    border:0px red solid;
    }
    @media only screen and (max-device-width: 980px) { #home-image-container-inner {width:100%;}  }

#marshall-logo {width:300px;padding-top:50px }
               @media only screen and (max-device-width: 480px) { #marshall-logo {width:250px; padding:80px 0 0 10px;}  }
               
             
.home-image {padding-top:20px; margin-bottom:5px; letter-spacing:2px; }               
                   @media only screen and (max-device-width: 480px) {.home-image {margin-top:30px; margin-bottom:10px; padding-top:80px}  }
                                  
.home-image-headline {margin-bottom:100px; font-size:70px; text-transform:none; letter-spacing:-1.5px; color:#fff; text-shadow: 2px 2px 2px #000}               
                   @media only screen and (max-device-width: 480px) {.home-image-headline {margin-top:0px; padding-top:0; font-size:34px; color:#FFFFFF; letter-spacing:-0.5px; margin-bottom:15px; line-height:110%}  }                
    
.home-image-text {padding-top:50px; margin-bottom:10px; font-size:40px; text-transform:none; letter-spacing:-0.5px; color:#fff; line-height:120%; text-shadow: 2px 2px 2px #000;}               
                   @media only screen and (max-device-width: 480px) {.home-image-text {padding-top:0; font-size:26px; color:#FFFFFF; text-shadow: 2px 2px 2px #000; letter-spacing:0px; margin-bottom:25px; line-height:110%;}  } 

.home-linked-images {float:right; width:320px; text-align:center; }            
                    @media only screen and (max-device-width: 480px) {.home-linked-images {float:none; width:90%;}  }


               

    
 /* --------   Contact Page ------------- */ 
 
 
 /* --------------------- CONTACT PAGE ----------------- */ 

#contact_address {float:left; width:550px; text-align:left; border:0px red solid; }
         @media only screen and (max-device-width: 980px){#contact_address {float:none; text-align:left; width:100%; margin-bottom:20px; font-size:0.9em;}} 
         @media only screen and (max-device-width: 980px){#contact_address a {font-size:0.9em;}}

#email-table {width:100%; border:0 }

#email-table td {padding:8px 0;}
         
         
iframe  {float:right; border:0; width:500px; height:600px; margin-top:-140px;}
        @media only screen and (max-device-width: 980px){ iframe {float:none; width:90%; height:400px;}}
    
form {margin-top:0px} 
             @media only screen and (max-device-width: 980px){ #input-form {float:none; width:100%; font-size:0.9em; margin-top:20px}}

            
    
 input[type=text] {width:350px; font-size:0.9em; height:30px; }   
                  @media only screen and (max-device-width: 980px){  input[type=text] {width:90%; font-size:0.9em}}

    
 textarea {height:120px; width:380px; font-size:1em; font-family:sans-serif; }  
                 @media only screen and (max-device-width: 980px){  textarea {width:90%; font-size:0.9em}} 
 

input[type=submit] {font-size:17px; padding:10px 15px 8px 15px; border-radius:4px; background-color:#0BAD3E; border:none; color:#fff;} 
                   @media only screen and (max-device-width: 980px){  input[type=submit] {font-size:0.9em}}
                   
                   
     
/* .address {float:left; width:650px; border:0px dotted }
          @media only screen and (max-device-width: 480px) { .address {float:none; width:100%}  }

.address-logo {width:200px }

.contact-form { float:right; width:300px; margin-bottom:20px; border:0px dotted}
                @media only screen and (max-device-width: 480px) { .contact-form {float:none; width:100%}  }

.location {margin:20px 0 }

@media only screen and (max-device-width: 480px) { iframe {width:100%}  } */


  /* --------   Footer Table ------------- */  

#table-container-team {
    display:table;
    float:right;
    width:auto;
     margin:0;
     border:0px yellow dashed;
     vertical-align:top;
     border-spacing: 5px;
     border-collapse: separate;
    }
    @media only screen and (max-device-width: 480px) { #table-container-team {display:none;}  }
    
    .row-team { display:table-row; margin-bottom:10px;}
    
   
   
     .cell-team {
     color:#000;
     display:table-cell;
     padding:10px;
     border:0px teal solid;
     text-align:left;
     vertical-align:top;
     float:right;
     }
     @media only screen and (max-device-width: 480px) { .cell-team {display:inline;width:100%;margin-top:10px;float:left;margin-left:-100px}  }
     
     .cell-team a { color:#000; line-height:130%; text-decoration:none;text-transform:none;font-size:16px;font-family:veranda, arial, sans-serif;}
                  @media only screen and (max-device-width: 480px) { .cell-team a {font-size:16px}  }
     .cell-team a:visited { color:#000;  text-decoration:none;text-transform:none;}
     .cell-team a:hover   { color:#A6A6A6;  text-decoration:none;text-transform:none;}
     .cell-team a:active  { color:#000;  text-decoration:none;text-transform:none;}
      
      
    /* UP TAB  */    
#tab {margin-right:-4px }
     @media only screen and (max-device-width: 980px){#tab {display:none;}}


  
#tab button{
      
      background-color:#0BAD3E;
      border-top:1px #31F36E solid; 
      border-left:1px #098931 solid;
      border-bottom:1px #098931 solid;
      border-top-left-radius:10px;
      border-bottom-left-radius:10px;
      border-bottom-right-radius:0px;
      border-top-right-radius:0px;
      position:fixed; 
      bottom:30px; 
      right:-1px; 
      text-align:right;
      padding-right:10px;
      padding-left:10px;
      padding-top:5px;
      padding-bottom:7px;
      box-shadow: 6px 6px 5px #888888;
      font-size:0.9em;
      color:white;
      }
       @media only screen and (max-device-width: 980px){#tab button {display:none;}}


.caret2{display:inline-block;
        width:0;height:0;margin-left:2px;vertical-align:middle;
        border-bottom:8px white solid;
        border-right:8px solid transparent;
        border-left:8px solid transparent
        }
        @media only screen and (max-device-width: 980px){.caret2 {display:none;}}
          
/* Page up Button for phone */      
.page-up {display:none;} 
         @media only screen and (max-device-width: 980px){.page-up {display:block; float:right; margin-right:10px}}
         
.page-up button {padding-top:5px;
                border-radius:6px }
         
.caret3  {display:inline-block;
         width:0;height:0;
         margin-left:2px;
         vertical-align:middle;
         border-bottom:8px black solid;
         border-right:8px solid transparent;
         border-left:8px solid transparent}
 @media only screen and (max-device-width: 980px){.page-up button {color:black; padding-bottom:10px}}