/* ==== Scroll down to find where to put your styles :) ==== */


/* 	HTML5 Boilerplate
 
	html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
	v1.4 2009-07-27 | Authors:Eric Meyer & Richard Clark
*/

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;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration:line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

/* End of Reset CSS 

fonts.css from the YUI Library:developer.yahoo.com/yui/ */

body { font:13px/1.9 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family:monospace, sans-serif; }


/* 
 * HTML5 Boilerplate - minimal base styles 
 */

body, select, input, textarea { 
  color:#444;
  /* font-family:Georgia, serif;  */
}
h1,h2,h3,h4,h5,h6 { font-weight:bold; }
html { overflow-y:scroll; }
a:hover, a:active { outline:none; }
a, a:active, a:visited, a:hover { color:#E32119; }
ul, ol { margin-left:1.8em; }
ol { list-style-type:decimal; }
nav ul, nav li { margin:0; }
small { font-size:85%; }
strong, th { font-weight:bold; }
td, td img { vertical-align:top; }
sub { vertical-align:sub; font-size:smaller; }
sup { vertical-align:super; font-size:smaller; }
pre { 
  padding:15px;
  white-space:pre; /* CSS2 */
  white-space:pre-wrap; /* CSS 2.1 */
  white-space:pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap:break-word; /* IE */
}
textarea { overflow:auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left:-7px; } /* thnx ivannikolic! */
input[type="radio"] { vertical-align:text-bottom; }
input[type="checkbox"] { vertical-align:bottom; }
.ie7 input[type="checkbox"] { vertical-align:baseline; }
.ie6 input { vertical-align:text-bottom; }
label, input[type=button], input[type=submit], button { cursor:pointer; }
button, input, select, textarea { margin:0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { 
      border-radius:1px;
    -moz-box-shadow:0px 0px 5px red;
 -webkit-box-shadow:0px 0px 5px red;
         box-shadow:0px 0px 5px red;
}
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color:#f0dddd; }

button {  width:auto; overflow:visible; }
.ie7 img { -ms-interpolation-mode:bicubic; }


/* 
 * Non-semantic helper classes 
 */

/* for image replacement */
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat:no-repeat; text-align:left; direction:ltr; }

/* Hide for both screenreaders and browsers */
.hidden { display:none; visibility:hidden; }

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { position:absolute !important;
  clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip:rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility:hidden; }

/* Clearfix */
.clearfix:before, .clearfix:after {
  content:"\0020"; display:block; height:0; visibility:hidden;
} 
.clearfix:after { clear:both; }
.clearfix { zoom:1; }

.left { float:left; }
.right { float:right; }

.inline { display:inline!important; }


/*
 * Main Styles
 */

body {
	font-family:Helvetica Neue, Helvetica, sans-serif;
}

a, a:visited {
    color:#e32119;
}

#logo {
    height:161px;
	float:left;
    width:230px;
}

    #logo a {
        display:block;
        height:150px;
        padding-left:5px;
        width:220px;
    }

h1, h2, h3, h4 {
    font-family:"Vinkel Bold", sans-serif; font-size-adjust:0.55; font-style:normal;
}

blockquote {
    color:#707173;
    font-size:12px;
    margin-bottom:10px;
}

cite {
	font-size:13px;
    font-style:italic;
    font-weight:bold;
}

input, textarea {
    background:#fff url('../images/input-bg.png') repeat-x;
    border:1px solid #CECECF;
}

.wrapper {
	margin:0 auto;
    position:relative;
	width:980px;
}

header {
	background:#fff url('../images/top-nav-gradient.png') repeat-x;
	height:190px;
}

#main-nav {
    font-family:"Vinkel Bold", sans-serif; font-size-adjust:0.55; font-style:normal; font-weight:bold;
    clear:right;
    float:right;
    margin-top:60px;
    width:600px;
}

#main-nav li {
    float:left;
    font-size:20px;
    height:96px;
    padding:5px 5px 11px 5px;
    text-align:center;
    width:140px;
}

	#main-nav li:hover, #main-nav .sub-page li.active:hover {
		background:url('../images/nav-tab-active.png') no-repeat;
	}

	#main-nav .sub-page li:hover {
		background:none;
	}

    #main-nav .active {
        background:url('../images/nav-tab-active.png') no-repeat;
    }

	#main-nav .active a {
		color:#e32119;
	}

#main-nav a {
    color:#000;
    display:block;
    height:76px;
	line-height:1.2;
    padding-top:20px;
	text-align:center;
    text-decoration:none;
    width:140px;
}

#main-nav a:hover {
    color:#e32119;
}

#feature {
    background:#e32119;
    color:#fff;
    font-size:16px;
    padding-bottom:52px;
}

    #feature h2 {
        font-size:34px;
        padding-top:31px;
		margin-bottom:10px;
        width:520px;
    }

    #feature blockquote {
		color:#fff;
		font-family:"Vinkel Bold", sans-serif;
		font-size-adjust:0.55;
        font-size:34px;
		font-style:normal;
        padding-top:49px;
		margin-bottom:10px;
        width:520px;
    }

    #feature img {
        position:absolute;
        right:0;
        top:-20px;
    }

#main {
    background:#F6F6F6;
    font-size:16px;
    overflow:hidden;
    padding:40px 0;
}

    #main h1 {
        color:#E32119;
        font-size:40px;
		line-height:1;
        margin-bottom:25px;
    }

    #main .sub-title {
        display:block;
        font-family:"Vinkel Bold", sans-serif; font-size-adjust:0.55; font-style:normal; font-weight:bold;
        font-size:18px;
    }

    #main p {
        margin-top:20px;
    }

    #main div.left {
        width:610px;
    }

	#main .side-bar {
        background:#fff;
		float:right;
        margin:10px 0 0;
        padding:10px 20px;
        width:300px;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
        behavior:url(http://staging.ib3.co.uk/styles/PIE.htc);
        zoom:1;
	}

	.side-bar h3 {
		border-bottom: 3px dotted #939598;
		font-size: 18px;
		margin-bottom: 10px;
	}

	.side-bar aside {
		margin-bottom:15px;
	}

	.side-bar a {
		font-size:11px;
	}

	.side-bar h4 a {
		font-size:inherit;
	}

	#main .side-bar p {
		font-size:14px;
		margin-top:0;
	}

    #main .sub-menu {
        font-family:"Vinkel Bold", sans-serif; font-size-adjust:0.55; font-style:normal; font-weight:bold;
        float:right;
    }

    #main .sub-menu ul {
        background:#fff;
        display:block;
        overflow:auto;
        list-style:none;
        margin:10px 0 0;
        padding:10px 20px;
        position:relative;
        width:300px;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
        behavior:url(http://staging.ib3.co.uk/styles/PIE.htc);
        zoom:1;
    }

    #main .sub-menu li {
        border-bottom:3px dotted #939598;
        padding:10px 0;
    }

    #main .sub-menu .last {
        border:0;
    }

    #main .sub-menu a {
        color:#939598;
        display:block;
        font-weight:bold;
        height:40px;
        line-height:40px;
        padding-left:10px;
        text-decoration:none;
    }

		#main .sub-menu a:hover {
			color:#444;
		}

    #main .sub-menu .active a {
        background:url('../images/long-black-button.png') no-repeat;
        color:#fff;
    }

		#main .sub-menu .active a:hover {
        color:#fff;
		}

    #portfolioWrapper {
        margin-top:30px;
    }

    .portfolioThumb {
        float:left;
        height:189px;
        margin:0 35px 20px 0;
        width:160px;
    }

#testimonials {
    background:#000;
    clear:both;
    height:315px;
    padding-top:30px;
}

    #testimonials h4 {
        font-family:"Vinkel Bold", sans-serif; font-size-adjust:0.55; font-style:normal; font-weight:bold;
        color:#9C9E9F;
        margin:0 0 20px 0;
    }

    #testimonials section {
        background:url('../images/speech-bubble.png') no-repeat;
        float:left;
        height:138px;
        margin-right:40px;
        padding-left:66px;
        padding:55px 15px 0 66px;
        width:219px;
    }

	#testimonials a {
		text-decoration:none;
	}

	#testimonials a:hover {
		text-decoration:underline;
	}

    #testimonials .last {
        margin:0;
    }

    #testimonials cite {
        font-family:"Vinkel Bold", sans-serif; font-size-adjust:0.55; font-style:normal; font-weight:bold;
        color:#E32119;
        font-size:16px;
        margin-bottom:5px;
    }

    .testimonial {
		border-bottom:3px dotted #939598;
		margin-top:30px;
		padding-bottom:27px;
    }

    .testimonial blockquote {
        font-size:16px;
    }

    .testimonial img {
        margin-bottom:10px;
    }

footer {
	line-height:1.4;
	margin-bottom:15px;
	overflow:auto;
    padding-top:30px;
}

    footer section {
        float:left;
        margin-right:50px;
		width:220px;
    }

    footer .last {
        float:right;
        margin:0;
		width:170px;
    }

    footer h5 {
        font-family:"Vinkel Bold", sans-serif; font-size-adjust:0.55; font-style:normal; font-weight:bold;
        color:#E32119;
        font-size:30px;
        margin-bottom:15px;
    }

    footer a {
        color:#444!important;
        text-decoration:none;
    }

    footer a:hover {
        color:#E32119!important;
        text-decoration:none;
    }

    footer dl, footer ul {
        list-style:none;
        margin:15px 0;
    }

    footer dt {
        clear:left;
        float:left;
        margin-right:5px;
    }

	footer .tweets .date {
		display:block;
		font-size:11px;
		margin-top:10px;
	}

    #social {
        width:123px;
    }

    #social a {
        margin:2px 0
    }

        #social .tm {
            background-position:-32px 0;
        }

        #social .tr {
            background-position:-64px 0;
        }

        #social .ml {
            background-position:0 -32px;
        }

        #social .mm {
            background-position:-32px -32px;
        }

        #social .mr {
            background-position:-64px -32px;
        }

        #social .bl {
            background-position:0 -64px;
        }

        #social .bm {
            background-position:-32px -64px;
        }

        #social .br {
            background-position:-64px -64px;
        }

#demo-reel {
	background:url('../images/demo-tab.png') no-repeat;
	display:block;
	height:64px;
	left:-165px;
	position:fixed;
	text-indent:-5000px;
	top:158px;
	width:226px;
}

	.no-js #demo-reel:hover {
		left:0;
	}

#main .button {
    font-family:"Vinkel Bold", sans-serif; font-size-adjust:0.55; font-style:normal; font-weight:bold;
    background:url('../images/black-button.png') no-repeat;
    border:0;
    bottom:0;
    color:#fff!important;
    display:block;
    font-size:15px!important;
    height:40px;
    line-height:40px;
    padding-left:10px;
    position:absolute;
    text-align:left;
    text-decoration:none;
    width:160px!important;
}

/* GOOGLE MAPS */

.gMapBubble { width:250px; height:100px; font-size:11px; line-height:11px; }
.gMapBubble img { float:left; }