@import "normalize";
@import "formtastic-buttonless";
@import "autoSuggest";
@import "chosen";
@import "gh-buttons";
@import "jquery.dataTables";
@import "jquery.fancybox-1.3.4";
@import "jquery-ui-1.8.18.custom";
@import "uniform.default";
@import "bourbon";


/* Set colors here */
$bg:      #ddd;     /* Background color (if not in web-app mode) */
$text:    #333;     /* Standard text color */
$link:    #0090d5;
$hover:   #17639b;
/* Pastels */
$bggreen: #e3fde4;
$bgblue:  #bcf;
$bgyellow:#ffc;
$bgred:   #f99;
/* Column background colors */
$maincolbg:   #fff;
$leftcolbg:   #f6f6f6;
$rightcolbg:  #fafafa;



/* See the bottom half of this file for layout options */



/* Base Styles - Set HTML element styles here */
body {
  color: $text;
  background: $bg;
  font-size:12px;
  line-height:1.231;
}
a, a:visited, .link  { 
  color: $link; 
  text-decoration: none;
  cursor:pointer;
}
a:hover, .link:hover {
  color: $hover;
}
ul, ol {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
  }
}
h1,h3,h5 {
  font-weight:normal;
  font-weight:200;
}
h2,h4,h6{
  font-weight:normal;
}

input:not(.button), textarea {
  border:1px solid #999;
  @include border-radius(3px);
  padding:5px;
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,0.2));
  &:focus {
    border-color:#acd;
    @include box-shadow(0 0 3px rgba(150,180,230,1));
  }
}




/* Basic styles */
.no-js body {
  margin-top:30px;
}
#noscript_warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 0 6px;
  text-align: center;
  font-size: 120%;
  font-weight: bold;
  color: #fff;
  background:#AE0000;
  z-index: 101;
}
.branding {
  padding:5px 0;
  background:#eee;
  .logo {
    float: left;
    margin-left:2%;
    img {
      display:block;
      height: 40px;
    }
  }
  .user {
    float:right;
    margin:10px 2% 0;
    a {
    }
    .user-name {
    }
    .user-logout {
    }
  }
}
.main_nav {
  padding:5px 0;
  background:#eee;
  .search {
    margin-right:10px;
  }
  .home {
    margin-left:10px;
  }
  a {
    display:inline-block; zoom:1;*display:inline;
    padding:0.2em 0.5em;
    background:#ccc;
    @include border-radius(0.3em);
    &:hover {
      background:#ddd;
    }
    &.active {
      @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.5));
    }
  }
}
.flash {
  padding:0.5em 2em;
  font-size:1.5em;
  text-align:center;
  text-shadow:-1px -1px 1px #FFFFFF, 1px 1px 1px rgba(0, 0, 0, 0.3);
  &.success {
    background:$bggreen;
    color:#090;
  }
  &.notice {
    background:$bgblue;
    color:#009;
  }
  &.alert {
    background:$bgyellow;
    color:#770;
  }
  &.error {
    background:$bgred;
    color:#900;
  }
}
footer {
  position:relative;
  margin:-1.8em 10px 0 0;   /* So it appears at the bottom of the right column and is not lost in web-app mode */
  float: right;
  font-size: 0.8em;
  opacity:0.5;
}



/* Plugin fixes */
.dataTables_wrapper {
  @include clearfix;
}
div.uni-selector, div.uni-uploader {
  margin-left:-2px;         /* Left aligns the uniform masks, but be careful if they're inline */
}
.formtastic textarea {
  padding:5px;
}
.inline_choices .choice {
  display:inline-block; zoom:1;*display:inline;
  vertical-align:top;
  margin-right:1em;
}
ul.as-selections {
  width:72%; // To match the formtastic input widths
  border:1px solid #999;
  @include border-radius(3px);
  padding:5px;
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,0.2));
  li.as-original input {
    @include box-shadow(none);
    color:#999; /* For the placeholder colour */
    &:focus {color:inherit;}
  }
}
.as-results {
  position:absolute;
  left:25%; // To match the formtastic label width
}
.button-group, .button {
  vertical-align:top;
}
/* Fancybox Popups */
.popups {
  display:none;
}
.popup_content {
  min-width:400px;
}
#fancybox-wrap {
  padding-top:40px;
  #fancybox-title {
    position:absolute;
    top:0px;
    left:19px;
    height:28px;
    border:1px solid #333;
    @include border-radius(3px);
    padding:5px 10px;
    @include box-shadow(0 1px 3px rgba(0,0,0,0.5));
    @include linear-gradient(#355b92, #274674);
    h3.popup-title {
      margin-top:3px;
      font-weight:normal;
      text-shadow:1px 1px #333;
    }
  }
}



/* =============================================================================
   Non-semantic helper classes
   ========================================================================== */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none !important; visibility: hidden !important; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* Float and clear */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }

/* Inline-block */
.ib { display:inline-block; *zoom:1; *display:inline; }



/* =============================================================================
   Print styles.
   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}




















/* 
  Column Layout
  =============
  This layout is designed for mobile-first, so that the 'side' columns go below the main 
  content on narrower screen-widths.
  
  IMPORTANT: Most of the styles that will be seen by the typical browser (i.e. the 960 design) 
  are in the @media queries below.
  
  Set the column background colours using the variables (top of file) for consistent 
  column colouration.
*/

#wrapper {
  max-width: 960px;      /* Set the width of the page here */
  padding:0;
  margin: 0 auto 20px;
  @include border-bottom-radius(3px);
  @include box-shadow(0 2px 2px rgba(0,0,0,0.5));
}

/* Layout for mobile < 480px width screens (see below for media queries) */
.colmask {
  position:relative;     /* This fixes the IE7 overflow hidden bug */
  clear:both;
  float:left;
  width:100%;            /* width of whole page */
  @include border-radius(0 0 3px 3px);
  background:#fff;
  overflow:hidden;       /* This chops off any overhanging divs, including the leftcol bg */
}
.colright,.colmid,.colleft {
  float:left;
  width:100%;
  position:relative;
}
.col1,.col2,.col3 {
  float:left;
  position:relative;
  padding:0 0 5em;
}
.onecol {                         /* Full page settings */
  background:$maincolbg;          /* page background colour */
  .col1 {
    width:96%;                    /* page width minus left and right padding */
    left:2%;                      /* page left padding */
  }
}
.threecol, .leftcol, .rightcol {
  background:$maincolbg;          /* main column background colour */
  .col1, .col2, .col3 {
    width:100%;                   /* page width minus left and right padding */
    padding:0 2% 50px;            /* page left padding */
  }
  .col2 {background:$leftcolbg;}  /* left column background colour */
  .col3 {background:$rightcolbg;} /* right column background colour */
}
.rightcol .col2, .leftcol .col3, .onecol .col2, .onecol .col3 { display:none; }


/* Media Queries for Responsive Design. These override the primary ('mobile first') styles */

@media only screen and (min-width: 480px) {
 /* Style adjustments for viewports 480px and over go here */
 /* 2 Column (double page) settings */
 .threecol {
   .col2 {
     width:46%;     /* left column content width (column width minus left and right padding) */
     left:0%;       /* right column width plus left column left padding */
   }
   .col3 {
     width:46%;     /* right column content width (column width minus left and right padding) */
     left:0%;       /* (right column width) plus (left column left and right padding) plus (right column left padding) */
   }
 }
}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over (most desktop browsers) go here */
  .colmask {
    .col1, .col2, .col3 {
      padding:0 0 5em;
      background:transparent
    }
  }
  .col1 { min-height:400px; }
  .leftcol {                  /* 2 Column (left menu) settings */
    background:$maincolbg;    /* right column background colour */
    .colleft {
      right:75%;              /* right column width */
      background:$leftcolbg;  /* left column background colour */
      @include box-shadow(inset -1px 0 0 #ccc); /* 0 spread so it isn't visible at the top and bottom */
    }
    .col1 {
      width:71%;              /* right column content width */
      left:102%;              /* 100% plus left column left padding */
    }
    .col2 {
      width:21%;              /* left column content width (column width minus left and right padding) */
      left:6%;                /* (right column left and right padding) plus (left column left padding) */
    }
    .col3 {
      display:none;
    }
  }
  .rightcol {                 /* 2 Column (right menu) settings */
    background:$rightcolbg;   /* right column background colour */
    .colleft {
      right:25%;              /* right column width */
      background:$maincolbg;  /* left column background colour */
      @include box-shadow(inset -1px 0 0 #ccc); /* 0 spread so it isn't visible at the top and bottom */
    }
    .col1 {
      width:71%;              /* left column content width (left column width minus left and right padding) */
      left:27%;               /* (right column width) plus (left column left padding) */
    }
    .col2 {
      display:none;
    }
    .col3 {
      width:21%;              /* right column content width (right column width minus left and right padding) */
      left:31%;               /* (right column width) plus (left column left and right padding) plus (right column left padding) */
    }
  }
  .threecol {                 /* 3 Column settings */
    background:$rightcolbg;   /* right column background colour */
    .colmid {
      right:25%;              /* width of the right column */
      background:$maincolbg;  /* left column background colour */
      @include box-shadow(1px 0 0 #ccc); /* Use box-shadow for 'borders' so the layout isn't affected */
    }
    .colleft {
      right:50%;              /* width of the middle column */
      background:$leftcolbg;  /* left column background colour */
      @include box-shadow(inset -1px 0 0 #ccc); /* 0 spread so it isn't visible at the top and bottom */
    }
    .col1 {
      width:46%;              /* width of center column content (column width minus padding on either side) */
      left:102%;              /* 100% plus left padding of center column */
    }
    .col2 {
      width:21%;              /* Width of left column content (column width minus padding on either side) */
      left:31%;               /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    }
    .col3 {
      width:21%;              /* Width of right column content (column width minus padding on either side) */
      left:85%;               /* Please make note of the brackets here:
      (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
    }
  }
}



/* Below are three options for variations on theming:
  1. Web-app mode: Full-width, full-height page that doesn't scroll (the columns scroll instead) - also requires JS
  2. Full-width page, fixed-position header, with scrolling content
  3. Fixed-position header, with scrolling content (2 sections of CSS to uncomment)
*/



@media only screen and (min-width: 768px) {
  /* For Web-app mode, uncomment this (and the JS in home.coffee) * /
  #wrapper {
    max-width: 100%;
    width:100%;
    margin:0;
    padding:0;
  }
  .col1,.col2,.col3 {
    overflow-y:auto;
  }
  /* */

  /* For full-width fixed header+nav, uncomment this * /
  #wrapper {
    max-width: 100%;
    width:100%;
    margin:0;
    padding:0;
  }
  .branding, .main_nav {
    position:fixed;
    width:100%;
    top:0;
    margin:0 auto;
    z-index:1000;
  }
  .main_nav {
    top:50px;         // Height of .branding
  }
  .col1,.col2,.col3 {
    margin-top:83px;  // Height of .branding + .main_nav
  }
  /* */

  /* For fixed header+nav, uncomment this (and 963 CSS below) * /
  .branding, .main_nav {
    position:fixed;
    width:964px;
    top:0;
    margin:0 auto;
    z-index:1000;
  }
  .main_nav {
    top:50px;         // Height of .branding
  }
  .col1,.col2,.col3 {
    margin-top:83px;  // Height of .branding + .main_nav
  }
  /* */  
}
@media only screen and (max-width: 963px) {
  /* For fixed header+nav, uncomment this (and above) * /
  .branding, .main_nav {
    width:100%;
  }
  /* */
}