/*
 * Emory University (C) 2012 
 * Author: Bryce Roberts
 * brober8 (AT) emory.edu
 *
 *
 * This is the base CSS for the Emory main site redesign.
 *
 */
 
 /* Gobal Styles */
 
* { margin:0; padding:0;}

body {font-family: Verdana, Arial, sans-serif; font-size: .7em; line-height: .9em;width:auto;}
 
/* Gobal Container Styles */

#container-shadow{
    background: url(http://www.emory.edu/home/_includes/images/system/container-bg.gif) repeat-y;
    padding: 0 10px 0 10px;
    overflow:hidden;
}

.container{
    width: 960px;
    position: relative;
    margin:auto;
    background-color:#FFFFFF;
}

#header{
    position: relative;
    width: 960px;
    height: 110px;
    background: #002878;
    border-bottom: 1px solid white;
}

#footer{
    clear: both;
    width: 960px;
    height: 65px;
    position: relative;
    background: #002878;
    text-align: center;
    color: #D0CDC4;
}

.emergency-announcement{padding:8px;border:1px solid;}
.emergency_include{background-color:#FF0000;padding:8px;border:1px solid #FFFFF;font-size:120%;}

.mobile-only{display:none !important;}

/* Responsive Framework for modern browsers and mobile designs */
@media only screen and (min-width: 980px) {
  /* Full Site Width ( and tablets in landscape view )*/
}

@media only screen and (max-width:979px){
  /* Full Site Shadow Removed */
    #container-shadow{ padding:0px;}
}

@media only screen and (min-width: 768px) and (max-width:959px){
  /* iPad in Potrait view ( other 10in tablets, and 7in tablets in landscape view) */
}

@media only screen and (min-width: 600px) and (max-width:767px){
  /* 7in tablets in partrait view ( and large screen phones in landscape view) */
    .container{ width: 600px !important;}
}

@media only screen and (min-width: 480px) and (max-width:599px){
  /* iPhone, iPod touch in portrait view ( and other small screen phone) */
    .container{ width: 480px !important;}
}

@media only screen and (min-width: 320px) and (max-width:479px){
  /* iPhone, iPod touch in portrait view ( and other small screen phone) */
    .container{ width: 320px !important;}
}

@media only screen and (max-width:319px){
  /* Extra Small Screens */
}

@media only screen and (max-width:767px){
  /* Target Mobile View */
    .desktop-only { display:none !important; }
    .mobile-only{display:block !important;}
    #header{
        width:100%;
        height:175px;
    }
    #footer{width:100%; height: auto;)
}

@media only screen and (min-width: 768px){
  /* Target Desktop View */
    .mobile-only{display:none !important;}
}

/* Special Directives */
@media only screen and (max-width:979px){
  /* Full Site Shadow Removed */
    #container-shadow{ padding:0px;}
}