/** COLORS

darker grey: #c7c7c7
darker blue: #4d85c5
light blue: #bbcfe6
super dark blue: #2a4e77

**/


body {
background-image: url(images/background-tile.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
width: 800px;
border-left: 1px solid #c7c7c7;
border-right: 1px solid #c7c7c7;
border-bottom: 1px solid #c7c7c7;
border-top: 5px solid #4d85c5;
margin: 0 auto;
background: #fff url(images/insidebackground.gif) top left repeat-y;
}

/** HEADER **/

#header {
width: 800px;
height: 147px;
position:relative;
border-bottom: 1px solid #4d85c5;
background-color: #fff;
}

#home #header {
background: #fff url(images/header_home.jpg) top right no-repeat;
}
#aboutus #header {
background: #fff url(images/header_aboutus.jpg) top right no-repeat;
}
#tech #header {
background: #fff url(images/header_tech.jpg) top right no-repeat;
}
#pipeline #header {
background: #fff url(images/header_pipeline.jpg) top right no-repeat;
}
#partnering #header {
background: #fff url(images/header_partnering.jpg) top right no-repeat;
}
#contact #header {
background: #fff url(images/header_contact.jpg) top right no-repeat;
}
#press #header {
background: #fff url(images/header_press.jpg) top right no-repeat;
}
#xel002b #header {
background: #fff url(images/header_XEL002B.jpg) top right no-repeat;
}
#xel001h #header {
background: #fff url(images/header_XEL001-H.jpg) top right no-repeat;
}


#header h1 a {
position: absolute;
top: 17px;
left: 32px;
display:block;
width: 100px;
height: 117px;
background: url(images/XEL_Pharmaceuticals.gif) top left no-repeat;
}
#header h1 a span {
margin: 0 0 0 -10000px;
}

/** NAVIGATION **/

#navigation {
background-color: #bbcfe6;
display: block;
width: 800px;
text-align: center;
border-bottom: 1px solid #4d85c5;
padding-bottom: 5px;
}
#navigation a {
text-decoration:none;
text-transform:uppercase;
color: #4d85c5;
padding: 4px 15px 5px 15px;
font-size: 11px;
font-weight: bold;
}
#navigation a:hover,
#navigation li.current a {
background-color: #4d85c5;
color: #fff;
}

#navigation li {
display: inline;
}


/** CONTENT **/

#content {
width: 720px;
margin: 20px auto;
padding-bottom: 20px;
}

.row {
width: 720px;
clear:both;
padding-bottom: 10px;
}

.side {
width: 230px;
padding-right: 20px;
float: left;
}

.main {
width: 470px;
float: left;
}


.pictureframe {
width: 230px;
height:140px;
}
#home .pictureframe {
background:url(images/home_image.jpg) top left no-repeat;
}

/** HOME PAGE BOXES **/

.boxrow {
background: url(images/boxrowtop.gif) top left no-repeat;
width: 720px;
}

.homepagebox {
width: 229px;
float: left;
padding-right: 16px;
}
.boxcontent { 
overflow: visible;
padding: 5px 14px 14px 14px;
position: relative;
}
.boxhead {
padding: 8px 10px;
}
.boxhead h1 {
font-size: 12px;
padding: 0;
}
.boxhead h1 a {
text-decoration: none;
}
.boxcontent p {
padding: 0;
}


.boxrowbottom {
background: url(images/boxrowbottom.gif) top left no-repeat;
height: 33px;
width: 720px;
margin-bottom: 20px;
}
.boxbottom {
width: 229px;
height: 33px;
float: left;
padding-right: 16px;
position: relative;
}
.boxbottom a {
position: absolute;
display: block;
bottom: 10px;
left: 198px;
width: 20px;
height: 20px;
}
.boxbottom a span {
margin: 0 0 0 -100000px;
}



.last {
padding: 0;
}


/** TEXT STYLES **/


h1 {
font-size: 18px;
padding-bottom: 10px;
color: #4d85c5
}
h2 {
/*font-size: 16px;*/
font-size: 12px;
padding-top:10px;
padding-bottom: 10px;
color: #4d85c5;
line-height: 16px;
}
p {
font-size: 11px;
line-height: 16px;
padding-bottom: 10px;
}
a {
color: #4d85c5;
}
a:hover {
color: #2a4e77;
}

sup {
font-size: 8px;
vertical-align: top;
}


#content ol, #content ul {
font-size: 11px;
line-height: 16px;
padding-bottom: 5px;
margin: 0 0 0 20px;
}
#content ol li,#content  ul li {
padding-bottom: 5px;
}
#content ul {
list-style: disc;
}

.nobreak {
white-space:nowrap;
}

#map {
font-size: 11px;
line-height: 16px;
padding-bottom: 10px;
}


.half {
width: 235px; 
float: left;
}

.halfright {
width: 200px; 
float: right;
padding: 0 0 10px 10px;
}

.imageright {
float: right;
margin: 0 0 5px 5px;
border: 1px solid #000;
}
.imageleft {
float: left;
margin: 0 5px 5px 0;
border: 1px solid #000;
}

.side ul {
clear: both;
padding: 10px 0 0 0;
list-style: none;
}
.side ul li {
list-style: none;
font-size: 12px;
font-weight: bold;
padding-bpo
}
.side ul li.current a {
color: #000;
}

#content .side ul.smaller li {
font-size: 11px;
font-weight: bold;
padding-bottom: 10px;
}

.backlink {
text-align: right;
font-size: 11px;
}
.backlink a {
text-decoration: none;
}


/** PIPLELINE CHART **/

table.pipeline {
width: 720px;
font-size: 11px;
background-color: #fff;
}
table.pipeline td, table.pipeline th {
padding: 6px 3px;
background-color: #bbcfe6;
vertical-align: top;
}

table.pipeline tr.even td {
background-color: #dedede;
}

table.pipeline th {
background-color: #4d85c5;
font-weight: bold;
color: #fff;
}

table.pipeline td span {
margin: 0 0 0 -1000px;
}
table.pipeline td.product {
font-weight: bold;
}
table.pipeline td.ind {
font-style: italic;
}

table.pipeline td.complete {
background: #bbcfe6 url(images/pipeline.gif) 0% 50% no-repeat;
width: 94px;
}
table.pipeline tr.even td.complete {
background: #dedede url(images/pipeline.gif) 0% 50%  no-repeat;
width: 94px;
}

table.pipeline td.fiftypercent {
width: 94px;
background: #bbcfe6 url(images/pipeline.gif) 50% 50% no-repeat;
}
table.pipeline tr.even td.fiftypercent {
width: 94px;
background: #dedede url(images/pipeline.gif) 50% 50% no-repeat;
}

table.pipeline td.twentyfivepercent {
width: 94px;
background: #bbcfe6 url(images/pipeline.gif) 50% 50% no-repeat;
}
table.pipeline tr.even td.twentyfivepercent {
width: 94px;
background: #dedede url(images/pipeline.gif) 75% 50% no-repeat;
}

table.pipeline td.seventyfivepercent {
width: 94px;
background: #bbcfe6 url(images/pipeline.gif) 25% 50% no-repeat;
}
table.pipeline tr.even td.seventyfivepercent {
width: 94px;
background: #dedede url(images/pipeline.gif) 25% 50% no-repeat;
}

table.pipeline td.hundredpercent {
width: 94px;
background: #bbcfe6 url(images/pipeline.gif) 18% 50% no-repeat;
}
table.pipeline tr.even td.hundredpercent {
width: 94px;
background: #dedede url(images/pipeline.gif) 18% 50% no-repeat;
}

table.pipeline td.empty {
width: 94px;
}



/** FOOTER **/
#footer {
padding-bottom: 20px;
}
#footer p {
text-align: center;
font-size: 10px;
color: #4d85c5;
}
#footer p a {
text-decoration: none;
}




/** CLEAR FIX **/

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */