/*   Main 281st style page    */

/*  FOR 281st.com/index.html only with no viewportcss    */

body {
    background-color:#556b2f;
	background-image: url("tigerstripe-mitchell.gif");
	color:blue;
   	font-family:Arial, Verdana, sans-serif;
	margin: 0 auto;
	overflow:auto;
	position:relative;
 }

 /* SUPERHEADER -- container for 1st and 3rd column items 
    allows adjustments and additions to header and below  */

#superheader {
    background:transparent;
    height:1px;
    margin: 0 auto 0 auto;             
    width:40em;
    position:relative;
 }

 /* waving flag in upper left corner outside main column
	col 1 row 1  */

.upperleft {
	color:white;
	font-size:xx-small;
	font-style:italic;
	font-weight:normal;
	height:auto;
	padding: 1em 0 1em 0;
	text-align:left;
	width:20em;
	position:absolute;
        left:-30em;
	top:5px;
        z-index:2;
}

  /*  left column menu col 1 row 2 */

  #nav {
   background-image:url('images/valley-tigers-right.jpg');
   left:-13em;
   padding: 0 0.5em;
   position: absolute;
   text-align:right;
   top:17em;
   width: 10em;
}

 /* left colum col 1 row 3 */

#pic-left-pos3 {
   background-image:url('images/background/paper05.jpg'); 
   color:black;
   font-size:small;
   font-style:italic;
   left:-27em;
   padding-left:10px;
   position: absolute;
   top:820px;
   width:24em;
 }
 
/* left column col 1 row 4 */

#pic-left-pos4 {
   background-image:url('images/background/paper05.jpg'); 
   color:black;
   font-size:small;
   font-style:italic;
   left:-18em;
   padding-left:20px;
   position: absolute;
   top:950px;
   width:14em;
 }
 
 
/*  Intruder patch upper right outside main column 
    col 3 row 1   */

.upperright  {
	height:22em;	
	width:25em;
	position:absolute;
	left:41em;
	top:5px;
}

 /* right column Members col 3 row 2  */

#sidebar {
   background-image:url('images/alt-right2.png');
   background-color:transparent;
   padding: 0 0.5em;
   text-align:left;
   width: 10em;
   position: absolute;
   left:42em;
   top:22em;
 }

 /* pic col 3 row 3  */

 #pic-col3row3 {
   position: absolute;
   left:51em;
   top:800px;
   background-image:url('images/background/paper05.jpg'); 
   color:black;
   font-size:small;
   font-style:italic;
   padding-left:20px;
   padding-right:20px;
   width:14em;
  }

   /* pic col 3 row 4  */

#pic-col3row4 {
   position: absolute;
   left:42em;
   top:975px; /* 225px more than row 3 */
  }

/*  END SUPERHEADER  */
 
/* HEADER col 2 row 1
	reunion and book info at top of central column
	background-color: #d2b48c; tan #556b2f OD
	background-image:url('images/background/arlingtonsnow3.png'); 
    background-image:url('images/background/arlington-autumn2.jpg');*/

#header {
   background-color: #556b2f;
   background-image:url('images/background/arlingtonsnow3.png');   
   color:black;
   font-weight:bolder;
   height:9em;
   margin:5px auto 6px auto;
   padding: 20px 10px 0px 10px;
   text-align:center;   
   width:40em;
 }

 /* vertical scroll aka marquee  =  see vertscroll.css  */
 
 /* center column main content
	  upper left corner is zero for all absolute positions. */

#main {
	background-color: #d2b48c;
	background-image:url("images/background/paper04.jpg");
	margin: 0 auto 0 auto;
	padding: 10px 10px 10px 10px;	
	position:relative;
	text-align:center;
	width: 40em; 
}

/* the whispered phrase "Sure the LZ is secure .." */ 

.whisper  {
	color: #993300;
	font-family: Arial, Verdana, sans-serif;
	font-size: x-large;
	font-style: italic;
	font-weight: 700;
	top: 5em;
}

 /* In use class for items in sidebar and nav, menus outside main column */

.amenu  {
	background-color:transparent;
	color:yellow;
	font-size:0.9em;
	font-family: arial, verdana, sans-serif;
	font-weight:bold;
	padding-top:2px;
	text-decoration:none;
}

/* position, etc for delta patch in text. Don't ask why this works.   */

.deltapatch  {
	bottom:80em;
	color:green;
  	float:right;
	font-size:.9em;
	height:auto;
	left:2em;
	margin: 0 0 0 0;
	padding: 3em 1em 1em 1em;
	position:relative;
	width:21em;
}
 
h2 {
	color:blue;
	font-size:1em;
}

h3 {
	font-size:2em;
	font-style:italic;
}

a:hover {
	background-color:red;
}

.tac {
	text-align:center;
}

.justy {
	text-align:justify;
}

 /* area below main and of that same width       */

#footer {
   border-top: 1px solid #369;
   clear: left;
   padding-left:5em;
 }

/* photo ownership */

p.pnotice {
	font-family: Arial, Verdana, sans-serif;
	font-size: .9em;
	margin-left:auto;
	margin-right:auto;
	text-align: justify;
}

/* the army's first special ops ... */

p.tacleft {
	text-align:justify;
}

/* THE RED BUTTON OPENS POP-UP  */

/*  VET HELP MODAL BOX      */

/* The Modal (background) */

.modal {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  display: none; /* Hidden by default */
  height: 100%; /* Full height */
  left: 0;
  overflow: auto; /* Enable scroll if needed */
  position: fixed; /* Stay in place */
  top: 0;
  z-index: 1; /* Sit on top */
  width: 100%; /* Full width */
}

/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  border: 10px solid #800;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  width: 60%; /* Could be more or less, depending on screen size */
}

/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

caption {
	height:3em;
}