/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    CSS BASICS DO NOT UPDATE OR CHANGE THIS                          +
+     IF YOU WANT TO OVER RIDE THESE STYLES PLEASE DO IT AT THE VERY BOTTOM OF THIS   +
+     CHANGES TO THESE STYLES WILL BE COPIED OVER THE ENTIRE SECTION                  +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*----------


Screen sizes

PC Size 1920 x 1080 
PC Size 1280 x 1024 (campus lab computers)

ipad size 1024 x 768

nexus size 




-------*/
.btnNavMenu
{
    display:none;
    background-color:inherit;
    color:#fff;
    padding:2%;
}

 .btnNavMenu a
{
    background-image:url("../images/icons/mobilemenu.png");
    background-repeat:no-repeat;
    height:35px;
    background-position:left;
    background-repeat:no-repeat;
    border:solid 0px #fff;
    padding:1%;
    background-color:transparent;
    color:#fff;
    text-shadow:0px 4px 10px rgba(0,0,0,.5);
    width:200px;
    display:block;
    text-indent:38px;
}

#divFolderNav
{
    display:none;
}

#divFolderMenu
{
    display:none;
}



@media screen and (min-width:1200px) and (max-width:1399px)
{
     /*----------------------------------------------
     STANDARD PC SCREEN FOR COMPUTER LABS
    --------------------------------------- */
    
    
  
}

@media screen and (min-width:1020px) and (max-width:1200px)
{
     /*----------------------------------------------
     STANDARD PC SCREEN / iPad in LAND SCAPE
    --------------------------------------- */
  .Show80Wide
  {
    width:75%;    
  }
  
  .Show60Wide
  {
      width:57%;
  }
      
    
}

@media screen and (min-width:950px) and (max-width:1019px)
{
     /*----------------------------------------------
     STANDARD PC SCREEN / iPad in LAND SCAPE
    --------------------------------------- */
  .Show80Wide
  {
    width:75%;    
  }
  
  .Show60Wide
  {
      width:54%;
  }
      
    
}

@media screen and (min-width:800px)  and (max-width:949px)
{
     /*-------------------------------------------
     STANDARD SMALL PC SCREEN 
    ---------------------------------------------- */
      .Show80Wide
    {
        width:70%;    
    }
  
  
  .Show60Wide
  {
      width:45%;
  }
      
  #sitecues-badge
  {
      display:none;
  }
  
  #Social
  {
     margin-right:8px;
  }
  #Social img
  {
      height:17px;
      width:17px;
  }
  #SocialLinks
  {
      height:40px;
  }
  #SocialLinks li
  {
      padding:3px;
  }
    

}

@media screen and (min-width:750px)  and (max-width:800px)
{
     /*-------------------------------------------
     STANDARD SMALL PC SCREEN 
    ---------------------------------------------- */
      .Show80Wide
    {
        width:70%;    
    }
    
  .Show60Wide
  {
      width:42%;
  }
      
  #sitecues-badge
  {
      display:none;
  }
    
   #Social
  {
     margin-right:8px;
  }
  #Social img
  {
      height:17px;
      width:17px;
  }
  #SocialLinks
  {
      height:40px;
  }
  #SocialLinks li
  {
      padding:3px;
  }

}


@media screen and (min-width:500px)  and (max-width:750px)
{
   /*---------------------------------------------------------------
    DEFAULT MOBILE STYLES LANDSCAPE VIEW ON MOST PHONES
    ----------------------------------------------------------------*/
    .Show80Wide, .Show60Wide
    {
        width:95%;    
    }
  
  
  
  body
  {
      position:relative;
  }
  
  #BannerImage
  {
      display:none;
  }
  
  #CSUFTopLink, #CSUFLink_Search, #Tabs, #header_LowerScroll
  {
      display:none;
  }
  
  #mobile_header
  {
    display:block;
    height:40px;
    position:fixed;
    top:0px;
    left:0px;
    color:#222;
    background-color:#f4f5f5;
    width:100%;
    z-index:12000;
    border-bottom:solid 1px #ccc;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,d7dee3+100,f5f7f9+100 */
background: #f6f8f9; /* Old browsers */
background: -moz-linear-gradient(top,  #f6f8f9 0%, #d7dee3 100%, #f5f7f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f6f8f9 0%,#d7dee3 100%,#f5f7f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f6f8f9 0%,#d7dee3 100%,#f5f7f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */

}
  
  #mobile_header #btnMobileMenu
  {
    position:relative;
    background-image: none;
    border-radius: 4px;
    border: solid 1px transparent;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    height: 28px;
    width: 28px;
    background-color:transparent;
    color:#222;
    margin-bottom: 8px;
    margin-left: 10px;
    margin-right: 8px;
    margin-top: 5px;
    overflow-x: visible;
    overflow-y: visible;
    padding: 5px;
    text-align: center;
  
  }
  
  #mobile_header #btnMobileMenu:hover
   {
       border:solid 1px #aaa;
       border-top:solid 1px #cbcbcb;
       box-shadow:0px 1px 0px rgba(0,0,0,.4);
       background-color:#f7f7f7;
       background:#f7f7f7;
       color:#333;
   }
  
  .menubar
  {
    display: block;
    float:left;
    width: 15px;
    height: 3px;
    margin-bottom:3px;
    border-radius: 3px;
    background-color:#003366;
    background:#003366;
    color:#fff;
    transition:.25s ease-in-out;
  }
  
   #mobile_header #btnMobileMenu:active .menubar
   {
      background-color:#fff;
      color:inherit;      
   }
   
  .sr-only
  {     
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  background-color:#002B54;
  color:#fff;
  }
  
  #btnMobileMenu:hover .menubar
  {
   background-color:#E17000;
   color:#222;
  }
  
  #btnMobileMenu.mobileon span:nth-child(2).menubar
  {
    top:12px;
    left:5px;    
    position:absolute;
    background-color:#E17000;
    color:#000;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  #btnMobileMenu.mobileon span:nth-child(3).menubar
  {
    opacity:0;
  }
  
  #btnMobileMenu.mobileon span:nth-child(4).menubar
  {
    top:12px;
    left:5px;
    position:absolute;
    background-color:#E17000;
    color:#000;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  #mobile_search
  {
      position:fixed;
      top:2px;
      left:40px;
      width:85%;
      z-index:300000;
  }
  
  #mobile_search label
  {
      position:absolute;
      top:-100px;
      left:100000px;
  }
  
  #mobile_search input[type='text']
  {
       border: solid 1px #002B54;
       font-size:.95em;
       height:18px;
       padding:5px;
       font-weight:normal;
       width:280px;
       margin-top:5px;
       float:right;
       margin-left:5%;
  }
  
  #btnSearchMobile
  {
     border-radius: 4px;
      border: solid 1px rgba(22,55,88, .5);
      cursor: pointer;
        display: block;
  float: right;
  font-size:1em;
  height: 30px;
 /* width: 40px;*/
  margin-bottom: 8px;
  margin-left: 10px;
  margin-right: 20px;
  margin-top: 5px;
  padding: 9px;
  padding-top: 6px;
  text-align: center;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0057ab+0,093864+100 */
  background:#093864;
  background-color:#093864;
  color:#f7f7f7;     
background: #0057ab; /* Old browsers */
background: -moz-linear-gradient(top,  #0057ab 0%, #093864 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #0057ab 0%,#093864 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #0057ab 0%,#093864 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0057ab', endColorstr='#093864',GradientType=0 ); /* IE6-9 */

  }
  
  
  
  #mobile_csuf
  {
      position:fixed;
      float:right;
      right:0px;
      top:0px;
      width:50px;
      height:40px;
      background-color:#003366;
      color:#f7f7f7;
      box-sizing:border-box;
      border-left:solid 1px #f7f7f7;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0f3c73+0,002b54+100 */
background: #0f3c73; /* Old browsers */
background: -moz-linear-gradient(top,  #0f3c73 0%, #002b54 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #0f3c73 0%,#002b54 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #0f3c73 0%,#002b54 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f3c73', endColorstr='#002b54',GradientType=0 ); /* IE6-9 */

  }
  
  #mobile_csuf a
  {
      display:block;
      background: #002b54;
      background-color:inherit;
      color:#fff;
      font-size:.7em;
      font-family:Arial;
       width:auto;
      margin:auto; 
      margin-top:15px;   
      text-align:center; 
  }
  #mobile_csuf a:hover
  {
      text-shadow:1px 1px 3px rgba(200,200,200,.5);
  }
  
  #mobile_header_menu
  {
      display:block;
      position:fixed;
      border-right:solid 1px #9DBED8;
      border-bottom:solid 1px #9DBED8;
      box-shadow:1px 2px 8px rgba(0,0,0,.8);
      top:30px;
      left:-550px;  
      height:100%;
      padding:5px;
      padding-top:15px;
      width:100%;  
      max-width:350px;
      overflow-y:auto;
      color:#fff;
      background:#1D508A;
     
      z-index:10000;
      transition: all 0.8s ease;
  }
  
  #mobile_header_menu ul
  {
      list-style-type:none;
      margin:0px;
      padding:5px;
  }
  
   #mobile_header_menu li
  {
      border-bottom:solid 1px #1c4464;
      border-top:solid 1px #0059ac;
      padding-top:5px;
      padding-bottom:8px;
      margin-top:0px;
      margin-bottom:0px;
      background-color:transparent;
      color:#fff;
  }
  
   #mobile_header_menu li:first-child
   {
       border-top:0px;
   }
   
   #mobile_header_menu li:last-child
   {
       border-bottom:0px;
   }
  
  #mobile_header_menu.mobileopen
  {
    left:0px;
     transition: all 0.8s ease;
 
  }
 
  #mobile_header_menu.mobileclosed
  {
     left:-500px;
    transition: all 0.8s ease;
  }
  
  #mobile_header_menu h1, #mobile_header_menu h2, #mobile_header_menu h3,
  #mobile_header_menu p, #mobile_header_menu li, #mobile_header_menu a
  {
      color:#f7f7f7;
      background:#1D508A;
  }
  
  #mobile_header_menu a
  {
      color:#f7f7f7;
      padding:1%;
      padding-top:6px;
      display:block;
      border-bottom-left-radius:6px;
      border-bottom-right-radius:6px;
      background:#1D508A;
 }
 
  #mobile_header_menu a:hover,
  #mobile_header_menu a:active
  {
      color:#f7f7f7;
 background:#22517B;
  }
  
  #mobile_header_menu h1, #mobile_header_menu h2, #mobile_header_menu h3,
  #mobile_header_menu p, #mobile_header_menu li
  {
      margin-left:5px;
  }
  
  #mobile_header_menu h1, #mobile_header_menu h2, #mobile_header_menu h3,
  #mobile_header_menu p
  {
      margin-bottom:5px;
  }
  
  #mobile_header_menu h1, #mobile_header_menu h2, #mobile_header_menu h3
  {
      line-height:normal;
      padding-bottom:4px;
      margin-bottom:1%;
  }
  
  #mobile_header_menu .sectionnav
  {
      margin:0px;
      padding:0px;
  }
  
  #mobile_header_menu .sectionnav ul:first-child
  {
      margin:1em;
      margin-top:0px;
      margin-bottom:20px;
      padding:0px;
      border-top:solid 2px #f7f7f7;
  }
  
   #mobile_header_menu .sectionnav li
  {
      margin:0px;
      padding:0px;      
  }
  
  #mobile_header_menu .sectionnav button
  {
      background-color:#f7f7f7;
      color:#002B54;
      height:30px;
      width:30px;
      padding:8px !important;
      padding-bottom:15px !important;
      margin-top:15px !important;
  }
  
  .mobile_division a
  {
      font-style:italic;
      font-size:.85em;
  }
   
   #mobile_header_menu .mobile_social
  {
      min-height:28px;
      float:left;
      width:100%;
      margin:0px;
      margin-top:8px;
      margin-bottom:8px;
      padding:0px;
      border:0px;
      background:#efefef;color:#222;
      border-left:solid 6px #E17000;
      border-right:solid 6px #E17000;
      box-sizing:border-box;      
  }
  
  #mobile_header_menu .mobile_social li
  {
      float:left;
      border:0px;
      padding:2px;
      padding-left:5px;
      margin:0px;
      background:inherit;color:inherit;
  }
  
  #mobile_header_menu .mobile_social li a
  {
      background:inherit;
      color:inherit;
      margin:0px;
      padding:0px;  
  }
  
  
  .mobile_sitetabs button
  {
      float:right;
      margin-top:2px;
      margin-bottom:2px;
      background-color:#f7f7f7;
      color:#002B54;
      height:25px;
      width:25px;
      border:solid 1px #f7f7f7;
      border-radius:4px;
  }
  
  .mobileexpand
  {
      display:block;
      font-size:.85em;
      padding-left:10px;      
  }
  
  .mobileexpand ul, .mobileexpand ol
  {
      margin:8px;
      margin-top:12px;     
  }
  
  .mobileexpand img
  {
      max-width:96%;
      height:auto;
      margin:2%;
      padding:0%;
  }
  
  
  .mobilecollapse
  {
      display:none;
    transition: all 0.8s ease;
  }
  
    
    #header
    {
        padding:0%;
        margin-top:50px;
    }
    
    #search
    {
       display:none;
       float:none;
       clear:both;
       position:relative;
    }
    #macronav
    {
       position:absolute;
       top:8px;
       right:5px;
        margin:0%;
        padding:0%;
    }
    
    #branding
    {
        padding-top:30px !important;
    }
    
    #unit, #Tabs2Social, #breadcrumb
    {
       display:none;
    }
   
   
    #sitename
    {
        padding:0%;
        margin:0%;
        font-size:.7em;
    }
    
    #sidebar1, #sidebar2
    {
        clear:both;
        width:95%;
        float:none;
        border-bottom:solid 1px #ccc;
        margin-bottom:30px;
    }
    
     
    #sidebar1 #MainMenu, #sidebar2 #MainMenu 
    {
        display:none;
    }
    
    #sidebar1
    {
        display:none;
    }
    
    #mobile_sidebar1
    {
        background-image:none;
        max-width:95%;
        padding:10px;
        margin:5px;
        background-color:#fff;
        color:#222;
        border:solid 1px #ccc;
        
    }
    #mobile_sidebar1 .sideblock h1, #mobile_sidebar1 .sideblock  h2, #mobile_sidebar1 .sideblock  h3,
  #mobile_sidebar1 .sideblock  p, #mobile_sidebar1 .sideblock  li, #mobile_sidebar1 .sideblock a
    {
        background-color:#fff;
        color:#222;
    }
    
    #mobile_sidebar1 .sideblock img
    {
        float:left;
        width:auto;
        height:auto;
        clear:both;
    }
    
    .Show80Wide, .Show60Wide
    {
        width:100%;
    }
     /*--- Section Navigation --- */
.sectionnav
{
    margin:0px;
    padding:0px;
    padding-top:.8em;
}
.sectionnav ul
{
    list-style-type:none;
    margin:0px;
    margin-left:5px;
    
}

.sectionnav li
{
    padding:.5%;
    border-bottom:solid 1px #3073AD;
    border-top:solid 1px #C3DCF6;
}

.sectionnav li:first-child
{ border-top:0px;   }

.sectionnav li:last-child
{ border-bottom:0px;   }

.sectionnav a
{   
    display:block;
    text-decoration:none;
    font-size:1em;
    padding-left:1%;
}

.sectionnav h3
{  font-family: 'open_sansbold';
    font-weight: 800;
    text-transform:uppercase;
    font-size:1em;
    line-height:1.8em;
    color:#686868;
    margin:0px;
    padding-left:5px;
}

/*---------- VERTICAL NAV -----------------------*/

#VerticalNavMenu
{
    position:fixed;
    top:35px;
    left:-97%;   
    width:93%;
    height:100%;
    background-color:#474747;
    color:#ebebeb;
    z-index:500;
    transition:left .6s;
}

#MobileVertNavSlider
{
    display:block;
    position:fixed;
    height:70%;
    left:0px;
    padding:3px;
    padding-top:65%;
    width:6px;
    background-color:#1D508A;
    color:#fdfdfd;
    z-index:515;
    text-align:center;
    font-size:.6em;    
    transition:all .6s;
}

.hideleft
{
    left:0px;
    text-align:right;   
}

#VerticalNavMenu.hideleft
{
    left:-100%;
    text-align:left;
}

#VerticalNavMenu.showright
{
    left:0px;
}

#MobileVertNavSlider.showright
{
    left:92% !important;
    width:30px;
    text-align:left;  
}

#VerticalNavMenu a
{
    background-color:#474747;
    color:#ebebeb;
}

#VerticalNavMenu button
{
    color:#f7f7f7;
}

#VerticalNavMenu ul li ul
{
    background-color:#474747;
    color:#ebebeb;
    border-bottom:solid 0px #121212;
    border-top:solid 0px #C2C2C2;
}

#VerticalNavMenu ul li ul li
{
    background-color:#474747;
    color:#ebebeb;
    border-bottom:solid 1px #121212;
    border-top:solid 1px #C2C2C2;
}

#VerticalNavMenu li
{
    border-bottom:solid 1px #121212;
    border-top:solid 1px #C2C2C2;
}

#centercontent
{
    padding-top:5px;
}



    
    /* --- CSUF CLASSES FIXES --- */
    .CalendarBlock1, .CalendarBlock2, 
    .featureBlock1, .featureBlock2, .featureBlock3
    {
        width:100%;
        float:none;
        clear:both;
    }
    
    .divA, .divB, .divC, .divD, .divE, .divF, .divG, .divH,
    .divI, .divJ, .divK, .divL, .divM, .divN, .divO, .divP,
    .divQ, .divR, .divS, .divT, .divU, .divV, .divW, .divX,
    .divY, .divZ
    {
       width:98% !important;
       display:block !important;       
       clear:both !important;
       float:left !important;        
       margin:auto;
       padding:.2em; 
    }   

	img.linkicon
	{
		height:auto !important;
		width:auto !important;
	}
	
	#MainContent
	{
	    padding-left:15px;
	}
	
/*----------------------------------------
slide show
----------------------------------------*/
.Slideshow_shell, .slider_container, .slide_image, .slide_caption, .slide_show, .Slideshow_Navbar
{
    clear:both;
    float:left !important;
    width:98% !important;
    position:relative !important;
    display:block; 
    margin:0px;
    padding:1%;
    background-color:#fff;
    color:#333;
    top:0px !important;
}

.Slideshow_shell
{
   border:solid 1px #ccc !important;   
}

.slide_caption h2, .slide_caption p
{
    padding:5px;
    font-size:.8em;    
}

	
	
/*----------------------------------------
FOOTER FIXES
----------------------------------------*/
    #divFooter .logo 
	{
	    margin:5px;
	    margin-left:18px;
	    
	    padding:0% !important;
	    float:none;
	    border-right:0px solid #ccc;
    }
    
#divFooter .disclaimer
{
    float:none;
    margin:1%;
    margin-top:0%;
    padding:0%;
    padding-top:4px;
    padding-left:1%;
    width:95%;
    border-left:solid 0px #bcbcbc;     
}

#divFooter .accessibility h2
{
    font-size:1em;
    width:95%;
    margin-bottom:2px;
}

#divFooter .accessibility ul
{
    font-size:1em;
    width:95%;
    margin:1%;
    margin-top:4px;
}


#divFooter .accessibility li
{
    font-size:1em;
    width:95%;
    margin:1%;
    margin-top:4px;
}



 /*---------------------------
    Mobile Social Media tabs
   -----------------------------*/
.mobile_social
{
    list-style-type:none;
}


 /*---------------------------
    T4 divContainers
   -----------------------------*/
   
   #divContentContainer1, #divContentContainer2, #divContentContainer3,
   #divContentContainer4, #divContentContainer5, #divContentContainer6,
   #divContentContainer7, #divContentContainer8, #divContentContainer9,
   #divContentContainer10, #divContentContainer11, #divContentContainer12
   {
        float:none;
        clear:both;
        display:block;
        width:100% !important;
        min-height:50px !important;
        margin:0px !important;
        padding:0px !important;
        
    }
    
    #divContentContainer1 div, #divContentContainer2 div, #divContentContainer3 div,
    #divContentContainer4 div, #divContentContainer5 div, #divContentContainer6 div,
    #divContentContainer7 div, #divContentContainer8 div, #divContentContainer9 div,
    #divContentContainer10 div, #divContentContainer11 div, #divContentContainer12 div
   {
       margin:0px;
       padding:0px;
       margin-bottom:1px;
   }
    
    
    /*-------------------------------------
    parallax fixes
------------------------------------------------*/

.parallax_group.emptycontent
{
    display:none !important;
}

.parallax_group.hascontent
{
    display:block;
}

.parallax_group
{
    position:relative !important;
    margin:0px !important;
    padding:0px !important;
    height:auto;
}
.parallax
{
    
    overflow-x:visible;
    overflow-y:visible;
    
}

.parallax_image 
{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  margin:0px;
  padding:0px;  
  background-color:#f7f7f7;
  color:#000;
  transform-origin-x: 100%;
  transform: translateZ(0px) scale(1); 
}

.parallax_image div
{
  position:absolute;
  top:0px;
  left:0px;
  width:100% !important;
  margin:0px !important;
 
}

.parallax_image_bg
{
    margin:0px;
    padding:0px;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;    
    height:290px;
    background-size:100% 100%;
}

.parallax_content 
{
  position:relative !important;
  margin:3% !important;
  padding:2% !important;
  width:90%;
  height:auto;
  min-height:250px;
  overflow-y:scroll;
  background-color:rgba(255,255,255,.98);
  color:#222;
  z-index:3000;
  box-shadow:1px 1px 3px rgba(0,0,0,.6);
}
    

    
}


@media screen and (min-width:0px) and (max-width:499px)
{

/*---------------------------------------------------------------
DEFAULT MOBILE STYLES FOR NAVIGATION AND GENERAL PAGE ELEMENTS
----------------------------------------------------------------*/
  .Show80Wide, .Show60Wide
  { width:95%;
  }

  body
  {
      position:relative;
  }
  #BannerImage
  {
      display:none;
  }
  
  #CSUFTopLink, #CSUFLink_Search, #Tabs, #header_LowerScroll
  {
      display:none;
  }
  
  #mobile_header
  {
      display:block;
    height:40px;
    position:fixed;
    top:0px;
    left:0px;
    color:#222;
    background-color:#f4f5f5;
    width:100%;
    z-index:12000;
    border-bottom:solid 1px #ccc;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,d7dee3+100,f5f7f9+100 */
background: #f6f8f9; /* Old browsers */
background: -moz-linear-gradient(top,  #f6f8f9 0%, #d7dee3 100%, #f5f7f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f6f8f9 0%,#d7dee3 100%,#f5f7f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f6f8f9 0%,#d7dee3 100%,#f5f7f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */

    
  }
  
  #mobile_header #btnMobileMenu
  {
    position:relative;
    background-image: none;
    border-radius: 4px;
    border: solid 1px transparent;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 14px;
    height: 28px;
    width: 28px;
    background-color:transparent;
    color:#222;
    margin-bottom: 8px;
    margin-left: 10px;
    margin-right: 8px;
    margin-top: 5px;
    overflow-x: visible;
    overflow-y: visible;
    padding: 5px;
    text-align: center;
  
  }
  
   #mobile_header #btnMobileMenu:hover
   {
       border:solid 1px #aaa;
       border-top:solid 1px #cbcbcb;
       box-shadow:0px 1px 0px rgba(0,0,0,.4);
       background-color:#f7f7f7;
       background:#f7f7f7;
       color:#333;
   }
  
  .menubar
  {
    display: block;
    float:left;
    width: 15px;
    height: 3px;
    margin-bottom:3px;
    border-radius: 3px;
    background-color:#003366;
    background:#003366;
    color:#fff;
    transition:.25s ease-in-out;
  }
  
   #mobile_header #btnMobileMenu:active .menubar
   {
      background-color:#fff;
      color:inherit;      
   }
   
  .sr-only
  {     
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  background-color:#002B54;
  color:#fff;
  }
  
  #btnMobileMenu:hover .menubar
  {
   background-color:#E17000;
   color:#222;
  }
  
  #btnMobileMenu.mobileon span:nth-child(2).menubar
  {
    top:12px;
    left:5px;    
    position:absolute;
    background-color:#E17000;
    color:#000;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  #btnMobileMenu.mobileon span:nth-child(3).menubar
  {
    opacity:0;
  }
  
  #btnMobileMenu.mobileon span:nth-child(4).menubar
  {
    top:12px;
    left:5px;
    position:absolute;
    background-color:#E17000;
    color:#000;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  #mobile_search
  {
      position:fixed;
      top:0px;
      left:50px;
      height:40px;
      box-sizing:border-box;
      border-right:#aaa;
      z-index:300000;
  }
  
  #mobile_search label
  {
      position:absolute;
      top:-100px;
      left:100000px;
  }
  
  #mobile_search input[type='text']
  {
       border: solid 1px #002B54;
       font-size:.95em;
       height:18px;
       padding:5px;
       font-weight:normal;
       width:170px;
       margin-top:5px;
       float:right;
  }
  
  #btnSearchMobile
  {
     border-radius: 4px;
     border: solid 1px rgba(22,55,88, .5);
  cursor: pointer;
  display: block;
  float: right;
  font-size: 14px;
  height: 30px;
  width: 60px;
  margin-bottom: 8px;
  margin-left: 8px;
  margin-top: 5px;
  padding: 9px;
  padding-top:5px;
   text-align: center;
  background:#093864;
  background-color:#093864;
  color:#f7f7f7;     
background: #0057ab; /* Old browsers */
background: -moz-linear-gradient(top,  #0057ab 0%, #093864 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #0057ab 0%,#093864 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #0057ab 0%,#093864 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0057ab', endColorstr='#093864',GradientType=0 ); /* IE6-9 */

  
  }
  
  #mobile_csuf
  {
      position:fixed;
      right:0px;
      top:0px;
      width:50px;
      height:40px;
      z-index:300000;
      background-color:#003366;
      color:#f7f7f7;
      box-sizing:border-box;
      border-left:solid 1px #f7f7f7;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0f3c73+0,002b54+100 */
background: #0f3c73; /* Old browsers */
background: -moz-linear-gradient(top,  #0f3c73 0%, #002b54 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #0f3c73 0%,#002b54 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #0f3c73 0%,#002b54 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f3c73', endColorstr='#002b54',GradientType=0 ); /* IE6-9 */

  }
  
  #mobile_csuf a
  {
      display:block;      
      background: #002b54;
      background-color:inherit;
      color:#fff;
      font-size:.7em;
      font-family:Arial;
      width:auto;
      margin:auto; 
      margin-top:15px;   
      text-align:center; 
  }
  #mobile_csuf a:hover
  {
      text-shadow:1px 1px 3px rgba(200,200,200,.5);
  }
  
  #mobile_header_menu
  {
      display:block;
      position:fixed;
      border-right:solid 1px #9DBED8;
      border-bottom:solid 1px #9DBED8;
      box-shadow:1px 2px 8px rgba(0,0,0,.8);
      top:30px;
      left:-550px;  
      height:100%;
      padding:5px;
      padding-top:15px;
      width:100%;  
      z-index:11000;
      max-width:350px;
      overflow-y:auto;
      color:#fff;
      background:#1D508A;
     
      transition: all 0.8s ease;
  }
  
  #mobile_header_menu ul
  {
      list-style-type:none;
      margin:0px;
  }
  
   #mobile_header_menu li
  {
      border-bottom:solid 1px #1c4464;
      border-top:solid 1px #0059ac;
      padding-top:2px;
      padding-bottom:8px;
      margin-top:0px;
      margin-bottom:0px;
      background-color:transparent;
      color:#fff;
  }
  
   #mobile_header_menu li:first-child
   {
       border-top:0px;
   }
   
   #mobile_header_menu li:last-child
   {
       border-bottom:0px;
   }
  
  #mobile_header_menu.mobileopen
  {
    left:0px;
     transition: all 0.8s ease;
 
  }
 
  #mobile_header_menu.mobileclosed
  {
     left:-500px;
    transition: all 0.8s ease;
  }
  
  #mobile_header_menu h1, #mobile_header_menu h2, #mobile_header_menu h3,
  #mobile_header_menu p, #mobile_header_menu li, #mobile_header_menu a
  {
      color:#f7f7f7;
      background:#1D508A;
  }
  
  #mobile_header_menu a
  {
      color:#f7f7f7;
      padding:1%;
      padding-top:6px;
      display:block;
      border-bottom-left-radius:6px;
      border-bottom-right-radius:6px;
      background:#1D508A;
 }
 
  #mobile_header_menu a:hover,
  #mobile_header_menu a:active
  {
      color:#f7f7f7;
 background:#22517B;
  }
  
  #mobile_header_menu h1, #mobile_header_menu h2, #mobile_header_menu h3,
  #mobile_header_menu p, #mobile_header_menu li
  {
      
  }
  
  #mobile_header_menu h1, #mobile_header_menu h2, #mobile_header_menu h3,
  #mobile_header_menu p
  {
      margin-bottom:5px;
  }
  
  #mobile_header_menu h1, #mobile_header_menu h2, #mobile_header_menu h3
  {
      line-height:normal;
      padding-bottom:4px;
      margin-bottom:1%;
  }
  
  #mobile_header_menu .sectionnav
  {
      margin:0px;
      padding:0px;
  }
  
  #mobile_header_menu .sectionnav ul:first-child
  {
      margin:1em;
      margin-top:0px;
      margin-bottom:20px;
      padding:0px;
      border-top:solid 2px #f7f7f7;
  }
  
   #mobile_header_menu .sectionnav li
  {
      margin:0px;
      padding:0px;      
  }
  
  #mobile_header_menu .sectionnav button
  {
      background-color:#f7f7f7;
      color:#002B54;
      height:30px;
      width:30px;
      padding:8px !important;
      padding-bottom:15px !important;
      margin-top:15px !important;
  }
  
  #mobile_header_menu .mobile_division
  {
      margin-top:10px;
  }
  .mobile_division a
  {
      font-style:italic;
      font-size:.85em;
  }
  
  #mobile_header_menu .mobile_social
  {
      min-height:28px;
      float:left;
      width:100%;
      margin:0px;
      margin-top:8px;
      margin-bottom:8px;
      padding:0px;
      border:0px;
      background:#efefef;color:#222;
      border-left:solid 6px #E17000;
      border-right:solid 6px #E17000;
      box-sizing:border-box;
      
  }
  
  #mobile_header_menu .mobile_social li
  {
      float:left;
      border:0px;
      padding:2px;
      padding-left:5px;
      margin:0px;
      background:inherit;color:inherit;
  }
  
  #mobile_header_menu .mobile_social li a
  {
      background:inherit;
      color:inherit;
      margin:0px;
      padding:0px;  
  }
  
  
  .mobile_sitetabs button
  {
      float:right;
      margin-top:2px;
      margin-bottom:2px;
      background-color:#f7f7f7;
      color:#002B54;
      height:25px;
      width:25px;
      border:solid 1px #f7f7f7;
      border-radius:4px;
  }
  
  .mobileexpand
  {
      display:block;
      font-size:.85em;
      padding-left:10px;      
  }
  
  .mobileexpand ul, .mobileexpand ol
  {
      margin:8px;
      margin-top:12px;     
  }
  
  .mobileexpand img
  {
      max-width:96%;
      height:auto;
      margin:2%;
      padding:0%;
  }
  
  
  .mobilecollapse
  {
      display:none;
    transition: all 0.8s ease;
  }
  
    
    #header
    {
        padding:0%;
        margin-top:50px;
    }
    
    #search
    {
       display:none;
       float:none;
       clear:both;
       position:relative;
    }
    #macronav
    {
       position:absolute;
       top:8px;
       right:5px;
        margin:0%;
        padding:0%;
    }
    
    #branding
    {
        padding-top:30px !important;
    }
    
    #unit, #Tabs2Social, #breadcrumb
    {
       display:none;
    }
   
   
    #sitename
    {
        padding:0%;
        margin:0%;
        font-size:.7em;
    }
    
    #sidebar1, #sidebar2
    {
        clear:both;
        width:95%;
        float:none;
        border-bottom:solid 1px #ccc;
        margin-bottom:30px;
        box-sizing:border-box;
    }
    
     
    #sidebar1 #MainMenu, #sidebar2 #MainMenu 
    {
        display:none;
    }
    
    #sidebar1
    {
        display:none;
    }
    
    #mobile_sidebar1
    {
        background-image:none;
        max-width:95%;
        padding:10px;
        margin:5px;
        background-color:#fff;
        color:#222;
        border:solid 1px #ccc;
        
    }
    #mobile_sidebar1 .sideblock h1, #mobile_sidebar1 .sideblock  h2, #mobile_sidebar1 .sideblock  h3,
  #mobile_sidebar1 .sideblock  p, #mobile_sidebar1 .sideblock  li, #mobile_sidebar1 .sideblock a
    {
        background-color:#fff;
        color:#222;
    }
    
    #mobile_sidebar1 .sideblock img
    {
        float:left;
        width:auto;
        height:auto;
        clear:both;
    }
    
    .Show80Wide, .Show60Wide
    {
        width:100%;
    }
     /*--- Section Navigation --- */
.sectionnav
{
    margin:0px;
    padding:0px;
    padding-top:.8em;
}
.sectionnav ul
{
    list-style-type:none;
    margin:0px;
    margin-left:5px;
    
}

.sectionnav li
{
    padding:.5%;
    border-bottom:solid 1px #3073AD;
    border-top:solid 1px #C3DCF6;
}

.sectionnav li:first-child
{ border-top:0px;   }

.sectionnav li:last-child
{ border-bottom:0px;   }

.sectionnav a
{   
    display:block;
    text-decoration:none;
    font-size:1em;
    padding-left:1%;
}

.sectionnav h3
{  font-family: 'open_sansbold';
    font-weight: 800;
    text-transform:uppercase;
    font-size:1em;
    line-height:1.8em;
    color:#686868;
    margin:0px;
    padding-left:5px;
}

/*---------- VERTICAL NAV -----------------------*/

#VerticalNavMenu
{
    position:fixed;
    top:35px;
    left:-97%;   
    width:93%;
    height:100%;
    background-color:#474747;
    color:#ebebeb;
    z-index:500;
    transition:left .6s;
}

#MobileVertNavSlider
{
    display:block;
    position:fixed;
    height:70%;
    left:0px;
    padding:3px;
    padding-top:65%;
    width:6px;
    background-color:#1D508A;
    color:#fdfdfd;
    z-index:515;
    text-align:center;
    font-size:.6em;    
    transition:all .6s;
}

.hideleft
{
    left:0px;
    text-align:right;   
}

#VerticalNavMenu.hideleft
{
    left:-100%;
    text-align:left;
}

#VerticalNavMenu.showright
{
    left:0px;
}

#MobileVertNavSlider.showright
{
    left:92% !important;
    width:30px;
    text-align:left;  
}

#VerticalNavMenu a
{
    background-color:#474747;
    color:#ebebeb;
}

#VerticalNavMenu button
{
    color:#f7f7f7;
}

#VerticalNavMenu ul li ul
{
    background-color:#474747;
    color:#ebebeb;
    border-bottom:solid 0px #121212;
    border-top:solid 0px #C2C2C2;
}

#VerticalNavMenu ul li ul li
{
    background-color:#474747;
    color:#ebebeb;
    border-bottom:solid 1px #121212;
    border-top:solid 1px #C2C2C2;
}

#VerticalNavMenu li
{
    border-bottom:solid 1px #121212;
    border-top:solid 1px #C2C2C2;
}

#centercontent
{
    padding-top:5px;
}



    
    /* --- CSUF CLASSES FIXES --- */
    .CalendarBlock1, .CalendarBlock2, 
    .featureBlock1, .featureBlock2, .featureBlock3
    {
        width:100%;
        float:none;
        clear:both;
        margin:1%;        
        box-sizing:border-box;
    }
    
    .divA, .divB, .divC, .divD, .divE, .divF, .divG, .divH,
    .divI, .divJ, .divK, .divL, .divM, .divN, .divO, .divP,
    .divQ, .divR, .divS, .divT, .divU, .divV, .divW, .divX,
    .divY, .divZ
    {
       width:98% !important;
       display:block !important;       
       clear:both !important;
       float:left !important;        
       margin:auto;
       padding:0%;
       box-sizing:border-box; 
    }   

	img.linkicon
	{
		height:auto !important;
		width:auto !important;
	}
	
	#MainContent
	{
	    padding:1%;
	}
	
/*----------------------------------------
slide show
----------------------------------------*/
.Slideshow_shell, .slider_container, .slide_image, .slide_caption, .slide_show, .Slideshow_Navbar
{
    clear:both;
    float:left !important;
    width:98% !important;
    position:relative !important;
    display:block; 
    margin:0px;
    padding:1%;
    background-color:#fff;
    color:#333;
    top:0px !important;
}

.Slideshow_shell
{
   border:solid 1px #ccc !important;   
}

.slide_caption h2, .slide_caption p
{
    padding:5px;
    font-size:.8em;    
}

/*------------------------------------------
FEATURE BLOCKS
-----------------------------------------------*/


.featureBlock5_white
{
    top:2%;
    
}
	
	
/*----------------------------------------
FOOTER FIXES
----------------------------------------*/
    #divFooter .logo 
	{
	    margin:5px;
	    margin-left:18px;
	    
	    padding:0% !important;
	    float:none;
	    border-right:0px solid #ccc;
    }
    
#divFooter .disclaimer
{
    float:none;
    margin:1%;
    margin-top:0%;
    padding:0%;
    padding-top:4px;
    padding-left:1%;
    width:95%;
    border-left:solid 0px #bcbcbc;     
}

#divFooter .accessibility h2
{
    font-size:1em;
    width:95%;
    margin-bottom:2px;
}

#divFooter .accessibility ul
{
    font-size:1em;
    width:95%;
    margin:1%;
    margin-top:4px;
}


#divFooter .accessibility li
{
    font-size:1em;
    width:95%;
    margin:1%;
    margin-top:4px;
}



 /*---------------------------
    Mobile Social Media tabs
   -----------------------------*/
.mobile_social
{
    list-style-type:none;
}


 /*---------------------------
    T4 divContainers
   -----------------------------*/
   
   #divContentContainer1, #divContentContainer2, #divContentContainer3,
   #divContentContainer4, #divContentContainer5, #divContentContainer6,
   #divContentContainer7, #divContentContainer8, #divContentContainer9,
   #divContentContainer10, #divContentContainer11, #divContentContainer12
   {
        float:none;
        clear:both;
        display:block;
        width:100% !important;
        min-height:50px !important;
        margin:0px !important;
        padding:0px !important;
        
    }
    
    #divContentContainer1 div, #divContentContainer2 div, #divContentContainer3 div,
    #divContentContainer4 div, #divContentContainer5 div, #divContentContainer6 div,
    #divContentContainer7 div, #divContentContainer8 div, #divContentContainer9 div,
    #divContentContainer10 div, #divContentContainer11 div, #divContentContainer12 div
   {
       margin:0px;
       padding:0px;
       margin-bottom:1px;
   }
    
    
    /*-------------------------------------
    parallax fixes
------------------------------------------------*/

.parallax_group.emptycontent
{
    display:none !important;
}

.parallax_group.hascontent
{
    display:block;
}

.parallax_group
{
    position:relative !important;
    margin:0px !important;
    padding:0px !important;
    height:auto;
}
.parallax
{
    
    overflow-x:visible;
    overflow-y:visible;
    
}

.parallax_image 
{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  margin:0px;
  padding:0px;  
  background-color:#f7f7f7;
  color:#000;
  transform-origin-x: 100%;
  transform: translateZ(0px) scale(1); 
}

.parallax_image div
{
  position:absolute;
  top:0px;
  left:0px;
  width:100% !important;
  margin:0px !important;
 
}

.parallax_image_bg
{
    margin:0px;
    padding:0px;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;    
    height:290px;
    background-size:100% 100%;
}

.parallax_content 
{
  position:relative !important;
  margin:3% !important;
  padding:2% !important;
  width:90%;
  height:auto;
  min-height:250px;
  overflow-y:scroll;
  background-color:rgba(255,255,255,.98);
  color:#222;
  z-index:3000;
  box-shadow:1px 1px 3px rgba(0,0,0,.6);
}
    

}

@media screen and (min-width:0px) and (max-width:330px)
{
    
    /*---------------------------------------------
        iPhone 5 / older smart phone fixes
    -------------------------------------------------------*/
    #mobile_header_menu
  {
      display:block;
      position:fixed;
      border-right:solid 1px #9DBED8;
      border-bottom:solid 1px #9DBED8;
      box-shadow:1px 2px 8px rgba(0,0,0,.8);
      top:30px;
      left:-550px;  
      height:100%;
      padding:5px;
      padding-top:15px;
      width:100%;  
      max-width:310px;
      overflow-y:auto;
      color:#fff;
      background:#1D508A;
     
      z-index:10000;
      transition: all 0.8s ease;
  }
  
   #mobile_search
  {
      position:fixed;
      top:0px;
      left:50px;
      height:40px;
      box-sizing:border-box;
      border-right:#aaa;
      z-index:300000;
  }
  
  #mobile_search label
  {
      position:absolute;
      top:-100px;
      left:100000px;
  }
  
  #mobile_search input[type='text']
  {
       border: solid 1px #002B54;
       font-size:.95em;
       height:18px;
       padding:5px;
       font-weight:normal;
       width:130px;
       margin-top:5px;
       float:right;
  }
  
  #btnSearchMobile
  {
       border-radius: 4px;
      border: solid 1px rgba(22,55,88, .5);
  cursor: pointer;
  display: block;
  float: right;
  font-size: 14px;
  height: 30px;
  width: 60px;
  margin-bottom: 8px;
  margin-left: 8px;
  margin-top: 5px;
  padding: 9px;
  padding-top: 5px;
  text-align: center;
  background:#093864;
  background-color:#093864;
  color:#f7f7f7;     
background: #0057ab; /* Old browsers */
background: -moz-linear-gradient(top,  #0057ab 0%, #093864 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #0057ab 0%,#093864 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #0057ab 0%,#093864 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0057ab', endColorstr='#093864',GradientType=0 ); /* IE6-9 */

  
  }
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                   END OF BASE MOBILE STYLES                                         +
+     IF YOU WANT TO OVER RIDE THESE STYLES PLEASE DO IT AT THE VERY BOTTOM OF THIS   +
+     CHANGES TO THESE STYLES WILL BE COPIED OVER THE ENTIRE SECTION                  +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/