/* Include SiteNinja defaults */
@import url(../../stylesheets/elements.css);
@import url(../../stylesheets/classes.css);

/* Typography */
body { font-family: arial, sans-serif; font-size: 100%; line-height: 1.5em; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3em; }
h1, h2, h3, h4, h5, h6, nav, #mobile-menu, #side-menu { font-family: arial, sans-serif; font-weight: normal; letter-spacing: -.05em; }

/* Basic Styles */
body { margin: 0; padding: 0 0 10px; background: #ccc; line-height: 1.5em; }
#logo { padding: 10px 0; }
#wrapper { background: #fff; padding: 20px; margin: 0 auto 10px; box-shadow: 0 4px 14px #000; margin-bottom: 10px; position: relative; z-index: 1;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;  
  overflow: hidden;
}
.sidebar ul { list-style: none; padding: 0; margin: 0; }
#pre-content { font-size: .8em; padding: 10px; }
.side-column-section { border-bottom: 0; }
#menu { margin: 10px 0 5px; padding: 0; list-style: none; font-size: 1.1em; }
#menu li a, .submenu-inner li a { font-size: .8em;
text-transform: uppercase;
color: white;
padding: .4em;
display: block;
float: left;
border-radius: 0; }
#menu li.selected a, .submenu-inner li.selected a { color: #DFDFDF;
background: transparent; }
#menu a:hover, .submenu-inner li a:hover { background: transparent;
color: #DFDFDF; }
.submenu-inner { margin: 5px 0 10px; list-style: none; }

header nav ul, footer nav ul  { margin: 10px 0; padding: 0; list-style: none; }
  header nav ul li { margin: 0 10px 0 0; padding: 0; }
img, input, textarea, embed, object, video, iframe { max-width: 100%; }


/* Mobile size */
@media screen /*and (min-width: 200px)*/ {
  #content { margin-right: -10px; }
  body { width: 100% }
  #crumb { display: none; }
  nav { margin: 0; }
  #mobile-menu { display: block; padding: 0; position: absolute; z-index:200; top: 0; width: 100%; text-align: left; border-bottom: 1px solid #000; margin: 0 auto 1em; -webkit-transform: translateZ(0); background: #eee; }
    #mobile-menu li { clear: both; border-left: 1px solid #ccc; background: rgba(255, 255, 255, .5); }
    #mobile-menu li a { display: block; padding: 10px 10px 10px 55px; border-bottom: 1px solid #ccc; text-decoration: none; } 
  #menu-expander { display: block; text-decoration: none; padding: 10px 10px 10px 28px; font-size: 1.1em; }
    #menu-expander { background: url(../../siteninja/site-ninja-com/files/152/original/mobile-nav-icon.png) no-repeat 5px 11px; background-size: 18px; }
  #exp-menu { width: 100%; display: none; min-height: 100%; padding: 0; list-style: none; margin: 0; text-align: left; font-size: 1.5em; line-height: 1.25em; }
  #exp-menu ul { list-style: none; margin: 0; padding: 0 0 0 25px; }
  #mobile-menu li a.expand { display: block; float: left; font-size: 1.2em; margin: 5px; border-bottom: 0; text-decoration: none; width: 40px; height: 40px; padding:0; line-height: 40px; text-align: center; background: #dedede; border-radius: 4px; }
  #menu, .submenu-inner, .menu-for-side-column { display: none; }
  #menu, .submenu-inner { display: none; }
  #wrapper { width: 94%; margin: 44px auto 0; padding: 10px 3%; font-size: 1em; line-height: 1.4em;  }
    #main-column { float: left; width: 100%; }
    .sidebar { float: right; width: 100%; font-size: .9em; }
    #side-column-2 { display: none; }
    .sidebar ul { list-style: none; padding: 0; margin: 0; }
 /* Mobile Sizes */ 
  .images { width: 40%; max-width: 200px; } 
}

/* "Retina" graphics - Devices with a pixel ratio of 2 should be able to handle the CSS3 "background-size" property to scale larger images down. By making this a separate query, we ensure that devices that do not need the larger images do not download them. */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min--moz-device-pixel-ratio: 2.0),
  only screen and (min-device-pixel-ratio: 2.0) {
    #menu-expander { background: url(../../siteninja/site-ninja-com/files/152/original/mobile-nav-icon.png) no-repeat 5px 11px; background-size: 18px; }
}


/* Tablet size */
@media screen and (min-width: 560px) {
  #content { margin-right: -20px; }
  #wrapper { width: 94%; margin: 0 auto; }
  #mobile-menu { display: none; }
  #menu, .submenu-inner { display: block; }
  nav { margin-bottom: 10px; }
      header nav ul li, footer nav ul li { display: block; float: left; ;}
        header nav ul li a, footer nav ul li a { display: block; float: left; }
  #content { min-height: 550px; }
  #main-column { float: left; width: 100%; }
  .sidebar { float: right; font-size: .9em; clear: right; width: 29%; }
  .with-side-columns #main-column { width: 68%; }
  .with-side-column #main-column { width: 68%; }
  #side-column-2 { display: block; float: right; clear: right;  }
  footer nav ul li { margin: 0 15px 0 0; }
  body {
background: url('../../siteninja/site-ninja1-com/1349457516/original/bkgd.png') black right no-repeat;
}
  #wrapper {
border-radius: 8px;
margin-top: 30px;
opacity: 0.9;
  }
  
  nav {
border-radius: 8px;
background-color: #A44B16;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#d17821,EndColorStr=#a44b16);
background-image: -moz-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: -ms-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: -o-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#D17821),color-stop(45px,#A44B16));
background-image: -webkit-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: linear-gradient(to bottom,#D17821 0,#A44B16 45px);
margin: 0 0 15px;
}

#menu-home {
margin-left: 15px;
}
  
}

/* Narrow size */
@media screen and (min-width: 770px) {
  body { background: #ccc; }
  #wrapper { width: 90%; max-width: 1000px; margin: 0 auto; background: #fff; }
  nav { margin: 0 0 15px }
  #mobile-menu { display: none; }
  #menu, .submenu-inner { display: block; }
  header nav ul li, footer nav ul li { display: block; float: left;}
  
  #main-column { float: none; width: 100%; max-width: 100%; margin: 0 auto; }
  #side-column { float: right; }
  .with-side-columns #side-column { width: 19%; float: right; }
  .with-side-column #side-column { width: 31%; float: right; }
  .with-side-column-2 #side-column-2 { float: left; clear: none; width: 31%; margin-left: -97%; }
  .with-side-columns #side-column-2 { width: 19%; float: left; clear: none; margin-left: -77%; }
  .with-side-columns #main-column { width: 57%; float: left; margin-left: 21%; }
  .with-side-column #main-column { width: 66%; float: left; }
  .with-side-column-2 #main-column { width: 66%; float: left; margin-left: 31%; }
  .sidebar ul { list-style: none; padding: 0; margin: 0; }
  body {
background: url('../../siteninja/site-ninja1-com/1349457516/original/bkgd.png') black right no-repeat;
}
  
  #wrapper {
border-radius: 8px;
margin-top: 30px;
opacity: 0.9;
  }
  
  nav {
border-radius: 8px;
background-color: #A44B16;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#d17821,EndColorStr=#a44b16);
background-image: -moz-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: -ms-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: -o-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#D17821),color-stop(45px,#A44B16));
background-image: -webkit-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: linear-gradient(to bottom,#D17821 0,#A44B16 45px);
margin: 0 0 15px;
}

#menu-home {
margin-left: 15px;
}
}


/* Wide size */
@media screen and (min-width: 1000px) {
  #menu, .submenu-inner, .menu-for-side-column { display: block; }
  #wrapper { width: 90%; max-width: 900px; padding: 1em 2% }
  header, section, footer { }
    header nav ul li, footer nav ul li { display: block; float: left; ;}
      header nav ul li a, footer nav ul li a { display: block; float: left; }
  #mobile-menu { display: none; }
  /*header .submenu-inner { display: none; }*/
  #main-column { float: none; width: 100%; max-width: 100%; margin: 0 auto; }
  #side-column { float: right; }
  .sidebar { font-size: 1em; clear: none; }
  .with-side-columns #side-column-2 { float: left; width: 18%; display: block; margin-left: -77%; }
  /*#side-sub-menu { background: #eee; border-radius: .4em; padding: .2em 0; }
  #side-sub-menu ul { margin: .05em .25em; padding: 0; background: #fff; border-radius: .25em; }
  #side-sub-menu li { margin: 0; padding: 0; }
  #side-sub-menu li a { display: none; }
  #side-sub-menu li li a { display: block; padding: .4em; }
  #side-sub-menu li ul a:hover { background: #f4f4f4; }*/
  .with-side-column #main-column { width: 68%; margin-left: 0; }
  .with-side-columns #side-column { width: 20%; margin-right: 0; }
  .with-side-column #side-column { width: 29%; margin-right: 0; }
  .with-side-columns #main-column { 
    margin: 0 0 0 20%;
    width: 57%; 
    float: left; }
  .with-side-column-2 #main-column { width: 68%; float: left; margin: 0 0 0 20%; }
  .sidebar ul { list-style: none; padding: 0; margin: 0; }
  body {
background: url('../../siteninja/site-ninja1-com/1349457516/original/bkgd.png') black right no-repeat;
}
  #wrapper {
border-radius: 8px;
margin-top: 30px;
opacity: 0.9;
  }
  
  nav {
border-radius: 8px;
background-color: #A44B16;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#d17821,EndColorStr=#a44b16);
background-image: -moz-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: -ms-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: -o-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#D17821),color-stop(45px,#A44B16));
background-image: -webkit-linear-gradient(top,#D17821 0,#A44B16 45px);
background-image: linear-gradient(to bottom,#D17821 0,#A44B16 45px);
margin: 0 0 15px;
}

#menu-home {
margin-left: 15px;
}
}




/* Enhancements */
a { 
  -webkit-transition: color 0.3s ease-in-out, background-color 0.4s ease-in-out;
  -moz-transition: color 0.3s ease-in-out, background-color 0.4s ease-in-out;
  -o-transition: color 0.3s ease-in-out, background-color 0.4s ease-in-out;
  -ms-t70nsition: color 0.3s ease-in-out, background-color 0.4s ease-in-out;
  transition: color 0.3s ease-in-out, background-color 0.4s ease-in-out; }
#sign_in_button { margin: 10px; }
.template-selector { display: none; }