@charset "utf-8";

/* CSS Document */


/* ---------------- RESETS ---------------- */

body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, form, img, table, object, img, blockquote {margin: 0; padding: 0; border: 0;}



/* ---------------- BASIC STYLES ---------------- */

/* CLASSES */

.align-right {float: right; text-align: right;}

.align-left {float: left; text-align: left;}

.align-center {text-align: center; margin: 0 auto;}


/* HEADINGS */

h1 { font-size: 3em; }

h2 { font-size:2em; }

h6 { font-size:1.75em; padding:1.51762em 0; }

h4 { font-size:1.5em; padding:1.45833em 0; }

h5 { font-size:1.33333em; padding:1.25001em 0; }

h6 { font-size:1.16667em; padding:1.51785em 0; }

h1, h2 { padding: 1.25em 0; }

h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:0; }

h1, h2, h3, h4, h5, h6 {color: #6e6e6e;}


/* HYPERLINKS */

a, a:link, a:visited, a:hover, a:active, a:focus {color: #00406b; }

a, a:link, a:visited, a:hover, a:active, a:focus {text-decoration: underline;}


/* PARAGRAPHS */

body {font-size: 62.5%; line-height: 1.25; font-family: 'Helvetica', Arial, Verdana, sans-serif;}

p {font-size: 1.6em; color: #6e6e6e; padding: 1.25em 0;}


/* TABLES */

/* Styles unordered list within a table; specifically styles the "Features Summary" table */
table ul {list-style-type: disc; list-style-position: outside; display: inline-block; margin-left: 30px; padding: 1.25em 0;} 

/* Styles unordered list items within a table; specifically styles the "Features Summary" table */
table ul > li {font-size: 1.6em; color: #6e6e6e;} 

/* Styles heading tags within tables; specifically, styles headings in the "Features Summary" table */
table h1, table h2 {color: #6e6e6e;} 




/* ---------------- CONTAINER ---------------- */

/* this is the page's wrapper, which creates a fixed width and centers the page */
div#container {width: 960px; height: 100%; min-height: 100%; margin: 0 auto -201px auto;}



/* ---------------- HEADER ---------------- */

/* the header, containing the navigation and truvizion logo */
div#header {width: 100%; height: auto; padding: 0; margin: 0;}

/* NAVIGATION */

/* Puts a 20px margin between navigation and top of page */
div#header > div:first-child {margin-top: 20px; padding-top: 0;} 

/* Creates navigation block at top of page */
div#navigation {width: 100%; height: 55px; padding: 10px 0; margin: 0; display: block; border-bottom: 1px solid #D9D9D9;} 

/* Creates block for TruVizion logo */
div#navigation > a > img {padding: 0; margin: 0; float: left; display: inline-block; vertical-align: middle;}

/* Structure for the main navigation menu -  uses unordered list to create */
ul#nav-menu {width: auto; height: 55px; float: right; display: inline-block; clear: none;} 

/* Main navigation individual menu items */
ul#nav-menu > li {width: auto; height: auto; display: inline-block; padding: 0 10px; vertical-align: middle; list-style-type: none; font-size: 1.6em; border-right: 1px solid #d9d9d9;} 

/* takes away space at left of first menu item */
ul#nav-menu > li:first-child {padding-left: 0;} 

/* takes away border and space at right of last menu item */
ul#nav-menu > li:last-child {border-right: none; padding-right: 0;} 

/*styles hyperlinks in menu */
ul#nav-menu > li > a, ul#nav-menu > li > a:link, ul#nav-menu > li > a:visited {color: #6e6e6e; text-decoration: none; border: none;} 

/* sytles hyperlinks when user hovers/clicks menu items */
ul#nav-menu > li > a:hover, ul#nav-menu > li > a:active, ul#nav-menu > li > a:focus {color: #ffa600; text-decoration: underline;} 




/* ---------------- CONTENT ---------------- */

/* the main body of each page, in between the header(navigation) and footer */
div#content {width: 100%; height: auto; padding: 0; margin: 20px 0 0 0;}

/* structures paragraphs on landing page; 10px indents on left and right; 20px space at top and bottom */
div#content > p {padding: 0 10px; display: block; margin: 20px 0; text-align: justify;}

/* Puts 20px of space at the top and bottom of the ADD-THIS menu bar on landing page */
div#content > div.addthis_toolbox {padding: 0 10px; display: inline-block; margin: 10px 0;}



/* PAGE-CONTENT */

/* creates structure for content to allow for left-hand navigation - 800px wide vs 960px wide (like "content" tag) */
div#page-content {width: 800px; float: right; display: inline-block; margin: 0 0 20px 0;}

/* Structure for banners on most pages - puts bottom margin of 10px below */
div#page-content > img {display: inline-block; float: left; clear: both; width: 780px; height: auto; margin: 0 0 10px 0;}

div#page-content > img:first-child + h1 {display: inline-block; clear: both;}

div#page-content > div.addthis_toolbox, div#page-content > div.page-column > div.addthis_toolbox, div.page-column > h1 + div {margin-top: -20px;}

div#page-content > table > tbody > tr > td > div.addthis_toolbox {margin-top: -20px; margin-bottom: 40px;}



/* PAGE-CONTENT: SCREEN SHOTS */

/* Structures unordered lists within PAGE-CONTENT */
div#page-content > ul {display: block;padding: 1.25em 0;}

/* Styles the fonts of unordered list items within PAGE-CONTENT */
div#page-content > ul > li {font-size:1.6em; color: #6e6e6e; margin-left: 40px; list-style-type: disc; list-style-position: outside;}

/* Creates area for screen shots on each case study page and uses the unordered list tag to create it */
div#page-content ul.screen-shots {display: block; width: 800px; margin: 0; padding: 0; float: right; clear: both;}

/* Makes individual list items within unordered list with class "screen-shots" display horizontally, without bullets, and with 10px left & right margins */
div#page-content ul.screen-shots > li {display: inline-block; list-style: none; margin: 0 10px; padding: 0;}

/* Takes away left margin of first screen shot */
div#page-content ul.screen-shots > li:first-child {margin-left: 0;}

/* Takes away right margin of last screen shot */
div#page-content ul.screen-shots > li:last-child {margin-right: 0;}

/* Styles the "Click to Enlarge" text below each screen shot */
div#page-content ul.screen-shots > li > p {font-size: 16px; text-align: center; color: #6e6e6e; padding: 0; margin-top: 5px;}

/* Styles the "See TruVizion in Action" heading identifying screen shot area */
div#page-content ul.screen-shots > li h2 {color: #6e6e6e;}

/* Makes the "See TruVizion in Action" heading a full-width block, thereby preventing it from appearing in the normal document flow */
div#page-content h2.screen-shots {width: 100%; border-top: 1px solid #D9D9D9; padding: 10px 0; display: block; float: left; clear: both; margin: 10px 0;}



/* PAGE-COLUMN */

/* Creates main body columns (2) in content of pages */
div.page-column {width:380px; padding: 0 10px; display: inline-block; clear: none; float: left;}

/* Makes unordered lists within PAGE-COLUMNs block elements */
div.page-column ul {display: block;padding: 1.25em 0;} 

/* Styles the fonts of unordered list items within PAGE-COLUMNs */
div.page-column ul > li {font-size:1.6em; color: #6e6e6e; margin-left: 40px; list-style-type: disc; list-style-position: outside;}

/* Styles the fonts of nested unordered list items within PAGE-COLUMNs */
div.page-column ul > li > ul > li {font-size: 1.0em; margin-left: 40px;}

div.page-column > img {padding-top: 40px;}

/* Aligns Case Study titles to the top of the page */
h1.case-study-title {padding-top: 0; margin-top: 0;}



/* BLOCKQUOTE */

/* Creates area for blockquote, or call-out box, that displays within PAGE-COLUMN */
div.page-column > blockquote {font-size: 1.6em; font-style:italic; display: block; padding: 10px 20px; margin: 45px 0 20px; color: #6e6e6e; background-color: #F1F1F1; border-top: 1px solid #6e6e6e; border-bottom: 1px solid #6e6e6e; float: right;}

div.page-column > h1 + div + script + blockquote {margin: 40px 0;}

/* styles the quote's information (i.e. who said it, where they work, their position, and a link to the case study) in an unordered list */
div.page-column > blockquote > ul {display: inline-block; float:right; width: 45%; padding: 0; margin: 10px 0;}

/* styles the quote's unordered list's individual items */
div.page-column > blockquote > ul > li {font-size: 0.8em; font-weight: normal; list-style-type: none; margin: 0; padding: 0;}

/* makes quote's sayer's name larger than the other information */
div.page-column > blockquote > ul > li:first-child {font-size: 1.0em;}



/* LEFT-NAVIGATION */

ul#left-navigation {width: 140px; padding: 0 10px; display: inline-block;}

ul#left-navigation > li {display: inline-block; width: 140px; height: auto; margin: 10px 0; font-size: 1.6em;}

ul#left-navigation > li > a, ul#left-navigation > li > a:link, ul#left-navigation > li > a:visited {color: #6e6e6e; text-decoration: none; }

ul#left-navigation > li > a:hover, ul#left-navigation > li > a:active {color: #ffa600; text-decoration: underline;}


/* ---------------- CONTACT FORM STYLING ---------------- */

form#contact {color: #7e7e7e; width: 360px; border: dotted 1px #7e7e7e; padding: 10px 0;}

fieldset {border: none 0;}

fieldset.fieldset {width: 320px; margin: 10px auto; padding: 10px;}

fieldset.fieldset > legend {width:320px; display: inline-block; padding: 0 10px 5px 0; border-bottom: dotted 1px #7e7e7e; }

fieldset.fieldset > legend {font-size: 2.1em; color: #7e7e7e;}

fieldset.fieldset > label, fieldset.fieldset > input.contact-info, fieldset.fieldset > input.company-info {font-size: 1.4em; color: #7e7e7e; text-align: left;}

fieldset.fieldset > input.contact-info, fieldset.fieldset > input.company-info {width: 280px;}

fieldset.fieldset > input[type="text"] {padding: 5px;}

fieldset.fieldset > input[type="text"]:focus {background-color: #f2fafd;}

input[type="submit"] {margin-left: 20px;}




/* ---------------- INDEX PAGE: SPECIAL CONTENT ---------------- */

/* Sets up block to display the 3 images on index.php page and puts 20px of space at top and bottom of block */
div#three-sections {width: 100%; height: 151px; margin: 20px 0; display: block;}

/* Individual column that holds each of the 3 images on index page; sets up vertical line between them */
div.column {width: 319px; height: 151px; border-right: 1px solid #d9d9d9; display: inline-block; float: left;}

/* puts 20px between each of the 3 images on index.php page */
div.column > a > img {margin: 0 10px;}

/* Removes the right-aligned border on the last of the 3 individual images on index.php page */
div#three-sections > div.column:last-child {border-right:none;}



/* ---------------- FOOTER: STRUCTURE ---------------- */

/* the footer */
div#footer {width: 960px; height: 201px; margin: 0 auto; border-top: 1px solid #d9d9d9;}

/* this is necessary for the sticky footer */
div.clear-footer {height: 201px; clear: both;}

div#footer > ul.footer-column {width: 300px; padding: 0; display: inline-block; text-align: left; margin: 20px 9px 0 9px;}

div#footer > ul.footer-column > li  {font-size: 1.4em; list-style-type: none; text-indent: 0; margin: 5px 0; color: #6e6e6e; text-decoration: none;}

div#footer > ul.footer-column > li > a, div#footer > ul.footer-column > li > a:link, div#footer > ul.footer-column > li > a:visited {color: #6e6e6e; text-decoration: none;}

div#footer > ul.footer-column > li > a:hover, div#footer > ul.footer-column > li > a:active {color: #ffa600; text-decoration: underline;}

div#footer > ul.footer-column > li:first-child {font-size: 1.6em; font-weight: 900; margin-top: 0; padding-top: 0;}

div#copyright {width: 100%; margin-top: 20px; display: block;}

div#copyright > p {font-size: 12px; text-align: center; padding: 5px 0;}