/* Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ 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; vertical-align: baseline; background: transparent; } body { line-height: 1; } h1, h2, h3, h4, h5, h6 { font-weight: normal; clear: both; } ol, ul { list-style: none; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } body { position: relative; overflow-y: scroll; font-family: 'Cousine', 'Trebuchet MS', 'Lucida Grande', Tahoma, Arial, Sans-Serif; background: #d8dee3; } body.facebook-portfolio { width: 500px; overflow: auto; padding-top: 20px; } header { width: 860px; height: 120px; margin: 30px auto 0; display: block; } header h1 a { width: 150px; height: 39px; text-indent: -9999px; background: #fff url(styles/logo.png) no-repeat scroll; display: block; overflow: hidden; float: left; } nav { float: right; margin-top: 15px; } nav li { float: left; margin-left: 3px; background: transparent url(styles/menu_separator.png) no-repeat scroll left 3px; padding-left: 11px; } nav li:first-child { background: none; padding-left: 0; } nav li a { font-size: 18px; font-weight: bold; text-decoration: none; color: #000; text-transform: lowercase; text-shadow: #fff 0 1px 1px; } nav li a:hover, nav li.current-menu-item a, nav li.current-menu-parent a { color: #f00; } a#facebook { width: 50px; height: 42px; display: block; overflow: hidden; text-indent: -9999px; background: transparent url( "styles/facebook.png" ) no-repeat scroll 0 0; position: fixed; left: -10px; top: 70px; } a:hover#facebook { left: 0; background-position: 0 -42px; } a:active#facebook { left: -10px; background-position: 0 -42px; } #projects { width: 860px; margin: 0 auto; display: block; } .facebook-portfolio { width: 500px; background-color: #fff; } .facebook-portfolio #projects { width: 500px; margin: 0; display: block; overflow: hidden; } #projects article { position: relative; border-right: 5px solid #cad1d7; background-color: #d8dee3; width: 860px; height: 100px; display: block; overflow: hidden; margin-bottom: 20px; } .facebook-portfolio #projects article { background-color: #fff; width: 520px; } #projects article small { width: 60px; padding-right: 10px; text-shadow: 0 1px #ffffff, 0 -1px #cdcdcd; color: #cad1d7; font-family: Impact; font-size: 60px; text-align: right; float: left; } .facebook-portfolio #projects article small { width: 20px !important; font-size: 27px !important; color: #e8eff6; } #projects article .imageContainer { position: relative; width: 450px; float: left; overflow: hidden; } .facebook-portfolio #projects article .imageContainer { width: auto; } #projects article .imageContainer img { width: 450px; } .facebook-portfolio #projects article .imageContainer img { width: auto; } #projects article .imageContainer .arrows { position: absolute; top: 100px; left: 0; width: 650px; height: 20px; display: block; background: transparent url(styles/arrows.png) repeat-x scroll 0 5px; } #projects article .imageContainer a.zoom, #projects article .imageContainer a.expand, #projects article .imageContainer a.like { position: absolute; top: 20px; right: 0; overflow: hidden; text-indent: -9999px; width: 25px; height: 14px; padding: 4px 0 0 4px; font-size: 10px; color: #fff; text-decoration: none; background-color: #333; border: 1px solid #fff; border-right: 0; -webkit-box-shadow: 0 2px 3px #000; -moz-box-shadow: 0 2px 3px #000; box-shadow: 0 2px 3px#000; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 2px; border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; display: none; background: #333 url( "styles/icons.png" ) no-repeat scroll 7px 3px; } #projects article .imageContainer a.zoom { background-position: 7px 3px; } #projects article .imageContainer a.expand { top: 45px; background-position: 7px -28px; } .facebook-portfolio #projects article .imageContainer a.expand { top: 25px; } #projects article .imageContainer a.like { top: 80px; background-position: 7px -89px; } #projects article .imageContainer a:hover.zoom, #projects article .imageContainer a:hover.expand, #projects article .imageContainer a:hover.like { background-color: #f00; width: 30px; } #projects article .imageContainer a:active.zoom, #projects article .imageContainer a:active.expand, #projects article .imageContainer a:active.like { width: 25px; } #projects article .info { position: relative; width: 270px; padding: 10px 10px 20px 20px; float: left; text-shadow: #fff 0 1px 1px; } .facebook-portfolio #projects article .info { width: 120px; padding: 10px 10px 20px 10px; font-size: 12px; display: block; } #projects article .info h2 { font-size: 16px; color: #000; font-weight: bold; margin-bottom: 15px; text-transform: lowercase; } .facebook-portfolio #projects article .info h2 a { color: #000; font-size: 12px; line-height: 16px; margin-bottom: 15px; } #projects article .info a { text-decoration: none; font-size: 12px; color: gray; } #projects article .info a:hover { border-bottom: 1px dashed #a2a9b0; } #projects article .info .content { position: absolute; top: 125px; left: 20px; font-size: 13px; line-height: 18px; color: gray; } .facebook-portfolio #projects article .info .content { font-size: 10px; left: 10px; line-height: 12px; } #projects article .info .tags { font-size: 14px; margin-top: 15px; color: #a2a4b0; } .facebook-portfolio #projects article .info .tags { font-size: 10px; } /* * Single */ .postTitle { display: block; margin-bottom: 20px; } #single p { margin-bottom: 20px; } #single .zoom { margin-bottom: 20px; display: block; } .tags { font-size: 14px; margin-top: 15px; color: #a2a4b0; } #single a { text-decoration: none; font-size: 12px; color: gray; } #single a:hover { border-bottom: 1px dashed #444; } #single .post { font-size: 14px; line-height: 18px; color: #444; } #single .post p { margin-bottom: 10px; } .labs-list li { border-top: 2px solid #cad1d7; padding-top: 20px; margin-top: 20px; } .labs-list li:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .labs-list h2 { display: block; margin-bottom: 10px; } .labs-list h2 a { font-size: 22px; text-decoration: none; clear: both; color: #000; } .labs-list h2 a:hover { border-bottom: 1px dashed #444; } .labs-list small { font-size: 11px; color: #a2a4b0; margin-bottom: 10px; display: block; } .labs-list .content { font-size: 14px; line-height: 18px; color: #444; } a.donateLink { background-color: #e48d06; color: #1b3664 !important; padding: 3px 5px 1px 5px !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a:hover.donateLink { background-color: #d68406; color: #32679b; border: 0 !important; } /* * Pages */ #page { position: relative; overflow: hidden; } #page h2 { font-size: 22px; margin-bottom: 20px; } #page h3 { font-size: 18px; margin-bottom: 10px; } #page p { font-size: 14px; color: #444; line-height: 1.3em; } #page ul { margin: 0 0 10px 20px; } #page ul li { font-size: 14px; color: #444; line-height: 1.4em; list-style: disc; } #page ul#contact { margin: 0; width: 300px; float: left; list-style: none; display: block; overflow: hidden; } #page ul#contact li { font-size: 16px; } #page ul#contact li a { font-size: 18px; color: #000; text-decoration: none; } #page ul#contact li a:hover { border-bottom: 1px dashed #a2a9b0; } .wpcf7 { width: 413px; float: right; display: block; overflow: hidden; } .wpcf7 p { margin-bottom: 10px; } .wpcf7 textarea { font-family: 'Cousine'; width: 400px; padding: 4px; background-color: #fff; border: 0; border-bottom: 2px solid #777; font-size: 16px; } .wpcf7 .wpcf7-submit, #submit { font-family: 'Cousine'; border: 0; background-color: #444; color: #fff; font-size: 14px; padding: 4px 10px; } .wpcf7-mail-sent-ok { width: 387px; background-color: green; display: block; padding: 10px; color: #fff; } .wpcf7-validation-errors { width: 387px; background-color: red; display: block; padding: 10px; color: #fff; } .wpcf7 .wpcf7-text, .wpcf7 textarea, .wpcf7 .wpcf7-select, #comment, #author, #email, #url { width: 399px; font-family: 'Cousine'; padding: 4px 4px 0 4px; background: linear-gradient( top, #EDEDED 1%, #FEFFFF 100% ); border: 0; font-size: 16px; -webkit-box-shadow: 0 0 3px 0 #525252; -moz-box-shadow: 0 0 3px 0 #525252; box-shadow: 0 0 3px 0 #525252; margin-left: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -moz-linear-gradient( top, #EDEDED 1%, #FEFFFF 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop( 1%, #EDEDED ), color-stop( 100%, #FEFFFF )); background: -webkit-linear-gradient( top, #EDEDED 1%, #FEFFFF 100% ); background: -o-linear-gradient( top, #EDEDED 1%, #FEFFFF 100% ); background: -ms-linear-gradient( top, #EDEDED 1%, #FEFFFF 100% ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEDED', endColorstr='#FEFFFF', GradientType=0 ); background: linear-gradient( top, #EDEDED 1%, #FEFFFF 100% ); } .wpcf7 .wpcf7-select { font-family: 'Cousine'; width: 407px; padding: 4px; font-size: 16px; border: 0; } /* * Comments */ #comments, #postcomment { margin: 50px 0 30px 0; font-size: 18px; } #commentlist li { padding: 10px; margin: 10px 0; } #commentlist li.odd { background-color: #c8ced3; } #commentlist li p { font-size: 13px; line-height: 1.4em; margin: 0; } #commentlist li cite { font-size: 11px; color: #555; font-style: normal; padding: 2px 5px; border-bottom: 1px solid #000; border-right: 1px solid #000; margin-bottom: 10px; background-color: #fff; position: relative; left: -20px; top: -5px; } .left, .right { width: 48%; display: block; float: left; } .right { float: right; } /* * Footer */ footer { width: 860px; margin: 20px auto; display: block; border-top: 5px solid #cad1d7; text-align: right; padding: 15px 5px; overflow: hidden; font-size: 12px; color: #555; } /* ----------------------------------------------------------------- */ #total_form { font-family: Cuprum !important; background-color: #eee; width: 320px; display: block; position: fixed; left: 50%; top: 150px; margin-left: 100px; } #sliders { margin: 0 0 30px 15px; font-family: Cuprum !important; } .ui-slider { width: 280px; height: 10px; background-color: gray; } #pages-slider-dots, #days-slider-dots { position: relative; width: 290px; height: 5px; display: block; z-index: -1; margin: 30px 0 20px -3px; overflow: hidden; } .dot { width: 6px; height: 5px; display: block; background: transparent url( "styles/dot.png" ) no-repeat scroll 0 0; float: left; margin-left: 0; } .dot:first-child { margin-left: 0 !important; } #pages-slider-dots .dot { margin-left: 14px; } #days-slider-dots .dot { margin-left: 12.5%; } /* * Handle */ .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 23px; height: 33px; cursor: pointer; outline: none; } .ui-slider-handle { text-align: center; text-decoration: none; font-size: 12px; color: #000 !important; padding-top: 4px; } .ui-slider-horizontal .ui-slider-handle { top: -25px; margin-left: -12px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 0; font-weight: normal; color: #555; background: transparent url( "styles/handle.png" ) no-repeat scroll 0 0; } /* * */ .step { width: 500px; display: block; font-family: Cuprum !important; } .step section { margin-bottom: 20px; } .step header { width: auto; height: auto; display: block; clear: both; cursor: pointer; background-color: #E8EEF3; padding: 5px; } .step h3 { float: left; margin: 0 !important; } .step .section_price { float: right; font-weight: bold; } .step ul { margin: 0 !important; display: none; } .step il li { list-style: none; } .step li label { display: block; border-bottom: 1px dashed #ccc; margin-bottom: 10px; cursor: pointer; } .step li label input { margin-right: 10px; } .step li label .price { float: right; color: #000; } .step .title { font-weight: bold; } .step .description { color: #777 !important; background-color: #C8CED3; padding: 10px 5px 5px 5px; } .step li .description { color: #777 !important; background-color: #D8DEE3; padding: 5px; } .step h4 { font-size: 16px; margin: 5px 0; color: #000; } /* * Slider */ .ui-slider { position: relative; text-align: left; margin: -25px 0 20px 0; } .ui-slider-horizontal { height: 5px; } .ui-widget-content { background: transparent url( "styles/line.png" ) no-repeat scroll 0 50%; } .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } /* For modern browsers */ .cf:before, .cf:after { content:""; display:block; } .cf:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ .cf { zoom:1; }