/*

	Title:      Wex Screen styles
	Updated:    7/2009

*/

@import "reset.css";

body {
	margin: 0; padding: 0;
	font-family: arial, helvetica, sans-serif; color: #999;
	line-height: 1.5;
	background: #0d0d0d url(../images/bg_tile.gif) repeat top left;
}

a { 
    color: #fff;
	text-decoration: none;
}
a:hover { 
    text-decoration: underline;
}


/* =typography defaults
------------------------------------------------------ */

h1,h2,h3,h4,h5,h6 { font-family: arial, helvetica, sans-serif; font-weight: normal; color: #efefef; }

h1 { font-size: 2.6em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 1.4em; margin-top: 0; margin-bottom: 0; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; margin-bottom: 1.5em; font-weight: bold; }
h6 { font-size: 1em; font-weight: bold; }

h1.title, h2.title, h3.title, h4.title { margin-bottom: 0; }
h2.byline, h3.byline { font-style: italic; text-transform: none; color: #7a9eb5; margin-top: 0; }
h3.dateline { font-size: 1.2em; margin: 0; text-transform: uppercase; }
p, ul, ol, dl { margin: 0 0 1.5em; font-size: 1.1em; }
li ul, ul ol { font-size: 1em; }
em { font-style: italic; }
strong { font-weight: bold; }


/* =structure
------------------------------------------------------ */

#skip-links {
	position: absolute;
	top: 0; left: -999em;
}
#container {
    width: 939px;
    margin: 0 0 0 42px;
    position: relative;
}
#header {
    position: relative;
    height: 246px;
}
#content {
    padding: 17px 0;
	min-height: 468px;
    background:  url(../images/bg_grid-top.gif) no-repeat top left;
}

/* outer column spans */
.span_1-2, .span_1-3, .span_3-5, .span_4-5 {
    float: left;
    display: inline;
}
.span_1-2 {
    width: 372px;
    margin: 0 6px 0 0;
}
.span_1-3 {
	width: 561px;
    margin: 0 6px 0 0;
}
.span_3-5 {
    width: 561px;
    margin: 0;
}
.span_4-5 {
    width: 372px;
    margin: 0;
}

/* inner column grids */
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5 {
    float: left;
    display: inline;
    width: 183px;
}
.grid_1, .grid_3, .grid_4 {
    margin: 0 6px 0 0;
}
.grid_2, .grid_5 {
    margin: 0;
}

/* inner columns with no columns to the left */
.prefix_1 {
	padding-left: 189px;
}
.prefix_2 {
	padding-left: 378px;
}
.prefix_3 {
	padding-left: 567px;
}
.prefix_4 {
	padding-left: 756px;
}

/* =header
------------------------------------------------------ */

#logo {
    width: 183px; height: 175px;
    position: absolute; top: 20px; left: 0;
}
#logo a  {
    display: block;
    width: 183px; height: 175px;
    background:  url(../images/wex_logo.png) no-repeat 0 0;
    text-indent: -9999px;
}


/* =navigation
------------------------------------------------------ */

#nav {
    width: 175px;
    margin: 0 0 0 215px; padding: 35px 0 0 0;
    border-right: 1px solid #626366;
	position: relative;
}
#nav li {
    width: 175px; height: 28px;
    margin: 0; padding: 0;
    text-align:right;
}
#nav a {
    color: #808080;
    font-size: 24px;
    text-align: right;
    text-decoration: none;
    padding-right: 5px;
}
#nav a:hover {
    color: #ffffff;
}
#nav a.active {
    color: #ffffff;
}

/* subnav */
#nav ul {
    width: 280px;
    margin: 0; padding: 0;
    border: 0;
    position: absolute;
	top: 47px;
    left: -999em; /* hidden */
}
#nav li.sfHover ul, #nav li.active ul { 
    left: 183px; /* active */
}
#nav ul li {
    width: auto; height: auto;
    margin: 0; padding: 0;
    position: auto;
    text-align:left;
}
#nav ul a {
    display: inline;
    width: auto; height: auto;
    margin: 0; padding: 0;
    text-indent: 0;
    background: none;
    color: #808080;
    font-size: 11px;
    font-weight: normal;
}

/* =content
------------------------------------------------------ */

#content ul li {
    padding-left: 10px;
    background: url(../images/bullet.gif) no-repeat 0 5px;
}
#content ol {
	list-style-type: decimal;
}
#content ol li {
	margin: 0 0 0 1.5em;
}

/* intro lead-ins */
#content .span_1-2 h1, #content .span_1-3 h1 {
	margin-bottom: 50px;
}
#content .span_1-2 p, #content .span_1-3 p {
	font-size: 1.3em;
}

/* software listings */
.entry { 
	margin: 0 0 40px 0; 
}
#content .entry h3 { 
	font-size: 1.2em;
	margin-bottom: 0;
	line-height: 1.4em; 
}
#content .entry p, #content .entry ul { 
	padding-right: 10px; 
	font-size: 1.1em; 
	line-height: 1.4em;
}

/* add classes for for multiple software screenshots */
#content .entry img.multi { margin:0 0 10px; }
#content .entry img.last { margin:0; }

/* brochure link */
a.brochure-request {
    font-size: 9px;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 48px;
	background: transparent url(../images/icn-brochure.gif) no-repeat bottom left;
}

/* tertiary navitation lists */
ul.sublinks {
    margin: 10px 0 0 0; padding: 0;
}
#content ul.sublinks li {
    margin: 0; padding: 0;
    background: none;
    font-size: 1em; /* 11px */
}
ul.sublinks li a {
    display: block;
    padding: 12px 3px;
	line-height: 1;
    color: #999;
    border-top: 1px solid #636466;
    text-decoration: none;
}
ul.sublinks li:first-child a, ul.sublinks li.first a {
	border: none;
}
ul.sublinks li a:hover {
    color: #fff;
}


/* =home page
------------------------------------------------------ */

body.home #header {
    height: 195px;
}
body.home #banner {
    line-height: 0;
    height: 197px;
    overflow: hidden;
    margin-left: -42px;
}
body.home #content {
    padding-top: 12px;
    min-height: 330px;
}

/* intro */
body.home #content .intro h1 {
    font-size: 1.6em;
    font-weight: normal;
    margin-bottom: 0.2em;
	line-height: 1.3125;
}
body.home #content .intro p {
	padding-right: 25px;
    font-size: 1.6em;
	line-height: 1.3125;
}
body.home .intro p strong {
	font-weight: normal;
	color: #efefef;
}

/* promo columns */
body.home h2 { 
    font-size: 1.4em;
    margin: 0 0 0.5em;
}
body.home .span_3-5 p {
    font-size: 1.1em;
    line-height: 1.3;
}

body.home .grid_3 h2, .grid_3 h2 a { color: #ee4e22; }
body.home .grid_4 h2, .grid_4 h2 a { color: #92c452; }
body.home .grid_5 h2, .grid_5 h2 a { color: #b0ced2; }

body.home h2 a { text-decoration: none; }
body.home h2 a:hover { text-decoration: none; }

body.home .promo { height: 210px; padding-right: 15px;  }

body.home .grid_3 .promo-hover { border-bottom: 2px solid #ee4e22; cursor: pointer; }
body.home .grid_4 .promo-hover { border-bottom: 2px solid #92c452; cursor: pointer; }
body.home .grid_5 .promo-hover { border-bottom: 2px solid #b0ced2; cursor: pointer; }


/* =login forms
------------------------------------------------------ */

#login legend { 
    display: none; 
}
#login p {
    margin: 0 0 7px;
    padding: 0;
    line-height: 1;
    font-size: 1.2em;
}
#login label {
    float: left;
    width: 75px;
    padding: 7px 0 0;
}
#login input[type='text'], #login input.text { 
    width: 280px;
    margin: 0; padding: 7px;
    border: 0; outline: 0;
    color: #fff;
    background: transparent url(../images/bg_input.gif) repeat top left;
}
#login select {
    width: 200px;
}
#login label, #login input { 
    vertical-align: middle;
}
#login p.submit { 
    margin: 1em 0 1.5em;
}


/* =footer
------------------------------------------------------ */

#footer {
	clear: both;
	padding-bottom: 2em;
}
#footer ul {
	margin: 0 0 1.5em;
}
#footer ul li {
    display: inline;
    margin: 0 12px 0 0; padding: 0;
    font-size: 0.9em;
    text-transform: uppercase;
}
#footer ul li.copyright {
    margin-right: 85px;
}

#footer a {
    color: #636466;
    text-decoration: none;
}
#footer a:hover {
    color: #fff;
    text-decoration: none;
}

#footer li#contact {
    position: absolute;
    top: 38px;
    right: 0;
    margin: 0; padding: 0;
}
#footer li#contact a {
    margin: 0; padding: 0;
    font-size: 16px;
	font-weight: normal;
    text-transform: none;
    text-decoration: none;
  	color: #808080;
}
#footer li#contact a:hover {
	color: #fff;
}


/* =misc
------------------------------------------------------ */

hr, .hide {	display: none; }
.highlight { background: #ffc; }
.left { float: left; margin: 0 8px 8px 0; }
.right { float: right; margin: 0 0 8px 8px; }

/* safari text-rendering fix */
h1,h2,h3,h4,h5,h6,p,li { text-shadow: rgba(255, 255, 255, .01) 0px -1px 1px;  }

/* self-clearing floats */
.wrap:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}