* {
    margin:                 0;
    padding:                0;
} 

body {  
    background:             #000000;
    color:                  #ffffff;
    font-family:            Helvetica,Arial,sans-serif; 
    font-size:              75%;
}     

a {
    color:                  #ffffff;
    outline:                none;
    text-decoration:        none; 
}
a:hover {
    color:                  #F3A40B;
}
a:active {
    outline:                none;
}

ul {
    list-style:             none;
} 

input, textarea, select {
    padding:                2px;
    font-family:            Helvetica, Arial,sans-serif;  
    font-size:              100%;
}

strong {
	font-weight: 			600;
	letter-spacing:			0.02em;
}

#header {
    overflow:               hidden;
    margin:                 10px 0 0;
}

#header #logo {
    background:             url("/media/images/logo.png") no-repeat scroll 0 0 transparent;
    float:                  left;
    height:                 107px;
    margin:                 10px 0 15px 0;
    width:                  500px;
}

#header #logo a {
    display:                block;
    height:                 107px;
    text-indent:            -5000px;
    width:                  325px;
}

#header #telephone {
    float:                  right;
    font-size:              2.5em;
    font-weight:            normal;
    margin:                 40px 0 0;
}

#header #navigation {
    float:                  right;
    font-size:              1.5em;
    margin:                 10px 0;
    /*width:                  1000px;*/
}  
#header #navigation li {
    float:                  left;
    list-style:             none; 
    margin:                 0 0 0 35px;
}   

#header #navigation li a {
    display:                block;
}
           
#site-wrapper {
	overflow:				hidden;
	min-height:				110%;
    width:                  950px;
    margin:                 0 auto 30px;
    text-align:             left;
}

#framework {
    min-height:             370px;
    overflow:               hidden;
    width:                  950px;
} 

.index {
    background:             transparent url(/media/images/home_bg.jpg) no-repeat scroll 170px 0;
}

.index #content {
    float:                  left;
    padding:                7px 0 0 30px;
    width:                  250px;      
}  
.index #rcontent {     
    float:                  right;
    margin:                 0;
    padding:                80px 0 0 0;
    width:                  453px;
}

.about {
    background:             transparent url(/media/images/about_bg.jpg) no-repeat scroll 170px 0;
}

.about #content {
    float:                  left; 
    padding:                9px 0 0 30px;
    width:                  250px;
} 
.about #rcontent {
    float:                  right;    
    margin:                 0;
    padding:                80px 0 0 0;        
    text-align:             left;
    width:                  450px;
}

.threed-visualisation li,
.digital-media li,
.web-hosting li,
.strategic-marketing li,
.websites li,
.advertising li,
.signage li,
.print-design li,
.printing li,
.photography li,
.branding li,
.corporate-identities li,
.exhibition li,
.illustration li,
.packaging li,
.point-of-sale li,
.copywriting li,
.public-relations li {
    color:                  #fff;
    line-height: 			1.2em;
}

.digital-media,
.web-hosting,
.strategic-marketing,
.threed-visualisation,
.websites {
    background:             transparent url(/media/images/service_web_img.jpg) no-repeat scroll 210px 0; 
    /*height:                 460px;*/
}

.advertising,
.signage {
    background:             transparent url(/media/images/service_ad_img.jpg) no-repeat scroll 170px 0;   
    /*height:                 405px;*/
}

.photography,
.printing,
.print-design {
    background:             transparent url(/media/images/service_design_img.jpg) no-repeat scroll 170px 0;
    /*height:                 405px;*/
}

.branding,
.corporate-identities,
.exhibition {
    background:             transparent url(/media/images/service_branding_img.jpg) no-repeat scroll 170px 0;
    /*height:                 405px;*/
}

.illustration,
.packaging,
.point-of-sale {
    background:             transparent url(/media/images/service_pack_img.jpg) no-repeat scroll 170px 0; 
    /*height:                 405px;*/
}

.copywriting,
.public-relations {
    background:             transparent url(/media/images/service_pr_img.jpg) no-repeat scroll 170px 0; 
    /*height:                 405px;*/    
}

.copywriting {
	background:             transparent url(/media/images/service_copy_img.jpg) no-repeat scroll 170px 0; 
}

.web-hosting {
	background:             transparent url(/media/images/service_hosting_img.jpg) no-repeat scroll 170px 0; 
}

.seo {
	background:				transparent url(/media/images/service_seo_img.jpg) no-repeat scroll 170px 0; 
}

#portfolio-but {
	background:				url(/media/images/button-orange-med.png) no-repeat;
	display:				table-cell;
	float:					right;
	height:					43px;
	position: 				relative;
	text-align: 			center;
	top:					-40px;
	vertical-align: 		middle;
	width:					190px;
}

#portfolio-but p {
	margin-top:				15px;
}

#portfolio-but p.twoline {
	margin-top:				10px;
}
#portfolio-but a:hover {
	color:					#fff;
}

#content {
    float:                  left;
    padding:                0 0 0 30px;
    overflow:               hidden; 
    width:                  250px;   
} 
#rcontent {
    float:                  right;    
    text-align:             right;
    width:                  485px;  
}

#services {
    float:                  left;
    padding:                10px 0;
    position:               relative;
    width:                  647px;
}  

#portfolio {
    float:                  left;
    padding:                10px 0;
    position:               relative;
    width:                  775px;
}  

#portfolio ul {
    position:               relative;
}

#portfolio #p-thumbs ul {
    margin:                 0 auto;
}

#portfolio .button {
	height:					25px;
    position:               relative;  
	width:					25px;
}


#portfolio #back a {
    background:             url("/media/images/left-arrow-new.png") no-repeat scroll left bottom transparent;
    float:					none;
       
}

#portfolio #forward a {
    background:             url("/media/images/right-arrow-new.png") no-repeat scroll left bottom transparent;
    float:					none;
}



#portfolio #back a:hover {
    background:             url("/media/images/left-arrow-new-hover.png") no-repeat scroll left bottom transparent; 
}

#portfolio #forward a:hover {
    background:             url("/media/images/right-arrow-new-hover.png") no-repeat scroll left bottom transparent; 
}

#portfolio #forward {
	float:					right;
	top:					-178px;
}

#portfolio #back {
	float:					left;
	top:					180px;
}

#portfolio #back a,
#portfolio #forward a {
    display:                block;
    height:                 30px;
    width:                  30px;
    cursor: 				pointer;
    cursor:					hand;
}

#portfolio #item-wrap {
	position:				relative;
	width:					515px;
}

#portfolio #p-thumbs.active {
	display:				block;
}

#p-thumbs li {    
    float: left;
    height: 51px;
    margin: 0 0 3px 5px;
    width: 48px;
}

#content {
	width:	100px;
}


#portfolio #p-thumbs {
    
    float: right;
    height: 432px;
    overflow: auto;
    padding: 0 0 0 10px;
    width: 260px;
    
}


#portfolio #p-thumbs a {
    border: 1px solid #FFFFFF;
    display: inline-block;
    height: 46px;
    width: 46px;
}

#portfolio #p-thumbs a img {
   height: 46px;
   width: 46px;
}

#portfolio #p-content {	
    height:                 360px;
    margin:					0 auto;
    position:               relative;
    width:                  460px;
}

#portfolio #p-content div {
	width:					460px;
	height:					360px;
}



#portfolio #p-content a {
    display:                block;
    text-align:             center;
}

#portfolio #p-content div img {
    border:                 none;
    display:				block;
    outline:                none;
    margin:					auto;
}

#portfolio #p-content #content-ul {
	float:					left;
	margin:					0 auto;
	width:					460px;
}

#portfolio #p-content ul {
    height:                 360px; 
    float:					none;
    margin:                 0 auto;
    max-width:              460px;
   	left:					50%;
}

#portfolio #p-content ul li {

}

#portfolio #p-content div .more-info {
	float:					right;
	position: 				absolute;
	margin:					-100px 0 0 283px;
	text-align: 			center;
	width:					177px;
}

#portfolio #p-content div .more-info p {
	background:				url("/media/images/button-orange-small.png") no-repeat;
	color:					#fff;
	height:					27px;
	font-size: 				13px;
	text-transform: 		uppercase;
	width:					135px;
}

#portfolio #p-content div .more-info p a {
    color: #FFFFFF;
    padding: 6px 0 0;
}

#portfolio #p-content div .more-info p a img {
    float: left;
    margin-left: 11px;
    width: 11px;
}

#portfolio #p-desc {
    float:                  right;
    padding:                0 0 0 10px;
    width:                  252px;
}

#portfolio #p-desc h4 {
    text-align:             justify;
}
 
.terms-and-conditions p {     
    margin:                 0 0 10px;
}

#content.fullwidth {
    width:                  920px;
}

#content.fullwidthmenu {
    padding:                8px 0 0 30px;
    width:                  770px;
}

.contact #content {
    float:                  left; 
    padding:                0 0 0 30px;
    width:                  380px;
}

.contact #content p {
    font-size:              1.1em;
}

.contact #rcontent {
    margin:                 0 10px 0 0;
    padding:                0;
    text-align:             left;   
    width:                  640px; 
}

#subnav {
    float:                  left; 
    margin:                 10px 24px 0 24px;
    width:                  126px;
}

#subnav li {
    margin:                 0 0 5px 0;
    line-height: 			1.4em;         
}

#subnav li a {
    display:                block;
    font-size:              1.2em;
}

h1 {
    font-size:              1.5em;
    padding:                0;
    margin:                 0px 0px 15px 0px;
    font-weight: 			normal;
}  
h2 {
    font-size:              1.5em;
    padding:                0;
    margin:                 0px 0px 15px 0px;
}   
h3 {
    font-weight:            normal;
    font-size:              1.25em;
    color:                  #e0e0e0;
    padding:                0;
    margin:                 0px 0px 15px 0px;
}  
h4 {
    padding:                0;
    margin:                 0 0 15px 0;
    font-weight:            normal;
    font-size:				107%;
}    
h5 {
    font-size:              1.583em;
    padding:                0;
    margin:                 0px 0px 15px 0px;
}

/* start services css  */

#services_menu {
    position:               absolute;
    margin-top:             199px;
    padding-left:           30px;
    z-index:                1;
    width:                  635px;
}

#services_menu ul {
    list-style:             none;
    padding:                0;
    margin:                 0;
}
#services_menu li {
    display:                block;
    float:                  left;
    margin-right:           10px;
}

.contact #rcontent {
	width:					416px;
}

.offices {
	overflow:				hidden;
}

#head-office {
	overflow:				hidden;
	padding-bottom:			10px;
	border-bottom: 			1px solid #fff;
	margin-bottom:			20px;
}

.office {
	float:					left;
	margin-bottom:			10px;
	width:					160px;
}

.office.right {
	float:					right;
}

.contact-form fieldset {
    border:                 none;
}
.contact-form li {
    margin:                 4px 0;
    width:                  416px;
}
.contact-form li label {
    float:                  left;
    width:                  111px;
}
.contact-form textarea,
.contact-form input {
    width:                  290px;
}
.contact-form textarea {
    height:                 250px;
    width:					294px; 
}
.contact-form strong {
    color:                  #F3A40B;
    font-weight:            bold;
    padding:                0 0 0 3px;
}

.contact p.arrowed {
	line-height:			1.6em;
}

.contact img.inline-arrow {
	float: 					left;
    margin-right: 			5px;
    margin-top: 			2px;
    width: 					10px;
}

#footer {
    height:                 110px;
    margin:                 35px 0 0;
    overflow:               hidden;
    text-align: 			center;
}
#footer #footer-info {
    font-size:              1.1em;
    margin:                 0 auto;
    overflow:               hidden;
    text-align: 			centre;
    width:                  100%;
}

#footer #footer-info li {
    display:				inline;
    margin:					0 20px;			
}

#site-by {
	margin:					0 auto;
	width:					950px;
}

#site-by .left {
	float:					left;
}

#site-by .right {
	float:					right;
}

#required {
	display:				none;
    text-align:             right;
}
input.button {
    background:             url("/media/images/button-orange-vsmall.png");
    border:                 none;
    float:                  right;
    margin:                 0 2px 0 0;
    text-transform: 		uppercase;
    color:					#fff;
    width:                  87px;
    height:					27px;
}   

a.selected {
    color:                  #F3A40B;
}

.rhover,
.hover:hover {
    -ms-filter:                         "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter:                             alpha(opacity=70);
    -moz-opacity:                       0.7;
    opacity:                            0.7;
}
.rhover:hover {
    -ms-filter:                         "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:                             alpha(opacity=100);
    -moz-opacity:                       1.0;
    opacity:                            1.0;
}

#portfolio #p-thumbs li.activeSlide a {
    
    border: 1px solid #F3A40B;
}

.scroll_wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}
.content_wrapper {
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
}
.content_padding {
    height: 20px;
    clear: both;
}
.scroll_track {
    pointer-events: none;
    position: absolute;
    width: 20px;
    min-height: 50px;
    height: 100%;
    top: 0;
    right: 0;
    background: #000 url('/media/images/scrollbar/v_scroll_base_top.png') 5px 20px no-repeat;
}
.scroll_track_footer {
    width: 20px;
    height: 100%;
    background: url('/media/images/scrollbar/v_scroll_base_bottom.png') 5px bottom no-repeat;
}
.scroll_bar {
	
    position: absolute;
    width: 20px;
    height: 10%;
    height: 0%;
}

.scroll_bar:hover {
	cursor:	pointer;
}
.scroll_bar_top, .scroll_bar_bottom {
    position: absolute;
    width: 20px;
    left: 0;
    height: 60%;
    margin: 0;
    padding: 0;
}
.scroll_bar_top {
    top: 0;
    background: url('/media/images/scrollbar/v_scroll_bar_top.png') 7px 22px no-repeat;
}
.scroll_bar_bottom {
    bottom: 0;
    background: url('/media/images/scrollbar/v_scroll_bar_bottom.png') 7px bottom no-repeat;
}