/*<![CDATA[*/

body, html { width: 100% }
body       { background: #fff; text-align: center; }
*          { margin:0; padding:0; text-align: left }
body       { font: 12px Arial; color: #666 }
div        { float: left }

/* main layout */
#page        { float: none; margin: auto; width: 990px; padding: 0 23px; wid\th/* */: 944px }
#header      { width: 944px; background: url(../i/bg_header.gif) 139px 77px no-repeat; height: 99px; margin-top: 20px; padding: 0 5px; wid\th/* */: 934px }
#hlogo img   { width: 331px; height: 99px }

#hcontacts   { float: right; font-size: 11px; color: #808080; width: 222px; padding-top: 40px; padding-right: 8px; text-align: right; wid\th/* */: 200px;  }

#navigation  { width: 944px; padding: 0 5px; wid\th/* */: 934px }
#boxes       { width: 734px; height: 317px }
#boxes div   { height: 317px }
#bcreativity { width: 176px }
#bproduction { width: 173px }
#bpacks      { width: 174px }
#bpresents   { width: 174px }

#bcreativity img { margin-top: 129px; width: 176px; height: 160px }
#bproduction img { margin-top: 21px;  width: 174px; height: 168px }
#bpacks      img { margin-top: 129px; width: 174px; height: 160px }
#bpresents   img { margin-top: 21px;  width: 174px; height: 168px }

#menu            { float: right; display: inline; width: 190px; margin-right: 6px; background: url(../i/bg_menu.gif) repeat-y }
#menu div        { width: 100%; background: url(../i/bg_menu_top.gif) no-repeat; padding-top: 0px }
#menu div div    { width: 190px; background: url(../i/bg_menu_bottom.gif) bottom no-repeat; width: 190px; padding: 6px 4px; padding-bottom: 5px; wid\th/* */: 182px }
#menu a, #menu b { display: block; width: 182px; height: 35px; padding-top: 9px; padding-left: 20px; color: #666; wid\th/* */: 162px; heig\ht/* */: 26px }
#menu a                  { text-decoration: none }
#menu a:hover            { color: #b02e2c }
#menu strong a, #menu b  { color: #b02e2c }
#menu a:hover            { background: url(../i/bg_menu_b.gif) no-repeat; color: #fff }
#menu a.first:hover      { background: url(../i/bg_menu_b_first.gif) no-repeat }
#menu a.last:hover       { background: url(../i/bg_menu_b_last.gif) no-repeat }
#menu strong a:hover     { color: #fff}

#conteiner  { width: 944px; background:  url(../i/bg_conteiner_top.gif) no-repeat; padding-bottom: 20px }
#outer      { padding-bottom: 15px; background: url(../i/bg_outer.gif) left bottom no-repeat }
#inner      { margin-top: 24px; width: 944px; background: url(../i/bg_inner.gif) repeat-y }

.pheader    { width: 944px; height: 40px; background: url(../i/bg_pheader.gif) no-repeat; padding-left: 77px; wid\th/* */: 867px }
.pheader h1 { float: left; height: 18px; padding-right: 7px; font: 12px Arial; color: #fff; background: url(../i/bg_pheader_h1.gif) right no-repeat; padding-top: 1px; heig\ht/* */: 17px }

#content    { width: 944px; padding-left: 65px; padding-right: 60px; wid\th/* */: 819px }
#portfolio  { display: inline; margin-left: 19px; width: 900px }
#cleft      { width: 410px; padding-right: 20px; background: url(../i/bg_line_vertical.gif) right repeat-y; wid\th/* */: 390px }
#cright     { width: 409px; padding-left: 19px; wid\th/* */: 390px }

#content, #portfolio { padding-bottom: 30px}

#portfolio div.sections            { width: 100%; height: 40px }
#portfolio div.sections ul         { float: left; list-style: none; padding: 0; padding-left: 20px }
#portfolio div.sections li         { float: left; list-style: none; margin-right: 12px; color: #b02e2c }
#portfolio div.sections li a       { color: #828282; text-decoration: none }
#portfolio div.sections li a:hover { color: #554d4d }

#portfolio div.scroller, #portfolio div.work { width: 100% }

#portfolio div.scroller    { height: 130px }

#portfolio div.left, 
#portfolio div.right       { width: 50px; padding-top: 25px  }
#portfolio div.right       { padding-left: 17px; wid\th/* */: 33px }
#scrollLeft, #scrollRight  { cursor: hand; curs\or/* */: pointer }

#portfolio div#pitems         { width: 797px; overflow: hidden }
#portfolio div#pitems a,
#portfolio div#pitems b       { float: left; display: inline-block; margin-right: 15px; width: 101px; height: 101px; padding-top: 12px; padding-left: 12px; wid\th/* */: 89px; heig\ht/* */: 89px }
#portfolio div#pitems a:hover { background: url(../i/bg_portfolio_item.gif) no-repeat }
#portfolio div#pitems b       { background: url(../i/bg_portfolio_item_over.gif) no-repeat } 

#portfolio div#pitems a.last, #portfolio div#pitems b.last { margin: 0} 

#portfolio div.about        { width: 500px; padding-left: 42px; wid\th/* */: 458px }
#portfolio div.about h1     { font: bold 14px Arial; color: #b23736; margin-bottom: 30px }
#portfolio div.about p      { padding-bottom: 3px; font-size: 12px }
#portfolio div.about strong { font-weight: bold; color: #b23736 }

#portfolio div.image     { float: right; width: 350px; padding-right: 50px; wid\th/* */: 300px }
#portfolio div.image img { width: 300px }

#comingsoon, #response  { display: inline; margin-left: 61px; width: 817px; padding-bottom: 20px }

#services               { display: inline; margin-left: 10px; width: 900px; padding-bottom: 20px }
#services div           { width: 100%; font-weight: bold }
#services.prices div    { background: url(../i/bg_line.gif) 0 11px repeat-x}
#services div.icons     { width: 63px; height: 17px; background: url(../i/bg_services_icons.gif) repeat-x; padding-left: 6px; wid\th/* */: 57px }
#services div.icons img { float: left; margin-right: 3px; margin-top: 1px }
#services div.service   { width: auto; padding-left: 5px; padding-right: 3px; background: #fff; height: 20px }
#services div.price     { float: right; width: auto; padding-left: 3px; padding-right: 5px; background: #fff; height: 20px }

#contacts div.image { width: 330px }

#popup       { float: none; position:fixed; z-index: 7777; position: absolute; top: 0; left: 0; cursor: hand; display: none; background: #fff url(../i/preloader.gif) center center no-repeat; border: 5px solid #b23736; cursor: hand; curs\or/* */: pointer }
#popup img   { margin: 0; cursor: hand; curs\or/* */: pointer }
#overlay     { float: none; position:fixed; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5555; background-color: #111; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70) }
#overlay[id] { position:fixed }
#popup img.close { position: absolute; top: 10px; right: 10px }


/* common styles */
a       { color: #b02e2c; cursor: pointer /* great tnx 2 opera 4 this stypid style */ }
a:hover { text-decoration: none }
h2      { font: bold 14px Arial; color: #b23736; margin-bottom: 10px }

p, ul   { padding-bottom: 15px }

img     { border: 0; display: block }
table   { border-collapse: collapse } 

/*]]>*/