/*************************************************
 * Site Name: IU Template (Responsive)
 * 
 * Description: 768px stylesheet
 * Version: 1.0
 * Author: IU Communications 
 * Author URI: http://communications.iu.edu
 ************************************************/

/****************************************
 * General Formatting
 ****************************************/

/*** Reusable Classes ***/

/* Wrapper */
.wrapper {
    padding: 0 10px;
}

/* Line Break */
.line-break {
    display: inline;    
}


/****************************************
 * Branding Bar
 ****************************************/

#branding-bar {
    min-height: 52px;
}

/*** Trident Tab & Campus Name ***/

#branding-bar .campus {
    font-size: 1.125em; /* 18px (18/16) */
    line-height: 1em; /* 18px (18/18) */
}
#branding-bar .campus a {
    height: 46px;
    padding: 0 0 0 75px;
}
#branding-bar .campus img {
    left: 0;
    width: 64px;
}

/*** Search ***/

#branding-bar #cse-search {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    float: none;
    height: 0;
    margin: 0;
    opacity: 1;
    padding: 0;
    text-align: right;
    transition: none;
    width: auto;
    z-index: 300;
}
#branding-bar.gateway #cse-search {
    padding-right: 50px;
}
#branding-bar #cse-search * {
    opacity: 1; 
}
#branding-bar #cse-search form {
    margin: 0;
    width: auto;
}
#branding-bar #cse-search fieldset {
    display: inline-block;
    vertical-align: middle; 
}

/* Fieldset 1 */
#branding-bar #cse-search-fieldset1 {
    margin: 0;
    position: static;   
}

/* Keywords */
#branding-bar #cse-search-keywords {
    background: #601411;
    color: #fff;
    padding: 0 12px;
    width: 144px;   
}
#branding-bar #cse-search-keywords::-webkit-input-placeholder {
   color: #fff;
}
#branding-bar #cse-search-keywords:-moz-placeholder {
   color: #fff; 
}
#branding-bar #cse-search-keywords::-moz-placeholder {
   color: #fff;  
}
#branding-bar #cse-search-keywords:-ms-input-placeholder {  
   color: #fff; 
}

/* Submit */
#branding-bar #cse-search-submit {
    background-image: url(../../img/branding-bar/search-submit.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin: 0;
    text-indent: -9999px;
    width: 45px;    
}

/*** Tools ***/

#branding-bar #campus-tools {
    -webkit-transition: margin 0.5s ease-in-out, opacity 0s ease-in-out 0.5s;
    -moz-transition: margin 0.5s ease-in-out, opacity 0s ease-in-out 0.5s;
    -ms-transition: margin 0.5s ease-in-out, opacity 0s ease-in-out 0.5s;
    -o-transition: margin 0.5s ease-in-out, opacity 0s ease-in-out 0.5s;
    margin-top: -50%;
    transition: margin 0.5s ease-in-out, opacity 0s ease-in-out 0.5s;
}
#branding-bar #campus-tools:target {
    padding: 78px 0 20px 0;
    z-index: 200;
}
#branding-bar #campus-tools .groups {
    display: table;
    margin: 0;
    width: 100%;
}
#branding-bar #campus-tools .group {
    border-bottom: none;
    display: table-cell;
    float: none;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: auto;    
}
#branding-bar #campus-tools li {
    float: none;
    width: auto;
}
#branding-bar #campus-tools li a {
    padding: 0; 
}

/*** Toggles ***/

#branding-bar .toggle {
    margin: 0 0 20px 0;
}
#branding-bar .toggle a {
    height: 26px;
}
#branding-bar #cse-search:target .toggle.search.close, 
#branding-bar .toggle.search {
    display: none;
}
#branding-bar .toggle.tools.close {
    bottom: -46px;
}
#branding-bar.gateway .toggle.tools.close {
    right: 0;
}


/****************************************
 * Header
 ****************************************/

#header-wrap-outer {
    border-bottom: 1px solid #423c31;
}
#header {
    padding: 0 10px;
}
#header h1 {
    float: left;
    font-size: 1.750em; /* 28px (28/16) */
    line-height: 1.071em; /* 30px (30/30) */
    margin: 0;
    padding: 30px 0 10px 0;
    width: 70%;
}
#header h1 a { 
    display: table-cell;
    height: 60px;
    padding: 0;
    vertical-align: middle;
}

/*** Logo ***/

#header img {
    display: block;
    float: right;   
    margin: 14px 17px 0 17px;
}

/*** Menu Button ***/

#header h2,
.js #header h2 {
    display: none;  
}


/****************************************
 * Wrappers
 ****************************************/

#main {
    background: #fff;
    min-height: 500px;
    padding: 0 0 60px 0;
}


/****************************************
 * Navigation
 ****************************************/

#nav-wrap {
    border-bottom: 1px solid #423c31;
    margin-top: -1px;
    position: relative;
    z-index: 4;     
}
#nav {
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 1.063em; /* 17px (17/16) */
    letter-spacing: 0.02em;
    line-height: 1.059em; /* 18px (18/17) */
    overflow: visible;  
}
.js #nav ul,
.js #nav ul.show {
    display: block; 
}
#nav ul li a {
    border-bottom: none;
    padding: 0; 
}

/*** Horizontal Navigation ***/

#nav #nav-horizontal {
    background: none;
    border-left: 1px solid #8c2c27;
}
#nav #nav-horizontal li {
    border-right: 1px solid #8c2c27;
    cursor: pointer;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
#nav #nav-horizontal li:last-child {
    border-right: 1px solid #8c2c27;
}
#nav #nav-horizontal li.current {
    background-color: #7d110c;  
}
#nav #nav-horizontal li:hover,
#nav #nav-horizontal li.current:hover {
    background-color: #903430;
}
#nav #nav-horizontal li a {
    display: block;
    padding: 4px 23px 5px 23px;
    text-decoration: none;
    zoom: 1; /* IE has layout */
}
#nav #nav-horizontal li:hover a {
    color: #fff;    
}
#nav #nav-horizontal li.current a {
    background-color: #7d110c;
    color: #fff;    
}
#nav #nav-horizontal li a:hover,
#nav #nav-horizontal li a:focus,
#nav #nav-horizontal li.current a:hover,
#nav #nav-horizontal li.current a:focus,
#nav #nav-horizontal li:hover a,
#nav #nav-horizontal li:focus a,
#nav #nav-horizontal li.current:hover a,
#nav #nav-horizontal li.current:focus a {
    background-color: #903430;
    color: #fff;
}

/* Subnavigation */
#nav #nav-horizontal li ul {
    background: #fff;
    border-bottom: 8px solid #423c30;
    box-shadow: 0 0 7px #666;
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 0.765em; /* 13px (13/17) */
    left: -9999px;
    letter-spacing: 0;
    line-height: 1.231em; /* 16px (16/13) */
    list-style: none;
    margin: 0 0 0 -1px;
    position: absolute;
    top: -9999px;
    width: 188px;
    z-index: 3;
}
#nav #nav-horizontal li:hover ul {
    left: auto;
    top: 100%;
}
#nav #nav-horizontal li li {
    border-right: none;
    border-bottom: 1px dotted #000;
    display: block;
    text-align: left;
}
#nav #nav-horizontal li:hover li,
#nav #nav-horizontal li.current:hover li {
    background-color: transparent;  
}
#nav #nav-horizontal li li:first-child a {
    border-top: 4px solid #423c30;  
}
#nav #nav-horizontal li li:last-child {
    border-right: none; 
}
#nav #nav-horizontal li li a {
    padding: 7px 15px 9px 15px;
}
#nav #nav-horizontal li:hover li a {
    color: #990000; 
}
#nav #nav-horizontal li.current li a {
    background-color: #fff;
    color: #990000; 
}
#nav #nav-horizontal li:hover li a,
#nav #nav-horizontal li.current:hover li a {
    background-color: #fff;
    color: #990000; 
}
#nav #nav-horizontal li li a:hover,
#nav #nav-horizontal li li a:focus,
#nav #nav-horizontal li.current li a:hover,
#nav #nav-horizontal li.current li a:focus {
    background-color: #32637e;
    color: #fff;
}


/*** Audience Navigation ***/

#nav #nav-audience {
    background: #4a6877;
    border-top: none;
    float: right;
    height: 34px;
    list-style: none;
    overflow: hidden;
    padding: 0 10px;
    position: absolute;
    right: 0;
    top: -34px;
    z-index: 5;
}
#nav #nav-audience li {
    float: left;
    padding: 0 6px;
}
#nav #nav-audience li.current {
    background-color: transparent;  
}
#nav #nav-audience li a {
    color: #fff;    
    display: block;
    height: 26px;
    padding: 8px 6px 0 6px;
}
#nav #nav-audience li.current a,
#nav #nav-audience li a:hover, 
#nav #nav-audience li a:focus {
    background: none;
    border-bottom: 4px solid #7d110c;
    color: #fff;
    height: 22px;
    text-decoration: none;  
}

/*** Jump to Submenu ***/

.js #nav .submenu a {
    display: none;
}


/****************************************
 * Breadcrumbs
 ****************************************/
 
#breadcrumbs {
    background: #6b6555;
    color: #fff;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.714em; /* 10px (10/14) */
    line-height: 1.091em; /* 12px (12/10) */
    list-style: none;
    max-width: 915px;
    overflow: hidden;
    padding: 4px 30px 7px 15px;
    text-align: left;
}
#breadcrumbs li {
    background: url(../../img/main/breadcrumbs/separator.png) no-repeat 100% 60%;
    float: left;
    margin: 0 4px 0 0;
    padding: 0 9px 0 0;
}
#breadcrumbs li:last-child {
    background: none;
    margin-right: 0;
    padding-right: 0;   
}
#breadcrumbs li a {
    color: #fff;
    text-decoration: underline;
}


/****************************************
 * Section Title
 ****************************************/
 
#section-title {
    background: #fff;
    border-bottom: 1px solid #A09D98;
    overflow: hidden;
    position: relative; 
}
#section-title h2 {
    font-size: 2.250em; /* 36px (36/16) */
    font-weight: normal;
    letter-spacing: 0.02em;
    line-height: 1em; /* 36px (36/36) */
    height: 93px;
    padding: 0;
    position: relative;
    z-index: 1;
}
#section-title h2 a {
    display: table-cell;    
    height: 93px;
    padding: 0 30px 0 15px;
    vertical-align: middle;
}
#section-title img {
    display: block;
    max-width: none;
    position: absolute;
    right: 0;
    top: 0; 
    width: auto;
}


/****************************************
 * Vertical Navigation
 ****************************************/

#nav-vertical {
    background-image: url(../../img/nav/vertical/bg.gif);
    background-position: 0 100%;
    background-repeat: repeat-x;
    float: left;
    margin: 0 0 0 -233px;
    min-height: 350px;
    padding: 0 0 147px 0;
    width: 233px;
}


/****************************************
 * Content Outer Wrap
 ****************************************/
 
#content-outer-wrap {
    background: url(../../img/main/bg-content-wrap.gif) no-repeat;
    max-width: 727px;
    overflow: hidden;
    padding: 0 0 0 233px;   
}


/****************************************
 * Content Wrap
 ****************************************/

#content-wrap {
    float: right;
    min-height: 500px;  
    width: 100%;
}


/****************************************
 * Content
 ****************************************/
 
#content {
    padding: 26px 20px 30px 20px;   
}
#content:last-child {
    padding-right: 60px;
}

/*** Quote ***/

#content .quote {
    margin-right: 20px;
    max-width: 229px;
}

/*** Callout ***/

#content .callout {
    margin-right: 20px;
    max-width: 234px;
}

/*** Floats ***/

#content .float-left {
    float: left;
    margin: 5px 20px 18px 0;    
}
#content .float-right {
    float: right;
    margin: 5px 0 18px 20px;    
}


/****************************************
 * Homepage
 ****************************************/

/*** Content Outer Wrap ***/

#home.nav-horizontal #content-outer-wrap {
    background: none;
    max-width: 100%;
    padding-left: 0;    
}

/*** Feature ***/

/* Buttons */
#home #feature #feature-buttons {
    bottom: 0;
    height: 76px;
    left: 0;
    position: absolute;
    width: 100%;    
    z-index: 2;
}
.js #home #feature #feature-buttons {
    display: table; 
}
#home #feature #feature-buttons li {
    display: table-cell;
    cursor: pointer;
    height: 76px;
    vertical-align: bottom;
}
#home #feature #feature-buttons li.active {
    background: url(../../img/home/feature/bg-buttons-active-arrow.png) no-repeat 50% 0;
    display: table-cell;
}
#home #feature #feature-buttons li a {
    background: url(../../img/home/feature/bg-buttons.png) repeat-x;
    border-right: 2px solid #423c31;
    display: table-cell;
    height: 57px;
    padding: 0 10px;
    text-align: center;
    vertical-align: middle;
}
#home #feature #feature-buttons li:last-child a {
    border-right: none; 
}
#home #feature #feature-buttons li a:hover,
#home #feature #feature-buttons li a:focus,
#home #feature #feature-buttons li.active a {
    background: url(../../img/home/feature/bg-buttons-active.png) repeat-x;
}

/* Navigation */
#home #feature #feature-nav {
    display: none;  
}

/*** Slideshow ***/

/* Caption */
#home #slideshow li .slideshow-caption p {
    margin-right: 100px;    
}

/* Buttons */
#home #slideshow-buttons {
    background: none;
    bottom: 0;
    height: 32px;
    left: auto;
    right: 10px;
    width: auto;
}
#home #slideshow-buttons .pause, #home #slideshow-buttons .play {
    width: 30px;
}
#home #slideshow-buttons .pause a, #home #slideshow-buttons .play a {
    background: url(../../img/home/slideshow/play-pause.gif) no-repeat;
    height: 32px;
    width: 30px;
}
#home #slideshow-buttons .play a {
    background-position: 0 -64px;
}
#home #slideshow-buttons .pause a:hover, #home #slideshow-buttons .pause a:focus {
    background-position: 0 -32px;   
}
#home #slideshow-buttons .play a:hover, #home #slideshow-buttons .play a:focus {
    background-position: 0 -96px;
}
#home #slideshow-buttons ul {
    margin: 11px 0 0 0;
}
#home #slideshow-buttons li {
    height: 10px;
    margin: 0 0 0 4px;
    width: 10px;
}
#home #slideshow-buttons li a { 
    background: url(../../img/home/slideshow/button.gif) no-repeat;
    height: 10px;
    width: 10px;
}
#home #slideshow-buttons a.active {
    background-position: 0 -10px;
}
#home #slideshow-buttons a:hover, #home #slideshow-buttons a:focus {
    background-position: 0 -10px;
}

/*** Content ***/

#home #content {
    padding-left: 32px; 
}
#home.nav-horizontal #content {
    padding-left: 20px; 
}


/****************************************
 * Footer
 ****************************************/

#footer {
    border-top: 6px solid #7d110c;
    margin-top: -40px;
    padding: 40px 0 30px 0;
    position: relative;
    text-align: left;
    z-index: 1;
}
#footer .wrapper {
    position: relative;
}
#footer .tagline {
    font-size: 2.545em; /* 28px (28/11) */
    left: 50%;
    line-height: 1em; /* 28px (28/28) */
    margin: 0 0 0 -222px;
    max-width: 444px;
    padding: 8px;
    position: absolute;
    text-align: center;
    top: -66px;
    width: 55%; 
}
#footer .copyright {
    overflow: hidden;
    padding: 7px 0 0 0;
    position: relative;
}
#footer .internal {
    position: absolute;
    right: 10px;
    top: 7px;
    z-index: 1; 
}
#footer .block-iu { 
    float: left;
    margin: -7px 9px 0 0;
}


/****************************************
 * Photo List
 ****************************************/

#content:last-child .photo-list {
    margin-right: -60px;    
}


/****************************************
 * Profile Page
 ****************************************/

/*** Header ***/

#content .profile-header {
    overflow: hidden;
    zoom: 1; /* IE has layout */    
}
#content .profile-header-photo {
    float: left;
    margin: 5px 20px 0 0;
    width: 275px;       
}
#content .profile-header-content {
    overflow: hidden;   
}


/****************************************
 * Spotlight Page
 ****************************************/

/*** Header ***/

#content .spotlight-header {
    margin: 0 -22px;    
}
#content:last-child .spotlight-header {
    margin-right: -60px;    
}

/* Name */
#content .spotlight-header-name {
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 1.714em; /* 24px (24/14) */
    font-weight: normal;
    line-height: 1.083em; /* 26px (26/24) */
    padding: 0 295px 0 22px;    
}

/* Photo */
#content .spotlight-header-photo {
    float: right;
    margin: -40px 0 0 20px;
    overflow: hidden;
    position: relative;
    width: 275px;       
}
#content .spotlight-header-photo img {
    float: left;
    margin: 0;  
}
#content .spotlight-header-photo .more {
    background: url(../../img/main/content/bg-white-alpha80.png) repeat;
    bottom: 0;
    left: 0;
    margin: 0;
    position: absolute; 
}
#content .spotlight-header-photo .more a {
    display: block;
    padding: 0 5px;
    text-align: right;
    width: 265px;   
}

/* Content */
#content .spotlight-header-content {
    background: #EAE8DB;
    border-top: 1px solid #BAB599;
    margin: 0 0 15px 0;
    padding: 5px 295px 5px 22px;    
}
#content .spotlight-header-content p {
    margin: 0 0 5px 0;  
}