/* Layout CSS Definitions:
======================================================================================================================== */

/* Base Styles:
======================================================================================================================== */

*
{
   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

body
{
   color: #000;

   background: #FFF none;

   background-attachment: fixed;

   font: 400 16px/1.8 'Open Sans', Arial, Helvetica, sans-serif;
}

/* Header Styles:
======================================================================================================================== */

#Header
{
   padding: 0;

   color: #FFF;

   min-height: 70px;

   background: #444 none;
}

#Header > div.container
{
   position: relative;
}

/* Header Navigation Styles:
======================================================================================================================== */

#NavHeader ul
{
   margin: 0;
   padding: 0;

   float: right;
}

#NavHeader ul li
{
   margin: 0;
   padding: 0;

   float: left;
}

#NavHeader ul li a
{
   margin: 0;
   padding: 0 10px;

   float: left;

   font-size: 14px;
   font-weight: 400;
   line-height: 70px;

   text-decoration: none;
}

#NavHeader ul.dark li a
{
   color: #000;
}

#NavHeader ul.light li a
{
   color: #FFF;
}

#NavHeader ul li a:hover
{
   text-decoration: underline;
}

#NavHeader ul li a
{
   padding-left: 30px;

   background-repeat: no-repeat;
   background-position: 10px 27px;
   background-attachment: scroll;
}

#NavHeader ul.dark li a.about
{
   background-image: url(../images/icons/black/info.png);
}

#NavHeader ul.light li a.about
{
   background-image: url(../images/icons/white/info.png);
}

#NavHeader ul.dark li a.contact
{
   background-image: url(../images/icons/black/contact.png);
}

#NavHeader ul.light li a.contact
{
   background-image: url(../images/icons/white/contact.png);
}

#NavHeader ul.dark li a.help
{
   background-image: url(../images/icons/black/help.png);
}

#NavHeader ul.light li a.help
{
   background-image: url(../images/icons/white/help.png);
}

#NavHeader ul.dark li a.access
{
   background-image: url(../images/icons/black/key.png);
}

#NavHeader ul.light li a.access
{
   background-image: url(../images/icons/white/key.png);
}

/* Social Styles:
======================================================================================================================== */

#Social ul
{
   float: right;
}

/* Banner Styles:
======================================================================================================================== */

#Banner
{
   padding: 30px 0;
}

/* Logo Styles:
======================================================================================================================== */

#Logo
{
   right: 760px;

   height: 70px;

   width: 2000px;

   overflow: hidden;

   text-align: right;

   position: absolute;

   background-color: #E8E8E8;
}

#Logo h1
{
   margin: 0;

   line-height: 70px;

   padding-right: 5px;
}

#Logo h1 a
{
   width: 198px;
   height: 54px;

   margin-top: 8px;
   padding-right: 0;

   text-decoration: none;

   display: inline-block;

   background: transparent url("/themes/plantrak/images/logos/plantrak-logo.png") no-repeat scroll left center;
}

#Logo h1 a span
{
   display: none;
}

/* Client Logo Styles:
======================================================================================================================== */

#ClientLogo
{
   float: left;

/* margin-left: 10px; */
}

#ClientLogo img
{
   display: block;
}

/* Client Name Styles:
======================================================================================================================== */

#ClientName
{
   float: left;

   color: #000;

   font-size: 28px;
   line-height: 61px;
   font-family: 'Droid Sans';

   padding-left: 10px;
}

#ClientName a
{
   color: #000;
   text-decoration: none;
}

#ClientName a:hover
{
   text-decoration: underline;
}

/* User Panel Styles:
======================================================================================================================== */

#UserPanel
{
   float: right;

/* margin-right: 10px; */
}

#UserPanel div.user
{
   float: right;

   line-height: 64px;

   font-weight: 600;

   padding-right: 10px;
}

#UserPanel div.user a
{
   color: #000;

   text-decoration: none;
}

#UserPanel div.user a:hover
{
   text-decoration: underline;
}

#UserPanel div.avatar
{
   float: right;
}

#UserPanel div.avatar a img
{
   display: block;

   -webkit-border-radius: 32px;
   -moz-border-radius: 32px;
   border-radius: 32px;

   -webkit-transition: all 0.2s ease-out 0s;
   -moz-transition: all 0.2s ease-out 0s;
   -o-transition: all 0.2s ease-out 0s;
   transition: all 0.2s ease-out 0s;
}

#UserPanel div.avatar a:hover img
{
   box-shadow: 0 0 8px rgba(0,0,0,0.75);
}

/* Tab Bar Styles:
======================================================================================================================== */

#TabBar
{
   background: #F0F0F0 none;
}

/* Tab Navigation Styles:
======================================================================================================================== */

#TabBar ul,
#SubNav ul
{
   margin: 0;
   padding: 0;

   float: left;
}

#TabBar ul li,
#SubNav ul li
{
   margin: 0;
   padding: 0;

   float: left;
}

#TabBar ul li a,
#SubNav ul li a
{
   margin: 0;
   padding: 0 10px 0 10px;

   color: #000;

   float: left;

   font-size: 14px;
   font-weight: 400;
   line-height: 40px;

   text-decoration: none;
}

#TabBar ul li.current a,
#SubNav ul li.current a,
#TabBar ul li.section a,
#SubNav ul li.section a
{
   font-weight: 700;

   background-color: #E0E0E0;
}

#TabBar ul li a:hover,
#SubNav ul li a:hover
{
   text-decoration: underline;
}

#NavTabs,
#NavSub
{
   /* margin-left: 10px; */
}

#NavTabs ul li a
{
   padding-left: 30px;

   background-repeat: no-repeat;
   background-position: 10px 11px;
   background-attachment: scroll;
}

#NavTabs ul li a.HomePage
{
   background-image: url(../images/icons/grey/home.png);
}

#NavTabs ul li a.ClientHomePage
{
   background-image: url(../images/icons/grey/home.png);
}

#NavTabs ul li a.Page
{
   background-image: url(../images/icons/grey/page.png);
}

#NavTabs ul li a.DeliverablePage
{
   background-image: url(../images/icons/grey/calendar.png);
}

#NavTabs ul li a.IndicatorPage
{
   background-image: url(../images/icons/grey/gauge.png);
}

#NavTabs ul li a.ReportPage
{
   background-image: url(../images/icons/grey/chart.png);
}

#NavTabs ul li a.MemberPage
{
   background-image: url(../images/icons/grey/member.png);
}

/* Sub Navigation Styles:
======================================================================================================================== */

#SubNav
{
   background: #E0E0E0 none;
}

/* Camera Styles:
======================================================================================================================== */

#Camera
{
   margin-top: 10px;
}

/* Layout Styles:
======================================================================================================================== */

#Layout
{
   margin-top: 20px;
   margin-bottom: 10px;
}

#Layout div.content-container
{
   min-height: 1px; /* Fixes collapsing when content is empty */
}

#Layout div.content-container > div.title h2
{
   font-size: 30px;
   font-weight: 400;
   line-height: 42px;
}

#Layout div.content-container > div.crumbs
{
   display: none; /* This theme has full width crumbs #Crumbs */
}

#Layout div.content-container > div.title,
#Layout div.content-container > div.header div.title
{
   display: none; /* This theme has full width title #Title */
}

#Layout div.content-container > div
{
   padding: 0;
}

#Layout div.content-container > div.social-buttons
{
   margin-top: 20px;
}

#Layout div.content-container > div.comments
{
   margin-top: 20px;
}

/* Crumbs Styles:
======================================================================================================================== */

#Crumbs
{
   color: #AAA;

   display: none;

   font-size: 10px;
   font-weight: 600;

   line-height: 10px;

   padding-top: 10px;

   text-transform: uppercase;
}

#Crumbs a
{
   color: #666;
}

/* Title Styles:
======================================================================================================================== */

#Title
{
   display: block;
}

/* Footer Styles:
======================================================================================================================== */

#Footer
{
   width: 100%;

   padding-top: 0px;
}

#Footer > div.upper
{
   background: #333 none;
}

#Footer > div.upper a
{
   color: #FFF;

   font-weight: 700;

   text-decoration: none;
}

#Footer > div.upper a:hover
{
   text-decoration: underline;
}

#Footer > div.lower
{
   color: #FFF;

   padding: 15px 0;

   background: #488ECC none;

   font-size: 11px;
   font-weight: 700;
   line-height: 18px;

   text-transform: uppercase;
   text-decoration: none;
}

#Footer > div.lower a
{
   color: #FFF;

   text-decoration: none;
}

#Footer > div.lower a:hover
{
   text-decoration: underline;
}

/* Footer Navigation Styles:
======================================================================================================================== */

#NavFooter
{
   padding-top: 5px;
}

#NavFooter ul
{
   margin: 0;
   padding: 0;
}

#NavFooter ul li
{
   margin: 0;
   padding: 0;

   float: left;
}

#NavFooter ul li a
{
   margin: 0;
   padding: 0 10px;

   color: #FFF;

   float: left;

   font-size: 10px;
   font-weight: 400;

   text-transform: uppercase;
   text-decoration: none;

   border-right: 1px solid rgba(255,255,255,0.5);
}

#NavFooter ul li.current a,
#NavFooter ul li.section a
{
   font-weight: 600;
}

#NavFooter ul li:first-child a
{
   padding-left: 0;
}

#NavFooter ul li:last-child a
{
   border-right: 0;

   padding-right: 0;
}

/* Copyright Styles:
======================================================================================================================== */

#Copyright
{
   text-align: left;
}

/* Developer Styles:
======================================================================================================================== */

#Developer
{
   text-align: right;
}

/* Viewport Styles:
======================================================================================================================== */

@-webkit-viewport
{
   width: device-width;
}

@-moz-viewport
{
   width: device-width;
}

@-ms-viewport
{
   width: device-width;
}

@-o-viewport
{
   width: device-width;
}

@viewport
{
   width: device-width;
}

/* Media Queries:
======================================================================================================================== */

/* High Resolution Images (for Retina Devices): */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5)
{

}

/* Smaller Than Standard 960 */

@media only screen and (max-width: 959px)
{

}

/* Tablet Portrait Size to Standard 960 */

@media only screen and (min-width: 768px) and (max-width: 959px)
{
   #Logo
   {
      right: 568px;
   }
}

/* All Mobile Sizes */

@media only screen and (max-width: 767px)
{
   #ClientLogo
   {
      margin: 0;

      float: none;

      text-align: center;
   }

   #ClientLogo img
   {
      display: inline-block;
   }

   #ClientName
   {
      float: none;

      font-size: 22px;
      line-height: 30px;

      text-align: center;

      padding: 0 0 20px;
   }

   #UserPanel
   {
      float: none;

      margin: 0;
   }

   #UserPanel div.avatar
   {
      float: none;

      text-align: center;
   }

   #UserPanel div.avatar a img
   {
      display: inline-block;
   }

   #UserPanel div.user
   {
      float: none;

      padding: 0;

      line-height: 20px;

      text-align: center;
   }

   #TabBar
   {
      display: none;
   }

   #SubNav
   {
      padding: 5px 0;
   }

   #TabBar ul li a, #SubNav ul li a
   {
      line-height: 32px;
   }

   #NavBar
   {
      display: block !important;
   }

   #Header
   {
      display: none;
   }

   #Logo
   {
      text-align: center;
   }

   #SearchWrapper
   {
      display: none;
   }

   #Camera
   {
      margin-top: 0;
   }

   #Crumbs
   {
      display: none;
   }

   #Title
   {
      margin: 0 10px;
   }

   #Title > h2
   {
      font-size: 26px;
      line-height: 34px;
   }

   #LeftSide
   {
      margin-left: inherit;
      margin-right: inherit;
   }

   #RightSide
   {
      margin-left: inherit;
      margin-right: inherit;
   }

   #Layout > div.container
   {
      padding: 0;
   }

   #Layout div.content-container > div
   {
      padding: 0 10px;
   }

   #Layout div.content-container > div.crumbs
   {
      display: none;
   }

   #Copyright
   {
      text-align: center;
   }

   #Developer
   {
      text-align: center;
   }

   #NavFooter
   {
      text-align: center;
   }

   #NavFooter ul
   {
      display: inline-block;
   }
}

/* Mobile Landscape Size to Tablet Portrait */

@media only screen and (min-width: 480px) and (max-width: 767px)
{

}

/* Mobile Portrait Size to Mobile Landscape Size */

@media only screen and (max-width: 479px)
{
   #Title
   {
      background-size: 300px 10px;
   }
}