/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   

   /* The below references the UL Class named "nav" in the index. This is the navigation bar*/
    .nav
    {
    background-color:#CC6CE7; /* Background color of the navigation bar   */
    list-style-type: none;
          text-align: center;
          margin: 0;
          padding: 10px;
          overflow: hidden; /* hides overflow from the "buttons" and the nav bar borders */         
          border: 2px solid black; /* Border type and color of the navigation bar   */  
         
    }

    /* List for the nav bar*/
     .nav li /* .nav li defines only the LI elements in the nav class*/
      { 
        display:INLINE;
        text-align: center;
      }
      .nav li a
      {
        display:inline;
        padding: 8px; /* Padding seperates each nav bar option. In this case by 8 Pixels */
        text-decoration: none;
      }
      .nav li a:hover  
      {
        border-style: inset;/* Sets the border to inset when hovered over*/
        background-color:#C704FE;  
      }     
      
   .sidebar
   {
     border: 10px double black;
     float: right;
     text-align: center;
     height: 100%;
     Width: 15%;
     margin: auto;
     background-color: #CC6CE7;
   }
   
   .sidebar p
    {
     text-shadow: 2px 2px black;
     font-size:14px ;
     
    }
      
    .box-text 
    {
      list-style-type: circle;       
        color: Black;
        border: 10px double black; /* Code for black border "Solid" Indicates border type "*/
        /* height:100%; */
        /*float: left;  /* Puts the main content pane to the left */
        width:700px; /* sets the width to 600px which lets the side bar sit nicely next to it */
        background-color: #CC6CE7;
      
    }
    .box-text h2
    {
      color: white;
        background-color: #420BF7;
        padding-left: 25px;
        /* text-align: left; */
        text-shadow: 2px 2px black;
        box-shadow: 2px 2px black;
    }
    
    
        /* The below references and manages the text within the "hero-text" class in the main HTML Index file*/
    .hero-text 
      {
        text-align: center;  /* Aligns to the center*/
        color: white;
        text-shadow: 2px 2px black; /* Adds shadow to the test, 2px by 2px with the drop shadow being black  */
      }
      
     .Rumiabounce
      {
        margin: auto;
        text-align: center;
        padding: 15px;
      }
      
      
      
      .Fumoheader
      {
        text-align: center;
        text-shadow: 2px 2px black;
      }
      
      .Indexcontent 
      {
        list-style-type: circle;       
        color: Black;
        border: 10px double black; /* Code for black border "Solid" Indicates border type "*/
        /* height:100%; */
        /*float: left;  /* Puts the main content pane to the left */
        width:700px; /* sets the width to 600px which lets the side bar sit nicely next to it */
        background-color: #CC6CE7;
      }
      .Introduction h2
      {
        color: white;
        background-color: #420BF7;
        padding-left: 25px;
        /* text-align: left; */
        text-shadow: 2px 2px black;
        box-shadow: 2px 2px black;
      }
      .Introduction p
      {
        padding: 25px; 
        
      }
      
      .Travcon
      {
        list-style-type: circle;
        color: Black;
        padding-left: 5px;
        border: 10px double black; /* Code for black border "Solid" Indicates border type "*/
        float: left; /* Puts the main content pane to the left*/
        width:700px; /* sets the width to 600px which lets the side bar sit nicely next to it */
        background-color: #add8e6;
        margin-bottom: 10px;
      }
      
      .Travcon h2
      {
        color: white;
        text-align: center;
        text-shadow: 2px 2px black;
      }
      
      .Pictable1 
      {
        border: 10px double black;
        text-shadow: 2px 2px black;
        margin: auto;
        background-color: #CC6CE7;
      }
      .Pictable1 td
      {
        padding: 30px;
        border: 2px double black;   
        text-align: center;
      }
      
      .Devblogcontent
      {  
        padding: 30px;
        color: Black;
        border: 10px double black; /* Code for black border "Solid" Indicates border type "*/
        background-color: #CC6CE7;
      }
      
      .Guestbook
      {
        float: left; 
        height:100%;
        width:100%;
        border: 2px double black;
      }
      
      
    footer
      {
        text-align: center;
        padding: 25px;
        text-shadow: 2px 2px black;
      }
      
      
    body /* Seems to affect everything inside the body if not defined by class??*/
      {     
        
          /* Code for background image. Will Repeat if size not defined. Also code for text color and font as well as page size*/
          background-image: url("5018.png"); 
          background-color: Black;
          color: White;
          font-family: Verdana;
          width: 900px; 
          height:900px;
          margin: auto;

      }