/**
   rounded corner, use
   <div class="rc">
      <div class="rc_top"><span></span></div>
      <div class="rc_content">
	 content here
      </div>
      <div class="rc_bottom"><span></span></div>
   </div>

   concept from http://www.search-this.com/2007/02/12/css-liquid-round-corners/
*/

.rc {
   width: 100%;
   margin: 5px auto;
   background: #f3f3f3 url(http://www.yxi.com/images/leftside.gif) repeat-y left top;
   z-index: -1;
}

.rc_top {
   width: 100%;
   height: 20px;
   background: url(http://www.yxi.com/images/top.gif) no-repeat left top;
   z-index: -1;
}

.rc_top span {
   display: block;
   /*position: relative;*/
   height: 20px;
   background: url(http://www.yxi.com/images/top-right.gif) no-repeat right top;
   z-index: -1;
}

.rc_content {
   /*position: relative;*/
   background: url(http://www.yxi.com/images/rightside.gif) repeat-y right top;
   padding: 1px 10px 1px 10px ;
   /* top right bottom left */
   /* margin: -10px 0 -10px 0; */
   margin: 0px 0px 0px 14px;
   z-index: -1;
}

.rc_bottom {
   height: 20px;
   background: url(http://www.yxi.com/images/bottom.gif) no-repeat left bottom;
   z-index: -1;
}

.rc_bottom span {
   display: block;
   /*position: relative;*/
   height: 20px;
   background: url(http://www.yxi.com/images/bottom-right.gif) no-repeat right top;
   z-index: -1;
}


* {
   font-family: Arial, Helvetica;
   font-family: Arial, Helvetica;
}

.style1 {
   /*
   color: #f00;
   */
   font-weight: bold;
}

.it {
   font-style:italic;
}

a img {
   border: none;
}

.floatright {
   float: right;
}

em {
   font-style: normal;
   color: #891308;
}

hr {
   border: none 0;
   border-top: 1px solid #891308;
}

body {
   font-size: 12px;
/*
   background: #eee url('http://www.yxi.com/images/back.png') repeat-y scroll center;
*/
   /*margin:0px;*/
}

h2 { 
}

h3 { 
   font-size: 17px;
   color: #891308;
}

/* use this to pull up the first header */
.top_header {
   margin-top: -10px;
}

h4 { 
   font-size: 15px;
   color: #3566b0;
}

h5 {
   font-size: 13px;
}

#wrapper {
   background-color: #fff;
   width: 780px;
   margin: auto;
}

#header_wrapper {
   /* border: 1px solid #000; */
   background-color: #0f0;
}

#topmenubar {
   overflow: auto;
}

#topmenubar ul li .last {
   border-width: 0 0 0 0;
}

#topmenubar ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

#topmenubar ul li {
   display: inline;
}

#topmenubar li img {
   border-width: 0 0 0 0;
   background-color: #999;
}

#topmenubar li a {
   font-size: 11px;
   float: right;
   /*width: 8em;*/
   padding-left: 1em;
   padding-right: 1em;
   text-align: center;
   border-style: solid;
   border-width: 0 1px 0 0;
   border-color: #999;
   text-decoration: none;
   color: #000;
   margin-bottom: 1px;
   margin-top: 1px;
}

#topmenubar li a:hover {
   color: #00f;
   text-decoration: underline;
}

/* without this we get menu bars after clicking privacy policy */
#topmenubar ul li a:focus {
   outline:0px;
}

#logo_wrapper {
   /*display: inline;*/
   /*background-color: #00f;*/
}

#logo_wrapper a, #logo_wrapper a {
}

#logo_wrapper img {
   outline:0px;
}

#menubar_wrapper {
}

#menubar {
   overflow: auto;
}

#menubar ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

#menubar ul li {
   display: inline;
}

#menubar li a {
   /*font-size: 13px;*/
   font-size: 1.1em;
   float: right;
   font-weight: bold;
   /*width: 8em;*/
   padding-left: 1em;
   padding-right: 1em;
   text-align: center;
   border-style: solid;
   border-width: 0 1px 0 0;
   border-color: #999;
   text-decoration: none;
   margin-bottom: 1px;
   margin-top: 0px;
   height: 16px;
   /*background-image: url('http://www.yxi.com/images/g2.png');*/
   color: #555;
}

#menubar li a:hover {
   color: #891308;
   /*background-image: url('http://www.yxi.com/images/menuback.png');*/
   text-decoration: underline;
}
/* without this we get menu bars after clicking privacy policy */
#menubar ul li a:focus {
   outline:0px;
}

#menubar li .last {
   border-width: 0 0 0 0;
}

#content {
   /* necessary to keep footer from overlapping */
   overflow: auto;
}

#viewport {
   /* important for the images inside */
   position: relative;
   /*width: 100%;*/
   border: 0;
   text-align: center;
   /*overflow: auto;*/
   /*width: 750px;*/
   height: 200px;
   padding: 0;
}

#viewport #view1 {
   /*
   position: absolute;
   width: 160px;
   height: 60px;
   bottom: -10px; 
   left: 20px;
   */
   z-index: 4;
   filter: alpha(opacity=75);
   MozOpacity: .75;
   KHTMLOpacity: .75;
   opacity: .75;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

.mssucksthebig1 {
   position: absolute;
   bottom: -10px; 
   left: 20px;
   z-index: 3;
   width:160px;
   height:60px;
   display:inline-block;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/view1button.png');
}


#viewport #view2 {
   /*
   position: absolute;
   width: 160px;
   height: 60px;
   bottom: -10px; 
   left: 160px;
   */
   z-index: 4;
   filter: alpha(opacity=75);
   MozOpacity: .75;
   KHTMLOpacity: .75;
   opacity: .75;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

.mssucksthebig2 {
   position: absolute;
   bottom: -10px; 
   left: 160px;
   z-index: 3;
   width:160px;
   height:60px;
   display:inline-block;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/view2button.png');
}

#viewport a #view3 {
   /*
   position: absolute;
   width: 160px;
   height: 60px;
   bottom: -10px; 
   left: 300px;
   */
   z-index: 4;
   filter: alpha(opacity='75');
   MozOpacity: .75;
   KHTMLOpacity: .75;
   opacity: .75;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

#viewport a:focus {
   outline:0px;
}

.mssucksthebig3 {
   position: absolute;
   bottom: -10px; 
   left: 300px;
   z-index: 4;
   width:160px;
   height:60px;
   display:inline-block;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/view3button.png');
}

#viewport #img_viewport1 {
   position: absolute;
   /*top: 0px;*/
   left: 0px;
   z-index: 2;
}

#viewport #img_viewport2 {
   position: absolute;
   /*top: 0px;*/
   left: 0px;
   z-index: 1;
}

#left {
   width: 50%;
   float: left;
   margin-right: 5px;
}

#left_view {
   width: 100%;
}

#mid {
   width: 33%;
   float: left;
}

#mid_view {
   width: 100%;
   height: 100px;
}

#right {
   width: 49%;
   float: right;
}

#right_view {
   width: 100%;
}

.banner {
   /* if this width is not present, IE overflows with h/v scrollbars */
   width: 700px;
   margin-left: -23px;
   margin-top: -10px;
}

#footer_wrapper {
}

#botmenubar {
   overflow: auto;
}

#botmenubar_left ul, #botmenubar_right ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

#botmenubar_left ul li, #botmenubar_right ul li {
   display: inline;
}

#botmenubar_left li {
   float: left;
   font-size: 11px;
   color: #999;
}

#botmenubar_right li a {
   float: right;
}

#botmenubar li a {
   font-size: 11px;
   /*width: 10em;*/
   padding-left: 1em;
   padding-right: 1em;
   text-align: center;
   border-style: solid;
   border-width: 0 1px 0 0;
   border-color: #999;
   text-decoration: none;
   color: #000;
   margin-bottom: 1px;
   margin-top: 1px;
}

#botmenubar li a:hover {
   color: #00f;
   text-decoration: underline;
}
 
/* without this we get menu bars after clicking privacy policy */
#botmenubar ul li a:focus {
   outline:0px;
}