/* 
  HTML5 ✰ Boilerplate 
  
  style.css contains a reset, font normalization and some base styles.
  
  credit is left where credit is due.
  much inspiration was taken from these projects:
    yui.yahooapis.com/2.8.1/build/base/base.css
    camendesign.com/design/
    praegnanz.de/weblog/htmlcssjs-kickstart
*/

/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

/* END RESET CSS */


/* fonts.css from the YUI Library: developer.yahoo.com/yui/
   Refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages

  There are three custom edits:
   * remove arial, helvetica from explicit font stack
   * we normalize monospace styles ourselves
   * table font-size is reset in the HTML5 reset above so there is no need to repeat
*/
body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */

select, input, textarea, button { font:99% sans-serif; }

/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { font-family: monospace, sans-serif; }
 

/* 
 * minimal base styles 
 */


body, select, input, textarea { 
  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 
  color: #444; 
  /* set your base font here, to apply evenly */
  /* font-family: Georgia, serif;  */   
}

/* Headers (h1,h2,etc) have no default font-size or margin,
   you'll want to define those yourself. */ 
h1,h2,h3,h4,h5,h6 { font-weight: bold; }

/* always force a scrollbar in non-IE */ 
html { overflow-y: scroll; }

 
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

a, a:active, a:visited { color: #607890; }
a:hover, li.active a { color: #036; }


ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; } 

small { font-size: 85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align: top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}
 
textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 div,
.ie6 header,
.ie6 nav,
.ie6 article,
.ie6 section,
.ie6 footer,
.ie6 ul,
.ie6 li,
.ie6 p,
.ie7 div,
.ie7 header,
.ie7 nav,
.ie7 article,
.ie7 section,
.ie7 footer,
.ie7 ul,
.ie7 p   { zoom: 1; } 

.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
 
/* webkit browsers add a 2px margin outside the chrome of form elements */  
button, input, select, textarea { margin: 0; }

/* colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { 
      border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red; 
 -webkit-box-shadow: 0px 0px 5px red; 
         box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301 
   Also: hot pink. */
::-moz-selection{ background: #2272b8; color:#fff; text-shadow: none; }
::selection { background:#2272b8; color:#fff; text-shadow: none; } 

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #2272b8; } 

/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }
 
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }



/* 
 * Non-semantic helper classes 
 */

/* for image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; } 

/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
.visuallyhidden { position: absolute !important;    
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;	
} 

.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }



 /* Primary Styles
    Author: 
 */

h1 {
font-family: "news-gothic-std",sans-serif;
font-size: 2em;
font-style: normal;
font-weight: 700;
line-height: 1.2em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 -1px 0 #9fb5bc;
margin-bottom: 60px; }

body {
font-family: sans-serif;
background: url(../images/bg_short.png) repeat-x; 
text-align: center; }

body#home {
background: url(../images/bg.png) repeat-x; }

#container {
width: 960px;
margin: 0 auto;
text-align: left; }

header {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-bottom-radius: 5px;
background: #D1E8F0; /* old browsers */
background: -moz-linear-gradient(top, #D1E8F0 0%, #B4D9E8 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D1E8F0), color-stop(100%,#B4D9E8)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D1E8F0', endColorstr='#B4D9E8',GradientType=0 ); /* ie */
-moz-box-shadow: inset 0 0 10px #8baebd;
overflow: hidden; }

body#home header {
margin-bottom: 50px; }

#logo {
float: left;
margin-left: 30px;
margin-top: 15px;}

.ie6 #logo {
margin-left: 15px; }

header nav {
font-size: .8em;
float: right;
font-weight: bold;
text-shadow: 0 1px 0 #fff; }

.ie6 header nav {
width: 640px; }

header nav ul li {
float: left;  }

header nav ul li.login {
background: url(../images/vertical_rule.png) left repeat-y;
padding-left: 20px;  }

header nav ul li a {
text-decoration: none;
text-transform: uppercase;
display: block;
margin-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
color: #5e87a6; }

header nav ul li.login a {
margin-right: 20px; }

#main {
overflow: hidden;
text-align: left; }

#main img {
float: left;
margin-left: 20px; }

#main h1 {
font-family: "news-gothic-std",sans-serif;
float: right;
width: 355px;
font-size: 2.9em;
font-weight: 700;
line-height: 1.2em;
text-transform: uppercase;
color: #fff;
margin-right: 20px;
margin-bottom: 0;
text-shadow: 0 -1px 0 #9fb5bc; }

#main h1 em {
font-style: normal;
color: #2272b8; }

p {
margin-bottom: 20px;
color: #333333;
line-height: 1.6em; }

p.synopsis {
font-family: "news-gothic-std",sans-serif;
width: 570px;
font-size: 1.2em;
color: #6a859d;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
margin-bottom: 40px;
margin-left: 30px; }

p.synopsis em {
font-style: normal;
color: #2272b8; }

h2 {
font-family: "news-gothic-std",sans-serif;
text-align: center;
background: url(../images/hr_line.png) center repeat-x;
margin-bottom: 20px; }

h2 span {
padding: 20px;
background: #b4d9e8; }

h3 {
font-family: "news-gothic-std",sans-serif;
color: #184872;
font-weight: 700;
margin-bottom: 25px;
text-transform: uppercase;
font-size: 1.1em; }

ul#partner_list {
margin: 0;
padding: 0;
margin-left: 20px;
margin-bottom: 50px;
overflow: hidden;
text-align: center; }

ul#partner_list li {
float: left;
display: block;
list-style-type: none;
width: 120px;
height: 75px;
line-height: 60px;
text-align: center; 
margin-right: 12px;
margin-bottom: 12px;
vertical-align: middle;
display: table-cell; }

ul#partner_list li.last {
margin-right: 0; }

ul#partner_list li * {
vertical-align: middle; }

.ie8 ul#partner_list span {
display: inline-block;
height: 100%; }

#content {
overflow: hidden;
padding: 30px; }

body#home .col {
width: 275px;
float: left;
margin-right: 30px;
margin-bottom: 30px; }

body#home .col:nth-child(3n+3) {
margin-right: 0; }

body#home .ie6 .col {
margin-left: 30px; }

body#home .col p a {
color: #184872;
font-weight: bold;
text-decoration: none; }

body#home .col ul {
margin: 0;
padding: 0;
margin-bottom: 20px; }

body#home .col ul li {
list-style-type: none;
margin-bottom: 10px; }

ul#service_list li {
display: block;
padding: 10px 0 10px 45px; }

ul#service_list li.cal {
background: url(../images/icon_calender.png) left center no-repeat; }

ul#service_list li.clock {
background: url(../images/icon_clock.png) left center no-repeat; }

ul#service_list li.van {
background: url(../images/icon_van.png) left center no-repeat; }

ul#service_list li.scales {
background: url(../images/icon_scales.png) left center no-repeat; }

footer {
border-top: 1px solid #ececec;
padding-top: 20px;
background: url(../images/logo_morfa_signoff.png) right center no-repeat; }

footer nav {
clear: both;
font-size: .8em;
margin-bottom: 10px; }

footer nav ul li {
float: left;
margin-right: 10px; }

footer nav ul li a {
text-decoration: none; }

p.intro {
font-size: 1.6em; }

p.copyright {
font-size: .8em;
color: #666;
display: block; }

#logo {
font-size: 3em; }

.signoff {
position: absolute; }

#content article {
width: 650px;
float: right; }

#content aside {
width: 250px;
float: left; }

body#case_studies #content article {
width: 100%; }

#case_study_list {
margin: 0;
padding: 0;
font-style: italic; }

#case_study_list li {
list-style-type: none;
border-bottom: 1px solid #ececec;
padding-bottom: 30px;
margin-bottom: 30px;
overflow: hidden; }

#case_study_list li .quote {
width: 600px;
float: right; }

#case_study_list li img {
float: left;
margin-top: 40px; }

#case_study_list li blockquote {
font-family: Georgia, cursive;
background: #f7fdff;
margin-bottom: 10px;
padding: 20px;
font-size: 1.2em;
line-height: 1.4em;
color: #70abba; }

#case_study_list li blockquote span {
font-size: 3em; 
position: absolute; 
margin-left: -30px;
margin-top: 10px; }

#case_study_list li cite {
font-size: .8em;
font-weight: bold;
font-style: normal;
margin-left: 20px; }

#case_study_list li cite span {
font-weight: normal; }

/* Forms */

fieldset {
margin-top: 30px; }

fieldset ul {
margin: 0 0 30px 0;
padding: 0 0 20px 0;
border-bottom: 1px solid #ececec; }

fieldset ul.last {
border-bottom: none; }

fieldset ul li {
list-style-type: none; 
margin-bottom: 10px;
clear: both;
overflow: hidden; }

fieldset input[type="text"],
fieldset input[type="password"],
fieldset textarea {
border: 1px solid #c1ccd5;
background: #eaf1f7;
padding: 5px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 1px 0 #e5e3df, 0 1px 0 #f1f1f1;
-moz-box-shadow: inset 0 1px 0 #e5e3df, 0 1px 0 #f1f1f1;
-webkit-box-shadow: inset 0 1px 0 #e5e3df, 0 1px 0 #f1f1f1;
width: 360px;
float: left; }

.ie6 fieldset input.text,
.ie6 fieldset input.password,
.ie6 fieldset textarea.textarea {
border: 1px solid #c1ccd5;
background: #e4eff9;
padding: 5px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 1px 0 #e5e3df, 0 1px 0 #f1f1f1;
-moz-box-shadow: inset 0 1px 0 #e5e3df, 0 1px 0 #f1f1f1;
-webkit-box-shadow: inset 0 1px 0 #e5e3df, 0 1px 0 #f1f1f1;
width: 360px;
float: left; }

fieldset input:focus[type="text"],
fieldset input:focus[type="password"],
fieldset textarea:focus {
border: 1px solid #cfc6b7;
background: #fefecd; }

.ie6 fieldset input.ieFocus {
border: 1px solid #fdffd1;
background: #fefecd; }

fieldset input.error[type="text"] {
border: 1px solid #ff8d8d;
background: #ffe3e3;}

.ie6 fieldset input.text.error {
border: 1px solid #ff8d8d;
background: #ffe3e3;}

fieldset input.tel {
width: 250px; }

fieldset input.username,
fieldset input.password {
width: 360px; }

fieldset .forgot {
margin-left: 140px; }

fieldset input[type="checkbox"] {
margin-left: 100px;
margin-right: 10px;
float: left; }

.ie6 fieldset input.checkbox {
margin-left: 100px;
margin-right: 10px;
float: left; }

.checkbox {
margin-bottom: 0; }

.checkbox p {
font-size: .8em!important;
color: #8a7b68;
float: left;
display: block; }

span.required {
padding: 20px 0 0 5px;
font-family: Georgia, serif;
font-size: 1.7em;
font-weight: bold;
color: #2272b8; }

p.error {
color: #8f2c2c!important;
font-size: .9em!important;
clear: left;
margin-left: 110px; }

fieldset#pricing_calculator p.error {
margin-left: 35px; }

fieldset label {
padding: 10px 0 10px 0;
margin-right: 20px;
color: #8a7b68;
width: 100px;
display: block;
float: left;
text-align: right; }

fieldset label em {
color: #372e22;
font-style: normal;
font-weight: bold; }

fieldset button,
fieldset input[type="submit"] {
color: #ffffff;
text-shadow: 0 1px 0 #144875;
border: 1px solid #144875;
background: #2272b8; 
box-shadow: inset 0 1px 0 #60a0d7, 0 1px 0 #f1f1f1;
-moz-box-shadow: inset 0 1px 0 #60a0d7, 0 1px 0 #f1f1f1;
-webkit-box-shadow: inset 0 1px 0 #60a0d7, 0 1px 0 #f1f1f1;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-left: 120px;
padding: 10px 22px; }

fieldset button:hover {
background-color: #3188d4!important; }

fieldset button:active {
background-color: #3188d4!important; }

fieldset p.note {
font-size: .8em!important;
padding: 10px 20px 20px 20px; }

#hardware_brand_list {
margin: 0 0 0 70px;
padding: 0; }

#hardware_brand_list li {
display: table-cell;
list-style-type: none;
float: left;
width: 170px;
height: 122px;
border: 1px solid #ececec;
margin-right: 20px;
margin-bottom: 20px;
text-align: center; }

#hardware_brand_list li:hover {
border: 1px solid #ccc; }

#hardware_brand_list li:nth-child(4n+4) {
margin-right: none; }

ul#partner_list_2 {
margin: 0 0 0 70px;
padding: 0; }

ul#partner_list_2 li {
display: table-cell;
list-style-type: none;
float: left;
width: 170px;
height: 122px;
border: 1px solid #ececec;
margin-right: 20px;
margin-bottom: 20px;
text-align: center; }

ul#partner_list_2 li:hover {
border: 1px solid #ccc; }

ul#partner_list_2 li:nth-child(4n+4) {
margin-right: none; }

img.services_icon {
margin-top: 70px;}


/*
 * Media queries for responsive design
 * These follow after primary styles so they will successfully override. 
 */

@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  
  
  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust 
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}