@import "./reset.css";

body {
  font-size: 80%;
  background: #e5e5e5;
}
a {
text-decoration: none;
}

a.here {
 color: #666666;
}
#container {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 992px;
  position: relative;
  height: auto;
  background: #ffffff;
}
a img {
  border: 0;
}
#header {
  float: left;
  display: inline;
  position: relative;
  width: 100%;
  height: auto;
  border: 2px solid #66cc00;
  background: url('http://www.abixel.com/images/groovy.jpg') top left #fff;
  
  }
div.topper h1 {
  float: left;
  display: inline;
  position: relative;
  color: #660099;
  padding-left: 6%;
  width: 30%;
  height: 30px;
  line-height: 30px;
  font-size: 1.2em;
  line-height: 44px;
  margin: 0;
  font-weight: bold;
}

span.divide {
  color: #66cc99;
}
#header #topNav {
  width: 63%;
  float: right;
  display: inline;
  position: relatiave;
  margin: 0;
  padding: 0;

}
.topper {
height: 44px;
line-height: 44px;
font-size: 1.6em;
  font-weight: bold;
  float: left;
  display: inline;
  width: 100%;
}
#header p.subNav {
  float: right;
  display: inline;
  color: #660099;
  width: 63%;
  margin:0;
  text-align: left;
}

#header p.subNav a {
  color: #660099;
  }
  
#header p.subNav a.here {
  color: #666666;
  }  
#header #topNav ul#navlist
{
margin: 0;
padding: 0;
white-space: nowrap;
width: 100%;
float: left;
display: inline;
text-align: center;
}

#header #topNav ul#navlist li
{
display: inline;
list-style-type: none;
width: 25%;
float: right;
height: 170px;
line-height: 40px;
color: #660099;
font-size: 1.3em;
font-weight: bold;
letter-spacing: 0.1em;
border-top: 10px solid #66cc00;
}
#header #topNav ul#navlist li span.big {
  float: left;
  display: inline;
  width: 100%;
  height: 170px;
}
#header #topNav ul#navlist li.last
{
margin:0;
}

#header #topNav ul#navlist li#services 
{
background: url('http://www.abixel.com/images/services.jpg') top center no-repeat;
}

#header #topNav ul#navlist li#services a:hover span.big,
#header #topNav ul#navlist li#services a.here span.big
{
background: url('http://www.abixel.com/images/services-on.jpg') top center no-repeat;
}

#header #topNav ul#navlist li#portfolio 
{
background: url('http://www.abixel.com/images/portfolio.jpg') top center no-repeat;
}

#header #topNav ul#navlist li#portfolio a:hover span.big,
#header #topNav ul#navlist li#portfolio a.here span.big
{
background: url('http://www.abixel.com/images/portfolio-on.jpg') top center no-repeat;
}

#header #topNav ul#navlist li#contact 
{
background: url('http://www.abixel.com/images/contact.jpg') top center no-repeat;
}

#header #topNav ul#navlist li#contact a:hover span.big,
#header #topNav ul#navlist li#contact a.here span.big
{
background: url('http://www.abixel.com/images/contact-on.jpg') top center no-repeat;
}

#header #topNav ul#navlist li#about 
{
background: url('http://www.abixel.com/images/about.jpg') top center no-repeat;
}

#header #topNav ul#navlist li#about a:hover span.big,
#header #topNav ul#navlist li#about a.here span.big
{
background: url('http://www.abixel.com/images/about-on.jpg') top center no-repeat;
}


#content {
  float: left;
  display: inline;
  position: relative;
  width: 100%;
  background: #ffffff;
  border-left: 2px solid #66cc00;  
  border-right: 2px solid #66cc00;  
}

#content p {
  width: 100%;
  font-size: 1.2em;
  line-height: 1.3em;
}

#content h2 {
  font-size: 1.4em;
  color: #660099;
  background: #fdcdff;
  height: 30px;
  float: left;
  display: inline;
  width: 98%;
  line-height: 30px;
  padding-left: 2%;
  font-weight: bold;
}

#content h3 {
  font-size: 1.4em;
  color: #333333;
  letter-spacing: 0.3em;
  width: 100%;
  border-bottom: 2px solid #339900;
  text-align: left;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

#content h4 {
  font-size: 1.3em;
  color: #660099;
  letter-spacing: 0.3em;
  width: 100%;
  text-align: left;
  float: left;
  display: inline;
  line-height: 1.4em;
  margin: 0;
  padding: 0;
}
.left {
  float: left;
  display: inline;
  position: relative;
  height: 185px;
  width: 37%;
  border-top: 10px solid #660099;
  
}

.leftBig {
  float: left;
  display: inline;
  position: relative;
  height: auto;
  width: 57%;
  color: #660099;
  line-height: 1.6em;
  font-weight: bold;
  border-top: 10px solid #66cc00;
}

#content p img.leftImg {
  float: left;
  display: inline;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 10px solid #66cc00;
  width: 30%;
}

#content img.leftRight {
  float: right;
  display: inline;
  position: relative;
  margin-bottom: 10px;
  border: 10px solid #339900;
  width: 380px;
  padding: 0;
}

#content leftRight {
  float: right;
  display: inline;
  position: relative;
  margin-bottom: 10px;
  border: 10px solid #339900;
  width: 380px;
  padding: 0;
}
.white {
  background: #ffffff;
}

.list {
  float: left;
  display: inline;
  position: relative;
  width: 551px;
  height: auto;
  margin-bottom: 10px;
}


.list p {
  width: 100%;
}

div.rightBig {
  width: 43%;
  background: #fdcdff;
  font-size: 1.5em;
  color: #666666;
  text-align: center;
  line-height: 40px;
  float: right; 
  display: inline;
  position: relative;
  border-top: 10px solid #660099;
}

.rightBig span.bigGreen {
  font-size: 1.7em;
}

.rightBig span.quot {
  font-size: 2.0em;
  color: #66cc00;
  vertical-align:bottom;
}

div.bottom {
  float: left;
  display: inline;
  width: 100%;
}
div#contain {
  width: 952px;
  margin-left: 18px;
}

div#contain p {
  float: left;
  display: inline;
}
div.bottom div.leftBig p {
  margin-left: 3%;
  width: 400px;
  display: block;
}

.list ul {
  list-style-type: disc;
  color: #66cc00;
  font-size: 1.3em;
  margin-left: 4%;  
  line-height: 25px;
  margin-bottom: 10px;
  margin-top: 5px;
}

.list ul li ul {
  color: #660099;
  font-size: 1.0em;
  list-style-type: square;
  margin-bottom:0;
  margin-top:0;
  }

span.purple {
  color: #440066;
}

.portfolio {
  width: 100%;
  float: left;
  display: inline;
  margin-top: 10px;
}