/* @override 
	http://think.aa/css/espionage.css
	http://alext.dev.think.alex-and-alex.com/css/espionage.css
*/

/* Structure
-------------------------------------------------------------- */

body {
  color: #000;
  background: white url(/img/logos/gradient.png) repeat-x 0 100%;
}

#container {
  width: 960px;
  margin: 0 auto;
}

.column {
  width: 450px;
  margin-right: 30px;
  float: left;
}

.contact-column-small {
  width: 320px;
  margin-right: 60px;
  float: left;
}

.contact-column-large {
  width: 580px;
  float: left;
}

img { display: block; }

/* Typography
-------------------------------------------------------------- */
a { color: #ed1e24; }

a.download {
  padding: 6px 30px;
  background: transparent url(/img/logos/download.png) no-repeat 0 50%;
}

ul.no-list {
  margin-left: 0;
  list-style: none;
}

/* Headings */

h2 {
  font-size: 20px;
  line-height: 27px;
  height: 27px;
  
  font-family: "Avant Garde Demi Bold", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  
  border: 2px solid black;
  border-width: 2px 0 1px 0;
  
  margin-bottom: 20px;
}

h2.work { background-image: url(/img/titles/work.png); }
h2.news { background-image: url(/img/titles/news.png); }
h2.latest { background-image: url(/img/titles/latest.png); }
h2.connect { background-image: url(/img/titles/connect.png); } 
h2.new-business { background-image: url(/img/titles/new-business.png); } 
h2.call { background-image: url(/img/titles/call.png); } 
h2.pop-in { background-image: url(/img/titles/pop-in.png); } 

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

.replace {
  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
  background-repeat: no-repeat;
}

h2.replace { background-position: 0 6px; }

/* Header
-------------------------------------------------------------- */

#header {
  height: 120px;
  position: relative;
}

#header h1 {
  position: absolute;
  top: 30px;
  width: 320px; height: 70px;
  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
  
  background: transparent url(/img/logos/group-logo.png) no-repeat;
}

#header h1 a {
  display: block;
  width: 100%; height: 100%;
  
  outline: none;
}

#header p.company {
  position: absolute;
  right: 0; top: 10px;
  
  display: block;
  width: 193px; height: 9px;
  
  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
  
  background: transparent url(/img/logos/company.png) no-repeat;
}

/* Navigation
-------------------------------------------------------------- */

ul#navigation {
  position: absolute;
  right: 0; top: 65px;
      
  margin: 0;
  list-style: none;
}

ul#navigation li {
  display: block;
  float: left;
  height: 10px;
  
  margin-right: 10px;
  
  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
  
  background: transparent url(/img/logos/nav-home.png) no-repeat;
}

ul#navigation li a {
  display: block;
  width: 100%; height: 100%;
  outline: none;
}

ul#navigation li:hover, ul#navigation li.here { background-position: 0 -12px; color: #ed1e24;}

ul#navigation li.home { background-image: url(/img/logos/nav-home.png); width: 41px;}
ul#navigation li.about { background-image: url(/img/logos/nav-about.png); width: 58px;}
ul#navigation li.espionage { background-image: url(/img/logos/nav-espionage.png); width: 68px;}
ul#navigation li.tlc { background-image: url(/img/logos/nav-tlc.png); width: 27px;}
ul#navigation li.mrs-jones { background-image: url(/img/logos/nav-mrs-jones.png); width: 72px;}
ul#navigation li.blog { background-image: url(/img/logos/nav-blog.png); width: 38px;}
ul#navigation li.contact { background-image: url(/img/logos/nav-contact.png); width: 60px;}
ul#navigation li.last { margin-right: 0; }

/* Quote
-------------------------------------------------------------- */

.quote {
  width: 960px; height: 110px;
  border: 2px solid black;
  border-width: 2px 0 1px 0;
}

.quote cite {
  display: block;
  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
}

.quote blockquote {
  display: block;
  margin: 0;
  width: 960px;
  height: 100%;

  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
  
  background-repeat: no-repeat;
}

#ballard-quote blockquote { background-image: url(/img/quotes/quote-ballard.png); }
#home-quote { height: 230px; }
#home-quote blockquote { background-image: url(/img/quotes/quote-home.png); }
#contact-quote { height: 62px; margin-bottom: 75px; }
#contact-quote blockquote { background-image: url(/img/quotes/quote-contact.png); }
#about-quote { height: 75px; margin-bottom: 50px; }
#about-quote blockquote { background-image: url(/img/quotes/quote-about.png); }

/* Logo Links
-------------------------------------------------------------- */
ul.logo-links {
  list-style: none;
  margin: 0;
  
  border-bottom: 1px dotted #000;
}

ul.logo-links li {
  display: block;
  float: left;
  
  font-size: 1px; line-height: 1px;
  text-indent: -5000px;
  
  width: 240px; height: 69px;
}

ul.logo-links a {
  display: block;
  width: 100%; height: 100%;
  background: transparent url(/img/logos/espionage-link.png) no-repeat 0 0;
}

ul.logo-links li a:hover {
  background-position: 0 -70px;
}

ul.logo-links li#espionage-link a { background-image: url(/img/logos/espionage-link.png); }
ul.logo-links li#tlc-link a { background-image: url(/img/logos/tlc-link.png); }
ul.logo-links li#mrs-jones-link a { background-image: url(/img/logos/mrs-jones-link.png); }
ul.logo-links li#pymca-link a { background-image: url(/img/logos/pymca-link.png); }

/* Shop Window
-------------------------------------------------------------- */
.shop-window {
  width: 960px; height: 456px;
}

/* Work
-------------------------------------------------------------- */

.work-thumb {
  float: left;
  margin: 0 28px 26px -8px;
}

/* News
-------------------------------------------------------------- */

.news-post {
  border-bottom: 1px dotted black;
  margin-bottom: 1.5em;
}

.news-image {
  margin: 0 0 1.5em -8px;
}

/* Blog
-------------------------------------------------------------- */

.blog-post {
  border-bottom: 1px dotted black;
  margin-bottom: 1.5em;
}

/* Icon List
-------------------------------------------------------------- */

ul.icon-list {
  list-style: none;
  margin: 55px 0 80px 0;
}

ul.icon-list li {
  height: 49px;
  line-height: 50px;
  border-bottom: 1px solid #aaa;
  color: #ed1e24;
  text-indent: 40px;
  background: transparent url() no-repeat 0 50%;
}

ul.icon-list li.last { border-color: #000; }

ul.icon-list li a {
  text-decoration: none;
}

ul.icon-list li.google-maps { background-image: url(/img/contact/map-marker.png); }
ul.icon-list li.twitter-icon { background-image: url(/img/contact/twitter-bird.png); }
ul.icon-list li.email { background-image: url(/img/contact/email.png); }
ul.icon-list li.phone { background-image: url(/img/contact/phone-icon.png); }

/* About
-------------------------------------------------------------- */
h2.about-logo {
  font-size: 1px; line-height: 1px;
  border: 0;
  text-indent: -5000px;
  background: transparent url(/img/logos/espionage-logo.png) no-repeat;
}

h2.about-logo a {
  display: block;
  width: 100%; height: 100%;
}

.about-logo.espionage {
  background-image: url(/img/logos/espionage-logo.png);
  height: 40px;
}

.about-logo.tlc {
  background-image: url(/img/logos/tlc-logo.png);
  height: 48px;
}

.about-logo.mrs-jones {
  background-image: url(/img/logos/mrs-jones-logo.png);
  height: 60px;
}

.about-logo.pymca {
  background-image: url(/img/logos/pymca-logo.png);
  height: 21px;
}


/* Contact
-------------------------------------------------------------- */
.contact-photo {
  float: left;
  margin-right: 15px;
}

.contact-details { color: #ed1e25; }
.contact-details a { text-decoration: none; }

p.phone-number {
  height: 68px;
  
  margin: 30px 0 60px 0;
  background-image: url(/img/contact/phone-number.png);
}

/* Footer
-------------------------------------------------------------- */
#footer {
  margin-top: 150px;
}

.footer-column {
  float: left;
  width: 170px;
  margin: 0 35px;
}

.footer-column h4 {
  font-size: 12px;
  font-weight: 700;
  color: #4d4d4d;
}

.footer-column p { color: #4d4d4d; }
.footer-column a { text-decoration: none; }

.copyright {
  height: 70px;
  border-top: 1px dotted #000;
}

.copyright p {
  margin-top: 28px;
  color: #5d5d5d;
}

/* Twitter
-------------------------------------------------------------- */

div.twitter {
  position: relative;
  top: 10px;
  width: 500px; height: 150px;
  float: left;
  
  background: transparent url(/img/logos/twitter.png) no-repeat 40px 100%;
}

.twitter p {
  position: absolute;
  left: 93px; top: 40px;
  width: 335px;
  margin: 0;
  
}

/* Misc
-------------------------------------------------------------- */
.last { margin-right: 0; }

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    overflow:hidden; 
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }