body {

 /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top right, #FFFFFF 0%, #000000 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #000000 100%);

/* Opera */ 
background-image: -o-linear-gradient(top right, #FFFFFF 0%, #000000 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #000000));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #000000 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom left, #FFFFFF 0%, #000000 100%); 

	background-image: url("http://www.grahamsyfert.com/outside.syfert.office.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

outer{
    position:relative;
    width:800px;
}

inner{
    position:absolute;
    left:0;
    top:0;
    height:600px;
    width:400px;
}

inner2{
    position:absolute;
    left:405px;
    top:0;
    height:600px;
    width:400px;
    
}
.button {
   position: relative;
   width: 200px;
   border-top: 1px solid #c2cbd1;
   background: #858e94;
   background: -webkit-gradient(linear, left top, left bottom, from(#010b12), to(#858e94));
   background: -webkit-linear-gradient(top, #010b12, #858e94);
   background: -moz-linear-gradient(top, #010b12, #858e94);
   background: -ms-linear-gradient(top, #010b12, #858e94);
   background: -o-linear-gradient(top, #010b12, #858e94);
   padding: 4.5px 9px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 17px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #18191a;
   background: #18191a;
   color: #ccc;
   }
.button:active {
   border-top-color: #666666;
   background: #666666;
   }
   
.formbutton {
   border-top: 1px solid #1a3342;
   background: #293238;
   background: -webkit-gradient(linear, left top, left bottom, from(#a31414), to(#293238));
   background: -webkit-linear-gradient(top, #a31414, #293238);
   background: -moz-linear-gradient(top, #a31414, #293238);
   background: -ms-linear-gradient(top, #a31414, #293238);
   background: -o-linear-gradient(top, #a31414, #293238);
   padding: 6.5px 13px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 12px;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.formbutton:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.formbutton:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

.paybutton {
   border-top: 1px solid #ffffff;
   background: #8ab854;
   background: -webkit-gradient(linear, left top, left bottom, from(#2ba608), to(#8ab854));
   background: -webkit-linear-gradient(top, #2ba608, #8ab854);
   background: -moz-linear-gradient(top, #2ba608, #8ab854);
   background: -ms-linear-gradient(top, #2ba608, #8ab854);
   background: -o-linear-gradient(top, #2ba608, #8ab854);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.paybutton:hover {
   border-top-color: #25851c;
   background: #25851c;
   color: #ccc;
   }
.paybutton:active {
   border-top-color: #d0eb03;
   background: #d0eb03;
   }

#crossfade {
    position:relative;
    height:250px;
    width:400px;
}
#crossfade img {
    position:absolute;
    left:0;
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;    
    transition: opacity 1s ease-in-out;
}
 
#crossfade img.top:hover {
    opacity:0;
}