/* CSS file generated by Responsify */
/* Columns: 12, Gutter Width: 1.5, Breakpoints:  */ 

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;}

ul#nav, ul#nav li {margin:0;} 
ul#nav {list-style:none;}

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12{
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.col {margin-left:1.5%;}

.col:first-child {margin-left:0;}

.span1{
  width: 6.95833333333%;
  
}
.span2{
  width: 15.4166666667%;
  
}
.span3{
  width: 23.875%;
  
}
.span4{
  width: 32.3333333333%;
  
}
.span5{
  width: 40.7916666667%;
  
}
.span6{
  width: 49.25%;
  
}
.span7{
  width: 57.7083333333%;
  
}
.span8{
  width: 66.1666666667%;
  
}
.span9{
  width: 74.625%;
  
}
.span10{
  width: 83.0833333333%;
  
}
.span11{
  width: 91.5416666667%;
  
}
.span12{
  width: 100%;
  margin-left: 0;
}

body {margin:0 auto; max-width:960px; font-size:87.5%; color:#000; font-family:Arial, Helvetica, sans-serif; line-height:1.5em;  background:#fff;}

h1{
    font-size: 1.714285714em; /* 24 / 14 */
    line-height: 1.5em; /* 21 / 14 */
}

h2{
  font-size: 1.5em; /* 21 / 14 */
  line-height: 1.5em; /* 21 / 14 */
}

p{
    font-size: 1em; /* 14 / 14 */
    line-height: 1.5em; /* 21 / 14 */
    margin-bottom: 1.5em; /* 21 / 14 */
}

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

img {max-width:100%;}

#container, .inner {margin:0 auto;}

header {margin:0 0 5px; background:#fff;}
header h1.logo {margin:30px 0 0 10px; width:229px; height:24px; text-indent:-9999px; background:url(../img/logo-column-technology.png) no-repeat 0 0;}
header h1.logo a {display:block; width:229px; height:24px; background:none;}

#container {clear:both; margin:0 0 50px; padding-top:20px; overflow:hidden; background:none;}

#container h1, #container h2, #container h3 {padding:0 0 0 15px;}
#container h1 {margin:0 0 14px; color:#00a896; font-size:1.7em; font-weight:normal; border-bottom:1px solid #000;}
#container h2 {margin:0 0 10px; font-size:1.2em;}
#container h3 {margin:0 0 5px; border-bottom:1px solid #000;}

#container .span9 h2 {padding:0;}

ul, ol {float:left; width:90%; margin:0 0 20px 20px; padding:0 5% 0 10px; background:none;}
ol li {font-weight:bold;}
ol li span {font-weight:normal;}

.btn {margin:0 0 0 -10px;}
.btn a {float:left; width:180px; height:60px; color:#fff; text-align:center; text-decoration:none; line-height:390%; background:url(../img/sprite.png) no-repeat -404px 0;}
.btn a:hover {display:block; width:180px; height:60px; text-decoration:underline; background:url(../img/sprite.png) no-repeat -582px 0;}

.divider {clear:both; margin:0 0 20px; padding:0; border-bottom:1px solid #000; background:none;}

table {float:left; width:100%; margin:0 0 50px; background:none;}
table .table-name {font-weight:bold; border-bottom:1px solid #000;}
table th {padding:5px 0 0; font-size:0.95em; font-weight:normal; text-align:left;}
table td {font-size:0.95em;}
tr:nth-child(odd) {background:#f4f5f6;}
tr.first {font-size:1.1em; background:none;}

.fig-desc {color:#00a896; font-size:0.9em;}

footer {margin:0; padding:0; background:#333;}
footer p {margin:0; padding:5px 0; color:#fff; font-size:0.8em; text-align:center;}
    
/* MEDIA QUERIES */

/* Responsify Defaults */

@media screen and (max-width: 768px){
   	ul#nav .span4 {width:100%;}
  
   	.span8, article {width:100%;}

  	.span4, aside {width:100%; margin-left:0;}
  
  	.span3 {width:45%;}

  	#container, .inner {width:90%; padding:0 5% 0 5%;}
  	header h1.logo {margin-left:0; margin-right:40px;}
  	#menu {float:right; margin:20px 0 0 0; width:24px; height:24px; display: block; text-indent:-9999px; background:url(../img/icon-menu.png) no-repeat 0 0;}	
  	#menu:hover {cursor:pointer;}
  	ul#nav {float:left; width:390px; padding:30px 0 0; background:none;}
  	ul#nav li:first-child {padding-left:0;}
  	#nav li:hover ul {background:#fff;}
  	ul#nav li {padding:0 20px 0 0; background:none;}
  	li.home-menu {display:none;}
  	/* #nav.js {display:none;} */
}	

@media screen and (min-width: 768px) {
	#menu {display:none;}
	#container h1, #container h2, #container h3 {padding:0 0 0 5px;}
}

@media screen and (max-width: 480px){
 	.span3 {width:100%;}
 	#container h1, #container h2, #container h3 {padding:0 0 0 5px;}
 	header h1.logo {margin-left:0; margin-right:0;}
 	ul#nav {width:100%; padding:20px 0 0;}
 	ul#nav li {padding:0 5px 0 0; background:none;}
 	ul#nav li:last-child {padding:0;}
 	ul#nav li a {font-size:0.9em;}
  	li.home-menu {display:none;}
  	#nav li:hover ul {background:#fff;}
}
	

/* Custom Breakpoints */

@media screen and (max-width: px) {
 /* Add your styles for devices with a maximum width of  */
}


// Micro Clearfix 

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}