@charset "utf-8";
/*
Stylesheet      Web applications 2.0 Responsive
Theme Name      University of St Andrews 2012
URI             http://www.st-andrews.ac.uk
Version         7.0.0
Authors         gjms1
Description     Framework built on Twitter Bootstrap
Last Updated    11 July 2012

TODO
1. Separate what is generic and what is for responsive fixed or full width
*/


/* =============================================================================
   Responsive
   ========================================================================== */

/* Tiny. This handles screens that are smaller than the full-width of the header image. */
@media (max-width: 430px) {

    /* Layout --------------------------------------------------------------- */
    header#header {
        height: 81px !important;
    }
    #header-logo img {
        height:     31px !important;
        min-height: 31px !important;
        width:     294px !important;
        min-width: 294px !important;
    }
    #search {
        top: 75px !important;
    }
    #search input {
        width: 140px;
    }
    .app-bar .nav > li  {
        display: inline;
    }
    .app-bar .nav > li > a {
        position:relative;
        bottom: -7px;
        right: -19px;
        display: inline;
        padding: 10px 6px;
    }
    .app-bar .navbar-nav {
        margin: 15px -15px;
    }
}

/* A. Landscape phones and down */
@media (max-width: 480px) {
}

/* B. Landscape phone to portrait tablet */
@media (max-width: 767px) {

    /* Layout --------------------------------------------------------------- */
    body,
    body.navbar-fixed,
    #container {
        padding: 0;
        margin: 0;
    }
    .navbar-fixed-top {
        position: static;
    }
    .navbar .brand {
        padding-right: 10px;
        padding-left: 10px;
        *margin: 0 0 0 -5px;
    }
    .navbar .container {
        width: 100%;
        padding: 0;
    }
    /* Stretch navigation horizontally to fit the width. */
    .navbar .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 100%;
    }
    /* Adjust height and logo size/position for smaller screens. */
    header#header {
        height: 92px;
    }
    #header-logo {
        top: 25px;
    }
    #header-logo img {
        height:     42px;
        min-height: 42px;
        width:     392px;
        min-width: 392px;
    }
    /* Move search box beneath logo. */
    #search {
        position: absolute;
        left: 20px;
        top: 85px;
    }
    /* Prevent content from sitting flush against left/right of screen. */
    #content-wrapper {
        padding: 0 10px;
    }

    #sidebar {
        padding-bottom: 1em;
        padding-right: 15px;

    }
    .app-bar{
        height: 70px;
        
    }
    .app-bar .nav > li > a {
        position:relative;
        bottom: -7px;
        right: -19px;
        display: inline;
        padding: 10px 6px;
    }
    .app-bar .navbar {
        margin: 0px 0px;
    }
    .app-bar .nav > li  {
        display: inline;

    }
    /* Remove arrow and stretch app name full width. */
    .navbar .brand {
        *margin: 0 0 0 -20px;
        display: block;
        clear: both;
        padding-right: 0;
        width: 100%;
    }
    .navbar .container-fluid .brand {
        margin: 0;
    }
    .app-bar a.brand {
        background-image: none;
        padding-right: 30px;
    }

    /* Theme ---------------------------------------------------------------- */
    /* Make sure content is still readable on smaller screens
       if it spills out of the right-hand side. */
    body {
        background-color: #fff;
    }

    .input-mini,
    .input-small,
    .input-medium,
    .input-large,
    .input-xlarge,
    .input-xxlarge{
        width: 100%;
    }

   
#logout-btn{
    margin-right: 0px;
    
    margin-left: 25px;
}

}

/* C. Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

    /* Layout --------------------------------------------------------------- */
    /* Remove gap as global navbar is now docked. */
    body,
    body.navbar-fixed {
        padding-top: 40px;
    }
    /* Move application name arrow left to overrule Bootstrap default. */
    .navbar .brand {
        *margin-left: -20px;
    }
    /* Reduce width of search box. */
    .input-mini {

        width: 20%;
    }

    .input-small {

        width: 25%;
    }

    .input-medium {

        width: 40%;
    }

    .input-large {

        width: 60%;
    }

    .input-xlarge {

        width: 75%;
    }

    .input-xxlarge {
        width: 90%;
    }

    #user_detail{
    
    margin-top: 10px;
    margin-right: 0px;
}


}

/* D. Standard Desktop */
@media (min-width: 980px) {

    /* Layout --------------------------------------------------------------- */
    /* TODO move this into default CSS */
    /* Same as .input-large. */
    #search {
        position: absolute;
        left: 20px;
        top: 85px;
    }
    .input-mini {

        width: 15%;
    }

    .input-small {

        width: 20%;
    }

    .input-medium {

        width: 45%;
    }

    .input-large {

        width: 60%;
    }

    .input-xlarge {

        width: 75%;
    }

    .input-xxlarge {
        width: 85%;
    }
    #user_detail{
    
    margin-top: 10px;
    margin-right: 0px;
}

}

/* E. Large desktop */
@media (min-width: 1200px) {

    /*Same as .input-xlarge. */
    #search input {
        width: 270px;
    }
    .input-mini {

        width: 15%;
    }

    .input-small {

        width: 20%;
    }

    .input-medium {

        width: 35%;
    }

    .input-large {

        width: 50%;
    }

    .input-xlarge {

        width: 65%;
    }

    .input-xxlarge {
        width: 80%;
    }
    #user_detail{
    
    margin-top: 10px;
    margin-right: 0px;
}

}


/* End of file
================================================================================
*/