/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
// Border Radius
.border-radius(20px) {
  -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
          border-radius: 20px;
}



body {
  background-color:#eef;
}
  .resize {
        margin-bottom: 20px;
        max-width: 100%;
        height: auto;
  }
  .billboard {
        position: relative; 
        width: 960px;
        height: 70px; 
        margin: 10px auto 10px auto; 
        padding-top: 0px;
        background-image:url('../images/ext-940x370.jpg');
        -moz-background-size:100% 100%; /* Old Firefox */
        background-size:100% 100%;
        background-repeat:no-repeat;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        z-index:10;
  }
  .masthead {
        margin:0px;
        width: 580px;
        background-color:#fff;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        padding:10px;
  }
  .masthead h1 {
        margin:0px 0px 0px 10px;
  }
  .masthead a {
        text-decoration:none;
  }
/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

  /* All non-Mobile Sizes (devices and browser) */
	@media only screen and (min-width: 768px) {
    .nonmobileOnly {}
    .mobileOnly {
      display:none;
    }
    .coffin {
      top:90px;
    }
    .navlist li {
      display:inline;
      margin:10px;
    }
    .navlist a {
      white-space: nowrap;
    }
    .eoFooter li {
      display:none;
      margin:10px;
    }
    .eoCoffin li {
      display:inline;
      margin:10px;
    }
  }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
    .billboard {
        position: relative; 
        width: 720px;
        height: 70px; 
        margin: 10px auto 10px auto; 
        padding-top: 0px;
        background-image:url('../images/ext-940x370.jpg');
        -moz-background-size:100% 100%; /* Old Firefox */
        background-size:100% 100%;
        background-repeat:no-repeat;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }
    .masthead {
        margin:0px;
        width: 580px;
        background-color:#fff;
        -webkit-border-top-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        border-top-left-radius: 20px;
        padding:10px;
    }
    .masthead h1 {
        margin:0px 0px 0px 10px;
    }
    .masthead a {
        text-decoration:none;
    }
    .coffin {
      top:90px;
    }
  }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
    .mobileOnly {}
    .nonmobileOnly {
      display:none;
    }
    .coffin {
      top:125px;
    }
    .navlist li {
      margin:10px;
      white-space: nowrap;
    }
    .navlist a {
      white-space: nowrap;
    }
    .eoFooter li {
      display:inline;
      margin:10px;
    }
    .eoCoffin li {
      display:none;
      margin:10px;
    }
     .billboard {
        position: relative; 
        width: 420px;
        height: 50px; 
        margin: 10px auto 70px auto; 
        padding-top: 0px;
        background-image:url('../images/ext-940x370.jpg');
        -moz-background-size:100% 100%; /* Old Firefox */
        background-size:100% 100%;
        background-repeat:no-repeat;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }
    .masthead {
        margin:0px;
        width: 420px;
        background-color:#fff;
        background-color: rgba(255, 255, 255, .9);
        -webkit-border-top-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        border-top-left-radius: 20px;
        padding:0px 0px  0px 20px;
    }
  }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}

   	/* Mobile Portrait Size Max (devices and browsers) */
	@media only screen and (max-width: 320px) {
    .billboard {
        position: relative; 
        width: 310px;
        //height: 45px; 
        margin: 10px auto 60px auto; 
        padding-top: 0px;
        background-image:url('../images/ext-940x370.jpg');
        -moz-background-size:100% 100%; /* Old Firefox */
        background-size:100% 100%;
        background-repeat:no-repeat;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }
    .masthead {
        margin:0px;
        width: 280px;
        background-color:#fff;
        background-color: rgba(255, 255, 255, .8);
        -webkit-border-top-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        border-top-left-radius: 20px;
        padding:10px 0px  0px 10px;
    }
    .masthead h1 {
        font-size: 36px;
        line-height:40px;
        margin:0px 0px 10px 0px;
    }
  }

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
 */

.icon-home,
.icon-envelope,
.icon-pencil,
.icon-road,
.icon-cog,
.icon-picture,
.icon-arrow-left,
.icon-wrench,
.icon-shopping-cart,
.icon-comment {
  display: inline-block;
  width: 14px;
  height: 14px;
  .ie7-restore-right-whitespace();
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../images/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
  margin-top: 1px;
  margin-right: 5px;
}

/* White icons with optional class, or on hover/active states of certain elements */
  .icon-envelope           { background-position: -72px  0; }
  .icon-cog                { background-position: -432px 0; }
  .icon-home               { background-position: 0      -24px; }
  .icon-road               { background-position: -72px  -24px; }
  .icon-picture            { background-position: -456px -48px; }
  .icon-pencil             { background-position: 0      -72px; }
  .icon-arrow-left         { background-position: -240px -96px; }
  .icon-wrench             { background-position: -360px -144px; }
  .icon-shopping-cart      { background-position: -360px -120px; }
  .icon-comment            { background-position: -240px -120px; }

/* forms */  
  .superform{
    width:  100%;
  }
  .error{
    background-color: lightgoldenrodyellow;
  }
  .page {
  -webkit-border-top-left-radius: 20px;
      -moz-border-radius-topleft: 20px;
          border-top-left-radius: 20px;
}