@charset "utf-8";
@import "reset.css";
/* 
	HIPERQUÍMICA PRODUÇÕES LTDA. | http://hiperquimica.com
	******************************************************
	Design / XHTML: Nagüeva Guilherme | http://nagueva.com
/***********************************************************************
0 - ESTRUTURA GERAL
	0.1 - HEADINGS
	0.2 - MENU PRINCIPAL
	0.3 - BOTTOM
	0.4 - CLASSES GERAIS
	0.5 - qTIP
1 - HOME
2 - INFO
3 - STORYBOARDS
4 - ANIMATICS
5 - ILUSTRAÇÃO
6 - CONTATO
***********************************************************************/
/***********************************************************************
0 - ESTRUTURA GERAL
***********************************************************************/
body, html { height:100%; }
html { }
body { font:62.5% Arial, Helvetica, sans-serif; background:url(v1/bg_body.gif) repeat-y left top; cursor:default; }
#header { height:90px; }
#extra_wrap { position:relative; min-height:100%; height:auto !important; height:100%; background:url(v1/bg_extrawrap.gif) no-repeat left bottom; }
#wrap { margin:auto; width:778px; margin:0 0 0 85px; padding:0 0 100px; }
#content { padding:25px 9px 75px; overflow:auto; font-size:1.2em; }
#bottom { position:absolute; bottom:0 !important; right:0; width:100%; height:100px; background:url(v1/bg_bottom.gif) repeat-x left bottom; font-size:1.2em; color:#999; text-align:right; }
a#gotocontent { position:absolute; left:75px; color:#fff; }
#content a { color:#f37125; }
#content a:hover { text-decoration:none; }
#content a:active { background:#f37125; color:#fff; }
address { font-style:normal; }
.construction { font-size:1.4em; font-weight:bold; text-transform:uppercase; background:url(v1/construction.gif) no-repeat right 0; width:200px; height:40px; position:absolute; bottom:86px; left:50%; margin:0 0 0 150px; color:#f37125; padding:15px 0 0; z-index:25; }
/***********************************************************************
	0.1 - HEADINGS
***********************************************************************/
h1 { float:left; margin:10px 0 0; }
h2 { font-size:1.4em; background:#fff; margin:0 0 10px; padding:0 0 5px; font-weight:bold; border-bottom:#fcd5bc 1px solid; color:#f37125; }
h3 { color:#f37125; font-size:1.2em; margin:10px 0 5px; padding:0 0 5px; border-bottom:#fcd5bc 1px solid; }
/***********************************************************************
	0.2 - MENU PRINCIPAL
***********************************************************************/
#header .menu { font-size:1.4em; float:right; }
#header .menu li { float:left; padding:45px 1px 10px; }
#header .menu li a { padding:45px 7px 5px; text-transform:uppercase; font-weight:bold; text-decoration:none; color:#000; }
#header .menu li a:hover { background:#f26e23; color:#fff; border-bottom:#000 5px solid; }
#header .menu li a:focus { background:#f26e23; color:#fff; border-bottom:#000 5px solid; }
#header .menu li a .accesskey { text-decoration:none; font-weight:bold; }
#header .menu li a:hover .accesskey { border-bottom:#fff 1px solid; }
#header .menu li.blog { position:absolute; bottom:180px; left:180px; z-index:10; padding:0; }
#header .menu li.blog a { background:url(v1/bg_blog.jpg) no-repeat 0 0; padding:14px 0 0 2px; display:block; width:63px; height:38px; text-align:center; }
#header .menu li.blog a:hover { border:0; background:url(v1/bg_blog.jpg) no-repeat 0 -52px; }
#info #header .menu li a.info, 
#storyboards #header .menu li a.storyboards, 
#animatics #header .menu li a.animatics, 
#ilustracao #header .menu li a.ilustracao, 
#contato #header .menu li a.contato { background:#000; color:#fff; border-bottom:#f26e23 5px solid; }
#info #header .menu li a.info:hover, 
#storyboards #header .menu li a.storyboards:hover, 
#animatics #header .menu li a.animatics:hover, 
#ilustracao #header .menu li a.ilustracao:hover, 
#contato #header .menu li a.contato:hover,
#info #header .menu li a.info:focus, 
#storyboards #header .menu li a.storyboards:focus, 
#animatics #header .menu li a.animatics:focus, 
#ilustracao #header .menu li a.ilustracao:focus, 
#contato #header .menu li a.contato:focus { color:#f26e23; }
/***********************************************************************
	0.3 - BOTTOM
***********************************************************************/
#bottom .extra_bottom { background:url(v1/bg_extrawrap.gif) no-repeat left bottom; padding:45px 0 15px; }
#bottom p { padding:0 10px; }
#bottom .menu { margin:0 0 10px; }
#bottom .menu li { display:inline; padding:0 5px; border-right:#ddd 1px solid; }
#bottom .menu li a { color:#666; padding:5px; text-decoration:none; }
#bottom .menu li a:hover { color:#f26e23; text-decoration:underline; }
#bottom .enderecos { display:none; }
#bottom .vcard a { color:#999; text-decoration:none; }
#bottom .vcard a:hover { color:#f26e23; text-decoration:underline; }
/***********************************************************************
	0.4 - CLASSES GERAIS
***********************************************************************/
.hidden { visibility:hidden; }
/***********************************************************************
	0.5 - qTIP
***********************************************************************/
div#qTip { padding:3px; border:3px solid #000; background:#fff; color:#f37125; font-size:1.2em; text-align:left; position:absolute; z-index:1000; display:none; }
/***********************************************************************
1 - HOME
***********************************************************************/
#home .flash { padding:0 0 140px; }
#home .flash img { margin:0 0 20px; padding:20px 0; background:#000; border-bottom:#f37125 5px solid; border-top:#f37125 5px solid; }
#home .blog { padding:0 20px; width:360px; }
#home .blog ul { font-size:1.2em; padding:0 0 0 20px; }
#home .blog li { padding:0; }
#home .blog li a { background:#fff; padding:5px 10px; color:#666; text-decoration:none; display:block; border-bottom:#ccc 1px dotted; }
#home .blog li a:hover { background:#f37125; color:#fff; font-weight:bold; }
/***********************************************************************
2 - INFO
***********************************************************************/
#info .submenu { float:left; margin:25px 0 0 30px; width:210px; font-size:1.2em; text-transform:uppercase; }
#info .submenu li { margin:0 0 1px; }
#info .submenu li a { color:#999; font-weight:bold; display:block; text-decoration:none; padding:3px 5px; }
#info .submenu li a:hover { background:#f37125; color:#fff; border-right:#000 5px solid; }
#info .submenu li a:active,
#info .submenu li a.active { background:#000; color:#fff; border-right:#f37125 5px solid; }
#info .text { margin:0 0 0 320px; }
#info .text p { padding:5px 0; line-height:1.7em; text-indent:25px; color:#333; text-align:justify; }
#info a.more { display:block; margin:20px 0 0 550px; text-align:right; }
/***********************************************************************
3 - STORYBOARDS
***********************************************************************/
#storyboards .what { float:left; width:230px; margin-left:10px !important; margin-left:5px; padding:0 85px 0px 0; background:url(v1/bg_what.gif) no-repeat right 40px; }
#storyboards .what p { padding:0 10px 10px; color:#666; border-bottom:#fcd5bc 1px solid; line-height:1.6em; }
#storyboards .what a { display:block; margin:5px 0 0; text-decoration:none; color:#f37125; text-align:right; padding:3px; }
#storyboards .storys { margin:0 0 0 345px; text-align:center; }
#storyboards .storys h2 { text-align:left; }
#storyboards .storys #frames { width:415px; margin:auto; margin-top:19px; margin-bottom:10px; }
#storyboards .storys #frames img { padding:20px 0; background:#000; border-bottom:#f37125 5px solid; border-top:#f37125 5px solid; }
#storyboards .storys .csw { width:100%; background:#fff; overflow:scroll; }
#storyboards .storys .csw .loading { text-align:center; }
#storyboards .storys .stripViewer { position:relative; overflow:hidden !important; width:370px !important; height:auto !important; }
#storyboards .storys .stripViewer .panelContainer { position:relative; left:0; top:0; width:100%; }
#storyboards .storys .stripViewer .panelContainer .panel { float:left; width:370px; position:relative; }
#storyboards .storys .stripNavL,
#storyboards .storys .stripNavR { float:right; width:26px; height:22px; margin-bottom:15px !important; margin:0 15px 0; background:url(v1/bt_prev.jpg) no-repeat; }
#storyboards .storys .stripNavR { margin:0; margin-right:23px !important; margin-right:10px; background:url(v1/bt_next.jpg) no-repeat; }
#storyboards .storys .stripNavL a,
#storyboards .storys .stripNavR a { background:url(v1/bt_next_active.jpg) no-repeat; display:block; width:26px; height:22px; text-indent:-9999px; }
#storyboards .storys .stripNavL a { background:url(v1/bt_prev_active.jpg) no-repeat; }
#storyboards .works { clear:both; margin:0 0 0 345px; }
#storyboards .works ul { padding:0 0 0 16px; overflow:auto; }
#storyboards .works ul li { float:left; margin:3px 3px 2px 2px; height:58px; padding:0; }
#storyboards .works ul li a { background:#fff; display:block; width:50px; height:50px; padding:4px; }
#storyboards .works ul li a:visited { background:#fde2d3; }
#storyboards .works ul li a:hover { background:#000; }
#storyboards .works ul li a:active,
#storyboards .works ul li a.active { background:#f37125; }
/***********************************************************************
4 - ANIMATICS
***********************************************************************/
#animatics .what { float:left; width:230px; margin-left:10px !important; margin-left:5px; padding:0 85px 0px 0; background:url(v1/bg_what.gif) no-repeat right 40px; }
#animatics .what p { padding:0 10px 10px; color:#666; border-bottom:#f37125 1px dotted; line-height:1.6em; }
#animatics .what a { display:block; margin:5px 0 0; text-decoration:none; color:#f37125; text-align:right; padding:3px; }
#animatics .animas { margin:0 0 0 345px; text-align:center; }
#animatics .animas h2 { text-align:left; }
#animatics .animas #video { width:370px; margin:auto; margin-top:19px; margin-bottom:10px; padding:20px 0; background:#000; border-bottom:#f37125 5px solid; border-top:#f37125 5px solid; }
#animatics .works { clear:both; margin:30px 0 0 345px; }
#animatics .works ul { padding:0 0 0 16px; overflow:auto; }
#animatics .works ul li { float:left; margin:3px 3px 2px 2px; width:58px; height:58px; padding:0; }
#animatics .works ul li a { background:#fff; display:block; height:50px; padding:4px; }
#animatics .works ul li a:visited { background:#fde2d3; }
#animatics .works ul li a:hover { background:#000; }
#animatics .works ul li a:active,
#animatics .works ul li a.active { background:#f37125; }
/***********************************************************************
5 - ILUSTRAÇÃO
***********************************************************************/
#ilustracao .ilustras { float:right; width:415px; }
#ilustracao .ilustras img { padding:20px 0; background:#000; border-bottom:#f37125 5px solid; border-top:#f37125 5px solid; height:auto; }
#ilustracao .works { width:285px; margin-left:10px !important; margin-left:5px; float:left; }
#ilustracao .works ul { padding:0 0 0 16px; overflow:auto; }
#ilustracao .works ul li { float:left; margin:3px 3px 2px 2px; width:58px; height:58px; padding:0; }
#ilustracao .works ul li a { background:#fff; display:block; height:50px; padding:4px; }
#ilustracao .works ul li a:visited { background:#fde2d3; }
#ilustracao .works ul li a:hover { background:#000; }
#ilustracao .works ul li a:active,
#ilustracao .works ul li a.active { background:#f37125; }
/***********************************************************************
6 - CONTATO
***********************************************************************/
#contato #faleconosco { float:right; width:350px; }
#contato #faleconosco h2 { margin-bottom:20px; }
#contato #faleconosco p { color:#666; padding:10px 10px 0; text-align:center; }
#contato #faleconosco label { margin:0 0 0 10px; color:#000; font-weight:bold; font-size:1.2em; text-transform:uppercase; }
#contato #faleconosco input,
#contato #faleconosco textarea { font:1.1em Arial, Helvetica, sans-serif; padding:2px; display:block; margin:3px 0 10px 20px; width:300px; border:#000 2px solid; }
#contato #faleconosco input:focus,
#contato #faleconosco textarea:focus { border-color:#f37125; }
#contato #faleconosco textarea { height:120px; }
#contato #faleconosco .submit { background:#f37125; font-weight:bold; font-size:1.2em; text-transform:uppercase; width:75px; border:#000 2px solid; color:#fff; cursor:pointer; margin:0 0 0 253px }
#contato #faleconosco .alert { border:#f37125 1px solid; background:#fef0e7; padding:5px; text-align:center; margin:0 0 20px; color:#000; }
#contato .enderecos { margin:0 490px 0 0; margin-left:10px !important; color:#666; }
#contato .enderecos h2 { margin:0 0 15px;}
#contato .enderecos h3 { margin:10px 0 0 10px; }
#contato .enderecos .adr { padding:0 0 5px 25px; }
#contato .enderecos .street-address { display:block; }
#contato .enderecos .tel { color:#f37125; padding:3px 0 3px 20px; }