@import "reset.css";

/*         FULL SITE LAYOUT      */
/*-------------------------------*/
/*     Nav (816px)   Now 918px      */
/*-------------------------------*/
/*                      |        */
/*                      |        */
/*                      |        */
/*                      |        */
/*       Section        |  Right */
/*       (fluid)        | (200px)*/
/*                      |        */
/*                      |        */
/*                      |        */
/*-------------------------------*/

body {
	margin: 0; 
	padding: 0;
	background: #fff; /** White - content background color */
	color: #000; /** Black - content text color */
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;
}

a {
	text-decoration: none;
}

a img {
	border: none;
}

img {
    max-width: 100%;
    height: auto;
}

p {
	margin: 0 0 1em 0;
}

h1 {
	margin: 0 0 .3em 0;
	font-size: 2em;
	font-weight: bold;
	
}

header {
	background: #193479; /** background color BPR Blue #193479 */
	height: 172px;
	width: 100%;
}

nav ul {
	list-style-type: none;
	text-align: center;
}

nav {
	width: 1020px; /* button bar width, one line until changes to mobile - was 816px */ 
}

nav ul li a {
    float: left; /* Nav on same line until won't fit, then next line */
    padding: 10px 8px 10px 8px; /* Makes big buttons */
	font-weight: bold;
	color: white;
	background: #999999;  /** nav background color 40% gray */
    border-right: 1px solid white;  /* Vert line between buttons */
    border-bottom: 1px solid white;  /* Horizontal line at bottom between buttons */
    width:85px; /* button width on wide device - was 85px */
}

nav.loggedin ul li a {
	background: #ff0000;  /** nav background color RED WHEN LOGGED IN */
	width:105px; /* button width on wide device - was 85px */
}

section {                
 	float: left;             
 	padding: 1% 1% 0em 1%;   
 	/* margin-right: 200px;     Narrow aside not needed now that we have 10 buttons */
}                                           


section article h2 {
	font-weight: bold;
}

em {
	font-style: italic;
}

#right {                    
	float: right;            
   	/* width: 200px;        narrow aside width full site not needed now with 10 buttons */
   	/* margin-left: -200px; narrow aside width full site not needed now with 10 buttons */
}

aside {
    border: 2px solid #193479;
	margin-bottom: 5px;
	margin-left: 2px;
}

aside h1 {
	background: #193479;
	color: #fff;
	padding: 1px 5px 7px 5px;
	font-size: 1.25em;
}

aside p {
    margin: 0;
	padding: 3%;
}

footer {
	clear: both;
	padding: 1.5em 1.5em;
	background: #193479; /** footer background color Bluff Park Realty Blue */
	color: white;
}

footer a {
	color: yellow; /** footer link color */
	text-decoration: none;
}


/* ----------- Wide Desktop View ----------- */ 

/*        WIDE DESKTOP >1163px      Now 1100px  */
/*-----------------------------------*/
/*          Nav (816px)              */
/*-----------------------------------*/
/*                      |            */
/*                      |            */
/*                      |            */
/*                      |            */
/*       Section        |    Right   */
/*       (fluid)        |   (350px)  */
/*                      |            */
/*                      |            */
/*                      |            */
/*-----------------------------------*/
@media only screen and (min-width : 1020px)  {

  section {
	float: left;
	padding: 1% 1% 0em 1%;
	/* margin-right: 350px; REMOVED TO FIXED PROBLEM ON AGENT PAGE WITH NO RIGHT DIV */
	margin-right: auto;  /* REPLACED WITH THIS TO FIX AGENT PAGE WITH NO RIGHT DIV */
	margin-right: 350px; /* HAD TO PUT BACK OR BROKE OTHER PAGES !!! THIS IS PROBLEM WITH AGENT PAGE, WORKS GREAT WITHOUT THIS LINE BUT BREAKS OTHER PAGES!!! */
  }

  #right {   /* was #right */
	  float: right;
   	  width: 350px;  /* aside width full site */
      margin-left: -350px; 
  }
  
}

/* ----------- Mobile View ----------- */ 
/* keep max-width at same pixel width as button bar - was 815px */
/* MOBILE SITE 815px  then 917 Now 1019px */
/*--------------------*/
/*     |              */
/*     |              */
/*     |              */
/*     |              */
/* Nav |   Section    */
/* 85px|   (fluid)    */
/*     |              */
/*     |              */
/*     |              */
/*--------------------*/
/*    Right (fluid)   */
/*--------------------*/
@media only screen and (max-width : 1019px)  {
   
   nav {
   		float: left; /* show nav vertical on mobile device */
   		width: 100px;  /* button width area on mobile device - was 100px */
   		margin-right: -100px;
   }

	section {
		float: left;
		margin-left: 100px;
		margin-right: auto; /* stops margin-right: 200px; from full site css above */
	}

   nav ul li a {
	  font-weight: bold;
	  color: white;
	  background: #999999;  /** nav background color 40% gray */  
      border-right: 1px solid white;  /* Vert line between buttons */
      border-bottom: 1px solid white;  /* Horizontal line at bottom between buttons */
      width:85px; /* Fixed button width on mobile device - was 85px */
   }

   nav.loggedin ul li a {
      width:105px; /* Fixed button width on mobile device - was 85px */
}

         
	#right {
		clear: both; /* move  aside to bottom */
		width:100%; /* show full width aside */
		margin-bottom: 5px;
	}

}