/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

/* Left & Right alignment */

.left { float:left;}
.right { float:right;}
.wrapper {width:100%; overflow:hidden;}

/* Global properties ======================================================== */

body{ background:#5a0705; border:0; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; line-height:18px; overflow:hidden; min-width:960px;}

.css3{border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 0 0 4px rgba(0, 0, 0, .4); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4); position: relative;}

/* Global Structure ============================================================= */

.body1{ background: url(../images/bg_top.gif) top repeat-x #4b0a06}
.body2{ background:url(../images/bg_img.jpg) top center no-repeat;}

.spinner{ background: url(../images/ajax-loader.gif) 50% 50% no-repeat #5a0705; position: fixed; top:0; left:0; width:100%; height:100%; z-index:99;}

/* ============================= main layout ====================== */

a{ color:#fff; text-decoration: none; outline:none}
a:hover{ text-decoration: underline}
h2{ font-size:30px; font-weight:800; color:#fff; line-height:1.2em; padding: 0 0 19px 0; letter-spacing:-1px;}
h2 span{ display:block; margin-top:-11px}
h3{ font-size:20px; color:#fff; font-weight:800; line-height:1.2em; padding:3px 0 6px 0;}
p{ padding-bottom:18px;}

/* ============================= header ====================== */
header{ position:relative; z-index:2; height:312px;}
header .grid_24{ height:312px;}

#logo{}

.menu{ position:relative; z-index:2}
#menu { padding: 15px 0 0 44px; height:34px;}
#menu > li { float:left; margin-left:100px; position:relative}
#menu > li > a{ display:block; font:14px Tahoma, Geneva, sans-serif; color:#fff; letter-spacing:1px;}
#menu > li > a:hover, #menu > .active > a{ color:#d12320; text-decoration:none}

#menu ul{ display:none}

#menu .ul_1{  position:absolute; width:236px; top:33px; left:-19px}
#menu .ul_1 > li{ background:#181818; font-size:13px;line-height:28px; padding:0 30px;}
#menu .ul_1 > .first{ padding-top:8px;}
#menu .ul_1 > .end{ background:url(../images/menu_bot.png) bottom left no-repeat; height:23px; font-size:0; line-height:0;}
#menu .ul_1 > li > a{ text-transform:uppercase;}
#menu .ul_1 > li > a:hover, #menu .ul_1 > .sfHover > a{ text-decoration:none; color:#c20e0d}

#menu .ul_2{ position:relative; padding:3px 0 7px 16px;}
#menu .ul_2 > li{ font-size:13px; line-height:24px;}
#menu .ul_2 > li > a:hover{ text-decoration:none; color:#c20e0d}


.balls{ position:relative; width:100%; overflow:hidden; height:263px; z-index:1}
.balls a{ position:absolute; text-indent:-9999px;}
.ball1{ left:265px; top:-200px; width:132px; height:132px; background:url(../images/seo.png) 0 0 no-repeat;}
.ball2{ left:506px; top:-200px; width:132px; height:132px; background: url(../images/optimization.png) 0 0 no-repeat;}
.ball3{ left:554px; top:-120px; width:110px; height:110px; background: url(../images/visibility.png) 0 0 no-repeat;}
.ball4{ left:684px; top:-120px; width:110px; height:110px; background: url(../images/marketing.png) 0 0 no-repeat;}
.ball5{ left:186px; top:-90px; width:74px; height:74px; background: url(../images/ideas.png) 0 0 no-repeat;}
.ball6{ left:193px; top:-100px; width:96px; height:96px; background: url(../images/design.png) 0 0 no-repeat;}
.ball7{ left:381px; top:-200px; width:188px; height:183px; background: url(../images/logo.png) 0 0 no-repeat;}


/* ============================= content ====================== */

#content{ position:relative; z-index:1; padding-bottom:48px; min-height:411px;}

.content > ul > li{ overflow:hidden; width:100%; height:411px;}

.box{ width:950px; height:411px; background:url(../images/bg_content.png) 0 0 no-repeat; position:relative; z-index:1}
.inner{ padding:45px 0 0 0; position:relative; z-index:1; width:100%; overflow:hidden}




.line1{ background:url(../images/line_ver1.png) 652px 0 repeat-y}
.line2{ background:url(../images/line_ver1.png) 315px 0 repeat-y}

.pad_bot1{ padding-bottom:18px;}
.pad_bot2{ padding-bottom:4px;}
.marg_right1{ margin-right:15px;}
.pad_left1{ padding-left:28px;}

.slogan{ font-size:18px; font-weight:900; color:#fff; line-height:24px; margin-top:-3px; padding-bottom:15px;}
.slogan strong{ font-weight:900; text-transform:uppercase}
.slogan span{ text-transform:uppercase; color:#000}

.color1{ color:#ff5250}
.font1{ font-size:15px;}

.link1{ font-size:11px; color:#fff; text-transform:uppercase; text-decoration:underline; margin-right:10px;}
.link1:hover{ color:#ff5250}

.scroll{height:271px; width:253px;}
.track{ background: url(../images/scroll_track.png) 0 0 no-repeat; right:19px; top:17px; width:18px; position:absolute; height:308px; padding:16px 0;}
.shuttle{ width:12px; height:63px; background: url(../images/scroll_drag.png) 0 0 no-repeat; margin-left:3px;}

#page_About .scroll{height:236px; padding-bottom:10px}
#page_Services .scroll{height:316px; width:932px; padding-bottom:10px}
#page_Services .track{ right:19px; top:62px; width:18px; position:absolute; height:308px; padding:16px 0;}
#page_Services .cols{ width:260px;}
#page_Services .pad_left1{ padding-left:40px;}
#page_Services .pad_bot2{ padding-bottom:13px;}
#page_Services .line1{ background:url(../images/line_ver1.png) 616px 0 repeat-y}


#page_Privacy .scroll{height:316px; width:932px; padding-bottom:10px}

#page_Portfolio { position:relative; margin-top:-62px; padding-bottom:0px}
#page_Contacts .line2{ background-position:335px 0}
#page_Contacts .marg_right1{ margin-right:66px;}

#map{ position:relative; margin-bottom:16px;}
#map figure{ position:relative;}
#map > div{ position:absolute; width:7px; height:7px; font-size:0; line-height:0}
.top_left{ top:0; left:0; background:url(../images/top_left.png) 0 0 no-repeat}
.top_right{ top:0; right:0; background:url(../images/top_right.png) 0 0 no-repeat}
.bot_left{ bottom:0; left:0; background:url(../images/bot_left.png) 0 0 no-repeat}
.bot_right{ bottom:0; right:0; background: url(../images/bot_right.png) 0 0 no-repeat}
 
.cols{ width:280px; float:left;}

.under{ background:url(../images/line_hor1.png) bottom repeat-x; padding-bottom:27px; margin-bottom:18px}

#gallery_box{ position:relative;width:100%;overflow:hidden; margin-top:62px;}
#gallery{ position:relative; height:374px !important}
#gallery li{ padding-bottom:4px; min-height:50px;}
.up, .down, .close{ display:block; width:54px; height:54px; position: absolute; left:448px;}
.down{top:444px;}
.up{ top:0px}

.up img, .down img, .close img{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; margin-top:0; margin-left:0}

.close{ top:12px; right:16px; left:auto; z-index:2; width:24px; height:24px}

/* SlideDown element */
.slideDown { position:relative}
.slideDown dt {	background: url(../images/trigger_bg.png) 0 0 no-repeat; padding-left:40px; color:#fff; display:block;cursor:pointer; height:50px; line-height:48px; position:relative;}
.slideDown dt:hover, .slideDown dt.active {}
.slideDown dt:hover .wrapper{}
.slideDown dt.active {background: url(../images/bg_trigger_open.png) 0 0 no-repeat;}
.slideDown dt.active {}
.slideDown dd{ height:0; overflow:hidden; position:relative; width:100%}
.slideDown dd .slider{ height:320px;}


/* The Nivo Slider styles */
.slider_box{ width:100%; background:url(../images/bg_caption.png) right 0 no-repeat; height:320px; overflow:hidden}
.slider{ position:relative; width:720px; height:320px; z-index:88; margin-top:4px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;	margin:0;z-index:60;display:none;}
/* The slices in the Slider */
.nivo-slice {display:block;	position:absolute;z-index:50;height:100%;}


/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav{ position: absolute;z-index:99; top:33px; right:-230px; width:190px;}
.nivo-controlNav a {position:relative;z-index:99; float:left;cursor:pointer; width:22px; height:21px; overflow:hidden; float:left; margin:0 4px 0 0; background: url(../images/pagination.png) right 0 no-repeat; text-align:center; font-size:13px; line-height:20px; color:#fff; text-decoration:none}
.nivo-controlNav a.active , .nivo-controlNav a:hover { background-position:left}

.nivo-caption { height:250px; width:165px;position:absolute; top:0px; right:-230px; background: url(../images/bg_caption.png) 0 0 no-repeat; z-index:98; padding:70px 25px 0 40px; }
.nivo-caption p{ padding-bottom:13px;}
.nivo-caption a { text-transform:uppercase; font-size:11px; color:#ff4745; text-decoration:underline}
.nivo-caption a:hover{ color:#fff}
.nivo-html-caption {}



/* ============================= footer ====================== */

footer { font-size:11px; text-transform:uppercase; text-align:center; padding:20px 0 20px 0;}
footer a{}
footer a:hover{}

/* ============================= forms ============================= */

#contact_form { padding-top:0;}
#contact-form {}
#contact-form .link1{ margin-right:0; margin-left:22px; float:right}
#contact-form input {  width:354px; background: none; padding:8px;  float:left; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; height:16px; margin:0}
#contact-form textarea { overflow: auto; width:534px; background: none; padding:8px;  float:left; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; height:106px;  margin:0}
#contact-form fieldset {border:none; width:100%; overflow:hidden;}
#contact-form .rowElem {display:block;position:relative; width:100%; overflow:hidden; min-height:36px;}
#contact-form .textarea-box { width:100%;display:inline-block;position:relative; min-height:130px; overflow:hidden; padding-bottom:7px;}
#contact-form label {padding:0;display: none;	font-size:10px;	position: relative;font-size:11px; left:10px;top:3px; margin-bottom:0px}
#contact-form .error {color:#fff;}
#contact-form fieldset {border:none;}
div#contact_form .download-box p{padding:16px 30px; background: url(../images/bg_form.png) repeat;border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; position:relative}
#contact-form .bg{ float:left; background: url(../images/bg_form.png) repeat;border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; position:relative}