@charset "utf-8";
/*  

--** UPDATE INFO **--

Revision number: 1.0
Last updated: 20 November 2010
Last update made by: Cory

--** CONTENTS **--

-- 01: GENERAL
-- 02: HEADER
-- 03: CONTENT
-- 04: FOOTER

NOTE: Reset and Utils styles are contained in default.css

*/

/* -- 01:GENERIC ----------------------------------------------------------------------*/

BODY, LABEL, A, TD, TR, SPAN, P, CAPTION, H1, H2, H3, H4, H5, H6, FIELDSET, TBODY, TEXTAREA, INPUT, SELECT, LEGEND {font-family: Arial, Verdana, sans-serif;}


BODY
{
    font-size: 12px;
    color:#000;   
    background:#ccc url('../image/layout/bg1.jpg') center;
    background-attachment:fixed;  
}

A, A:link, A:visited, A:active{color:#cc0000;text-decoration: underline;}
A:hover{color: #000;text-decoration: none}

A:link.action,
A:visited.action,
A:active.action
{
    float:left;
    background:#ffffff url('../image/layout/btn-bg.gif') no-repeat;
    color:#fff;
    text-decoration:none;
    margin-top:5px;
    font-weight:bold;
    width:96px;
    height:20px;
    font-size:11px;
    text-align:center;
    padding-top:7px;
}

.alt{color:#cc0000;}

/*forms*/
.form-row
{
    float:left;
    width:100%;
    margin-bottom:10px;   
}

LABEL
{
    font-weight:bold;
    float:left;
    width:100px;
}


INPUT, TEXTAREA
{
    float:left;
    padding:5px 10px;
    background:#fff url('../image/layout/form-grad.gif') repeat-x bottom;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:solid 1px #ccc;
    color:#999;
    margin-right:10px;
}
INPUT.btn
{
    width:auto !important;
    background:#ccc url('../image/layout/btn-grad.gif') repeat-x bottom;
    color:#fff;
    border:none;
    font-weight:bold;
}

FIELDSET.contact INPUT,
FIELDSET.contact TEXTAREA
{
    float:left;
    width:200px;   
}

FIELDSET.contact INPUT.btn
{
    margin-left:245px;
}

UL.generic
{
    padding-left:20px;
}

/* -- 02:HEADER ----------------------------------------------------------------------*/
#header-contain
{
    width:100%;
    height:100px;
    background: url('../image/layout/trans-bg.png') repeat;
    position:relative;
    top:0;
    z-index:100;
}

#header
{
    width:960px;
    margin:0 auto;
    height:100px;
}

#logo
{
    float:left;
    margin-right:20px;
    z-index:100;
    width:290px;
    height:100px;
}

#nav
{
    float:left;
    list-style:none;
    padding:40px 0px 0px 10px;
}

#nav LI
{
    float:left;
    padding:0px 3px;
}

#nav LI A:link,
#nav LI A:visited,
#nav LI A:active
{
    float:left;
    padding:5px 10px;
    text-decoration:none;
    text-transform:uppercase;
    font-size:14px;
    color:#fff;
}
#nav LI A.selected
{
    background-color:#fff;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color:#cc0000;
}

/* -- 03:CONTENT ----------------------------------------------------------------------*/


/*GENERIC*/

ul.generic
{
    padding-left:40px;
}
ul.generic LI
{
    padding-bottom:10px;
}

IFRAME
{
    float:right;
    border:solid 5px #000;
}

/*headings*/
H1
{
    float:left;
    width:920px;
    padding-bottom:5px;
    text-indent:-5000px;
    
}

H1#home
{
    height:345px;
    background:#fff url('../image/layout/headings/home.jpg') no-repeat;
}

H1#about
{
    height:245px;
    background:#fff url('../image/layout/headings/about.jpg') no-repeat;
}

H1#services
{
    height:245px;
    background:#fff url('../image/layout/headings/services.jpg') no-repeat;
}

H1#work
{
    height:245px;
    background:#fff url('../image/layout/headings/work.jpg') no-repeat;
}

H1#contact
{
    height:245px;
    background:#fff url('../image/layout/headings/contact.jpg') no-repeat;
}

H2
{
    text-transform:uppercase;
    font-size:24px;
    padding-bottom:10px;
}
H3, H4
{
    padding-bottom:10px;
}

#content-contain
{
    width:100%;
    padding-bottom:70px;
    position:relative;
    top:-100px;
}

#content
{
    width:920px;
    margin:0 auto;
    padding:0px 20px;
    display:block;
}

.split
{
    float:left;
    width:920px;
    height:41px;
    background:#fff url('../image/layout/split.gif') repeat-x;
}

#content-area
{
    float:left;
    width:920px;
    background:#fff url('../image/layout/content-split.gif') repeat-y;
    padding:20px 0px;
}

#subnav
{
    float:left;
    width:210px;
    margin-right:40px;
    list-style:none;
    margin-top:-20px;
}

#subnav LI
{
    width:200px;
    padding:20px 0px 20px 10px;
    border-bottom:dotted 1px #ccc;
    color:#000;
    font-weight:bold;
}

#subnav LI A:link,
#subnav LI A:visited,
#subnav LI A:active
{
    color:#000;
    font-weight:bold;
    text-decoration:none;
}

#subnav LI A:hover
{
   color:#cc0000; 
}

#section-wrap, .section
{
    float:left;
    width:670px;   
}

.section
{
    float:left;
    width:670px;  
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:dotted 1px #ccc;
}

IMG.main,
.gallery li img
{
    float:right;
    margin:0px 0px 10px 10px;
    padding:5px;
    background-color:#000;
}

.gallery
{
    float:left;
    list-style:none;    
}

.gallery li
{
    float:left;
    margin-right:10px;   
}

.gallery li a:hover img
{
    background-color:#cc0000;
}


/*HOME*/
#home-content
{
    float:left;
    width:920px;
    padding:20px 0px 0px;
    background:#fff url('../image/layout/home-content-bg.gif') repeat-y;
}

#home-content .about
{
    float:left;
    width:640px;
    margin-right:20px;
    padding-bottom:20px;
    background:#fff url('../image/layout/home-about.jpg') no-repeat top right;
}

.clients IMG.client{padding:2px 5px;}


.home-box
{
    float:left;
    width:280px;
    margin-right:40px;   
    padding:10px 0px 20px 0px;
}

#hb-os
{
    background:#fff url('../image/layout/hb-os.jpg') no-repeat bottom right;
}
#hb-ow
{
    background:#fff url('../image/layout/hb-ow.jpg') no-repeat bottom right;
}
#hb-cu
{
    background:#fff url('../image/layout/hb-cu.jpg') no-repeat bottom right;
    margin-right:0px;
}
 
/* -- 04:FOOTER ----------------------------------------------------------------------*/
#footer-contain
{
    width:100%;
    position:fixed;
    bottom:0;
    background: url('../image/layout/trans-bg.png') repeat;
    padding:20px 0px;
}

#footer
{
    width:920px;
    padding:0px 20px 10px;
    margin:0 auto;
}

#footer UL
{
    float:left;
    list-style:none;
}

#footer UL LI
{
    float:left;
    margin-right:10px;
}

#footer UL LI A:link,
#footer UL LI A:visited,
#footer UL LI A:active
{
    float:left;
    text-decoration:none;
    text-transform:uppercase;
    font-size:11px;
    color:#fff;
}

#footer DIV
{
    float:right;
    color:#fff;   
}

#superfresh
{
    position:fixed;
    right:10px;
    bottom:7px;
    display:block;
    height:40px;
    width:88px;
    background: url('../image/layout/superfresh.gif') no-repeat;
}
#superfresh A{display:block;text-decoration:none;height:40px;outline:none;}
#superfresh A span{display:none;}
.clients{ float:right; width:250px;}

@media screen and (max-width:959px){
	  #header-contain{height:150px;}
     #header{ width:100%; height:150px;}
	 #logo{ float:none; margin:0 auto;}
	 #nav{ padding:0; margin:8px auto; float:none; width:580px;}
	 #content-contain{ top:-60px;}
	 #content{ width:95%;padding: 0px 1%;}
	 H1, #home-content{ width:100%;}
	 H1#home{ background-size:100% auto; height:265px;}
	 #home-content{ background:none;}
	 #home-content .about{ margin-right:0px; width:64%; background:none;}
	 .split{ width:100%;}
	 .clients{ width:35%;}
	 #hb-cu{ margin-top:20px;}
	 #content-area{ width:100%; padding:5px 0; background:none;}
	 #subnav{ width:100%; margin:0;}
	 #subnav LI{width:100%;}
	 #section-wrap, .section{ width:100%;}
	 #footer{ width:100%; padding:0; float:left;}
}

@media screen and (max-width:767px){
	H1#home{ height:217px;}
	#hb-os{margin-right:0;}
	#hb-ow{ float:right; margin-right:0;}
}

@media screen and (max-width:766px){
	#header-contain, #header{ height:160px;}
	H1#home{ height:160px;}
	#nav{ width:90%;}
	#nav LI{ width:31%;}
	#nav LI A:link, #nav LI A:visited, #nav LI A:active{ padding:5px 2px;}
	#home-content .about, .clients{ width:100%;}
	.home-box{ width:100%; margin:10px 0; border-bottom:1px dashed #999;}
	IFRAME{ width:98%; float:left; clear:both; margin-bottom:20px;}
	#footer UL{ width:75%; margin:0 auto; float:none;}
	#footer DIV{ width:100%; text-align:center; margin-top:10px;}
	H1#about, H1#services, H1#work, H1#contact{ background-size:100%; height:113px;}
	}
@media screen and (max-width:479px){
	#header-contain, #header{ height:270px;}
	#content-contain{ top:6px;}
	H1#home{ height:105px;}
	#nav{ width:96%;}	
	#nav LI{ width:98%; text-align:center; padding: 8px 0;}
	#nav LI A:link, #nav LI A:visited, #nav LI A:active{ float:none;}
	H1#about, H1#services, H1#work, H1#contact{ height:72px;}
	IMG.main, .gallery li img{ width:96%; margin:0 0 10px 0;}
	.gallery li{ margin:10px;}
	FIELDSET.contact INPUT.btn{ margin-left:0;}
}