body {
  font-family: arial, helvetica, sans-serif;
  font-size: 62.5%;
  background-color: #fff;
  color: #333;
}


/*text styles*/

p, li, dd, dt {
  font-size: 1.4em;
  line-height: 2.0;
}

li p {
  font-size: 1em;
}

p, ul, dl {
  margin-bottom: 2.0em;
}

/*links*/

a {
  text-decoration: none;
  color: #333;
}

a:link {
    border-bottom: 1px dotted #333;
}

a:visited {
  color: #999;
  border-bottom:  1px solid #999;
}

a:hover,
a:focus {
  background-color: #EEE;
  border-bottom: 1px solid #333;
}

a:active {
  background-color: #fff;
  border-bottom: 1px solid #333;
}

/*headings*/

#branding h1 {
  width: 100%;
  background: url(../images/albow.png) top right no-repeat;
  position: absolute;
  top: 60px;
  height: 9em;
  overflow: hidden;
  text-indent: -10000em;
  }

h2 {
  font-weight: bold;
  font-size: 1.4em;
  line-height: 2;
  margin-bottom: 0.6em;
}

/*main layout*/

#container {
  width:  90em;
  position: relative;
  margin: 2em auto 3em;
  padding: 19em 0 0 0;
  background: url(../images/header.png) top left no-repeat;
}

#container:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}
dt {
  font-weight: bold;
  float: left;
  margin-right: 0.5em;
  color: #999;
}

dt + dd{
  font-weight: bold;
}

/*upper content area*/

ul#nav {
  width:  26em;
  margin-right: 3em;
  float: left;
  margin-bottom: 1em;
}


#tab-content {
  margin-bottom: 2em;
  padding-bottom: 2em;
  border-bottom: 1px solid #EEE;
}

#tab-content:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}

#nav a {
  border: none;
  display: block;
  padding: 0.2em 0.5em;
}

/*tabs*/

.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
.ui-tabs-selected {
  font-weight: bold;
}

#tab-content div {
  width: 60em;
  float: right;
  
}

/*lower content area*/

#carousel {
  clear: both;
	width:90em;
	padding: 0 3em;
	height:38em;
	position: relative;
	margin: 0 0 5em -5em;
}

#carousel a {
  border: none;
  background-color: transparent;
}

#carousel h2 {
  font-size: 2.8em;
  margin-left: 1em;
  color: #666;
}

#slides {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:90em;
	height:37em;
	margin-left:  3em;
	box-shadow: 0 0 1.5em #ccc;
	-moz-box-shadow:0 0 1.5em #ccc;
	-webkit-box-shadow: 0 0 1.5em #ccc;
	border:  1px solid #eee;
}

/* remove the list styles, width : item width * total items */	
#slides ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;	
	width:810em;			
}

/* width of the items*/
#slides li {
	width:600px;
	height:37em;	
	margin: 0 5px;
	float:left;
	position: relative;
	top: 0px  ;
}

#slides li img {
  margin: 4em 150px 0 150px;
}



/* Styling for prev and next buttons */
#carousel a.button {
	display:block; 
	width:167px; 
	height:370px;
  position: absolute;
	background-color: #fff;
	outline:0;
  opacity: 0.7;
	z-index: 50;
}
a#prev {
  top: 75px;
  left:  50px;
}

#carousel a#next {
  right:  -1px;
  width: 135px;
}

a#prev span,
a#next span {
  display: block;
  background: url('../images/arrow.png') 0px 0px no-repeat;
  height: 30px;
  width: 30px;
  position: relative;
  margin: 160px auto;
	text-indent:-999em;
}

a#next span {
  background-position: -30px 0px;  
}

a#prev:hover {
  opacity: 0.8;
}

a#prev:hover span {
  background-position: 0px -32px;
}

a#next:hover span {
  background-position:  -30px -32px ;
}

#footer {
  position: relative;
  margin: 60px auto 20px;
  border-top:  1px solid #ddd;
  font-size: 12px;
  color: #777;
  width: 580px;
  padding: 20px 0px 0 350px;
  text-align: right;
}
