/* =================
 Thinkpuppet Solutions
 April 2013
 =================== */
 
/* layout
-------------------- */

html {
height:100%
}

body {
height:100%;
text-align:center;
background:#fff;
font-size:100%;
font-size:12px;
font-family:Verdana, Helvetica, Arial, sans-serif;
color:#000
}

#wrapper {
margin:0 auto;
text-align:left;
max-width:1120px;
background: url(../img/bkgd.png) no-repeat top left;
}

img {
max-width:100%;
}

/* header
-------------------- */

header {
max-width:880px;
min-height:165px;
position:relative;
}

header a#logo {
display:block;
width:401px;
height:161px;
float:left;
background:url(../img/logo.png) no-repeat;
color:#fff;
text-indent:-9999px;
white-space:nowrap;
}

header nav {
text-align:right;
float:right;
margin-top:56px;
}

header nav ul li {
list-style:none;
display:inline;
color:#747575;
padding:0 3px;
font-size:1.5em !important;
font-family:'MuseoSlab500Regular',Verdana,Geneva,sans-serif;
font-weight:normal;
}

header nav ul li a:link,
header nav ul li a:visited {
color:#747575;
}

header nav ul li a:hover,
header nav ul li a:active {
color:#000;
}

/* content
-------------------- */

section {
clear:both;
float:left;
margin-top:25px;
padding-bottom:50px;
}

section article {
float:left;
margin-left:195px;
}

section article#about-us,
section article#our-services {
max-width:420px;
margin-right:25px;
}

section article#introduction,
section article#contact-us {
max-width:680px !important;
}

section article#introduction,
section article#contact-us {
padding-bottom:100px;
}

aside {
float:left;
max-width:235px;
}

/* footer
-------------------- */

footer {
clear:both;
}

footer p {
font-size:1em !important;
line-height:1.5em;
max-width:850px;
text-align:right;
padding:15px 0;
color:#8b8c8c;
}

/* misc
-------------------- */

span.nowrap { 
display: inline !important;
}

a,
a:visited {
color:#8b8c8c;
text-decoration:none;
}

a:hover,
a:active {
color:#010101;
}

h1 {
font-family:'MuseoSlab500Regular',Verdana,Geneva,sans-serif; 
color:#53b0d5;
font-weight:normal;
font-size:6em !important;
line-height:1.5em;
margin-top:0 !important;
margin-bottom:0 !important;
}

h2 {
font-family:'MuseoSlab500Regular',Verdana,Geneva,sans-serif; 
color:#53b0d5;
font-weight:normal;
font-size:3.5em !important;
line-height:1.5em;
margin-top:0 !important;
margin-bottom:0 !important;
}

article h3,
article p,
article li {
font-size:1.25em !important;
line-height:1.5em;
}

article p a {
font-weight:700;
}

article#introduction p,
article#introduction li {
font-size:2.75em !important;
margin-top:0 !important;
margin-bottom:0 !important;
}

article#introduction ul {
list-style:none;
padding:0;
}

article h3,
aside h3 {
font-weight:700;
margin-bottom:0 !important;
}

article#about-us p,
aside p {
margin-top:0;
}

aside h3,
aside p {
font-size:1em !important;
line-height:1.75em;
}

aside img {
max-width:250px;
max-height:125px;
border:none;
margin:15px 0;
}

hr {
clear:both;
float:left;
height:1px;
color:#fff;
background-color:#fff;
width:100%;
}

a.more-link {
color:#010101;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}

a.more-link:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

a.top-link {
display:block;
clear:both;
float:left;	
text-align:right;
width:95%;
}

a.top-link img {
height:22px;
width:22px;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}

a.top-link:hover img {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

/* responsive
-------------------- */

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 767px)  {
  body{
  padding:0 20px !important;
  }

}

@media handheld and (max-width: 479px), screen and (max-device-width: 479px), screen and (max-width: 479px)  {
  #wrapper {
  max-width:100%;
  background:none;
  }
  header {
  width:100%;
  }
  header a#logo {
  width:200px;
  height:55px;
  float:left;
  background:url(../img/logo-sm.png) no-repeat;
  display:block;
  margin-top:15px;
  margin-bottom:15px;
  }
  header nav {
  text-align:center;
  float:left;
  margin:0 auto;
  width:100%;
  }
  header nav ul,
  header nav ul li {
  margin:0;
  padding:0;
  list-style:none;
  }
  header nav ul li {
  display:block;
  float:none;
  text-align:center;
  width:100%;
  }
  header nav ul li.divider {
  display:none;
  }
  header nav ul li a {
  padding:4px 0;
  background:#e4e4e4;
  display:block;
  margin-bottom:4px;
  }
  section {
  float:left;
  clear:left;
  }
  section article,
  aside {
  float:left;
  clear:left;
  margin-left:5%;
  margin-right:5%;
  width:100% !important;
  max-width:90%;
  }
  h1 {
  font-size:3em !important;
  }  
  h2 {
  font-size:2em !important;
  }
  article#introduction p,
  article#introduction li {
  font-size:2em !important;
  }
  article h3,
  article p,
  article li,
  aside h3,
  aside p {
  font-size:1em !important;
  line-height:1.5em;
  }
  section article#introduction,
  section article#contact-us {
  padding-bottom:0;
  }
  a.more-link {
  display:none;
  }
}