/**
 ** CSS RESET
 **/

/*
** CSS reset, http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 
*/
html,
body,
div,
span,
applet,
object, 
iframe,
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
blockquote, 
pre,
a, 
abbr, 
acronym, 
address, 
big, 
cite, 
code,
del, 
dfn, 
em, 
font, 
img, 
ins, 
kbd, 
q, 
s, 
samp,
small, 
strike, 
strong, 
sub, 
sup, 
tt, 
var,
dl, 
dt, 
dd, 
ol, 
ul, 
li,
fieldset, 
form, 
label, 
legend,
table, 
caption, 
tbody, 
tfoot, 
thead, 
tr, 
th, 
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
:focus {
  outline: 0;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol, 
ul {
  list-style: bullet;
}
/*
** Tables still need 'cellspacing="0"' in the markup 
*/
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote, 
q {
  quotes: "" "";
}

/**
 ** HTML Elements
 **/
/*
**   ****************************************************************************************
   	 Using the baseline grid
     ****************************************************************************************

     Everything you need to know about this can be found at:
     http://alistapart.com/articles/settingtypeontheweb

    "The first thing we have to do is set a line-height for our grid. I’ve chosen a pretty 
     standard base font size of 12 pixels, and set the line-height at 18 pixels, which gives
     us a nice open leading of about 150%. It’s important to think about your line-heights
     up front. You want a ratio of font size to line-height that’s a good balance for
     readability and that’s easily divisible into smaller units"

     For each element to fall correctly it must have a bottom margin that is equal
     to the default line height, in this case 18px.

    "The pattern is pretty simple. Any time you add vertical space with a margin or padding,
     you need to add it in units of 18 pixels to maintain the baseline grid. You don’t always
     have to add it in one place, but you need to add it in pairs that add up to 18 pixels. 
     For instance, you could set a top margin of 12 pixels and a bottom margin of 6 pixels."

     For information about further elements such as floats, images etc see the above URL.

    "Floats and sidebars are where a little discipline comes in. 
     Images and other elements floated within your text need to be sized vertically in 
     multiples of your grid increment: in this case, multiples of 18. If they’re sized 
     correctly, you can add margins around them that add up vertically to a multiple of 18,
     and the text will always break in the right place, directly under your image.

     The important thing to remember with callouts and sidebars is to keep the line-height the
     same even if you make the text smaller. You might be tempted to tighten it up, but even for
     11- or 10-pixel font sizes, 18 pixels is still a very readable line-height."

*/

body {
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  text-align: left;
  color: #333333;
  background: #fff;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 18px 0;
  font-weight: bold; 
}
h1 { 
  font-size: 24px; 
  line-height: 36px; 
  color: #656600;
	font-family: Helvetica, Arial, sans-serif;
}
h2 { 
  font-size: 18px; 
  line-height: 18px; 
	font-family: Helvetica, Arial, sans-serif;
}
h3 { 
  font-size: 13px; 
  line-height: 18px; 
}
h4 { 
  font-size: 1.2em; 
  line-height: 18px; 
}
h5 { 
  font-size: 1.2em; 
  line-height: 18px;
}
h6 { 
  font-size: 13px; 
  line-height: 18px; 
}
p { 
  margin: 0 0 18px 0;
}
a:link {
  color: #D53A3E;
  text-decoration: none;
  font-weight: bold;
}
a:visited {
  color: #D53A3E;
  text-decoration: none;
  font-weight: bold;
}
a:hover { 
  color: #800000;
  text-decoration: none;
  font-weight: bold;
}
a:active {
  color: #800000;
  text-decoration: none;
  font-weight: bold;
}
ul {
  margin: 0 0 18px 18px;
  padding: 0;
}
li {
  margin: 0;
  padding: 0 0 0 0;
}
form { 
  margin: 0; padding: 0; 
}
strong { 
  font-weight: bold; 
}
img { 
  border: none; 
  display: block; 
  margin-bottom: 18px;
}
blockquote {
	margin-bottom: 18px;
}
.clear { 
  clear: both; 
}
.clearleft { 
  clear: left; 
}
.clearright { 
  clear: right; 
}
.left { 
  float: left;
}
.right { 
  float: right;
}
.imgleft {
  float: left;
  padding: 0 18px 18px 0;
}
.imgright {
  float: right;
  padding: 0 0 18px 18px;
}
.push1 { 
  margin-bottom: 18px;
}
.push2 { 
  margin-bottom: 36px; 
}
.pull1 { 
  margin-top: 18px; 
}
.pull2 { 
  margin-top: 36px;
}
table, tr, th, td { 
  margin: 0;
  padding: 0; 
  border: none;
  font-size: 13px; 
  line-height: 18px; 
}
table { 
  border: 1px solid #ccc; 
}
th { 
  font-size: 13px; 
  line-height: 18px; 
}
th, td { 
  padding: 18px; 
  border: 1px solid #ccc; 
  text-align: center; 
}

/**
 ** 355 Design 2009 Styles
 **/
body {
	background: #000;
}

#wrapper { /* global page wrapper */

}

.inner { /* wrapper for each page section, eg. header, top, bottom */
	width: 960px;					
	margin: 0 auto;
}

/* header styling */
#header {
	height: 94px;
	background: #ccc url('/images/top-bg.png') repeat-x scroll 0 0;
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
}

#header #title {
	float: left;
	margin-top: 31px;
	width: 212px;
	background: transparent url('../images/logo.png') no-repeat scroll 0 0;
	text-indent: -9999px;
}

#header ul {
	float: right;
	height: 94px;
}

#header li {
	float: left;
	display: block;
	margin-left: 72px;
	height: 58px;
	padding-top: 40px;
	font-size: 14px;
}

#header li.selected,
#header li:hover {
	height: 54px;
	border-top: 4px solid #f7f7f7;
	padding-top: 36px;
}

#header li a.selectedItem
{
    margin-top: -40px;
    padding-top:36px;
    height: 54px;
    border-top: 4px solid #f7f7f7;
}

#header li a:link,
#header li a:visited {
  text-transform: lowercase;
	color: #333333;	
	cursor:pointer;
}

/* page content styling */
#top { 
	background: #e5e5e5;
	padding-bottom: 18px;
}

#leftcol {
	float: left;
	width: 592px;
}

#leftcol #content {
	padding: 36px 0;
}

#leftcol #content h2 {
	color: #7B0708;
}

#leftcol .header {
	padding-left: 45px;
	background: url('../images/big_arrow.png') no-repeat scroll 0 3px;
	height: 63px;
}

#leftcol .header h2 {
	font-family: "Trebuchet MS" ,Helvetica, Arial, sans-serif;
	color: #fff;
	font-weight: normal;
	font-size: 16px;
}

#leftcol .header h3 {
	font-size: 11px;
	font-weight: normal;
}

#hero {
	width: 592px;
	height: 324px;
	background: #000 url('../images/big-image.jpg') no-repeat scroll 0 0;
}

.hero-column {
	border-top: 1px solid #e5e5e5;
	padding: 18px 18px 0 18px;
	float: left;
	background: transparent url('../images/hero-column-bg.png') repeat-x scroll 0 0;
	height: 143px;
	overflow: hidden;
}
.hero-column h2 {
	margin: 0;
}
.hero-column ul {
	list-style-type: none;
	margin: 0;
}
.hero-column ul li {
	background: transparent url('../images/bullet-point-1.png') no-repeat scroll 0 4px;
	padding-left: 18px;
}
#hero-column-1 {
	width: 260px;
}
#hero-column-2 {
	width: 259px;
	border-left: 1px solid #e5e5e5;
}

#rightcol {
	float: left;
	width: 341px;
	margin-left: 27px;
}

#rightcol #intro {
	padding: 36px 36px 36px 9px;
	font-size: 14px;
	height: 324px;
	overflow: hidden;
	line-height: 27px;
}
#rightcol h2 {
	margin-bottom: 9px;
}
#rightcol h3 {
	font-size: 14px;
	margin-bottom: 9px;
}
#rightcol ul {
	list-style-type: none;
	margin-left: 0;
}
#rightcol li {
	padding-left: 20px;
	background: transparent url('../images/tiny_arrow_1.png') scroll no-repeat 0 4px;
}
#homepage #intro .sub-title {
	font-weight: bold;
}
#homepage #rightcol h2 {
	font-size: 24px;
	margin-bottom: 18px;
}
#homepage #rightcol h3 {
	font-size: 18px;
	margin-bottom: 18px;
}
.alternate {
	color: #7B0708;
}

#related-imagery {
	background-color: #ccc;
	padding-top: 72px;
}

#contact-box {
	background: #7B0708 url('../images/glossy-box.png') no-repeat scroll;
	height: 90px;
	width: 368px;
	float: left;
	font-size: 16px;
}
#contact-box a {
	font-weight: normal;
	color: #000;
	display: block;
}
#contact-box .email {
	width: 83px;
	height: 36px;
	float: left;
	padding: 27px 18px 27px 54px;
	color: #000;
	background: transparent url('../images/little_arrow_1.png') no-repeat scroll 30px 31px;
}

#contact-box .phone {
	float: left;
	padding: 27px 27px 27px 45px;
	width: 141px;
	height: 36px;
	color: #fff;
	background: transparent url('../images/little_arrow_2.png') no-repeat scroll 0 20px;
}

/* bottom page content, eg. footer, related links etc */
#bottom {
	padding: 27px 0 0 0;
	color: #ccc;
	background: transparent url('../images/glow.jpg') no-repeat scroll center 0;
}

#bottom a:link,
#bottom a:visited {
  color: #cccc99;
	font-weight: normal;
}

#bottom a:hover,
#bottom a:focus,
#bottom a:active {
  color: #808000;
}

#bottom #column1 {
	width: 591px;
	margin-right: 1px;
	float: left;
}

#bottom #column1 h2 {
	padding-bottom: 8px;
	border-bottom: 1px solid #fff;
	margin-bottom: 27px;
	font-family: "Trebuchet MS" ,Helvetica, Arial, sans-serif;
	font-weight: normal;
}

#bottom #column2 {
	width: 367px;
	float: left;
	margin-left: 1px;
}

#column2 a.main-link {
	padding-bottom: 8px;
	border-bottom: 1px solid #cccc99;
	margin-bottom: 27px;
	padding-right: 25px;
	color: #cccc99;
	display: block;
	text-align: right;
	text-transform: lowercase;
	background: transparent url('../images/little_arrow_3.png') no-repeat scroll right 1px;
}

#column2  a.main-link:hover {
	border-bottom: 1px solid #808000;
}

#bottom .case-study {
	margin-bottom: 18px;
}

#bottom .case-study h3 {
	margin-bottom: 9px;
	font-weight: normal;
}

#bottom .case-study .screenshot {
	border: 9px solid #282828;
	float: left;
	margin: 0 36px 18px 0;
	width: 218px;
}

#bottom .case-study .information {
	float: left;
	width: 301px;
}

#bottom .screenshot img {
	margin: 0;
}

#bottom h3 {
	font-size: 18px;
	color: #ccc;
}

#bottom p.url {
	margin-bottom: 9px;
}

#bottom p.description {
}

#bottom .col {
	width: 315px;
	float: left;
	color: #999;
	margin-right: 5px;
	padding-bottom: 9px;
}

#bottom .col h4 {
	border-bottom: 1px solid #4C4C4C;
	padding-bottom: 8px;
	margin-bottom: 9px;
}

#bottom .col ul {
	list-style-type: none;
	margin-left: 0;
}

#bottom .col a:link,
#bottom .col a:visited {
  color: #999;
}

#bottom .col a:hover,
#bottom .col a:focus,
#bottom .col a:active {
  color: #ccc;
}

/* footer */
#footer {
	clear: both;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 100;
	color: #666666;
	padding-top: 27px;
	height: 36px;
	background: transparent url('../images/footer-glow.png') no-repeat scroll center 0;
}

#footer p {
	margin: 0;
}


/* overrides */

.RadMenu
{
    float:right !important;
}



.sf_singleNews p
{
    font-size:1.2em !important;
}


.sf_postBookmark a img
{
    /*border:none;
    margin: 0 0 0 0;
    display:inherit;*/
      border: none;
  	display: inline;
  	margin-bottom: 18px;

}

.sf_newsList h2.sf_newsTitle 
{
  font-size: 1.8em !important;
  color:#7B0708; 
}

.sf_newsThumbnail
{   
    float:right;
}

a:link, a:visited
{
    color:inherit;
}

/* end overrides *?

/**
 ** Float Clearing
 **/
/*
** Float clearing for IE6 
*/
* html .clearfix,
* html #top,
* html #top .inner,
* html #contact-box,
* html #bottom .case-study,
* html #bottom #column1,
* html #bottom #column2
{
  height: 1%;
  overflow: visible;
}

/*
** Float clearing for IE7 
*/
*+html .clearfix,
*+html #top,
*+html #top .inner,
*+html #contact-box,
*+html #bottom .case-study,
*+html #bottom #column1,
*+html #bottom #column2
{
  min-height: 1%;
}

/*
** Float clearing for everyone else 
*/
.clearfix:after,
#top:after,
#top .inner:after,
#contact-box:after,
#bottom .case-study:after,
#bottom #column1:after,
#bottom #column2:after
{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}