/************************************************\ » Main Layout - Screen -------------------------------------------------- // CSS V.2.12 (26/01/2011) - Graphic effects added: transparency box // CSS V.2.11 (21/12/2010) - Some code reorganized // CSS V.2.10 (06/12/2010) - Added Graphic Effects tab - Optimized Code // CSS V.2.00 (16/08/2010) - Added Eric Meyer's CSS reset v1.0 - Added basic structural layout templates - Corrected mainmenu dropdown template - Added rounded Corners to graphic objects // CSS V.1.00 (01/02/2010) - basic css template created -------------------------------------------------- By Epoch Multimédia 2010 \************************************************/ /************************************************\ » RESET \************************************************/ /* Eric Meyer's CSS reset v1.0 | 20080212 http://meyerweb.com/eric/tools/css/reset/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /************************************************\ » GLOBAL PARAMETERS \************************************************/ body, html { height: 100%; } body { background-color: #FFF; text-align: center; margin: 0 auto; } img, div, input { } a img { border: none } p, h1, h2, h3, h4, h5, hr, ul, form, fieldset, table { clear: both; margin-bottom: 15px; } ul { list-style: none;} legend { display: none; } fieldset { border: none } /************************************************\ » TYPE \************************************************/ /* Shared ****************************************/ body, textarea, input { font: 14px Arial, Helvetica, sans-serif } #headerright, #headersubleft, h1, #contentleft h2, #contentleft h3, #contentleft h4, #protoFooter a h3, .fileirasMotherBlock { font-family: 'PT Sans', Arial, Helvetica, sans-serif} /* Colors ****************************************/ body, #headerright a, #headerright-xtra a { color: #333; } #footer, #l_sidebar, #footer a { color: #666} .newsdate, #headersub, #headersub a { color: #999 } .error { color: #F00; } .confirm { color: #690; } #submenu .nav li a { color: #004B85} .emm-login h1, .emm-forgotpw-login h1, .emm-login h3, .emm-forgotpw-login h3, a, #headersubright a:hover, #headerright a:hover, #headerright a.nav-path-selected, #headerright-xtra a:hover, #l_sidebar h3, #headersub a:hover { color: #CC3851} .alert.error, .alert.confirm, #submit:hover, #l_sidebar .submenu li a:hover, #l_sidebar .submenu li a.nav-selected { color: #FFF; } /* Size ******************************************/ h1 { font-size: 28px } h2 { font-size: 24px } h3 { font-size: 22px } h4, #l_sidebar h3 { font-size: 16px } h5, #l_sidebar .submenu { font-size: 14px } #headerright { font-size: 13px } #footer, #headersubright, #l_sidebar { font-size: 12px } small, .note, #headerright-xtra form input, #footerRight ul { font-size: 11px; } #headerright-xtra{ font-size: 10px; } /* Variations ************************************/ h1, h2, h3, h4, h5, #submenu .nav li.nav-path-selected li a { font-weight: normal } #submenu .nav li.nav-path-selected a, #headerright { font-weight: bold } a, #submenu .nav li a:hover { text-decoration: none } a:hover, #headerright a:hover, #headersubright a, #submenu .nav li a:hover { text-decoration: underline; } #headerright a, #headerright-xtra, #footerRight ul, #l_sidebar h3, .fileirasMotherBlock { text-transform: uppercase } #headerright a { letter-spacing: 1px;} a[target="_blank"]:before, a[target="new"]:before { } /* links on new windows */ /************************************************\ » STRUCTURAL LAYOUT \************************************************/ /* Main *****************************************/ #wrap, #headerWrap, #header, #headersub, #protoFooter { margin: 0 auto; text-align: left } .content { } .sidebar { } #footer { } /* Fixed Width **********************************/ #wrap, #header, #headersub, #footer, #protoFooter, #contentleft.full, #contentleft.oneCol { width: 940px; } #headerWrap { width: 100%; } #contentleft.twoCol { width: 620px } #contentleft.twoCol.sameWidth, #l_sidebar.sameWidth { width: 445px; } #contentleft.threeCol { width: 460px } #r_sidebar, #l_sidebar { width: 300px; } .news #r_sidebar { width: 310px; } /************************************************\ » GRAPHIC LAYOUT \************************************************/ /* Shared ***************************************/ /* Global */ body {} /* Objects */ input[type="text"], input[type="password"], input[type="email"], input[type="submit"], textarea, select { border: solid 1px #CCC; padding: 4px; } input[type="submit"] { cursor: pointer } .btn_nulled { background: #CCC; display: block; float: left; padding: 6px 10px; } a[target="_blank"]:before, a[target="new"]:before { } /* links on new windows */ hr { height: 1px; border: none; border-top: solid 1px #999; } table { border-top: solid 1px #CCC; width: 100%; } td, th { padding: 5px; } thead th { text-align: center; background-color: #AAA; color: #FFF; } tbody th { background: #E4E4E4; border-top: solid 1px #999 } tr:nth-child(odd) { background: #F1F1F1 } /* Nav ******************************************/ /* Header */ #headerWrap { border-top: solid 4px #CE3851; clear: both; position:relative; } #header { height: 115px; position: relative; } #headerleft { left: 50%; margin-left: -460px; position:absolute; top: 24px; z-index: 100; } /* LOGO IMG */ #headerleft a { background: url(/themes/interfileiras/./images/header_logotipo_2.png) no-repeat; display:block; height: 63px; text-indent: -1000px; width: 162px; } #headerright { float: right; height: 60px; margin-top: 54px; } #headerright ul { margin-top: 18px; clear: none; } #headerright li { display: inline; margin: 0 0 0 25px; } #headerright-xtra { background-color: #EBEBEB; height: 22px; position: absolute; right: 0px; padding: 8px 4px 8px 12px; width: 290px; } #headerright-xtra ul { clear: none; float: left; margin: 0; padding: 0; } #headerright-xtra li { float: left; padding: 5px 10px 0 0; } #headerright-xtra form { clear: none; float: right; margin:0; margin-top: -4px; padding: 0 } #headerright-xtra form h3 { display: none; } #headerright-xtra form input[type="text"] { width: 100px } #headerright-xtra form input[type="submit"] { background: url(/themes/interfileiras/./images/icon_lupa_s.png) no-repeat; border: none; height: 29px; margin: 0 0 0 -26px; text-indent: -1000px; width: 27px;} #headersubWrap { border-bottom: dotted 1px #CCC; width: 100%; clear:both; } #headersub { height: 60px; position: relative; overflow: hidden; } #headersubright { position: absolute; right: 0px; top: 22px; } #headersubright a { display: inline-block; margin-left: 15px; padding: 2px 0 2px 20px; } #headersubright span.sign-in a { margin: 0; padding:0 } #headersubright a.lock { background: url(/themes/interfileiras/./images/icon_S_lock.png) no-repeat; } #headersubleft { left: 0; position: absolute; top: 10px;} #headersubleft a.tooltip { height: 50px; } #headersubleft ul { list-style: none } #headersubleft li { float: left; margin: -20px 10px 0 0; } .subheader_links { float:right } /* SubMenu */ #submenu .nav { border-left: solid 1px #CCC; } #submenu .nav ul { margin: 0; padding: 0 } #submenu .nav li { border-right: solid 1px #CCC; border-bottom: solid 1px #CCC; margin: 0; overflow: visible; padding: 0; width: 219px} #submenu .nav li.nav-path-selected { background: #CDD64E; border-right: none; width: 220px } #submenu .nav li.nav-path-selected li { border: none; border-top: dotted 1px #E6EBA7; margin: 0; } #submenu .nav li a { display: block; padding: 8px; } #submenu .nav li a:hover { background: #CDD64E } #submenu .nav li a.nav-selected { background: url(/themes/interfileiras/./images/submenu_navPathSelected_BG.gif) right no-repeat; padding-right: 16px; width: 205px } #submenu .nav li.nav-path-selected li a { background: #CDD64E; border-right: solid 1px #CCC; padding-left: 24px; width: 186px } #submenu .nav li li.nav-selected a { background: url(/themes/interfileiras/./images/submenu_navPathSelected_BG.gif) right no-repeat; border-right: 0px; width: 188px } /* Global Content *******************************/ /*content */ #content { width: 940px; margin: 20px auto 0 auto; display: inline-block; } #content p { clear: none } #content p, #content li { line-height: 20px; } #contentleft { display: inline; float: left; margin: 0; overflow: hidden; padding: 0 0 10px 0; } #contentleft ol { list-style-type: decimal; margin: 0px 0px 0px 20px; padding: 10px 0px 15px 0px; } #contentleft ol li{ margin: 0px 0px 0px 20px; padding: 0px 0px 5px 0px; } #contentleft ol ol { margin: 0; padding: 10px 0 0 0 ; } #contentleft ul{ list-style-type: square; margin: 0px 0px 0px 20px; padding: 0px 0px 15px 0px; } #contentleft ul li{ list-style-type: square; margin: 0px 0px 0px 20px; padding: 0px 0px 5px 0px; } #contentleft ul ul{ padding: 0; } #contentEnd, .contentEnd { clear: both; float: left; margin: 0; overflow: hidden; padding: 0 0 10px 0; width: 100%} #contentEnd .left, .contentEnd .left { float: left; } #contentEnd .right, .contentEnd .right { float: right; } blockquote{ background: #F2F2F2; margin: 0px 25px 15px 25px; padding: 10px 20px; border-top: 1px solid #DDD; border-right: 1px solid #666; border-left: 1px solid #DDDDDD; border-bottom: 1px solid #666; } .postmeta { width: 500px; padding: 2px 0px 30px 0px; margin: 0px 0px 0px 0px; border-top: 1px dotted #C0C0C0; } /* left sidebar */ #l_sidebar { float: left; margin: 0px; padding: 0 20px 20px 0; display: inline; } #l_sidebar h3 { } #l_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 10px 0px; } #l_sidebar ul li { padding: 0px 0px 3px 0px; margin: 0px; } #l_sidebar li ul { margin: 3px 0 0 10px; } #l_sidebar ul li a, #l_sidebar ul li a:visited { text-decoration: none; margin: 0px; padding: 0px; } #l_sidebar ul li a:hover { text-decoration: underline; } #l_sidebar .submenu ul { /* margin-bottom: 15px; */ } #l_sidebar .submenu li { display: inline; } #l_sidebar .submenu li a { background: #F1F1F1; border-bottom: solid 1px #CCC; display: block; padding: 10px } #l_sidebar .submenu .subnav li.lastItem a { margin-bottom: 20px; } #l_sidebar .submenu li a:hover, #l_sidebar .submenu li a.nav-selected { background: #CC3851; } /* right sidebar */ #r_sidebar { float: right; margin: 0px; padding: 0px 0px 20px 0px; line-height: 17px; display: inline; } #r_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 10px 0px; } #r_sidebar ul li { padding: 0px 0px 3px 0px; margin: 0px; } #r_sidebar li ul { margin: 3px 0 0 10px; } #r_sidebar ul li a, #r_sidebar ul li a:visited { text-decoration: none; margin: 0px; padding: 0px; } #r_sidebar ul li a:hover { text-decoration: underline; } /* Footer ***************************************/ /* footer */ #footerWrap { background: #EBEBEB url(/themes/interfileiras/./images/footer_BG.gif) repeat-x; clear:both; float: left; padding: 30px 0; width: 100%; } #footer { margin: 0 auto; position: relative; text-align: left; } #footer h5 { background: url(/themes/interfileiras/./images/footer_logotipo.png) no-repeat; height: 67px; overflow: hidden; text-indent: -1000px; width: 51px; } #footerLeft { float: left; width: 300px; } #footerLeft h4 {height: 44px; background: url(/themes/interfileiras/./images/header_logotipo_BW.png) no-repeat; text-indent: -1000px; overflow: hidden; width: 92px; } #footerRight { float: left; margin-left: 20px; width: 610px; } #footerRight ul, #footerRight p { float: right; text-align: right;} #footerRight a.emmLogo { background: url(/themes/interfileiras/./images/footer_emmLogotipo.png) no-repeat; display: inline-block; height: 15px; overflow: hidden; text-indent: 10000px; width: 15px } #footerRight li { float: left; margin-left: 15px; } /* search form **********************************/ #searchdiv { margin: 0px; padding 0px; } #searchform { margin: 0px; padding: 0px; overflow: hidden; } #s { background: #FFFFFF; width: 200px; color: #333333; font-size: 12px; font-family: Arial, Tahoma, Verdana; padding: 4px; margin: 7px 0px 0px 0px; border-top: 1px solid #DDDDDD; border-right: 1px solid #666666; border-left: 1px solid #DDDDDD; border-bottom: 1px solid #666666; } #f { background: #FFFFFF; width: 200px; color: #333333; font-size: 12px; font-family: Arial, Tahoma, Verdana; padding: 4px; margin: 7px 0px 0px 0px; border-top: 1px solid #C0C0C0; border-right: 1px solid #666666; border-left: 1px solid #C0C0C0; border-bottom: 1px solid #666666; } #sbutt { background: #878787; width: 200px; color: #FFFFFF; font-size: 11px; font-family: Arial, Tahoma, Verdana; padding: 1px; margin: 0px 0px 0px 5px; border: 1px solid #333333; } #author, #email, #url { background: #FFFFFF; width: 300px; color: #333333; font-size: 12px; font-family: Arial, Tahoma, Verdana; padding: 4px; margin: 0px 0px 0px 0px; border-top: 1px solid #666666; border-right: 1px solid #DDDDDD; border-left: 1px solid #666666; border-bottom: 1px solid #DDDDDD; } #comment { background: #FFFFFF; width: 440px; color: #222222; font-size: 12px; font-family: Arial, Tahoma, Verdana; padding: 4px; margin: 0px 0px 0px 0px; border-top: 1px solid #666666; border-right: 1px solid #DDDDDD; border-left: 1px solid #666666; border-bottom: 1px solid #DDDDDD; } #submit { background: #F1F1F1 } #submit:hover { background: #CC3851 } /* Comments *************************************/ #commentblock { width: 470px; color: #000000; float: left; padding: 0px 20px 10px 0px; margin: 10px 0px 0px 0px; } #commentblock ol{ list-style-type: square; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } .commentdate { font-size: 12px; padding-left: 0px; } #commentlist li p{ margin-bottom: 8px; line-height: 20px; padding: 0px; } .commentname { color: #333333; margin: 0px; padding: 5px 5px 5px 0px; } .commentinfo{ clear: both; } .commenttext { background: #F2F2F2; width: 440px; color: #333333; font-size: 12px; font-family: Arial, Tahoma, Verdana; padding: 10px 10px 0px 10px; margin: 10px 0px 30px 0px; border-top: 1px solid #DDDDDD; border-right: 1px solid #666666; border-left: 1px solid #DDDDDD; border-bottom: 1px solid #666666; } .commenttext-admin { background: #FFFFFF; width: 440px; color: #333333; font-size: 12px; font-family: Arial, Tahoma, Verdana; padding: 10px 10px 0px 10px; margin: 10px 0px 30px 0px; border-top: 1px solid #DDDDDD; border-right: 1px solid #666666; border-left: 1px solid #DDDDDD; border-bottom: 1px solid #666666; } #commentsformheader { padding-left: 0px; } #commentsform{ text-align: center; margin: 0px; padding: 0px; } #commentsform form { text-align: left; margin: 0px; } #commentsform p { margin: 0px; } #commentsform form textarea { width: 99%; } p.comments_link img { margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } /* EMM Specific Styling Design ******************/ /* notificações */ .ccm-error { background: url(/themes/interfileiras/./images/forms_mainBG.gif); margin: 20px 0 0 0; padding: 8px;} .ccm-error li { font-weight: normal; } /* conteúdo em: Recipac/Quem Somos */ .recipac-quemsomos-img { display: block; float: left; width: 126px; margin-bottom: 20px } /************************************************\ » PÁGINAS ÚNICAS \************************************************/ /* login */ .emm-login{ float: right; clear: none; width: 400px; border-left: dotted 1px #CCC; padding-left: 150px; } .emm-forgotpw-login{ float: left; clear: none; width: 250px; } .emm-forgotpw-login .btn.ccm-input-submit { margin-top: 15px;} /************************************************\ » BLOCOS ESPECÍFICOS \************************************************/ /* fileiras */ .fileirasMotherBlock ul { background: url(/themes/interfileiras/./images/interfileiras_logo_cinza.gif) 230px 125px no-repeat; height: 450px; margin: 0 !important; padding: 0 !important; position: relative; width: 610px; } .fileirasMotherBlock li { position: absolute; list-style: none !important; margin: 0 !important; padding: 0 !important; } .fileirasMotherBlock li a { background: #EEE; display: block; border: solid 6px #FFF; position: relative } .fileirasMotherBlock li a:hover { background-color: #BD273B; border: solid 6px #BD273B; color: #FFF; } .fileirasMotherBlock li a:hover span.img { } .fileirasMotherBlock li span.img { background: #EEE; display: block; float:left; height: 100px; width: 140px; } .fileirasMotherBlock li span.text { bottom: 40px; display:block; font-weight: bold; position: absolute; } .fileirasMotherBlock li.vidro { left: 0; top: 0; } .fileirasMotherBlock li.vidro a { height: 100px; width: 294px; } .fileirasMotherBlock li.vidro span.text { left: 55px } .fileirasMotherBlock li.vidro span.img { background:url(/themes/interfileiras/./images/cerv_logo.png) no-repeat; float: right; margin: 5px 5px 0; } .fileirasMotherBlock li.madeira { right: 0; top: 0; } .fileirasMotherBlock li.madeira a { height: 100px; width: 294px; } .fileirasMotherBlock li.madeira span.text { left: 44px } .fileirasMotherBlock li.madeira span.img { background: url(/themes/interfileiras/./images/embar_logo.png) no-repeat; float: right; margin: 5px 5px 0; } .fileirasMotherBlock li.metal { right: 0px; top: 112px; } .fileirasMotherBlock li.metal a { height: 207px; width: 150px; } .fileirasMotherBlock li.metal span.text { right: 50px; top: 50px } .fileirasMotherBlock li.metal span.img { background:url(/themes/interfileiras/./images/fimet_logo.png) no-repeat; margin: 110px 0 0 5px; } .fileirasMotherBlock li.plastico { left: 162px; top: 218px; } .fileirasMotherBlock li.plastico a { height: 100px; width:274px; } .fileirasMotherBlock li.plastico span.text { right: 35px; } .fileirasMotherBlock li.plastico span.img { background:url(/themes/interfileiras/./images/plastval_logo.png) no-repeat; margin: 5px 0 0 5px; } .fileirasMotherBlock li.cartao { left: 0; top: 112px; text-align: center; } .fileirasMotherBlock li.cartao a { height: 207px; width: 150px; } .fileirasMotherBlock li.cartao span.text { bottom: 26px; left: 46px } .fileirasMotherBlock li.cartao span.img { background:url(/themes/interfileiras/./images/recipac_logo.png) no-repeat; float:left; margin: 5px 0 0 5px; } /************************************************\ » GRAPHIC EFFECTS \************************************************/ /* Rounded corners ******************************/ #null { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; } #null { border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; } #null { border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } #null { border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; } /* Transparency *********************************/ #footerRight p { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } #null { filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1; } /* Drop Shadows *********************************/ #null { box-shadow: 0px 2px 3px #999; -moz-box-shadow: 0px 2px 3px #999; -webkit-box-shadow: 0px 2px 3px #999; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=155, Color='#999999'); /*--> For IE 5.5 - 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=155, Color='#999999')"; /*--> For IE 8 */ } #null:hover { box-shadow: 0px 1px 3px #333; -moz-box-shadow: 0px 1px 3px #333; -webkit-box-shadow: 0px 1px 3px #333; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=155, Color='#333333'); /*--> For IE 5.5 - 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=155, Color='#333333')"; /*--> For IE 8 */ } /* Transparency box *****************************/ #null { background: rgb(0, 0, 0); /*--> Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.6); /*--> RGBa with 0.6 opacity */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /*--> For IE 5.5 - 7*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /*--> For IE 8*/ } /* Text Shadows *********************************/ h2, h3, h4 { text-shadow: 0px 1px 0px #FFF; /* filter: dropshadow(color=#FFFFFF,offX=0,offY=1); Though it works with IE, it conflits with other parameters... BEWARE! */ } /************************************************\ » NOTIFICATIONS \************************************************/ .alert { padding: 5px 8px; } .alert.error { background-color: #F00} .alert.confirm { background-color: #9C0} /************************************************\ » VARIATIONS \************************************************/ .hide { display: none } .R { float: right; } .L { float: left; } /* largura de colunas prédefinidas */ .colS { width: 30% } .colM { width: 49% } /* IE... */ .colL { width: 70% } .colXL { width: 100% } /* dimensão texto */ .fontsize_12 { font-size: 12px; } /************************************************\ » API's CSS \************************************************/ /* PlusSlider-master ****************************/ #slider { clear: both; height: 200px; overflow: hidden; width: 100%; } #slider.newHeight { height: 90px; } #slider img { width: 100%; }