/* ==========================================================================
   The basic stylesheets for the Kana AT theme are pulled from the Drupal
   modules and base theme and from the Boilerplate distribution and therefore
  follow whatever arrangement the authors of those pieces used. The overrides
  that we use to create the specific look and feel follow a SMACSS organization.
   - layout: page wireframe (container widths and floats, etc)
   - modules: the individual page elements that fit within the wireframe (look
              and feel of the search box, the hero area, etc). Most CSS is here.
   - styles: basic text styles, colors and such that apply to multiple modules
   - states: media queries and styles that change depending on state.

==============================================================================*/

/* ==========================================================================
   STATES - when a page or module is in a particular state.

ORDER IN THIS FILE
    - DESKTOP - a few changes for desktops - breakpoint at 1199/1200. Not much
          here b/c desktop is the default. Just a couple of adjustments at certain sizes
      - min-width 1200
      - max-width 1199

    - PHONE - Media queries for small screens
      - max width 360
      - max width 480

    - TABLETS in general Media queries for medium screens
      - max width 767 - Bootstrap full mobile breakpoint (spanX have width:100%)
      - max width 979 - Bootstrap responsive menu breakpoint
      - max width 1024

    - IPAD SPECIFIC (and iPad sized devices) Media queries for iPads
      - @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)
      - @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)
==============================================================================*/

/*************************************************
*  Desktop-only Media Queries 
*
**************************************************/


/*********** 1200px and ABOVE *****************/
/* this is full-width in the KANA design, so no responsive adjustment necessary in
   general, but we have a few things we do especially for those displays */


@media only screen and (min-width: 1200px) {

            /* if the nav is left of logo, we can drop second level below the logo */
    .om-maximenu-no-style .om-maximenu-middle-right {
/*		margin-left: -200px; */
	}

    .om-maximenu-content li.expanded,
    .om-maximenu-content li.collapsed,
    .om-maximenu-content li.leaf,
    .om-maximenu-content li,
    .om-maximenu-content ul.menu,
    .om-maximenu-content ul
     {
      margin-left: 0;
      padding-left: 0;
    }
}


/* BELOW 1200px we are resizing the page and have to start making adjustments */

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

/* nav is now under the logo, so we need to be flush with it */
	.om-maximenu-no-style .om-maximenu-middle-right {
		margin-left: 0px;
	}
/*
	.om-maximenu ul.om-menu li.om-leaf.first .om-link {
		padding-left: 0px;
	} */

	#header-region {
	  margin-left: 0px;
	}

}


/*************************************************
*  Media Queries for Small Screens
**************************************************/

/* phones in portrait */
@media only screen and (max-width: 360px) {
  #search-box {
    width: 150px;
  }
  #edit-search_theme_form_keys {
    width: 100%;
  }
  #branding {padding-right: 10px;}
  
     
	 
	 #customer-stories-rotator{margin-top:-30px; }
	 
	 
	 #customer-stories {
       height:195px !important;
	 }
	 
	 #customer-stories blockquote {
		 display:none;
	 }
	 
	 
    #logo-rotator{
        margin:0 -20px!important;
        padding:0 15px; 
		
    }

    .logo-rotator-overlay-left {
        width:100%;
        float:none;
        background:none;
        color: #E31B23;
    }
	
	#login-search {
		margin-left:-10px;
	}
	
	#search-box{ width:150px ;}
	
	.logo-rotator-overlay p { padding:0 10px !important}
	
	.quicktabs_main.quicktabs-style-navlist {
		width: 90% !important;
		border: none;
		padding:0;
	}
	 
  
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)
and (orientation : landscape) {
	
	/* iPhone lanscape orientation  */
	  
	
	#header { height:50px;}
	
	div.container {
    margin: 0px 10px;}
	
	 #logo-rotator{
        margin:0 -20px;
        padding:0 15px; 
		
    }

    .logo-rotator-overlay-left {
        width:100%;
        float:none;
        background:none;
        color: #E31B23;
    }
	
	#logoCarousel{
	text-align:center;

	}
	
	.scrollable {
		width:500px;
		margin-left:20px;
	}
	
	.logo-rotator-overlay p { padding:0 10px }
	
	#customer-stories .items > div {
		width:600px !important;
	}
	
	#customer-stories .item .span8  { width: 90% !important;}
	 
	 #footer {
        text-align:center;
    }
	
	.title-bg, .not-front .hero-bg {
    padding: 0px;
}
	.demo-btn .btn-primary, .demo-btn .btn-kana-enterprise , .demo-btn .btn-lagan-enterprise, .demo-btn .btn-kana-express  {

float: right;
position: absolute;
top: 30px;
right: 10px;

	}
}

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

    /* Fairle style changes - target region/module?? @todo */
    .slide-text.span5 {
      width: 80%;
    }

    #page {
        margin:0;
        padding:0;
        width:100%;
    }

     /* which containers is the meant to target? Screwing up header container
        should not need an !important to override bootstrap defaults. Use more specificity
     */
    .container {
      padding:0 10px;
    }

    /* @todo these rules are too specific and depend on a very precise implementation
    and are therefore prone to breaking (TAL) */
    html.js body.not-front div#page.container-wide div#hero-wrapper.hero-bg div#hero-region.normal div.container div#row-hero-content.row div.span12 div#block-views-hero_block-hero_std.clear-block div.content div.view div.view-content div.views-row div.container {
        padding:0  !important;
        margin:0 ;
    }


    html.js body.not-front div#page.container-wide div#hero-wrapper.hero-bg div#hero-region.normal div.container div#row-hero-content.row div.span12 div#block-views-hero_block-hero_std.clear-block div.content div.view div.view-content div.views-row div.container div.row {
        padding:0 0 10px 0 !important;
    }

    #title-wrapper {
        margin:0;
        padding:0;
    }

    .navbar-fixed-top {
        margin:0;
    }

    .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
        padding:0;
    }

    [class*="span"] {
        margin:0;
        padding:0;
    }

    #search-box {
        float:left !important;

    }

    .block{
        padding:0;
        margin:0;
    }

    #footer {
        text-align:center;
    }

    .navbar .brand {
/*        width:50%;
        margin:0; */
        padding:0 0 5px 0;
        padding-left: 0;
        float:none !important;
    }
    .btn-primary {
        margin:0 !important;
    }

    #row-hero-nav {
        display:none;
    }

    #mini-panel-explore_kana_notab .panel-col-first, #mini-panel-explore_kana_notab .panel-col-last  {
        border:none !important;
    }

    .panel-panel div.inside {
        margin:0 !important;
    }

    .explore, .pane-explore-kana h2.pane-title {
        height:30px;
        padding: 0 0 0 40px;
        font-size:20px;
    }

    .title-bg, .not-front .hero-bg{
        padding:0;
    }


    .landing-onecolumn .excerpt-text{
        margin:0;
    }

    .landing-onecolumn .excerpt-text {
        float:none;
        width:100%;
    }

    #logo-rotator{
        margin:0 -20px!important;
        padding:0 !important;

    }

    .logo-rotator-overlay-left {
        width:100%;
        float:none;
        background:none;
        color: #E31B23;
    }

    .row {
        margin:0 !important;
        padding: 0 !important;
    }

    .scrollable {
        width:100%;
    }

    .btn-navbar {
        display:block;
    }

    #customer-stories-rotator{
        margin:0;
    }

    #customer-stories-rotator .span8 {
            display:none !important;
    }

    html.js body.front div#page.container-wide div#columns div.columns-inner div#content-column div.content-inner div#content-top.container div.row div.span12 div#block-block-670.clear-block div.content div#customer-stories-rotator.container div.row div#customer-stories.scrollable div.items div.item div.span4 {
        width:270px;
    }

    .block {
        margin:0 !important;
    }


    #customer-stories-rotator .span8 {
        display:none !important;
    }
	
	#customer-stories .item .span8 {
        /*position:absolute;
        top: 250px;
        left: 0;
        width: auto;*/
		display:none;
    }

    #customer-stories.scrollable {
       height:250px;
    }


    #branding a.brand span.logo img {
        float:none;
    }

    #header-region {
        text-align:center !important;
    }

    #block-superfish-1, #header .nav-collapse.collapse {
        float:none !important;
    }

    #branding {
 /*       float: none !important;
        text-align: center !important;
        width: 100%; */
    }

    .brand, #branding a.brand span.logo {
        float: none !important;
        text-align:center !important;
    }
}

/*************************************************
*  Media Queries for Medium Screens
**************************************************/


  /********* General Styles @ <= 768 ***********/
  /* These can be overridden below for iPads by targetting exact height and width of
   *  1024x768 and 768x1024, rather than MAX width.
  * Styles here include:
  * - sitewide font, blockquote etc to adjust to smaller screen
  * - header area styles
  * - slider/carousel styles
  * - front-page specific slide styles
  * - other front-page styles for 767px
  * - Explore Kana widget styles
  * - orphan rules - purpose?
  * - quick tabs - show select and hide tabs @ 767
   */

@media only screen and (max-width: 767px) {  
/* General style adjustmenst for mobile - need some smaller fonts */
    h3 { font-size: 18px; }
    .btn-large { font-size:14px;}

      /* adjust huge quote marks, esp for cust story slider */
    blockquote { padding: 1em 30px;}
    blockquote:before, blockquote:after { font-size:50px;}
    blockquote:before { top:0; }
    blockquote:after { bottom:-20px; }


/**** Nav bar  and header ***/
  .navbar .brand {
    padding-right: 10px;
    padding-left: 10px;
  }
  .navbar-fixed-top {
    margin-left: 10px;
    margin-right: 20px;
  }
  
  .navbar-inner {
      border:none !important;
  }

  .logo img {
    height: 30px;
  }

  #login-search {
    margin-top: 45px;
  }

  #header-region {
    position: absolute;
    top: 30px;
  }

/* Static hero settings (product pages, etc) 
* We turn off images for all devices at 767, but don't really need to do 
* anything else b/c Bootstrap span4 (text col) goes to 100% width @ 767
*/

.hero-img {display: none;}

/********** hero slider **********/
    /* Mobile: hide the sliders, but not normal hero regions and
       show the mobile region whenever available */
	   
    #hero-region #block-views-hero_block-block_1	{
      display: none;
    }
    #content-mobile {
      display: block;
      text-align:center;
    }

/* Front page mobile slides
 * These may benefit from more specfic targeting using .front
*/
    #mobile-slide-1{
        color: #fff;
        background-image: url(../../images/home/hero-adverts/dark-grey-bg.jpg) !important;
        background-size:cover;
        background-color:#333333 !important;
        margin:0 -20px;
        padding:10px 5px;
    }

    #mobile-slide-2{
        color: black;
		background-image: url('../../images/home/hero-adverts/red-bg.jpg');
        background-size:cover;
        background-position:right;
        background-color:#eeeeee !important;
        margin:0 -20px;
        padding:10px 5px;x
    }

    #mobile-slide-3 {
        color: white;
		background-image: url('../../images/home/kana-enterprise/dark-grey-bg.jpg');
        background-size:cover;
        background-position:right;
        background-color:005595 !important;
        margin:0 -20px;
        padding:10px 5px;
    }
	
    #mobile-slide-4 {
        color: white;
background-image: url('../../images/home/kana-express/red-bg.jpg');
        background-size:cover;
        background-position:right;
        background-color:#00A160 !important;
        margin:0 -20px;
        padding:10px 5px;
    }
	
	#mobile-slide-5 {
        color: white;
background-image: url('../../images/home/lagan-enterprise/red-bg.jpg');
        background-size:cover;
        background-position:right;
        background-color:#00A160 !important;
        margin:0 -20px;
        padding:10px 5px;
    }
/************ Customer Stories front page rotator ***********/

    /* need to take up whole container - this could possibly get centered with absolute position,
       left at 50% and then a margin  the width of the content to center. */

    #customer-stories .items > div {
      width: 380px;
      /*margin-right: 300px;*/
    }
    /*hide left title, expand right to almost full */
    #customer-stories-rotator .title-row .span8 { display:none;}
    #customer-stories-rotator .title-row .span4 { width:90%;}

    /*stack image on top of block quote */
    #customer-stories .item  {
        position:relative;
    }
    #customer-stories .item .span8 {
        position:absolute;
        top: 250px;
        left: 0;
        width: auto;
    }
    #customer-stories .item .span4 { width:90%;}

    #customer-stories.scrollable {
        height:500px ;
    }

/* Explore KANA product page widget */
    .panel-3col-33 .panel-col-first,
    .panel-3col-33 .panel-col,
    .panel-3col-33 .panel-col-last {
       width: 100%;
    }

    .panel-3col-33 .panel-col-first .inside,
    .panel-3col-33 .panel-col .inside,
    .panel-3col-33 .panel-col-last .inside {
       width: 100%;
       margin:auto 20px;
    }

   /* Quicktabs switch from tabs to selects at 767 */
    .qt-mobile-select {display: block;}
    .quicktabs_tabs {display: none;}
    .quicktabs_main.quicktabs-style-navlist {width:60%;}
    ul.quicktabs_tabs.quicktabs-style-navlist {width:30%;}
    .quicktabs_main.quicktabs-style-navlist {border-style: none; border-width: 0px;}

    .quicktabs_main.quicktabs-style-navlist .excerpt img.imagefield-field_conf_img  {
        float:none;
    }
    .quicktabs_main.quicktabs-style-navlist .excerpt img {
        margin-right: 6px;
    }

    .connect-nl, .connect-na, .connect-uk {
        background-image:none !important;
    }
     
     
     
} /* END max-width 767 */

/******************** BOOTSTRAP RESPONSIVE @ 979 aka < 980 **************************/
/*
/* Bootstrap triggers responsive menus at 979px */

@media(max-width:979px) {

	#header .navbar-inner,
	#header .navbar {
	  padding-left:0;
	  padding-right:0;
	  margin-left:0;
	  margin-right:0;
	}
	
	#header-region {
	  margin-top: 10px;
	  z-index: 2;
	}
	
	#header-region .om-menu,
	#branding .om-menu {
	  text-align: left;
	}
	
	.block.block-om_maximenu {
	  z-index: 1202;
	}

	.om-maximenu ul.om-menu li.om-leaf:hover .om-maximenu-content-nofade { display: none; } 
	
	.om-maximenu.om-maximenu-block.om-maximenu-row ul.om-menu li.om-leaf .om-link,
	.om-maximenu-content .menu-name-primary-links li a,
	.om-maximenu-content .menu-name-menu-nl-menu li a,
	.menu.menu-platform li a {
	  border-bottom: 1px solid grey;
	  color: #fff;
	  float: none;
	  padding-bottom: 3px;
	  height:auto;
    display: block;
	}
	
	.om-maximenu-no-style a:active,
	.om-menu li.active {
	   background-color: #ED1E24;
	}

	.om-maximenu-no-style li.active a:hover,
	.om-maximenu-no-style li.active a:active {
	  color: #fff;
	}

	.om-maximenu-content .menu-name-primary-links li, 
  .om-maximenu-content .menu-name-menu-nl-menu li, 
  .menu-platform li {
    border: 0px none;
	width: 100%;
	background-color: #333;
  }
  
  .om-maximenu.om-maximenu-block.om-maximenu-row ul.om-menu li.om-leaf {
      width: 100%;
      height:auto;
  }

  .om-maximenu-content li.leaf a, 
    .om-maximenu-content li.collapsed a {
    font-weight: 100;
  }


  .om-maximenu.om-maximenu-block ul.om-menu {
      float: none;
  }

  .block.block-om_maximenu {
      background-color: #000000;
  }

  .om-maximenu-content .menu-name-primary-links li, .om-maximenu-content .menu-name-menu-nl-menu li, .menu-platform li {
    width: 100%;
    height:auto;
    border-right: 0px none;

  }
  .om-maximenu .om-maximenu-content {
    position: static;
  }
  .om-maximenu-no-style .menu-name-primary-links .menu li.leaf {
    border: 0px none;
  }

  .om-maximenu .om-maximenu-middle {
    background: none transparent;
    border: 0px none;
    box-shadow: none;
    margin: 0;
    opacity: 1;
    padding: 0;
    width: auto;
  }

  .om-maximenu-no-style .om-maximenu-content {
    padding: 0;
    top: 0;
  }

  .om-maximenu-no-style .om-maximenu-middle-right {
    background-color: #000;
  }

  ul.menu.menu-platform {
    border: none;
    margin: 0;
    padding: 0;
  }

  li.platform-title,
  .om-link,
  .om-maximenu-no-style a:link,
  .om-maximenu-no-style a:visited,
  .om-maximenu-no-style a:hover {
    color: #fff;
  }
  .om-maximenu li.platform-title a {
    background: none;
  }

  .menu-platform li {
    border-right: none;
  }

  .menu-platform li.menu-mlid-1840,
  .menu-platform li.menu-mlid-26525 {
    width: 100%;
  }

  .menu-block-23 ul {padding-bottom: 0}

}


/********* General Styles @ <= 1024 ***********/
/* These can be overridden below for iPads by targetting exact height and width of
   1024x768 and 768x1024, rather than MAX width */

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

    /* Chat with us panel - hide for all tablet and phone */
	/* @todo - this should have a less generic name - potential namespace collision */
   #panel {
     display:none;
   }

    /********** hero slider **********
     *  Mobile: hide the hero slider @1024 EXCEPT on front page;
     *  Don't hide sliders on front page until @768
	 */
    .not-front #block-views-hero_block-block_1 {
      display: none;
    }
    .not-front #content-mobile {
      display: block;
    }
} /* END max-width 1024 */


/**************** DEVICE TARGETTING ********************/

/* iPad and iPhone targetting with exact device width + height rather than MAX width */
/* iPad: width x height = 768x1024 (portrait) and 1024x768 (landscape) */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
	
	#page {
        margin: 0 !important;
        padding:0 !important;
        width:100%;
    }

   /* #customer-stories.scrollable {
        height:200px !important;
    }*/

    .scrollable {
        width:100%;
    }

    #logo-rotator{
        margin:0 !important;
        padding:0 !important;

    }

    /* Tablet: show sliders and hide mobile region */
    #hero-region #block-views-hero_block-block_1 {
      display: block;
    }	

    #content-mobile {
      display: none;
    }
	
	#header-region {margin:0;}
	
	 .logo-rotator-overlay-left {
        background:none;
        color: #E31B23;
		width:100%;
		height:50px;
    }

    .btn-large {
        font-size:14px;
    }

    .connect-nl, .connect-na, .connect-uk {
        background-image:none !important;
    }

    #mini-panel-explore_kana_notab .panel-col-first, #mini-panel-explore_kana_notab .panel-col-last  {
        border:none !important;
    }

    .btn-navbar{
            /*display:none !important;*/
    }
	
/************ Customer Stories front page rotator ***********/

    /* need to take up whole container - this could possibly get centered with absolute position,
       left at 50% and then a margin  the width of the content to center. */

    #customer-stories .items > div {
      width: 380px;
      /*margin-right: 300px;*/
    }
    /*hide left title, expand right to almost full */
    #customer-stories-rotator .title-row .span8 { display:none;}
    #customer-stories-rotator .title-row .span4 { width:90%;}

    /*stack image on top of block quote */
    #customer-stories .item  {
        position:relative;
    }
    #customer-stories .item .span8 {
        position:absolute;
        top: 250px;
        left: 0;
        width: auto;
    }
    #customer-stories .item .span4 { width:90%;}

    #customer-stories.scrollable {
        height:550px ;
    }
	
	blockquote {
margin: 1em 0px;
padding: 1em 40px;
	}
	
	
	blockquote:before, blockquote:after{
        font-size:40px;
    }

    blockquote:before {
        top:0;
    }
    blockquote:after {
        bottom:-20px;
    }
}

/* Tablet in landscape orientation */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {

	/* Tablet: show sliders and hide mobile region */
    #hero-region #block-views-hero_block-block_1 {
      display: block;
    }	

    #content-mobile {
      display: none;
    }
	
   #logo-rotator{
        margin:0 !important;
        padding:0 !important;
		width:100%;
    }

    .logo-rotator-overlay-left {
        width:100% !important;
        float:none;
    }

    .logo-rotator-overlay-left {
        background:none;
        color: #E31B23;
    }
	
	.scrollable {width:100%}


    .btn-navbar{
        display:none !important;
    }

    #customer-stories-rotator .title-row .span8 { display:none;}
    #customer-stories-rotator .title-row .span4 { width:90%;}
    .views_slideshow_cycle_slide,
    .views_slideshow_cycle_teaser_section { width: 100% !important;}

    h3 {
    font-size: 18px;
}
    .btn-large {
        font-size:14px;
    }

    /*#customer-stories.scrollable {
        height:250px !important;
        }*/

        .btn-navbar{
            display:none;
        }

    .connect-nl, .connect-na, .connect-uk {
        background-image:none !important;
    }
	
	#block-om_maximenu-om-maximenu-1{
		float:right}
	
}