.sacrificial {
/* overarching settings */
}
  * {
		margin: 0;
		padding: 0;
  }
  
  html {
		background: url('../images/logo_icon/seamlesstexture29_1200.jpg') repeat fixed center;
  }

  body {
		font-family: "Century Gothic", times;
		font-size:16px; 
		color:#707070;
		position:absolute;
		width:12800px;
		top:0;
		bottom:0;
  }

  h1 {
    color: black;
    font-size:30px;
    font-weight:bolder;
  }
  h4 {
    margin-top:    0.5em;
    margin-bottom: 0.5em;
  }
  ul {
    list-style: none outside none;
  }
  .white {
    color: black;
  }
  .black {
    color: white;
  }

	table tr td {
		vertical-align:top;
	}


  /* basic layout */
  
  #logo {
    width:200px;
    margin-left: 24px;
    position: absolute;
  }

  #header {
    7E7E7;  
    height: 120px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 500;
  }

  #header>div {
    /* so we can use position:absolute in the footer if needed */
    position:relative;
  }

  /* column widths : left 22% (125px) 720px(wide)   */
  #vernav {
    position: fixed;
    top: 20%;
    z-index: 1000;
  }

  
  #content {
    /* background: url('../images/logo_icon/seamlesstexture29_1200.jpg') repeat; */
    background-origin:content-box;
    width:12400px;
    /*background-color: #E7E7E7;   green*/
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 100;
  }


  /* Structural geometry for horizontal slide
   *  article > div.hor-slide(#section1, 2 etc)  > (logo || div.column1, div.column2)
  
 /* had to change this for IE 9 - doesn't recognize section, too many to use conditional comments
  *section {
  *  position:relative;
  *}
  */
 
  #article>div {
		position:relative;
  }
  /* end if change for IE */

  #article {
		margin-top: 55px;
  }
  #article>div.hor-slide
  {
		width: 1280px;
		height: 650px; /* this needs to have a height but its not sensitive, column1 height controls it */
  }
  #section {
		width: 1280px;
  }
  .hor-slide {
    float:left;
  }
  .hor-slide>div {
     display:none;
  }
  

  #footer {
    background-color:#000080;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 520;
    color: #fff;
    text-align: center;
    height: 40px;
  }

  #footer a,
  #footer a:visited {
    color: #fff;
  }
/* header detail */
  
  #topline {
    width: 100%;
    height: 10%;
    background: #000080;
  }
  #midline {
    width: 100%;
    height: 60%;
    position: absolute;
  }
  #midtop, #midbot {
    height: 50%;
    position: relative;
  }
  #midtop {
    border-bottom: #ccc solid .09em;
  }
  #midbot {
    width:1280px;
  }
  #logo {
    position: absolute;
    background: url(../images/logo_icon/logo_white_b.png) no-repeat;
    width: 200px;
    height: 91px;
    background-size: 200px 91px;
    z-index: 10;
  }
  #slogan {
    margin-top: 3.5em;
    margin-left: 18em;
    font-family: "Century Gothic",times;
    font-weight:bold;
    font-size: .9em;
    color: #800000;
    text-transform: uppercase;
    float: left;
  }
  #slogan_b {
    margin-left: -2em;
    color: #000080;
  }

/* footer detail */

  #footer>div {
    padding: .5em;
    text-transform: uppercase;
    font-size: .6em;
    letter-spacing: .05em;
    margin-top: 1.2em;
    position: relative;
  }
  #footer>div span {
    padding-left: 1em;
  }

  #copyright  {
		float:left;
		width:600px;
		margin-left: 35px;
		margin-top:12px;
		height: 25px;
		display: inline-block;
		color: #707070;
  }

/* nav appearance and behaviour */

  a{
    color: #000080;
    text-decoration: none;
  }
  ul.nav {
    list-style: none outside none;
  }
  ul.nav li a {
		background:#d3d3d3;
		background:-webkit-gradient(linear,left top,left bottom,color-stop(#E7E7E7,0),color-stop(#d3d3d3,1));
		background:-webkit-linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		background:-moz-linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		background:-o-linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		background:linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#E7E7E7', endColorstr='#d3d3d3',GradientType=0 );
  }
  ul.nav li a.current {
    position:relative;
    //pjm add gradient
		background:#dae1e9;
		background:-webkit-gradient(linear,left top,left bottom,color-stop(#eaf1f9,0),color-stop(#dae1e9,1));
		background:-webkit-linear-gradient(top, #eaf1f9 0%, #dae1e9 100%);
		background:-moz-linear-gradient(top, #eaf1f9 0%, #dae1e9 100%);
		background:-o-linear-gradient(top, #daeaf1f91e9 0%, #dae1e9 100%);
		background:linear-gradient(top, #eaf1f9 0%, #dae1e9 100%);
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf1f9', endColorstr='#dae1e9',GradientType=0 );

    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color: #bebebe;
  }
  
  #navb, #navigation  {
    /* top right nav */
    position: fixed;
    right: 0;
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
    color: #707070;
  }


  #navb ul {
    margin-left:150px;
    font-size:18px;
  }
  #navb li {
    color: #FF00FF;
    float: left;
    padding: 12px 0 10px 0;
    margin:  0 10px;
  }
  #navb li.current {
    border-top: 3px solid #000080;
    padding: 9px 0 10px 0;
  }
  
  #navb li a {
    width: 120px;
    border-radius: 10px;
    box-shadow: 1px -1px 1px 2px rgba(0,0,0,0.4);
    display: inline-block;
    padding: 5px 0px;
    margin: 1px 2px 1px 2px;
    outline: none;
    text-decoration: none;
    text-align:center;
    /* in class PJM
		background:#d3d3d3;
		background:-webkit-gradient(linear,left top,left bottom,color-stop(#E7E7E7,0),color-stop(#d3d3d3,1));
		background:-webkit-linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		background:-moz-linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		background:-o-linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		background:linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#E7E7E7', endColorstr='#d3d3d3',GradientType=0 );
		*/
  }


  #navb li a:hover {
    //background: rgba(0,0,0,0.5);
    margin: 2px 3px 0 1px;
    box-shadow: 2px -2px 1px 3px rgba(0,0,0,0.3);/* dx, dy, blur, spread */
    
  }

  #navb li a:active {
    background: rgba(0,0,0,0.4);
    box-shadow: 2px -2px 2px 3px rgba(0,0,0,0.3);
  }

  #navb li a.current {
    xxbackground-color: #000080;
  }
  
  img.icon {
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    margin-right: 15px;
    padding: 2px 4px;
    border-color: #ccc;
    cursor: pointer;
    vertical-align: inherit;
  }


  /* Start Blue Navigation -- ref: http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/ */
  .a-btn{
		background:#d3d3d3;
		background:-webkit-gradient(linear,left top,left bottom,color-stop(#E7E7E7,0),color-stop(#d3d3d3,1));
		background:-webkit-linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		background:-moz-linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		background:-o-linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		background:linear-gradient(top, #E7E7E7 0%, #d3d3d3 100%);
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#E7E7E7', endColorstr='#d3d3d3',GradientType=0 );
		padding-left:20px;
		padding-right:80px;
		height:38px;
		display:inline-block;
		position:relative;
		border:1px solid #bebebe;
		-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
		-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
		box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
		-webkit-border-radius:0 20px 20px 0;
		-moz-border-radius:0 20px 20px 0;
		border-radius:0 20px 20px 0;
		float:left;
		clear:both;
		margin:10px 0px;
		overflow:hidden;
		-webkit-transition:all 0.3s linear;
		-moz-transition:all 0.3s linear;
		-o-transition:all 0.3s linear;
		transition:all 0.3s linear;
  }
  .a-btn-text{
		padding-top:5px;
		display:block;
		font-size:18px;
		white-space:nowrap;
		text-shadow:0px 1px 1px rgba(255,255,255,0.3);
		color:#000080;
		-webkit-transition:all 0.2s linear;
		-moz-transition:all 0.2s linear;
		-o-transition:all 0.2s linear;
		transition:all 0.2s linear;
  }
  .a-btn-slide-text{
		position:absolute;
		height:100%;
		top:0px;
		right:52px;
		width:0px;
		background:#000080;
		text-shadow:0px -1px 1px #363f49;
		color:#fff;
		font-size:18px;
		white-space:nowrap;
		/* text-transform:uppercase; */
		text-align:left;
		text-indent:10px;
		overflow:hidden;
		line-height:38px;
		-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
		-moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
		box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
		-webkit-transition:width 0.3s linear;
		-moz-transition:width 0.3s linear;
		-o-transition:width 0.3s linear;
		transition:width 0.3s linear;
  }
  .a-btn-icon-right{
		position:absolute;
		right:0px;
		top:0px;
		height:100%;
		width:52px;
		border-left:1px solid #bebebe;
		-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
		-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
		box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
  }
  .a-btn-icon-right span{
		width:38px;
		height:38px;
		opacity:0.7;
		position:absolute;
		left:50%;
		top:50%;
		margin:-20px 0px 0px -20px;
		background:transparent url(../images/logo_icon/arrow_right.png) no-repeat 50% 55%;
		-webkit-transition:all 0.3s linear;
		-moz-transition:all 0.3s linear;
		-o-transition:all 0.3s linear;
		transition:all 0.3s linear;
  }
  .a-btn:hover{
		padding-right:460px; /* JS adjust the blue space-text */
		-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
		-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
		box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
  }
  .a-btn:hover .a-btn-text{
		text-shadow:0px 1px 1px #bebebe;
		color:#000080;
		font-weight:bold;
  }
  .a-btn:hover .a-btn-slide-text{
		width:380px; /* JS adjust the blue space-text */
  }
  .a-btn:hover .a-btn-icon-right span{
		opacity:1;
  }
  .a-btn:active{
		position:relative;
		top:1px;
		background:#ccc;
		-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
		-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
		box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
		border-color: #bebebe;
  }
  .button-wrapper{
    margin: 0 auto;
    padding: 20px 0;
  }
  .nav li a.current {
    font-weight:bold;
  }
  #a-btn-home:hover .a-btn-slide-text{
      width:250px;
  }
  #a-btn-home:hover {
      padding-right:331px;
  }
  #a-btn-wher:hover .a-btn-slide-text{
      width:240px;
  }
  #a-btn-wher:hover {
      padding-right:319px;
  }
  #a-btn-what:hover .a-btn-slide-text{
      width:428px;
  }
  #a-btn-what:hover {
      padding-right:512px;
  }
  #a-btn-how-:hover {
      padding-right:500px;
  }
  #a-btn-how-:hover .a-btn-slide-text{
      width:420px;
  }
  #a-btn-orgs:hover .a-btn-slide-text{
      width:412px;
  }
  #a-btn-orgs:hover {
      padding-right:492px;
  }
 /* -- End Blue Navigation -- */

 
/* detail layout */

  .column1 {
    margin-top : 70px;
    margin-left:310px;
    width:   280px; 
    height:580px;   /* 580+70 is the height of the div.hor-slide  can we set it there?*/
    padding: 0 20px 0 0;
    float: left;
    overflow:auto;
  }
    
  
  .column2 {
    float: left;
    margin-top : 70px;
    width :500px;       /* std size */
    height:580px;       /* 580+70 is the height of the div.hor-slide */
    position:relative;  /* reset origin for pos abs if needed */
  }

/* internal variations */  

  .wide_a {
    width:350px;
  
  }
  .wide_b {
    width:500px;
  }

  .wide_c {
    width:630px;
  }
  .wide_d {
    width:760px;
  }

  .wide_e {
  /* max width for column1 with no column2 (allow for scrollbar) */
    width:950px;
  }
  
  .narrow_a {
    /* mainly for filmstrip */
    width:300px;
  }
  .narrow_b {
    /* mainly for filmstrip */
    width:182px;
  }
 
  /* -- CodeSmiths Logo alternative to SVG -- */
  
  .midcon {
    width: 900px;
    position: absolute; 
    top: 50px; 
    left: 500px;
  }
  #LOGO1
  {
    font-family: "Century Gothic", times;
    position: relative; 
    top: -4px; 
    left: 6.2%;
    margin-left: 50px; 
    margin-bottom: 100px;
    width:360px;
  }
  #LOGO2
  {
    font-family: "Century Gothic", times;
    position: absolute; 
    top: 0; 
    left: 0;
    margin-top: 35px; 
    margin-left: 100px;
  }
  .CLS { color: silver; }
  .CLN { color: navy; }
  .CLM { color: maroon; }

  .CL1 { font-size: 370px; margin-top:  000px; margin-left: 000px; }
  .CL2 { font-size: 097px; margin-top: -280px; margin-left: 69px; }
  .SL1 { font-size: 270px; margin-top: -162px; margin-left: 241px; }
  .SL2 { font-size: 090px; margin-top: -174px; margin-left: 360px; }

/* general section (page)  internals */ 

  .column1 ul {
    list-style: disc outside none;
    padding-left: 1em;
  }

  .form {
    margin-top : 70px;
    margin-left: 25px;
    width :480px; 
    height:510px;
    padding: 10px 40px 0;
    border-radius: 20px;
    font-size: 13px;
    
    /* JS */
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 32px #ccc;
    -webkit-box-shadow: 0 0 32px #c0c0c0;
    box-shadow: 0 0 60px #c0c0c0;
  }


/* overlay divs */

  .control a {
    /* close button -- simple */
    background: #000080;
    border-radius: 8px;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    display: inline-block;
    outline: medium none;
    padding: 3px 8px; /* JS 2px; */
    text-align:center;
  }


  .forum, .forum p {
		color: #000000;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
  }
  
 /* better done in jQuery  
  .forum p:hover,
  .forum li:hover {
    background-color: #eaf1f9;
  }
*/

  #roster1 {
    display:none;
  }
  form#MF3  {
    margin-left:50px;
  }
  
  #MF3 input {
    border-width: 5px solid #F7F7F7;
    margin-bottom: 5px;
  }
  input#B1 {
    background-color:#000080;
    font-weight:bold;
    color:#FFF;
    border: 5px solid #000080;
    border-radius:5px;
    box-shadow: 5px 5px 5px #532;

  }

/* just for roster images */
  .zoom img {
    width:  317px;
    height: 234px;
    margin: 117px 157px 0 157px;
    display:block;
/*  now done in jQuery for IE  
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
         -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
            transition: all 1s ease;
*/            
		border: 10px solid #808080;
		border-radius: 20px;
    box-shadow: 4px 4px 2px 0 #aaa; /* dx, dy, blur, spread */
  }
  img.zoomed {
/*
    margin: 20px 0 0 -70px;
    width:  634px;
    height: 467px;
*/
    box-shadow: 10px 10px 5px 0 #bbb; /* dx, dy, blur, spread */
  }


	.pic_b {
		overflow: hidden;
		margin: 50px;
		position: relative;
		float: left;
		border: 10px solid #c0c0c0;
		box-shadow: 5px 5px 5px #111;
		-webkit-box-shadow: 5px 5px 5px #111;
		border-radius: 20px;
		background: rgba(0,0,0,0.3);  /* JS Test--Fixing What do we do page-orig rgba(0,0,0,0.3); */
		display:block;
		/* JS 
		border: 1px solid #ccc;
		-moz-box-shadow: 0 0 32px #ccc;
		-webkit-box-shadow: 0 0 32px #c0c0c0;
		box-shadow: 0 0 60px #c0c0c0;*/
		
	}

	.pic_b a {
		display:block;
	  padding: 0;
  }
	.pic_b a img {
		display:block;
  }

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
	ul.polaroids a:hover
	{
		-webkit-transform: scale(1.25);
		-moz-transform: scale(1.25);
		-ms-transform: scale(1.25);
		transform: scale(1.25);
		position: relative;
		z-index: 5;
	}
/* On hover, darken the shadows a bit */
	ul.polaroids a:hover {
		-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
		-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
	}

/* Add drop shadows and smooth out the transition (Safari only) */
	ul.polaroids a {
	  transition: transform 1s;
	  transition: scale 1s;
		-webkit-transition: -webkit-transform .15s linear;
		-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
		-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	}

/* Extra */

	ul.polaroids a {
		background: #CCC; /*#fff; #808080;*/
		display: inline;
		float: left;
		margin: 0 20px 30px 30px;
		width: auto;
		padding: 10px 10px 15px;
		text-align: center;
		font-family: "Marker Felt", sans-serif;
		text-decoration: none;
		color: #fff; /*#333;*/
		font-size: 18px;
		-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
		-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

	}

	ul.polaroids img {
		display: block;
		width: 230px; /* JS 190px; */
	}

/* -- End Polaroid gallery -- */

/* start scrollbox gallery */


/* container width = img wid + fimstrip margin - fsm ~21*2) + scrollbar ~25  */
	#scrollContainer {
		width:178px;    /* needs to be adjusted for image width + image padding + scrollbar */
		padding-left:4px;
		height:580px; /* JS Test--Fixing What do we do page -- orig 645px; */
		overflow:auto;
	}

	#scrollbox {
		padding:0; 
		margin:0; 
		list-style:none; 
		height: 3200px; /* height = ~160px * nmr slides (20) */
		background:url(../images/what/css/film6.png)  repeat-y;
		z-index: 2000;
	} 


/* img width and height - adjust padding for fsm */
	#scrollbox a img.thumb { 
		display:block; 
		padding:3px 22px 3px 22px; 
		border:0;  
	}

	#-scrollbox a:hover {border:0;}
	#-scrollbox a:hover img.thumb {display:none;}
	#-scrollbox :hover > a img.thumb {display:none;}

/* debug  600 x 676 image & captions   change to 500 high (ensure enough for largest (img ht & caption  */
	#scrollbox div {
		/* move the inside div (large img and caption) off screen */
		padding:0; 
		margin:0; 
		position:absolute; 
		left:-9999px; 
		top :-9999px;
		width:430px; 
		height:580px; 
		background-color: #CCC;
	}
	#scrollbox div a img {
		display:block; 
		border:0; 
		margin:0 auto;
	}
	#scrollbox div a span {
		margin: 5px 40px; 
		background:url(../images/what/css/backing.png); 
		color:#fff; 
		width:330px;
		display:inline-block;
		padding: 0 10px;
		text-align: left; 
		font-size:12px; 
		line-height:18px;
	}
	#scrollbox div a span b {
		display:block;
		font-size:16px; 
		padding:5px 10px 0 0 ;
	}


/* display the div when hover on the scrollbox of thumbs */
/* #scrollbox li:first-child div , PJM debug */
	#scrollbox :hover div {
		top : 0; 
		left:-426px; /* Must abut the scrollbox to maintain hover */
	}

/*  just adds padding to the top for mixed landscape and portrait galleries,*/
	#scrollbox :hover div.landscape a img{
		display:block; 
		padding-top:35px;
	}


/* #scrollbox li:first-child div a span, PJM debug */
	/* JS what do we do page: 
	#scrollbox div:hover a span {*/



/* end scrollbox */


/* Slide bar -- ref:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/ */
	::-webkit-scrollbar {
      width: 15px;
	} /* this targets the default scrollbar (compulsory) */

	::-webkit-scrollbar-track {
				background-color: #000080 ; /* #b46868; */
	} /* the new scrollbar will have a flat appearance with the set background color */
	::-webkit-scrollbar-thumb {
				background-color: rgba(25,25,112, 1);
	} /* this will style the thumb, ignoring the track */
	::-webkit-scrollbar-button {
				background-color: #191960 ;/* #7c2929; */
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
	::-webkit-scrollbar-corner {
				background-color: #000;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

/* End slide bar */
/* gallery */
/*  this sets the width for the whole gallery complex!*/

	#fe-gallery {
		width: 630px; 
		top: 100px;
	}

	/* PJM layout for controls placed by jQuery */
	.fe-view {
			width: 30px;
			position:absolute;
			right: -30px;
	}
	.fe-view a {
		margin-top: 10px;
	}
/* End gallery */

/* adjustments  */
  input {
    font-size: 16px;
  }
  
  /* JS BG */
  /* basic layout */
  #bg, #mp {
    display:none;
    position:fixed;
    top:    110px;
    left:   300px;
    width:  770px;
    height: 640px;
    background-color:#CCC;  /* blue*/
    z-index:1000;
    overflow:auto;
  }
  #bg>div, #mp>div {
    position:relative;
    width:100%;
    text-align:left;
    margin: 20px auto;
  }
  #bg-close>div, #mp-close>div {
    /* shield content from position: fixed */
    position:relative;
  }
  #bg-close, #mp-close{
    position: fixed; /* JS absolute; */
    right: 436px;    /* JS 30px; */
    top:   708px;    /* JS 510px; */
    cursor:pointer;
  } 
  #bg-link, #mp-link {
    cursor: pointer;
    font-weight:bold;
    /* text-decoration: underline; */
  }  
  #abouttext, #mpimage {
    color: #000;
    margin:  0 30px;
  }
  /* working with overflowing text */

  .page {
    vertical-align: middle;
  }
  .indent {
    margin-left: 10%;
  }
  .space {
    margin-top: 10px;
    color: #000080;
  }
  #map_canvas {
    width: 400px;
    height:300px;
    display: inline-block;
    text-align:right;
  }
  #abouttext>img {
    border-radius: 20px;
  }

  /* Mail form */
  iframe {
    height: 40px;
    width: 400px;
    margin-left: 20px;
    border: none;
    font-size: 16px;
    font-weight: bold;
  }