/***********************************
Site: UI Library for UBC Library
***********************************/

/* Table of Contents
==================================================
#Base 960 Grid    
  #Tablet (Portrait)
  #Mobile (Portrait) 
  #Mobile (Landscape)
  #Clearing 
#Forms
#Pagination
#Buttons
#Icons
#Status Messages
#Toggles
#Helper Classes */

/* #Base 980 Grid 
================================================== */

.grid                               { position: relative; width: 980px; margin: 0; padding: 0 0px; }
.grid .column, .grid .columns       { float: left; display: inline; margin-left: 20px; margin-right: 20px; }
.grid .nest .column, 
.grid .nest .columns                { margin-left:10px; margin-right:10px; }
.grid .fit                          { margin-right:0; }
.grid .row                          { margin-bottom: 20px; }
.grid .box                          { border:1px solid #ccc; background-color:#f6f6f6; padding:15px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }

/* Nested Column Classes */
.grid .column.first, 
.grid .columns.first                { margin-left: 0; float:left; }
.grid .column.last,
.grid .columns.last                 { margin-right: 0; float: right; }

/* Base Grid */
.grid .one.column                   { width: 60px; }
.grid .two.columns                  { width: 140px; }
.grid .three.columns                { width: 220px; }
.grid .four.columns                 { width: 300px; }
.grid .five.columns                 { width: 380px; }
.grid .six.columns                  { width: 460px; }
.grid .seven.columns                { width: 540px; }
.grid .eight.columns                { width: 620px; }
.grid .nine.columns                 { width: 700px; }
.grid .ten.columns                  { width: 780px; }
.grid .eleven.columns               { width: 860px; }
.grid .twelve.columns               { width: 940px; }

/* Offsets */  
.grid .offset-by-one                { padding-left: 80px;  }
.grid .offset-by-two                { padding-left: 160px; }
.grid .offset-by-three              { padding-left: 240px; }
.grid .offset-by-four               { padding-left: 320px; }
.grid .offset-by-five               { padding-left: 400px; }
.grid .offset-by-six                { padding-left: 480px; }
.grid .offset-by-seven              { padding-left: 560px; }
.grid .offset-by-eight              { padding-left: 640px; }
.grid .offset-by-nine               { padding-left: 720px; }
.grid .offset-by-ten                { padding-left: 800px; }
.grid .offset-by-eleven             { padding-left: 880px; }

/* #Tablet (Portrait)
================================================== */  

/* Note: Design for a width of 768px 

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .grid                             { width: 768px; }
  .grid .column, 
  .grid .columns                    { margin-left: 10px; margin-right: 10px; }
  .column.first, .columns.first     { margin-left: 0; margin-right: 10px; }
  .column.last, .columns.last       { margin-right: 0; margin-left: 10px; }

  .grid .one.column                 { width: 28px; }
  .grid .two.columns                { width: 76px; }
  .grid .three.columns              { width: 124px; }
  .grid .four.columns               { width: 172px; }
  .grid .five.columns               { width: 220px; }
  .grid .six.columns                { width: 268px; }
  .grid .seven.columns              { width: 316px; }
  .grid .eight.columns              { width: 364px; }
  .grid .nine.columns               { width: 412px; }
  .grid .ten.columns                { width: 460px; }
  .grid .eleven.columns             { width: 508px; }
  .grid .twelve.columns             { width: 556px; }

  /* Offsets 
  .grid .offset-by-one              { padding-left: 48px; }
  .grid .offset-by-two              { padding-left: 96px; }
  .grid .offset-by-three            { padding-left: 144px; }
  .grid .offset-by-four             { padding-left: 192px; }
  .grid .offset-by-five             { padding-left: 288px; }
  .grid .offset-by-six              { padding-left: 336px; }
  .grid .offset-by-seven            { padding-left: 348px; }
  .grid .offset-by-eight            { padding-left: 432px; }
  .grid .offset-by-nine             { padding-left: 480px; }
  .grid .offset-by-ten              { padding-left: 528px; }
  .grid .offset-by-eleven           { padding-left: 576px; }
  .grid .offset-by-twelve           { padding-left: 624px; }
}
*/

/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px

@media only screen and (max-width: 767px) {
  .grid                             { width: 300px; }
  .grid .columns, 
  .grid .column                     { margin: 0; }
  
  .grid .one.column,
  .grid .two.columns,
  .grid .three.columns,
  .grid .four.columns,
  .grid .five.columns,
  .grid .six.columns,
  .grid .seven.columns,
  .grid .eight.columns,
  .grid .nine.columns,
  .grid .ten.columns,
  .grid .eleven.columns,
  .grid .twelve.columns,
  .grid .thirteen.columns,
  .grid .fourteen.columns,
  .grid .fifteen.columns,
  .grid .sixteen.columns, 
  .grid .one-third.column, 
  .grid .two-thirds.column          { width: 300px; }
  
  /* Offsets 
  .grid .offset-by-one,
  .grid .offset-by-two,
  .grid .offset-by-three,
  .grid .offset-by-four,
  .grid .offset-by-five,
  .grid .offset-by-six,
  .grid .offset-by-seven,
  .grid .offset-by-eight,
  .grid .offset-by-nine,
  .grid .offset-by-ten,
  .grid .offset-by-eleven,
  .grid .offset-by-twelve,
  .grid .offset-by-thirteen,
  .grid .offset-by-fourteen,
  .grid .offset-by-fifteen          { padding-left: 0; }
}
*/

/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px 

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .grid                             { width: 420px; }
  .grid .columns, 
  .grid .column                     { margin: 0; }

  .grid .one.column,
  .grid .two.columns,
  .grid .three.columns,
  .grid .four.columns,
  .grid .five.columns,
  .grid .six.columns,
  .grid .seven.columns,
  .grid .eight.columns,
  .grid .nine.columns,
  .grid .ten.columns,
  .grid .eleven.columns,
  .grid .twelve.columns,
  .grid .thirteen.columns,
  .grid .fourteen.columns,
  .grid .fifteen.columns,
  .grid .sixteen.columns,
  .grid .one-third.column, 
  .grid .two-thirds.column           { width: 420px; }
}
 
*/
/* #Clearing
================================================== */

/* Self Clearing Goodness */
.grid:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } 

/* Use clearfix class on parent to clear nested columns, 
or wrap each row of columns in a <div class="row"> */
.grid .nest:before,
.grid .nest:after,
.grid .clearfix:before,
.grid .clearfix:after,
.grid .row:before,
.grid .row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.grid .row:after,
.grid .nest:after,
.grid .clearfix:after { clear: both; }
.grid .row, 
.grid .clearfix { zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.grid br.clear                  { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }


/* #Forms
================================================== */

/* Elements */
.grid input[type=file],
.grid select,
.grid textarea,
.grid input[type=text]          { margin:0 0 5px; border:1px solid #ccc; cursor:pointer; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }

.grid select                    { width:100%; padding:4px; }
.grid textarea,
.grid input[type=text]          { width:100%; padding:5px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
.grid input[type=checkbox],
.grid input[type=radio]         { margin:2px 5px 3px; padding:0; }
.grid input[type=checkbox]+span,
.grid input[type=radio]+span    { font-weight:normal; display:inline-block; height: 17px; vertical-align: text-bottom; }


.grid select:focus,
.grid textarea:focus,
.grid input:focus               { border-color:#900; cursor:text; -moz-box-shadow:0 0 5px rgba(0,0,0,0.3) inset; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.3) inset; box-shadow:0 0 5px rgba(0,0,0,0.3) inset; }

.grid fieldset                  { margin-bottom:14px; }
.grid fieldset.half-margin-bottom { margin-bottom:7px; } 


.grid fieldset.focused          { background-color:#fff8d3; outline:5px solid #fff8d3; /*overflow:hidden;*/ }


.grid abbr                      { cursor:help; }

.grid label                     { font-size:1em; font-weight:bold; width:100%; float:left; margin-bottom:5px; clear:left; cursor:pointer; }
.grid label .required           { font-weight:bold; color:#ff0000; }

.grid .sublabel                 { font-weight:normal; }
.grid input[type=text]+.sublabel {text-transform:uppercase; margin: -3px 0 8px 1px; font-size:10px; color:#666; }

.grid .horizontal,
.grid .modifier                 { float:left; }
.grid .horizontal label,
.grid .modifier label           { float:left; clear:none; width:auto; margin:0 15px 0 0; }
.grid .modifier label           { font-size:11px; }
.grid .horizontal label input[type=radio],
.grid .modifier label input[type=radio] { margin:0 5px; }

.grid .advSearch                { float:right; font-size: 12px; }

/* Placeholder text that fades on click - manipulates placeholder attribute - see library-ui.js */
  .grid ::-webkit-input-placeholder,
  .grid ::-webkit-textarea-placeholder { color:#aaa; }
  .grid input:-moz-placeholder,
  .grid textarea:-moz-placeholder { color:#aaa; }
  /* this is an >=IE8 hack to deal with placeholder text - it's bad but conditional comments aren't available via the UBC CLF*/
  .grid input, .grid textarea   { color:#333; color:#aaa\9; } 
  .grid input[type=button]      { color:#555; }
  .grid .changed                { color:#333\9; }
	

/* #List
================================================== */

.grid .subject-browse           { }
.grid .subject-browse	a         { display:block; float:left; width:240px; padding:3px 5px; margin-right:15px; margin-bottom:5px; -webkit-transition: background-color 0.3s linear; }
.grid .subject-browse	a:hover   { background-color:#eee; text-decoration:none !important; }

.grid .sidebar                  { background: #eee; padding:15px; border:1px solid #ccc; margin-bottom:15px; float:left; }

/* #Pagination
================================================== */

.grid .pagination               { margin: 0 auto 18px; text-align:center; }
.grid .pagination span.current  { background-color:#009; border:1px solid #003; color:#fff; padding:2px 4px; text-align:center; }
.grid .pagination a             { background-color:#eee; border:1px solid #ddd; color:#444; padding:2px 4px; text-align:center; -webkit-transition: border, background-color 0.2s linear; transition: border, background-color 0.2s linear; -webkit-border-radius:1px 1px; -moz-border-radius:1px 1px; border-radius: 1px 1px;}
.grid .pagination a:hover       { background-color:#ddf; text-decoration:none !important; border:1px solid #999; }

/* #Buttons 
================================================== */
.grid .button {
  display: inline-block;
  zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
  *display: inline;
  vertical-align: baseline;
  margin: 0 0 15px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: bold 11px/120% Helvetica, Arial, sans-serif;
  padding: 8px 18px;
  text-shadow: 0 1px 1px rgba(0,0,0,.1);
  -webkit-border-radius: 2px; 
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1), inset 0 1px 0px rgba(255,255,255,.1);
  -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1), inset 0 1px 0px rgba(255,255,255,.1);
  box-shadow: 0 1px 0px rgba(0,0,0,.1), inset 0 1px 0px rgba(255,255,255,.1);
  /*grey is the default color*/
  color: #555;
  border: solid 1px #ccc;
  background: #f3f3f3;
  background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#eeeeee));
  background: -webbkit-linear-gradient(top, #f3f3f3), #eeeeee);
  background: -moz-linear-gradient(top, #f3f3f3), #eeeeee);
  background: -ms-linear-gradient(top, #f3f3f3), #eeeeee);
  background: -o-linear-gradient(top, #f3f3f3), #eeeeee);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3',EndColorStr='#eeeeee');
  -webkit-transition: all linear 0.2s;
  -moz-transition: all linear 0.2s;
  -o-transition: all linear 0.2s;
  transition:  all linear 0.2s;
}
.grid .button:hover {
	text-decoration: none;
  /*grey is the default color*/
  border: solid 1px #888;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
  cursor: pointer;
}
.grid .button:active {
  border:solid 1px #77f;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  cursor: pointer;
}

.grid .button.large {
  font-size: 16px;
  line-height: 32px;
  padding: 5px 25px;
}
 
.grid .button.medium {
  font-size: 12px;
  padding: 5px 15px;
}
.grid .button.small {
  font-size: 11px;
  padding: 2px 9px;
}
 
/* .blue, .orange, .red, .green
---------------------------------------------- */
 
/* blue */
.grid .blue {
  color: #d9eef7;
  border: solid 1px #0076a3;
  background: #0D7AFF;
  background: -webkit-gradient(linear, left top, left bottom, from(#0D7AFF), to(#0073FF));
  background: -webkit-linear-gradient(top,  #0D7AFF,  #0073FF);
  background: -moz-linear-gradient(top,  #0D7AFF,  #0073FF);
  background: -ms-linear-gradient(top,  #0D7AFF,  #0073FF);
  background: -o-linear-gradient(top,  #0D7AFF,  #0073FF);
  background: linear-gradient(top,  #0D7AFF,  #0073FF);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0D7AFF', endColorstr='#0073FF');
}
.grid .blue:hover {
  border: solid 1px #444;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
}
.grid .blue:active {
  border:solid 1px #c44;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
 
/* orange */
.grid .orange {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #faa51a;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#F7921D));
  background: -webkit-linear-gradient(top, #faa51a,  #F7921D);
  background: -moz-linear-gradient(top, #faa51a,  #F7921D);
  background: -ms-linear-gradient(top, #faa51a,  #F7921D);
  background: -o-linear-gradient(top, #faa51a,  #F7921D);
  background: linear-gradient(top,  #faa51a,  #F7921D);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#F7921D');
}
.grid .orange:hover {
  border: solid 1px #444;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
}
.grid .orange:active {
  border:solid 1px #44f;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
 
/* red */
.grid .red {
  color: #faddde;
  border: solid 1px #CC262B;
  background: #ed1c24;
  background: -webkit-gradient(linear, left top, left bottom, from(#DD4A4E), to(#DB3C40));
  background: -webkit-linear-gradient(top, #DD4A4E,  #DB3C40);
  background: -moz-linear-gradient(top,  #DD4A4E,  #DB3C40);
  background: -ms-linear-gradient(top,  #DD4A4E,  #DB3C40);
  background: -o-linear-gradient(top,  #DD4A4E,  #DB3C40);
  background: linear-gradient(top,  #DD4A4E,  #DB3C40);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#DD4A4E', endColorstr='#DB3C40');
}
.grid .red:hover {
  border: solid 1px #444;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
}
.grid .red:active {
  border:solid 1px #44f;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
 
/* green */
.grid .green {
  color: #e8f0de;
  border: solid 1px #538312;
  background: #7db72f;
  background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#5F911A));
  background: -webkit-linear-gradient(top,  #7db72f,  #5F911A);
  background: -moz-linear-gradient(top,  #7db72f,  #5F911A);
  background: -ms-linear-gradient(top,  #7db72f,  #5F911A);
  background: -o-linear-gradient(top,  #7db72f,  #5F911A);
  background: linear-gradient(top,  #7db72f,  #5F911A);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#5F911A');
}
.grid .green:hover {
  border: solid 1px #444;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 0 3px rgba(255,255,255,0.4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 0 3px rgba(255,255,255,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,0.4);
}
.grid .green:active {
  border:solid 1px #f44;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* #Icons
================================================== */
.grid a.external                { padding-right: 15px; background:url('../../img/ui-library/external_link.gif') no-repeat right; }
.grid a.new-window              { padding-right: 15px; background:url('../../img/ui-library/new_window.gif') no-repeat right; }


/* #Status Messages
================================================== */
.grid .message                  { padding: 15px; background:#eee; border: 1px solid #ccc!important; 
                                  -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1), inset 0 1px 0px rgba(255,255,255,.1);
                                  -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1), inset 0 1px 0px rgba(255,255,255,.1);
                                  box-shadow: 0 1px 0px rgba(0,0,0,.1), inset 0 1px 0px rgba(255,255,255,.1);}
.grid .note                     { background:#ffb; border: 1px solid #bb9!important; }
.grid .tip                      { background:#bfb; border: 1px solid #9b9!important; }
.grid .warning                  { background:#fbb; border: 1px solid #b99!important; }
.grid .message a                {  }
.grid .note  a                  { color:#990; text-decoration:underline; }
.grid .tip a                    { color:#090; text-decoration:underline; }
.grid .warning a                { color:#900; text-decoration:underline; }

/* #Toggles
================================================== */
.grid .toggle-icon              { display:inline-block; background:url('../../img/ui-library/toggle.gif'); height:13px; width:13px; margin:2px 6px 1px 2px; vertical-align:text-bottom; }
.grid .toggle-icon:hover        { background-position:0 -13px; }
.grid .toggle-list.active .toggle-icon        { background-position:-13px 0; }
.grid .toggle-list.active .toggle-icon:hover  { background-position:-13px -13px; }
.grid .toggle-list              { cursor:pointer; }
.grid .toggle-item              { display:none; }
.grid .toggle-item.active       { display:block; }
.grid li.toggle-item            { list-style:none; }

/* #Helper Classes
================================================== */

.no-margin-top                  { margin-top:0; }
.no-margin-bottom               { margin-bottom:0; }
.no-padding-top                 { padding-top:0 }
.no-padding-bottom              { padding-bottom:0 }
.clear                          { clear:both; }
br.clear                        { line-height:0; }