﻿
/* Basic tags */

/*GENERAL FORMATTING______________________________________________*/

* html img,
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

html {
	width: 100% !important;
	height: 100% !important;
}

body {
    width: 100%;
    height: auto;
    background-color: #f1f8f8;
    font-size: 18px;
    font-weight: normal;
    line-height: 18px;
    color: #444444;
    margin: 0px;
    padding: 0px;
    font-family: Calibri, Arial, Verdana, sans-serif;
    background-image: url(images/sky.gif);
    background-repeat: repeat-x;
}

ul {
	margin: 0px;
	padding: 0px;
}

li {
    list-style-type: none;
	margin: 0px 0px 0px 10px;
	float: left;
}

p {
    width: auto;
    height: auto;
    padding: 0px;
    margin: 0px 0px 20px 0px;
}

h1, h2, h3, h4, h5, h6 {
    padding: 0px;
    margin: 0px;
}

h1 {
    margin: 10px 0px 20px 0px;
    color: #00adef;
    font-size: 30px;
}

h2 {
    margin: 10px 0px 20px 0px;
    color: #29c823;   
    font-size: 30px;
}

h3 {
    margin: 0px 0px 10px 0px;
    color: #f44a19;
    font-size: 24px;
}

h4 {
    margin: 0px 0px 10px 0px;
    color: #f20201;
    font-size: 24px;
}

h5 {
    margin: 0px 0px 10px 0px;
    color: #999999;
    font-size: 24px;
}

h6 {
    margin: 0px 0px 10px 0px;
    color: #29c823;
    font-size: 24px;
}

table {
	border-collapse: collapse !important;
}

a:link, a:visited, a:active {
    color: #0075c4;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #29c823;
}

/* CLASSES */ 

.clearer {
    clear: both;
}

.horiz_divider {
    width: 589px;
    height: 10px;
    border-bottom: solid 1px #cccccc;
    border-top: none;
    border-right: none;
    border-left: none;
    margin: 0px 0px 20px 0px;
}

/* IDs */

#main_wrap {
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
}

/* HEADER SECTION ________________________________*/

/* HEADER */

#nav_holder {
    width: 960px;
    height: auto;
}

#header {
    width: 449px;
    height: 188px;
    background-image: url(images/logo/13WebStreetUrbanCloud.png);
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    _float: left;
    *float: left;
}

#header a
{
    font-size: 0px;
    text-indent: -450px;
    width: 449px;
    height: 188px;
    display: block;
}

#sub_header {
    width: 960px;
    height: auto;
    background-color: Transparent;
    margin: auto;
    padding: 0px;
}

/* NAVIGATION */

#nav_list {
    float: right;
    margin: -70px 20px 0px 0px;
    padding: 0px;
}

.link {
    display: block;
    width: 95px;
    height: 99px;
    cursor: pointer;
}

.nav_home {
    width: 95px;
    height: 69px;
    background-image: url(images/nav/nav_home.png);
    background-repeat: no-repeat;
    float: left;
}

.nav_portfolio {
    width: 95px;
    height: 69px;
    background-image: url(images/nav/nav_portfolio.png);
    background-repeat: no-repeat;
    float: left;
}

.nav_contact {
    width: 95px;
    height: 69px;
    background-image: url(images/nav/nav_contact.png);
    background-repeat: no-repeat;
    float: left;
}

/* CONTENT SECTION ______________________________*/

#content_wrap {
    width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 0px;
}

#top_inner_content {
    width: 960px;
    height: 8px;
    background-image: url(images/top_corners.png);
    background-repeat: no-repeat;
}

#inner_content {
    width: 920px;
    height: auto;
    min-height: 300px;
    background-image: url(images/middle_content.png);
    background-repeat: repeat-y;
    padding: 10px 20px 10px 20px;
}

#left_content {
    width: 579px;
    height: auto;
    padding: 0px 20px 0px 0px;
    margin: 0px;
    border-right: solid 1px #cccccc;
    border-top: none;
    border-bottom: none;
    border-left: none;
    float: left;
}

#right_content {
    width: 300px;
    height: auto;
    padding: 0px;
    margin: 0px;
    float: right;
}

#right_content p {
    font-size: 20px;
}

.call_request {
    width: 300px;
    height: 75px;
    background-image: url(images/call_request.gif);
    background-repeat: no-repeat;
    background-position: left;
    display: block;
}

.call_request:hover {
    background-position: right;
}

.quote_request {
    width: 300px;
    height: 75px;
    background-image: url(images/quote_request.gif);
    background-repeat: no-repeat;
    background-position: left;
    display: block;
}

.quote_request:hover {
    background-position: right;
}

/* FOOTER SECTION _______________________________*/

#footer {
    width: 100%;
    height: 130px;
    margin: -5px 0px 0px 0px;
    padding: 20px 0px 0px 0px;
    background-image: url(images/cobbles_footer_bg.gif);
    background-repeat: repeat-x;
}

#inner_footer {
    width: 940px;
    height: 90px;
    margin: auto;
    padding: 10px;
    background-image: url(images/inner_footer.png);
    background-repeat: repeat-x;
}

#powered {
    float: right;
    margin: 15px 0px 0px 0px;
}

#copyright {
    float: left;
    margin: 40px 0px 0px 0px;
}

/* PAGES ________________________________________*/

/* HOME */

#portfolio_nav {
    width: 920px;
    height: 30px;
    margin: 0px 0px 10px 0px;
    padding: 0px;
    position: relative;
}

#left_arrow {
    width: 30px;
    height: 30px;
    margin: 0px;
    padding: 0px;
    background-image: url(images/nav/left_arrow.gif);
    background-repeat: no-repeat;
    float: left;
    cursor: pointer;
}

#right_arrow {
    width: 30px;
    height: 30px;
    margin: 0px;
    padding: 0px;
    background-image: url(images/nav/right_arrow.gif);
    background-repeat: no-repeat;
    float: right;
    cursor: pointer;
}

#portfolio_holder {
    width: 920px;
    height: 300px;
    margin: 0px 0px 20px 0px;
    padding: 0px;
    background-image: url(images/portfolio_frame_web.jpg);
    background-repeat: no-repeat;
}

/* CONTACT US */

.highlight {
    color: Red;
    font-weight: bold;
}

.contact_field_label {
    color: #1e1e1e;
    font-weight: bold;
}

.contact_field_small {
    overflow: hidden;
    border: solid 1px #00adef;
    width: 75px;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-weight: normal;
    color: #444444;
    font-family: Calibri, Arial, Verdana, sans-serif;
}

.contact_field_medium {
    overflow: hidden;
    border: solid 1px #00adef;
    width: 300px;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-weight: normal;
    color: #444444;
    font-family: Calibri, Arial, Verdana, sans-serif;
}

.contact_field_large {
    overflow: hidden;
    border: solid 1px #00adef;
    width: 100%;
    height: 125px;
    line-height: 18px;
    font-size: 18px;
    font-weight: normal;
    color: #444444;
    font-family: Calibri, Arial, Verdana, sans-serif;
}

.send_button {
    width: 100px;
    height: 35px;
    background-color: Transparent;
    background-image: url(images/send_button.gif);
    background-repeat: no-repeat;
    background-position: left;
    border: none;
    cursor: pointer;
}

.send_button:hover {
    background-position: right;
}

/* PORTFOLIO _______________________________________*/

/* HOME PAGE */

.portfolio_frame {
    cursor: pointer;
}

/* WEB */

#web_portfolio {
    width: 599px;
    height: auto;
    margin: 0px;
    padding: 0px;
}

#web_portfolio a
{
    cursor: pointer;
}

.top_content {
    width: 387px;
    height: 0px;
    background-image: url(images/portfolio/overlay.png);
    background-repeat: repeat;
    top: 0px;
    left: 0px;
    position: absolute;
    color: #ffffff;
    text-align: center;
}

.bottom_content {
    width: 387px;
    height: 0px;
    background-image: url(images/portfolio/overlay.png);
    background-repeat: repeat;
    bottom: 0px;
    left: 0px;
    position: absolute;
    color: #ffffff;
    text-align: center;
}

.potfolio_image {
    width: auto;
    height: auto;
}

#sport-fc_content {
    float: left;
    width: 192px;
    height: auto;
    padding: 0px 10px 0px 0px;    
}

#sport-fc_image {
    float: left;
    width: 387px;
    height: 195px;
    background-image: url(images/portfolio/portfolio_frame_sport-fc.gif);
    background-repeat: no-repeat;
    position: relative;
}

#cbp_content {
    float: left;
    width: 192px;
    height: auto;
    padding: 0px 10px 0px 0px;
}

#cbp_image {
    float: left;
    width: 387px;
    height: 195px;
    background-image: url(images/portfolio/portfolio_frame_cbp.gif);
    background-repeat: no-repeat;
    position: relative;
}

#celine_content {
    float: left;
    width: 192px;
    height: auto;
    padding: 0px 10px 0px 0px;
}

#celine_image {
    float: left;
    width: 387px;
    height: 195px;
    background-image: url(images/portfolio/portfolio_frame_celine.gif);
    background-repeat: no-repeat;
    position: relative;
}

#optad_content {
    float: left;
    width: 192px;
    height: auto;
    padding: 0px 10px 0px 0px;
}

#optad_image {
    float: left;
    width: 387px;
    height: 195px;
    background-image: url(images/portfolio/portfolio_frame_optad.gif);
    background-repeat: no-repeat;
    position: relative;
}

#asda_content {
    float: left;
    width: 192px;
    height: auto;
    padding: 0px 10px 0px 0px;
}

#asda_image {
    float: left;
    width: 387px;
    height: 195px;
    background-image: url(images/portfolio/portfolio_frame_asda.gif);
    background-repeat: no-repeat;
    position: relative;
}

#e-soundworks_content {
    float: left;
    width: 192px;
    height: auto;
    padding: 0px 10px 0px 0px;
}

#e-soundworks_image {
    float: left;
    width: 387px;
    height: 195px;
    background-image: url(images/portfolio/portfolio_frame_e-soundwork.gif);
    background-repeat: no-repeat;
    position: relative;
}

.web_link {
    width: 387px;
    height: 195px;
    display: block;
}

/* PRINT */

#print_portfolio {
    width: 599px;
    height: auto;
    margin: 0px;
    padding: 0px 0px 20px 0px;
}

#print_content {
    float: left;
    width: 192px;
    height: auto;
    padding: 0px 10px 0px 0px;
}

#print_image {
    float: left;
    width: 371px;
    height: auto;
    border: solid 8px #f44a19;
    position: relative;
}

#print_top {
    width: 387px;
    height: 0px;
    background-image: url(images/portfolio/overlay.png);
    background-repeat: repeat;
    top: -8px;
    left: -8px;
    position: absolute;
    color: #ffffff;
    text-align: center;
}

#print_bottom {
    width: 387px;
    height: 0px;
    background-image: url(images/portfolio/overlay.png);
    background-repeat: repeat;
    bottom: -8px;
    left: -8px;
    position: absolute;
    color: #ffffff;
    text-align: center;
}

/* SITE MAP ________________________________*/

