/* *** Reset browser styles *** */
#company {
         font-size: 56px;
         font-family: sans-serif, verdana, Arial, Helvetica;
         position: absolute;
         top: 60px;
         left: 380px; /* 396px; */
}

#line {
        width: 58px;   /* 48px; */
        height: 781px;  /* 781px;  743px; */
        background: black;
        position: absolute;
        top: 0px;    /* 10px; */
        left: 310px;
       }

#line2{
        width: 8px;   /* 4px; */
        height: 781px;  /* 781px;  743px; */
        background: gray;
        position: absolute;
        top: 0px;    /* 10px; */
        left: 337px;   /*332px; */

}

.hide {
 visibility: hidden;
}

.show {
  visibility: visible;
}


#blackboxdots {
    position: absolute;
    width: 450px; /* 436px 450px; */
    height:330px;
    top: 127px;
    left: 71px; /* 85px 71px; */

}




#blackbox {
    width:  530px;
    Height: 480px;
    Background: black;
    position: absolute;
    top: 127px;
    left:  85px; /* 71px; */
    border-top-left-radius: 50px; /* test rd */
    border-bottom-left-radius: 50px; /* test rd */
}

#colorbox {
    display: inline-block;
    width: 397px;
    height: 307px;  /* 318px; */
    padding: 80px; /* padding 50px */
   background: white;/*  #202020; */     /* #800000 red */
  /* #ffff66  yellow*/
  /* #008000  green */
    text-align:left;
    position: absolute;
    top: 196px;  /* 185px; */
    left: 282px;
    border-top-left-radius: 50px; /* test rd */
    border-bottom-left-radius: 50px;  /*test rd */


 /*generate circle */
/*     -coz-border-radius: 180px;
       -webkit-border-radius: 180px;
       border-radius:180px;
*/
       vertical-algin: center;
        text-indent: 20%;
       text-align: center;
       word-spacing: 2px;
       line-height: 29px;
       font-family: sans-serif, verdana, Arial, Helvetica;
       font-size: 16px;
       color:  #b3b3b3; /*  gray */
           /*    opacity: 0.90;
                filter:alpha(opacity=90);  */
      padding:10px 10px 10px 10px; /*7/17/16 added padding and overflow */

      overflow:auto;
}


#borderbox {
    width: 450px;  /* same as blackdots */ /* 695px; */
    height: 68px;
    position: absolute;
    top: 627px; /* 675px */
    left: 24px; /* 71px;  black box*/  /* 20px */
    /* opacity:0.99;     filter:alpha(opacity=99); */

}



/* common circle def's */
#choice ul {
       list-style: none;
  }

#choice li {
   /* font */
       list-style: none;
       font-family: Helvetica, Arial, sans-serif, verdana;
       font-size: 13px;  /*   14px; */
       font-weight: normal;
       color:  #b3b3b3; /* gray */
       line-height: 75px;
       text-align: center;

   /* layout */
       width: 80px;  /* actual image in square about 90 */
       height: 80px;    /*75 */

 /*generate circle */
     -moz-border-radius: 50px;
       -webkit-border-radius: 50px;
       border-radius:50px;

       position: absolute;

  /* effect */
    opacity:0.90;
    filter:alpha(opacity=90); /* IE 8 or higher */

  /*shadow */


/* around shadow */
/*
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
*/

/*
-moz-box-shadow: 0 0 5px 5px #eff;
-webkit-box-shadow: 0 0 5px 5px #eff;
box-shadow: 0 0 5px 5px #eff;
*/
}


#choice li:hover {
     opacity:0.80;
     filter:alpha(opacity=80);
     color: #000000;  /* black */
     text-align: right;
     font-size: 15px;
     width:100px;  /*90px; */
     height:100px; /* 90px; */

/*
-moo-box-shadow: 5px 5px 5px #000066;
-webkit-box-shadow: 5px 5px 5px #000066;
box-shadow: 5px 5px 5px #330066;
*/
 }

#choice li:active {
     opacity:1;
     filter:alpha(opacity=100);
     color: #b3b3b3;  /* gray */
     font-size: 14px;
     text-align: center;
 }


.selected {
     opacity:1;
     filter:alpha(opacity=100);
     color: #b3b3b3;  /* gray */
     text-align: center;
 }

/* independent def's */


.red {
    /*   background: url('///Users/eywu/Sites/test_website_soft/test_project/images/small/redcc.png') no-repeat; */
      background: #AA0000;
       top: 146px; /* 176px; to 195px */
       left: 204px;/*198px; to 210 px*/
 }



.yellow {
       background: #ffff66;
       top: 390px;   /*390px; */
       left: 155px;  /*168px;*/
}

.green {
       background: #008000;
       top: 506px; /*  549px; to 540px */
       left: 435px;/* 465px;   */
    /*   padding: 5px; */
}



h1, h2, h3, h4, h5, h6, p, div, ul, ol, li, code, pre, form, fieldset, blockquote, html, body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
  -moz-opacity: .999;
}

table {
	border-collapse: collapse; /* prevents double borders */
	border-spacing: 0;
}

td, th, caption {
	font-weight: normal;
	text-align: left;
}

img, fieldset  {
	border: 0; /* remove border around linked images and fieldsets */
}

ol  {
	margin-left: 1.8em; /* add smaller indent than default */
	list-style: decimal;
}

ul {
	margin-left: 1.5em;
	list-style:square;
}

q:before, q:after {
	content:''; /* remove browser generated quote marks */
}


/* 2 col layout */

#twoCol #contentWrap {
	width: 760px;
}

#twoCol #main {
	width: 580px;
	margin-right: 10px;
}


/* common layout */

#contentWrap {
	float:left;
}

#contentWrap #main {
	float: right;
	padding-bottom: 25px;
}


#container {
	width: 760px;
	margin: 0 auto;
	border-right: 1px solid #A7A37E;
	border-left: 1px solid #A7A37E;
	background-color: #FFFFFF;
	position: relative;
}

#footer {
	clear: both;
}



/* page styles */

.clear {
	min-height: 1px;
}


.clickable {
	cursor:pointer;
	margin-bottom: 5px;
}

.clickable:hover {
background-color:#FFC;
}

.badgeClass {
	top: 20px;
	background-color:#F90;
}

#overlay {
background-color: red;
/* opacity: 100%; */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 200;
cursor: pointer;
cursor: hand;
}
small {
	font-size: 75%;
}
h1 a {
	font-size: 16px;
	margin-left: 25px;
}




/* --- BEGIN navigation id for test --- */
#navigation {
    width:75px;  /*note non terminating creates full long bar */
    margin:50px; /* overall margin, specify margin-left for specific side margin */
}

#navigagion span{
   display: none;
   position: absolute;
  }


#navigation a {
    color: #fff;
    cursor: pointer;
    display: block;
  /*  height: 75px;
    line-height: 75px; */
    text-indent: 10px;
    text-decoration: none;
    width:100%;
   position: absolute;
}

#navigation a:hover {
    /*text-decoration:underline; */
    text-decoration:none;
    background-position: left bottom;
}

#navigation a:hover span {
    display: block;
    /* when mouse over link, want span element to be in block */
  }

#navigation ul {
    list-style: none;
    margin:0;
    padding:100px;
    background:#666;  /* top lev */
}

#navigation li {
    list-style: none;
    height:75px;  /* height of the list item block
    border-bottom: #fff solid; border-top: #fff solid; border-width: 5px;
      /* note precedence, putting border width at end makes it set it at end. */
    border: 3px solid #fff;
    font-weight: bold;
    font-size: 1.5em;
    line-height:75px;
    text-align: center;
	/* padding: 0 20px 30px 10px; */
 background:  url('/images/small/redc.png') no-repeat;
  /*    background-repeat: no-repeat;  */
    background-position: 0;
}




#navigation li:hover {
/*    background: #f90; *//* orange */
 background:  #f90 url('/images/small/redc.png') no-repeat;
     font-weight: normal;
	font-size: 1.7em;
    position: relative;
}

#navigation li:active {
  background: #090; /* ? */
     font-weight: bold;
	font-size: 1.5em;
    position: relative;
}


#navigation li:selected {
  /* background: #777; */ /* green */
     font-weight: bold;
	font-size: 1.5em;
    position: relative;
}


.home    {    background-image: url(images/small/redt.png); }
.service {    background-image: url(images/small/yellowt.png);}
.contact {    background-image: url(images/small/greent.png);}



/* --- END of navigation test --- */