@import url('../fonts/museo-sans/stylesheet.css');
@import url('../fonts/roboto/stylesheet.css');

a, a:visited { color: #008BC8; text-decoration: none; }
a:hover { text-decoration: underline; }

body { background-color: #FFFFFF; }

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column { margin: 0 10px; overflow: hidden; float: left; display: inline; min-height: 1px; }
.row { width: 960px; margin: 0 auto; overflow: hidden; }
.row .row { margin: 0 -10px; width: auto; display: inline-block; }


header { position: fixed; top: 0; left: 0; width: 100%; height: 140px; z-index: 100; background-color: #FFFFFF; }

.logo { margin: 42px 0 0 0; }

.section { position: relative; width: 100%; height: 700px; overflow: hidden; }
.section.home { margin-top: 140px; }
.section.blue { background-color: #008BC8; }
.section.footer { background-color: #EEEEEE; }

.bg { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 1; }
.pattern { position: absolute; right: 0; bottom: 0; margin: 0 -12px -12px 0; z-index: 2; }


h2 { position: relative; font: 48px/60px 'museo_sans100', Arial, sans-serif; color: #333333; margin: 100px 0 60px 0; padding: 0; z-index: 99; }

p { font: 20px/30px 'RobotoThin', Arial, sans-serif; color: #333333; margin: 0 0 30px 0; padding: 0; }

.blue p,
.blue h2,
.home h2 { color: #FFFFFF; }


b { font-weight: normal; font-family: 'RobotoMedium', Arial, sans-serif; }

.section ul { list-style: none; margin: 0 0 30px 0; padding: 0; }
.section ul li { font: 20px/30px 'RobotoThin', Arial, sans-serif; color: #333333; margin: 0; padding: 0; }

ul.social li { float: left; margin: 0 10px 0 0; }
ul.social li a { width: 50px; height: 50px; display: block; background-repeat: no-repeat; text-indent: -9999px; opacity: 0; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; }
ul.social li a:hover { opacity: 1; }

.facebook { background-image: url(../img/facebook.png); }
.facebook:hover a { background-image: url(../img/facebook_hover.png); }
.twitter { background-image: url(../img/twitter.png); }
.twitter:hover a { background-image: url(../img/twitter_hover.png); }
.linkedin { background-image: url(../img/linkedin.png); }
.linkedin:hover a { background-image: url(../img/linkedin_hover.png); }

#map { width: 100%; height: 300px; }

#nav { list-style: none; margin: 55px 0 0 0; padding: 0; float: right; }
#nav li { float: left; font: 20px/30px 'RobotoLight', Arial, sans-serif; color: #333333; text-transform: uppercase; margin-left: 20px; }
#nav li a { color: #333333; }
#nav li a.active { font-family: 'RobotoMedium', Arial, sans-serif; }