@charset "utf-8";

/*
   Filename: tsdc_styles.css
*/


/* Import Basic Design Styles */

@import url('tsdc_designs.css');

/* ===============================
	General Styles for All Devices
   ===============================
*/

/* Bottom Navigation Styles */

nav#bottom {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}

nav#bottom ul {
   flex: 0 1 150px;
}

a#navicon {
	display:none;
}

/* ===============================
	Mobile Styles up to 480 pixels
   ===============================
*/
	
@media only screen and (max-width: 480px) {

   /* Body Styles */
      
   body {
      background: white;
      color: black;
      border-left: 1px solid rgb(51, 51, 51);
	  border-right: 1px solid rgb(51, 51, 51);
	  box-shadow: rgb(51, 51, 51) 15px 0px 25px, 
	              rgb(51, 51, 51) -15px 0px 25px;
   }
   
      
   /* Hidden Objects under Mobile */
      
   aside, aside#events, section#spotlight, footer section {
      display: none;
   }

  ul.submenu {
	display:none;
  }

/*  
  nav#top ul {
	display:none;	
}
*/  
  
  /*  Navigation   */  
  
   /* Top & Middle Navigation Styles 
      
   nav#top ul.mainmenu, nav#middle ul.midmenu {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center; 
      background-color: black;
   }
 */  
   nav#top ul.mainmenu li {
      font-size: 1.2em;
      line-height: 1.75em;
   }
  
  
/*   nav#top {
      font-size: 1em;
      line-height: 2em;
   }
/*   
   nav#top ul {
	display:flex;
	flew-flow:row wrap;
	}    
	
	nav#top li {
	  flex:1 1 20px;
    }
 */  

  a.submenuTitle:hover+ul.submenu, ul.submenu:hover {
	display:block;
  }
      
  nav#top  ul.submenu {
      width:80%;
      background-color: rgb(246, 177, 177); 
      font-weight:bold;
      margin:0 auto;
     /*    position:absolute;
   z-index:5;   */
      justify-content: center;
      align-items: center;     
      }

    nav#top  ul.submenu li a {
    	font-size:1em;
    	color:black;
    	line-height:2em;
   }
      
     
      
   /* Telephone and Email Styles */
      
   p#links {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
   }
   
   p#links a {
      background-color: rgb(220, 27, 27);
      border-radius: 20px;
      color: white;
      padding: 10px;
      text-decoration: none;
   }
}

/* ============================================
	Tablet and Desktop Devices: 481px or more 
   ============================================
*/

@media only screen and (min-width: 481px) {

   /* Body Layout */
      
   body {
	   display: flex;
	   flex-flow: row wrap;
	   border-left: 1px solid rgb(51, 51, 51);
	   border-right: 1px solid rgb(51, 51, 51);
	   box-shadow: rgb(51, 51, 51) 15px 0px 25px, 
	               rgb(51, 51, 51) -15px 0px 25px;   
   }
   
   article {
      flex: 2 1 450px;
   }
   
   aside {
      flex: 1 2 150px;
   }
   
   /* Top & Middle Navigation Styles */
      
   nav#top ul.mainmenu, nav#middle ul.midmenu {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      background-color: black;
      height: 60px;
   }
   
   nav#top ul.mainmenu li, nav#middle ul.midmenu li {
      flex: 0 1 80px;
   }
   
	a.submenuTitle:hover+ul.submenu, ul.submenu:hover {
	   display: block;
	}
   
    nav#top  ul.submenu {
      position: absolute;
      background-color: rgb(246, 177, 177); 
      font-weight:bold;
      }

    nav#top  ul.submenu li a {
    	text-align:left;
    	font-size:0.9em;
    	color:black;
   }
   
    nav#middle  ul.midmenu {
      position: absolute;
      width: 33%;
      background-color:black;
   }

    nav#middle  ul.midmenu li a {
    	text-align:left;
    	font-size:0.9em;
   }
   
   
 /* Links & Features Styles */  
   
   p#links {
      display: none;
   }
   
   div#tsdc_features p {
	margin-bottom:5px;
	}

   div#tsdc_features > ul > li {
	 padding-left:40px;
	 line-height:1.5em;
	 color:rgb(200,0,0);
	 margin-top:0;
	 margin-bottom:5px;
	 font-weight:600;
	 padding-right:20px;
	}

}