/**
 * Common Stylesheet
 *
 * @author 		Zone
 * @email		info@zonecontent.com
 * @url 		http://www.zonecontent.com/
 * @copyright 	Copyright (c) 2009, zonecontent.com. All rights reserved.
 */
 
/* Layout ****************/
* {
    outline: none
}
body {
    background:#1F6F8B url('../img/background_002.jpg') repeat 0px 582px;
}
#container {
    background:transparent url('../img/background_001.jpg') repeat-x top left;
    overflow:auto;
}
#page {
    margin:0 auto;
    overflow:auto;
    width:945px;
}

/* Typography ****************/
/* http://meyerweb.com/eric/thoughts/2007/06/04/ordering-the-link-states/ */
a {
	color:#fff;
    text-decoration:underline;
}
a:link {
	color:#fff;
    text-decoration:underline;
}
a:focus {
	color:#fff;
    text-decoration:underline;
}
a:hover {
	color:#fff;
    text-decoration:underline;	
}
div.box a {
    background:transparent url('../img/glyph_link.png') no-repeat 0px 5px;
    font-weight:bold;
	padding:0 0 0 15px;
}
div.box a.no_glyph {
    background:none;
	padding:0;
}
div.box p {
    line-height:1.5em;
    margin:0 0 20px 0;
}
div.box p.big {
    font-size:108.3%;
}
div.box p.padless {
    line-height:1.5em;
    margin:0 0 0 0;
}
p.testimonials {
    background:transparent url('../img/glyph_testimonials.png') no-repeat 0px 4px;
    color:#66CCFF;
    font-size:116.7%;
    font-weight:bold;
    padding:2px 0 7px 28px;
    position:relative;
    left:-10px;
}
h1 {
    font-size:240%;
}
h2 {
    font-size:133.3%;
}
h3 {
    color:#66CCFF;
    font-weight:bold;
    margin-bottom:3px;
    text-transform:uppercase;
}
h4 {
    font-size:125%;
    font-weight:bold;
    text-transform:uppercase;
}

/* Grids ****************/
div.grid_1 {
    float:left;
    overflow:hidden;
    padding:0 15px;
    width:150px;
}
div.grid_2 {
    float:left;
    overflow:hidden;
    padding:0 15px;
    width:360px;
}
div.grid_3 {
    float:left;
    overflow:hidden;
    padding:0 0 0 15px;
    width:525px;
}
div.grid_3 p {
    width:350px;
}
div.with_border {
    background:transparent url('../img/grid_border.png') repeat-y top left;
}
div.no_padding {
    padding-right:0px;
}
div.clear {
    clear:both;
}

/* Content ****************/
.hide {
    display:none;
}
strong {
    font-weight:bold;
}
div.box {
    background:transparent url('../img/border-box-bottom.png') no-repeat bottom left;
    color:#fff;
    margin-bottom:2px;
    overflow:auto;
    padding:0 0 12px 0;
}
div.box-top {
    background:transparent url('../img/border-box-top.png') no-repeat top left;
    overflow:auto;
    padding:12px 0 0 0;
}
div.box div.top {
    background-color:#000;
    border-bottom:solid 1px #616161;
    overflow:auto;
    padding:0 25px 8px 24px;
}
div.box div.content {
    background-color:#000;
    overflow:auto;
    padding:20px 0px 40px 14px;
    position:relative;
    width:931px;
}
div.box div.content div.standfirst {
    margin:30px 0 40px 6px;
}

/* Header ****************/
#header {
    background:transparent url('../img/header.jpg') no-repeat top left;
    height:115px;
    position:relative;
}
#header a.mail {
    background:transparent url('../img/glyph_mail.png') no-repeat top left;
    color:#0099ff;
    padding:3px 0 8px 38px;
    position:absolute;
    right:30px;
    text-decoration:none;
    top:10px;
}
#header p.phone {
    background:transparent url('../img/glyph_phone.png') no-repeat top left;
    color:#666;
    padding:3px 0 8px 35px;
    position:absolute;
    right:30px;
    text-decoration:none;
    top:43px;
}
#header ol {
    bottom:0px;
    left:99px;
    position:absolute;
}
#header ol li {
    display:inline;
}
#header ol li a {
    display:inline-block;
    height:28px;
    margin-right:-3px;
}
#header ol li a span {
    display:none;
}
#header ol li a.about {
    background:transparent url('../img/about_sprite.png') no-repeat 0px -28px;
    width:57px;
}
#header ol li a.about:hover {
    background-position:0px 0px;
}
#header ol li a.contact {
    background:transparent url('../img/contact_sprite.png') no-repeat 0px -28px;
    width:109px;
}
#header ol li a.contact:hover {
    background-position:0px 0px;
}
#header ol li a.portfolio {
    background:transparent url('../img/portfolio_sprite.png') no-repeat 0px -28px;
    width:69px;
}
#header ol li a.portfolio:hover {
    background-position:0px 0px;
}

/* Footer ****************/
#footer {
    padding:15px 0 30px 0;
}
#footer ol li {
    display:inline;
    margin:0 0 0 -0.3em;
    padding:0 0.3em;
}
#footer ol li a {
    color:#000;
    text-decoration:none;
}

/* Main ****************/
div.main {
  background:#000000 url('../img/messi.jpg') no-repeat top right !important;
}
div.main div.grid_2 {
  bottom:30px;
  left:540px;
  position:absolute;
}

/* Testimonials ****************/
div.testimonial_uefa {
    margin-top:-20px;
}
div.testimonial_sky {
    bottom:0px;
    left:195px;
    position:absolute;
}
div.testimonial_uefa img,
div.testimonial_sky img {
    margin-bottom:10px;
}

/* Portfolio ****************/
div.portfolio div.grid_2 {
    padding-left:10px;
}
div.portfolio div.grid_1 {
    height:360px;
    position:relative;
}
div.portfolio div.grid_1 p a {
    position:absolute;
    bottom:0px;
}

/* Syndication ****************/
div.syndication div.grid_1 {
    padding-left:10px;
}
div.syndication div.no_padding {
    width:340px;
}