/* -------------------------------------------------------------------------------------------------- TITLE: Cargo Dominant - Premium HTML Theme - Main Stylesheet AUTHOR: Dan Richardson (Subatomic Themes) URL: http://themeforest.net/user/SubatomicThemes DATE: 17/07/2012 VERSION: 1.0 -------------------------------------------------------------------------------------------------- Table of Contents ----------------- 1. CSS Reset 2. Columns & Containers 3. Body & Page Header 4. Sliders 5. Homepage Featured Area 6. Subpage Intro 7. Main Content 8. Pullquotes & Blockquotes 9. Blog Posts 10. Forms 11. Miscelaneous Elements 12. Lists 13. Post comments & About Author 14. Dividers 15. Sidebar & Sidebar Widgets 16. Twitter Feed 17. Footer & Footer Widgets 18. Image Containers/Shadows & Hover Effects 19. Buttons 20. Pricing Tables 21. Portfolio 22. Extra Classes 23. @FontFace */ /*########################################################################################################## # # ---- 1. 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input { border: 0; border: none; } /*########################################################################################################## # # ---- 2. Columns & Containers # ##########################################################################################################*/ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 20px } .main_column { float: left; display: inline; margin-left: 10px; width: 680px; } .sidebar_column { background: url(../images/assets/sidebar.png) no-repeat 3px 0; float: left; display: inline; margin-right: 10px; width: 220px; padding-left: 40px; } /* -- Nested Column Classes -- */ .column.alpha, .columns.alpha { margin-left: 0 } .column.omega, .columns.omega { margin-right: 0 } /* -- Grid -- */ .container .one.column, .container .one.columns { width: 60px } .container .two.columns { width: 140px } .container .three.columns { width: 220px } .container .four.columns { width: 300px } .container .five.columns { width: 380px } .container .six.columns { width: 460px } .container .seven.columns { width: 540px } .container .eight.columns { width: 620px } .container .nine.columns { width: 700px } .container .ten.columns { width: 780px } .container .eleven.columns { width: 860px } .container .twelve.columns { width: 940px } /* -- Offsets -- */ .container .offset-by-one { padding-left: 80px } .container .offset-by-two { padding-left: 160px } .container .offset-by-three { padding-left: 240px } .container .offset-by-four { padding-left: 320px } .container .offset-by-five { padding-left: 400px } .container .offset-by-six { padding-left: 480px } .container .offset-by-seven { padding-left: 560px } .container .offset-by-eight { padding-left: 640px } .container .offset-by-nine { padding-left: 720px } .container .offset-by-ten { padding-left: 800px } .container .offset-by-eleven { padding-left: 880px } /*########################################################################################################## # # ---- 3. Body & Page Header # ##########################################################################################################*/ body { background: url(../images/skins/main_background/noise_medium.gif) repeat } header { height: 110px } nav { height: 50px } .header_logo { display: block; margin-top: 30px;} .social_icons { float: right; margin-top: 40px; } .social_icons li { display: inline-block } .social_icons li a img { position: relative; bottom: 0; } #nav_search_form { width: 282px; height: 37px; background: url(../images/assets/nav_search.png) no-repeat; margin-top: 7px; float: right; } #nav_search_field:-moz-placeholder { color: #404040; text-shadow: 0px 1px 0px #fff; } #nav_search_field::-webkit-input-placeholder { color: #404040; text-shadow: 0px 1px 0px #fff; } #nav_search_field { width: 230px; height: 20px; line-height: 15px; border: 0; float: left; margin: 7px 0 0 12px; background: none; font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: 404040; text-shadow: 0px 1px 0px #fff; } #nav_search_submit { width: 17px; height: 18px; position: absolute; right: 19px; top: 15px; background: url(../images/assets/nav_search_icon.png) no-repeat; border: 0; opacity: 0.5; -moz-opacity: 0.5; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #nav_search_submit:hover { cursor: pointer; opacity: 1; -moz-opacity: 1; } /*########################################################################################################## # # ---- 4. Sliders # ##########################################################################################################*/ #slider { height: 530px; overflow: hidden; } #ellipse_slider { width: 940px; height: 530px; display: block; position: relative; background: url(../images/assets/ellipse_bg.png) no-repeat 0 145px; } #ellipse_slider .ellipse_slide .ellipse_tagline { height: 145px; display: block; position: relative; overflow: hidden; font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 32px; color: #fff; text-shadow: 0px 1px 0px #000; text-align: center; } #ellipse_slider .ellipse_slide .ellipse_tagline h1 { width: 940px; display: block; position: absolute; top: 52px; } #ellipse_slider .ellipse_slide .ellipse_img { height: 385px; display: block; } #ellipse_slider_controls { width: 940px; height: 150px; text-align: center; } .slider_controls { text-align: center } #ellipse_slider_controls a, .slider_controls a { width: 24px; height: 24px; display: inline-block; line-height: 0; font-size: 0; color: transparent; background: url(../images/assets/slider_inactive_tab.png) no-repeat 50% 50%; margin: -20; } #ellipse_slider_controls a.activeSlide, .slider_controls a.activeSlide { width: 24px; height: 24px; background: url(../images/assets/slider_active_tab.png) no-repeat 50% 50%; margin: 0; } #ellipse_slider_controls a:focus, .slider_controls a:focus { outline: none } #nivo_slider_outer { position: relative; width: 1110px; height: 454px; margin: 0 auto; margin-top: 60px; background: url(../images/assets/nivo_bg.png) no-repeat; } #nivo_slider_inner { position: absolute; width: 950px; height: 410px; margin: 5px 0 0 80px; background: #fff; -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.65); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.65); -o-box-shadow: 0px 0px 6px rgba(0,0,0,0.65); -ms-box-shadow: 0px 0px 6px rgba(0,0,0,0.65); box-shadow: 0px 0px 6px rgba(0,0,0,0.65); } .nivo-directionNav a { width: 76px; height: 103px; display: block; background: url(../images/assets/nivo_direction_controls.png) no-repeat; text-indent: -9999px; -moz-opacity: 0.5; opacity: 0.5; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .nivo-directionNav a:hover { -moz-opacity: 1; opacity: 1; } a.nivo-nextNav { background-position: -76px } #nivo_slider_controls { width: 940px; height: 150px; } .nivo-controlNav { text-align: center; width: 940px; height: 150px; } .nivo-controlNav a { display: inline-block; width: 24px; height: 24px; background: url(../images/assets/slider_inactive_tab.png) no-repeat 50% 50%; line-height: 0; font-size: 0; color: transparent; margin: 20px 0 0 0; } .nivo-controlNav a.active { width: 24px; height: 24px; background: url(../images/assets/slider_active_tab.png) no-repeat 50% 50%; } #testimonial_slider { height: 140px; overflow: hidden; } #testimonial_prev_slide { width: 42px; height: 42px; display: block; background: url(../images/assets/testimonial_prev_button.png) no-repeat; float: left; position: relative; top: 10px; cursor: pointer; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #testimonial_prev_slide:hover { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); } #testimonial_next_slide { width: 42px; height: 42px; display: block; background: url(../images/assets/testimonial_next_button.png) no-repeat; float: right; position: relative; top: 10px; cursor: pointer; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #testimonial_next_slide:hover { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); } #testimonial_slider .testimonial_slide { width: 620px; height: 140px; display: block; font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 22px; color: #333; text-align: center; line-height: 32px; } #testimonial_slider .testimonial_slide a { color: #1dcaff; text-decoration: none; } #testimonial_slider .testimonial_slide a:hover { color: #333 } .quote_author { font-family: "CantarellRegular", Georgia, serif; font-size: 10px; text-transform: uppercase; color: #909090; } .slider { height: 380px } /*########################################################################################################## # # ---- 5. Homepage Featured Area # ##########################################################################################################*/ #featured_area { height: 620px; background: url(../images/assets/featured_area.png) no-repeat 50% 0; } #featured_columns { text-align: center } #featured_columns h2 { font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 14px; color: #000; text-transform: uppercase; text-shadow: 0px 1px 0px #fff; margin-bottom: 20px; } #featured_columns img { margin-bottom: 16px } #featured_columns p { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #666; text-shadow: 0px 1px 0px #fff; line-height: 20px; } #featured_columns p strong { font-family: "CantarellBold", Helvetica, Arial, sans-serif; color: #3f3f3f; } /*########################################################################################################## # # ---- 6. Subpage Intro # ##########################################################################################################*/ #intro_blurb { height: 330px } #intro_blurb h1 { font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 32px; color: #fff; text-shadow: 0px 1px 0px #000; text-align: center; position: relative; top: 52px; } .breadcrumbs { position: relative; top: 166px; font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 10px; color: #404040; text-align: center; text-shadow: 0px 1px 0px #fff; } .breadcrumbs a { text-decoration: none; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .breadcrumbs a:hover { color: #000 } /*########################################################################################################## # # ---- 7. Main Content # ##########################################################################################################*/ #main h1 { font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 18px; color: #000; text-transform: uppercase; line-height: 20px; margin-bottom: 25px; } #main h2 { font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 16px; color: #000; text-transform: uppercase; line-height: 20px; margin-bottom: 25px; } #main h3 { font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 14px; color: #000; text-transform: uppercase; line-height: 20px; margin-bottom: 25px; } #main h4 { font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 12px; color: #000; text-transform: uppercase; line-height: 20px; margin-bottom: 25px; } #main h5 { font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #000; text-transform: uppercase; line-height: 20px; margin-bottom: 25px; } #main h6 { font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 12px; color: #000; text-transform: none; line-height: 20px; margin-bottom: 25px; } #main h1 span { display: block; font-family: "CantarellOblique", Helvetica, Arial, sans-serif; font-size: 14px; color: #4c4c4c; text-transform: none; } #main h2 span { display: block; font-family: "CantarellOblique", Helvetica, Arial, sans-serif; font-size: 12px; color: #4c4c4c; text-transform: none; } #main h3 span { display: block; font-family: "CantarellOblique", Helvetica, Arial, sans-serif; font-size: 10px; color: #4c4c4c; text-transform: none; } #main h1.special_header { font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 24px; line-height: 30px; text-align: center; text-transform: none; margin-bottom: 60px; } #main h1.special_header:before, #main h1.special_header:after { content: " ~ "; color: #a6a6a6; } #main p { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #404040; line-height: 20px; margin-bottom: 20px; } #main p strong { color: #151515; font-weight: bold; } #main a { text-decoration: underline; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #main ul li a { text-decoration: none } #main a:hover { color: #000 } #main img { max-width: 100% } /*########################################################################################################## # # ---- 8. Pullquotes & Blockquotes # ##########################################################################################################*/ #main blockquote { font-family: "CreteRoundItalic", Georgia, sans-serif; font-size: 18px; color: #1a1a1a; display: block; line-height: 30px; padding: 10px 40px 15px 30px; } #main .quote_left { float: left; width: 260px; background: url(../images/assets/quote_border.png) repeat-y 0 0; } #main .quote_right { float: right; width: 260px; background: url(../images/assets/quote_border.png) repeat-y 100% 0; } #main .quote_full { text-align: center; margin-bottom: 20px; background: url(../images/assets/quote_border.png) repeat-y 0 0, url(../images/assets/quote_border.png) repeat-y 100% 0; } /*########################################################################################################## # # ---- 9. Blog Posts # ##########################################################################################################*/ #main .post_title a { text-decoration: none; color: #000; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #main .post_title a:hover { color: #595959 } #main .post_meta { height: 25px; padding-top: 2px; margin-bottom: 20px; background: url(../images/assets/post_meta_divider.png) repeat-x; } #main .post_meta a { display: inline-block; height: 16px; line-height: 16px; font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; text-decoration: none; color: #737373; margin-right: 35px; padding-left: 25px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #main .post_author { background: url(../images/assets/post_author_icon.png) no-repeat } #main .post_category { background: url(../images/assets/post_category_icon.png) no-repeat } #main .post_date { background: url(../images/assets/post_date_icon.png) no-repeat } #main .post_no_of_comments { background: url(../images/assets/post_comments_icon.png) no-repeat } /*########################################################################################################## # # ---- 10. Forms # ##########################################################################################################*/ #main input[type="text"], #main textarea, #main textarea:-moz-placeholder { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #b2b2b2; } #main input[type="text"]::-webkit-input-placeholder, #main textarea::-webkit-input-placeholder { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #b2b2b2; } #main input[type="text"].placeholder_text, #main textarea.placeholder_text { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #b2b2b2; } #main input[type="text"], #main textarea { display: block; border: 0; background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,250,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(250,250,250,1) 0%,rgba(255,255,255,1) 100%); /* W3C */ -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.30), inset 0px 0px 3px #fff; -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.30), inset 0px 0px 3px #fff; -o-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.30), inset 0px 0px 3px #fff; -ms-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.30), inset 0px 0px 3px #fff; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.30), inset 0px 0px 3px #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } #main input[type="text"] { width: 300px; height: 40px; margin-bottom: 20px; padding: 0 20px 0 20px; } #main textarea { width: 380px; padding: 15px 10px 10px 20px; margin-bottom: 20px; } #main input[type="submit"] { width: 100px; height: 30px; background: url(../images/assets/form_submit.png) no-repeat 0 0; border: 0; border: none; font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; text-decoration: none; text-shadow: 0px 1px 0px #000; color: #fff; } #main input[type="submit"]:hover { background-position: 0 -30px; cursor: pointer; } #contact_submit { margin-bottom: 30px } /*########################################################################################################## # # ---- 11. Misc Elements # ##########################################################################################################*/ #main .intro_text { margin-bottom: 40px } #main .intro_text p { font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 18px; color: #4c4c4c; line-height: 25px; } #main .intro_text em { color: #000 } #main .highlight { background: #ffff25; color: #000; } #main pre { font-family: "Courier New", Courier, monospace; font-size: 14px; color: #999; line-height: 20px; text-shadow: 0px 1px 0px #fff; padding: 20px; background: url(../images/assets/pre_background.gif) repeat; border: 5px solid #fff; white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.15); -o-box-shadow: 0px 0px 3px rgba(0,0,0,0.15); -ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.15); box-shadow: 0px 0px 3px rgba(0,0,0,0.15); } #google_map { width: 930px; height: 440px; display: block; } ::-moz-selection { background: #aeaeae; color: #fff; } ::selection { background: #aeaeae; color: #fff; } .box { padding: 30px 30px 30px 100px; margin-bottom: 30px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0px 4px 8px rgba(0,0,0,0.08); -webkit-box-shadow: 0px 4px 8px rgba(0,0,0,0.08); -o-box-shadow: 0px 4px 8px rgba(0,0,0,0.08); -ms-box-shadow: 0px 4px 8px rgba(0,0,0,0.08); box-shadow: 0px 4px 8px rgba(0,0,0,0.08); } .box p { font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif !important; font-size: 14px !important; margin: 0 !important; text-transform: uppercase; text-shadow: 0px 1px 0px #fff; } .box p strong { font-family: "TitilliumText22LXBold", Helvetica, Arial, sans-serif !important } .box.success { background: url(../images/icons/check.png) no-repeat 30px 50% #d9ffdf; border: 1px solid #62d975; } .box.success p, .box.success p strong { color: #4ba65a !important } .box.error { background: url(../images/icons/cross.png) no-repeat 30px 50% #ffe5e5; border: 1px solid #d96262; } .box.error p { color: #a64b4b !important } .box.warning { background: url(../images/icons/alert.png) no-repeat 30px 50% #ffffe5; border: 1px solid #b2b236; } .box.warning p { color: #a6a64b !important } .box.info { background: url(../images/icons/info.png) no-repeat 30px 50% #e5f6ff; border: 1px solid #6cb5d9; } .box.info p { color: #4b87a6 !important } .close { float: right; position: relative; bottom: 20px; left: 20px; } /*########################################################################################################## # # ---- 12. Lists # ##########################################################################################################*/ #main ul { font-family: "CantarellBold", Helvetica, Arial, sans-serif; font-size: 12px; color: #151515; } #main ul li { line-height: 30px; padding-left: 30px; } #main ul.bullet_square_01 li { background: url(../images/assets/bullet_square_01.png) no-repeat 2px 8px } #main ul.bullet_square_02 li { background: url(../images/assets/bullet_square_02.png) no-repeat 2px 8px } #main ul.bullet_square_03 li { background: url(../images/assets/bullet_square_03.png) no-repeat 2px 8px } #main ul.bullet_square_04 li { background: url(../images/assets/bullet_square_04.png) no-repeat 2px 8px } #main ul.bullet_circle_01 li { background: url(../images/assets/bullet_circle_01.png) no-repeat 2px 8px } #main ul.bullet_circle_02 li { background: url(../images/assets/bullet_circle_02.png) no-repeat 2px 8px } #main ul.bullet_circle_03 li { background: url(../images/assets/bullet_circle_03.png) no-repeat 2px 8px } #main ul.bullet_circle_04 li { background: url(../images/assets/bullet_circle_04.png) no-repeat 2px 8px } #main ul.bullet_x_01 li { background: url(../images/assets/bullet_x_01.png) no-repeat 2px 8px } #main ul.bullet_x_02 li { background: url(../images/assets/bullet_x_02.png) no-repeat 2px 8px } #main ul.bullet_x_03 li { background: url(../images/assets/bullet_x_03.png) no-repeat 2px 8px } #main ul.bullet_x_04 li { background: url(../images/assets/bullet_x_04.png) no-repeat 2px 8px } #main ul.bullet_star_01 li { background: url(../images/assets/bullet_star_01.png) no-repeat 2px 8px } #main ul.bullet_star_02 li { background: url(../images/assets/bullet_star_02.png) no-repeat 2px 8px } #main ul.bullet_star_03 li { background: url(../images/assets/bullet_star_03.png) no-repeat 2px 8px } #main ul.bullet_star_04 li { background: url(../images/assets/bullet_star_04.png) no-repeat 2px 8px } #main ul.bullet_tick_01 li { background: url(../images/assets/bullet_tick_01.png) no-repeat 2px 8px } #main ul.bullet_tick_02 li { background: url(../images/assets/bullet_tick_02.png) no-repeat 2px 8px } #main ul.bullet_tick_03 li { background: url(../images/assets/bullet_tick_03.png) no-repeat 2px 8px } #main ul.bullet_tick_04 li { background: url(../images/assets/bullet_tick_04.png) no-repeat 2px 8px } #main ul.bullet_arrow_01 li { background: url(../images/assets/bullet_arrow_01.png) no-repeat 2px 8px } #main ul.bullet_arrow_02 li { background: url(../images/assets/bullet_arrow_02.png) no-repeat 2px 8px } #main ul.bullet_arrow_03 li { background: url(../images/assets/bullet_arrow_03.png) no-repeat 2px 8px } #main ul.bullet_arrow_04 li { background: url(../images/assets/bullet_arrow_04.png) no-repeat 2px 8px } #main ul.clients { text-align: center } #main ul.clients li { display: inline-block; padding: 0; margin: 0 12px 0 12px; } #main ul.clients li a { -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #main ul.clients li a:hover { -moz-opacity: 0.5; opacity: 0.5; } #main ul.team_member_social_icons { text-align: center } #main ul.team_member_social_icons li { position: relative; display: inline-block; padding: 0; margin: 0 5px 0 5px; background: url(../images/icons/small_icon_shadow.png) no-repeat 50% 24px; } #main ul.team_member_social_icons li a img { position: relative; bottom: 0; } /*########################################################################################################## # # ---- 13. Post Comments & About Author # ##########################################################################################################*/ .blog_post { clear: both; margin-bottom: 120px; } .other_posts { clear: both; text-align: center; margin: 170px 0 40px 0; } .other_posts li { display: inline-block } .other_posts li a.button { float: none; margin-right: 10px; margin-left: 10px; } .about_author, .comment_body { padding: 20px; border: 1px solid #e5e5e5; background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(245,245,245,1) 0%,rgba(255,255,255,1) 100%); /* W3C */ -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -moz-box-shadow: inset 0px 1px 0px #fff; -webkit-box-shadow: inset 0px 1px 0px #fff; -o-box-shadow: inset 0px 1px 0px #fff; -ms-box-shadow: inset 0px 1px 0px #fff; box-shadow: inset 0px 1px 0px #fff; } .about_author { margin-top: 60px } .about_author img { float: left; margin-top: 2px; } .about_author h3 { margin-left: 100px } .about_author p { margin-left: 100px } .post_comments { margin-bottom: 80px } .post_comments ul li { padding-left: 0 !important } .comment_avatar { float: left; -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.10); -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.10); -o-box-shadow: 0px 2px 4px rgba(0,0,0,0.10); -ms-box-shadow: 0px 2px 4px rgba(0,0,0,0.10); box-shadow: 0px 2px 4px rgba(0,0,0,0.10); } .post_comments h3, .comment_body { margin-left: 80px } .post_comments h3 { margin-bottom: 10px !important } .comment_body { margin-bottom: 30px; padding: 20px 40px 5px 40px; -moz-box-shadow: inset 0px 1px 0px #fff, 0px 2px 5px rgba(0,0,0,0.35); -webkit-box-shadow: inset 0px 1px 0px #fff, 0px 2px 5px rgba(0,0,0,0.35); -o-box-shadow: inset 0px 1px 0px #fff, 0px 2px 5px rgba(0,0,0,0.35); -ms-box-shadow: inset 0px 1px 0px #fff, 0px 2px 5px rgba(0,0,0,0.35); box-shadow: inset 0px 1px 0px #fff, 0px 2px 5px rgba(0,0,0,0.35); } .comment_children { margin-left: 80px } .comment_children ul li ul { margin-left: 80px } /*########################################################################################################## # # ---- 14. Dividers # ##########################################################################################################*/ .divider_dots { margin-bottom: 50px; border-top: 1px dotted #b1b1b1; } .divider_small_shadow { width: 940px; height: 40px; margin: 20px 0 30px 0; background: url(../images/assets/divider_line_01.png) no-repeat 0 0; } .divider_medium_shadow { width: 940px; height: 40px; margin: 20px 0 30px 0; background: url(../images/assets/divider_line_02.png) no-repeat 0 0; } .divider_large_shadow { width: 940px; height: 40px; margin: 20px 0 30px 0; background: url(../images/assets/divider_line_03.png) no-repeat 0 0; } /*########################################################################################################## # # ---- 15. Sidebar & Sidebar Widgets # ##########################################################################################################*/ #sidebar h3 { font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 14px; color: #000; text-transform: uppercase; margin-bottom: 30px; } .sidebar_bottom { width: 260px; height: 100px; float: left; background: url(../images/assets/sidebar_bottom.png) no-repeat 3px 0; } .widget_nav_menu { margin-bottom: 60px } .widget_nav_menu ul li { line-height: 39px; border-top: 1px dotted #b1b1b1; } .widget_nav_menu ul li a { display: block; height: 39px; font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #404040; text-decoration: none; padding-left: 30px; } .widget_nav_menu ul li a:hover { color: #000; background-position: 6px -40px; } .widget_text { margin-bottom: 60px } .widget_text p { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #404040; line-height: 20px; margin-bottom: 20px; } .widget_tag_cloud { margin-bottom: 60px } .widget_accordation { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #404040; line-height: 20px; } .widget_accordation p { padding-left: 50px; margin-bottom: 20px; } .accordation_header { font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-family: 12px; text-transform: uppercase; display: block; height: 70px; line-height: 70px; padding: 0 0 0 50px; background: url(../images/assets/accordation_reveal.png) no-repeat 0 20px; cursor: pointer; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .accordation_header:hover { background: url(../images/assets/accordation_reveal.png) no-repeat 0 20px rgba(0,0,0,0.04) } .accordation_content { width: 220px; position: relative; overflow: hidden; } .widget_accordation ul li { border-bottom: 1px dotted #b1b1b1 } .widget_accordation ul li:first-child { border-top: 1px dotted #b1b1b1 } .acc_active { background: url(../images/assets/accordation_hide.png) no-repeat 0 20px !important; cursor: normal; } /*########################################################################################################## # # ---- 16. Twitter Feed # ##########################################################################################################*/ #twitter_top { height: 150px; background: url(../images/assets/twitter_top.png) no-repeat 50% 100%; } #twitter_blurb { width: 860px; height: 70px; overflow: hidden; } .tweet, .query { } .tweet_list { font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 22px; color: #333; } .tweet_list li { width: 860px; height: 70px; display: block; line-height: 32px; } .tweet_list li a { color: #1dcaff; text-decoration: none; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tweet_list li a:hover { color: #333 } .tweet_list .tweet_avatar img { vertical-align: middle } .tweet_loading { font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 22px; color: #999; text-align: center; padding-top: 16px; } .twitter_icon { margin-top: 10px } /*########################################################################################################## # # ---- 17. Footer & Footer Widgets # ##########################################################################################################*/ #footer_top { width: 940px; height: 120px; } footer { height: 500px } footer .widget-title { font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 14px; color: #fff; text-shadow: 0px 1px 0px #000; text-transform: uppercase; margin-bottom: 30px; } .custom_menu_widget ul { } .custom_menu_widget ul li { line-height: 40px; background: url(../images/assets/footer_menu_divider.png) repeat-x top left; } .custom_menu_widget ul li a { display: block; height: 40px; font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #bfbfbf; text-decoration: none; text-shadow: 0px 1px 0px #000; background: url(../images/assets/footer_menu_shine.png) no-repeat 50% 0; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .custom_menu_widget ul li a:hover { color: #fff; text-shadow: 0px 0px 6px rgba(255,255,255,0.25); margin-left: 5px; } .custom_menu_widget2 ul { } .custom_menu_widget2 ul li { line-height: 20px; background: url(../images/assets/footer_menu_divider.png) repeat-x top left; } .custom_menu_widget2 ul li a { display: block; height: 20px; font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; color: #bfbfbf; text-decoration: none; text-shadow: 0px 1px 0px #000; background: url(../images/assets/footer_menu_shine.png) no-repeat 50% 0; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .custom_menu_widget2 ul li a:hover { color: #fff; text-shadow: 0px 0px 6px rgba(255,255,255,0.25); margin-left: 5px; } .recent_posts_widget ul li { width: 100%; margin-bottom: 18px; display: block; float: left; background: url(../images/assets/footer_menu_divider.png) repeat-x bottom left; } .recent_posts_widget ul li:last-child { padding-bottom: 0; margin-bottom: 0; background: none; } .recent_posts_widget ul li .footer_thumb_container { width: 80px; height: 78px; display: block; background: url(../images/assets/footer_thumb_container.png) no-repeat top left; float: left; } .recent_posts_widget ul li .footer_thumb_container { padding: 4px 0 0 4px } .recent_posts_widget ul li span { display: block; font-family: "CantarellOblique", Helvetica, Arial, sans-serif; font-size: 10px; text-shadow: 0px 1px 0px #000; line-height: 30px; } .recent_posts_widget ul li a { font-family: "CantarellBold", Helvetica, Arial, sans-serif; font-size: 12px; text-decoration: none; text-shadow: 0px 1px 0px #000; line-height: 20px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .recent_posts_widget ul li a:hover { color: #fff; text-shadow: 0px 0px 6px rgba(255,255,255,0.25); } #flickr_feed li { position: relative; width: 56px; height: 56px; display: inline-block; background: url(../images/assets/footer_thumb_container.png) no-repeat; padding: 4px 4px 14px 4px; margin: 0 9px 0 0; } #flickr_feed img { max-width: 100% } #footer_form input[type="text"], #footer_form textarea { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 12px; text-shadow: 0px 1px 0px #000; border: 0; margin-bottom: 14px; } #footer_form p { width: 220px; height: 36px; background: url(../images/assets/footer_textfield.png) no-repeat; margin-bottom: 14px; } #footer_form input[type="text"] { width: 200px; overflow: hidden; background: none; margin: 6px 0 0 12px; } #footer_form textarea { width: 220px; height: 121px; padding: 8px 15px 8px 15px; resize: none; background: url(../images/assets/footer_textarea.png) no-repeat; } #footer_form input[type="text"]:focus, #footer_form textarea:focus { color: #fff } #footer_form input[type="submit"] { width: 142px; height: 38px; line-height: 35px; border: 0; display: block; font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 13px; color: #fff; text-shadow: 0px 1px 0px #000; text-transform: uppercase; padding: 0 20px 4px 20px; background: url(../images/assets/footer_submit.png) no-repeat; } #footer_form input[type="submit"]:hover { text-shadow: 0px 0px 8px rgba(255,255,255,0.6); background: url(../images/assets/footer_submit_hover.png) no-repeat; } /* For some strange reason the font on the button appears larger in Safari browsers. This is to fix it... */ @media (-webkit-min-device-pixel-ratio: 0){ #footer_form input[type="submit"] { font-size: 10px } } #bottom { height: 60px; font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 14px; text-align: center; text-shadow: 0px 2px 2px #000; color: #fff; line-height: 60px; } #bottom a { text-decoration: none; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #bottom a:hover { color: #fff } #bottom span { font-size: 20px } /*########################################################################################################## # # ---- 18. Image Containers/Shadows & Hover Effects # ##########################################################################################################*/ .hover img { -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover img:hover { opacity: 0.25 } .hover_flickr { background: url(../images/assets/hover_flickr.png) no-repeat 50% -100px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover_zoom { background: url(../images/assets/hover_zoom.png) no-repeat 50% -100px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover_expand { background: url(../images/assets/hover_expand.png) no-repeat 50% -100px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover_movie { background: url(../images/assets/hover_movie.png) no-repeat 50% -100px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover_audio { background: url(../images/assets/hover_audio.png) no-repeat 50% -100px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover_blog { background: url(../images/assets/hover_blog.png) no-repeat 50% -100px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hover_flickr:hover, .hover_zoom:hover, .hover_expand:hover, .hover_movie:hover, .hover_audio:hover, .hover_blog:hover { background-position: 50% 50% } .image_container { background: #fff; border: 1px solid #e0e0e0; padding: 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .image_container img { display: block; max-width: 100%; } .shadow_small_01 { padding-bottom: 10px; background: url(../images/assets/shadow_small_01.png) no-repeat 50% 100%; } .shadow_small_02 { padding-bottom: 25px; background: url(../images/assets/shadow_small_02.png) no-repeat 50% 100%; } .shadow_medium { padding-bottom: 20px; background: url(../images/assets/shadow_medium.png) no-repeat 50% 100%; } .shadow_large_01 { padding-bottom: 35px; background: url(../images/assets/shadow_large_01.png) no-repeat 50% 100%; } .shadow_large_02 { padding-bottom: 25px; background: url(../images/assets/shadow_large_02.png) no-repeat 50% 100%; } .page_not_found { } .page_not_found h1 { margin-top: 30px; font-size: 120px !important; color: #666 !important; text-shadow: 0px 1px 0px #fff; } .page_not_found h2 { margin: 50px 0 0 0 !important; font-size: 42px !important; color: #666 !important; text-shadow: 0px 1px 0px #fff; } .page_not_found p { } /*########################################################################################################## # # ---- 19. Buttons # ##########################################################################################################*/ a.button { display: block; float: left; height: 30px; font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; text-decoration: none !important; text-shadow: 0px 1px 0px #fff; color: #757575 !important; -moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; } a.button2 { display: block; float: center; height: 30px; font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; text-decoration: none !important; text-shadow: 0px 1px 0px #fff; color: #757575 !important; -moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; } a.button span { display: block; padding: 0 6px 5px 18px; line-height: 25px; } a.button.white { background: url(../images/assets/button_white.png) no-repeat scroll 100% 0; padding-right: 13px; } a.button.white 2 { background: url(../images/assets/button_white.png) no-repeat scroll 100% 0; display: center; padding-center: 100px; } a.button.white span { background: url(../images/assets/button_white_span.png) no-repeat 0 0 } a.button.white:hover { color: #404040; background-position: 100% -30px; } a.button.white:hover span { background-position: 0 -30px } a.button.orange { background: url(../images/assets/button_orange.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.orange span { background: url(../images/assets/button_orange_span.png) no-repeat 0 0 } a.button.red { background: url(../images/assets/button_red.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.red span { background: url(../images/assets/button_red_span.png) no-repeat 0 0 } a.button.purple { background: url(../images/assets/button_purple.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.purple span { background: url(../images/assets/button_purple_span.png) no-repeat 0 0 } a.button.violet { background: url(../images/assets/button_violet.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.violet span { background: url(../images/assets/button_violet_span.png) no-repeat 0 0 } a.button.darkblue { background: url(../images/assets/button_darkblue.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.darkblue span { background: url(../images/assets/button_darkblue_span.png) no-repeat 0 0 } a.button.lightblue { background: url(../images/assets/button_lightblue.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.lightblue span { background: url(../images/assets/button_lightblue_span.png) no-repeat 0 0 } a.button.cyan { background: url(../images/assets/button_cyan.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.cyan span { background: url(../images/assets/button_cyan_span.png) no-repeat 0 0 } a.button.lightgreen { background: url(../images/assets/button_lightgreen.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.lightgreen span { background: url(../images/assets/button_lightgreen_span.png) no-repeat 0 0 } a.button.darkgreen { background: url(../images/assets/button_darkgreen.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.darkgreen span { background: url(../images/assets/button_darkgreen_span.png) no-repeat 0 0 } a.button.gold { background: url(../images/assets/button_gold.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.gold span { background: url(../images/assets/button_gold_span.png) no-repeat 0 0 } a.button.brown { background: url(../images/assets/button_brown.png) no-repeat scroll 100% 0; padding-right: 13px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button.brown span { background: url(../images/assets/button_brown_span.png) no-repeat 0 0 } a.button.orange:hover, a.button.red:hover, a.button.purple:hover, a.button.violet:hover, a.button.darkblue:hover, a.button.lightblue:hover, a.button.cyan:hover, a.button.lightgreen:hover, a.button.darkgreen:hover, a.button.gold:hover, a.button.brown:hover { background-position: 100% -30px } a.button.orange:hover span, a.button.red:hover span, a.button.purple:hover span, a.button.violet:hover span, a.button.darkblue:hover span, a.button.lightblue:hover span, a.button.cyan:hover span, a.button.lightgreen:hover span, a.button.darkgreen:hover span, a.button.gold:hover span, a.button.brown:hover span { background-position: 0 -30px } a.button-medium { display: block; float: left; height: 45px; font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; text-decoration: none !important; text-shadow: 0px 1px 0px #fff; color: #757575 !important; -moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; } a.button-medium span { display: block; padding: 0 12px 5px 24px; line-height: 40px; } a.button-medium.white { background: url(../images/assets/button_medium_white.png) no-repeat scroll 100% 0; padding-right: 11px; } a.button-medium.white span { background: url(../images/assets/button_medium_white_span.png) no-repeat 0 0 } a.button-medium.white:hover { color: #404040; background-position: 100% -45px; } a.button-medium.white:hover span { background-position: 0 -45px } a.button-medium.orange { background: url(../images/assets/button_medium_orange.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.orange span { background: url(../images/assets/button_medium_orange_span.png) no-repeat 0 0 } a.button-medium.red { background: url(../images/assets/button_medium_red.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.red span { background: url(../images/assets/button_medium_red_span.png) no-repeat 0 0 } a.button-medium.purple { background: url(../images/assets/button_medium_purple.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.purple span { background: url(../images/assets/button_medium_purple_span.png) no-repeat 0 0 } a.button-medium.violet { background: url(../images/assets/button_medium_violet.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.violet span { background: url(../images/assets/button_medium_violet_span.png) no-repeat 0 0 } a.button-medium.darkblue { background: url(../images/assets/button_medium_darkblue.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.darkblue span { background: url(../images/assets/button_medium_darkblue_span.png) no-repeat 0 0 } a.button-medium.lightblue { background: url(../images/assets/button_medium_lightblue.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.lightblue span { background: url(../images/assets/button_medium_lightblue_span.png) no-repeat 0 0 } a.button-medium.cyan { background: url(../images/assets/button_medium_cyan.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.cyan span { background: url(../images/assets/button_medium_cyan_span.png) no-repeat 0 0 } a.button-medium.lightgreen { background: url(../images/assets/button_medium_lightgreen.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.lightgreen span { background: url(../images/assets/button_medium_lightgreen_span.png) no-repeat 0 0 } a.button-medium.darkgreen { background: url(../images/assets/button_medium_darkgreen.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.darkgreen span { background: url(../images/assets/button_medium_darkgreen_span.png) no-repeat 0 0 } a.button-medium.gold { background: url(../images/assets/button_medium_gold.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.gold span { background: url(../images/assets/button_medium_gold_span.png) no-repeat 0 0 } a.button-medium.brown { background: url(../images/assets/button_medium_brown.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-medium.brown span { background: url(../images/assets/button_medium_brown_span.png) no-repeat 0 0 } a.button-medium.orange:hover, a.button-medium.red:hover, a.button-medium.purple:hover, a.button-medium.violet:hover, a.button-medium.darkblue:hover, a.button-medium.lightblue:hover, a.button-medium.cyan:hover, a.button-medium.lightgreen:hover, a.button-medium.darkgreen:hover, a.button-medium.gold:hover, a.button-medium.brown:hover { background-position: 100% -45px } a.button-medium.orange:hover span, a.button-medium.red:hover span, a.button-medium.purple:hover span, a.button-medium.violet:hover span, a.button-medium.darkblue:hover span, a.button-medium.lightblue:hover span, a.button-medium.cyan:hover span, a.button-medium.lightgreen:hover span, a.button-medium.darkgreen:hover span, a.button-medium.gold:hover span, a.button-medium.brown:hover span { background-position: 0 -45px } a.button-large { display: block; float: left; height: 65px; font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 20px; text-transform: uppercase; text-decoration: none !important; text-shadow: 0px 1px 0px #fff; color: #757575 !important; -moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; } a.button-large span { display: block; padding: 0 33px 5px 40px; line-height: 60px; } a.button-large.white { background: url(../images/assets/button_large_white.png) no-repeat scroll 100% 0; padding-right: 11px; } a.button-large.white span { background: url(../images/assets/button_large_white_span.png) no-repeat 0 0 } a.button-large.white:hover { color: #404040; background-position: 100% -65px; } a.button-large.white:hover span { background-position: 0 -65px } a.button-large.orange { background: url(../images/assets/button_large_orange.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.orange span { background: url(../images/assets/button_large_orange_span.png) no-repeat 0 0 } a.button-large.red { background: url(../images/assets/button_large_red.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.red span { background: url(../images/assets/button_large_red_span.png) no-repeat 0 0 } a.button-large.purple { background: url(../images/assets/button_large_purple.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.purple span { background: url(../images/assets/button_large_purple_span.png) no-repeat 0 0 } a.button-large.violet { background: url(../images/assets/button_large_violet.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.violet span { background: url(../images/assets/button_large_violet_span.png) no-repeat 0 0 } a.button-large.darkblue { background: url(../images/assets/button_large_darkblue.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.darkblue span { background: url(../images/assets/button_large_darkblue_span.png) no-repeat 0 0 } a.button-large.lightblue { background: url(../images/assets/button_large_lightblue.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.lightblue span { background: url(../images/assets/button_large_lightblue_span.png) no-repeat 0 0 } a.button-large.cyan { background: url(../images/assets/button_large_cyan.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.cyan span { background: url(../images/assets/button_large_cyan_span.png) no-repeat 0 0 } a.button-large.lightgreen { background: url(../images/assets/button_large_lightgreen.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.lightgreen span { background: url(../images/assets/button_large_lightgreen_span.png) no-repeat 0 0 } a.button-large.darkgreen { background: url(../images/assets/button_large_darkgreen.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.darkgreen span { background: url(../images/assets/button_large_darkgreen_span.png) no-repeat 0 0 } a.button-large.gold { background: url(../images/assets/button_large_gold.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.gold span { background: url(../images/assets/button_large_gold_span.png) no-repeat 0 0 } a.button-large.brown { background: url(../images/assets/button_large_brown.png) no-repeat scroll 100% 0; padding-right: 11px; color: #fff !important; text-shadow: 0px 1px 0px #000; } a.button-large.brown span { background: url(../images/assets/button_large_brown_span.png) no-repeat 0 0 } a.button-large.orange:hover, a.button-large.red:hover, a.button-large.purple:hover, a.button-large.violet:hover, a.button-large.darkblue:hover, a.button-large.lightblue:hover, a.button-large.cyan:hover, a.button-large.lightgreen:hover, a.button-large.darkgreen:hover, a.button-large.gold:hover, a.button-large.brown:hover { background-position: 100% -65px } a.button-large.orange:hover span, a.button-large.red:hover span, a.button-large.purple:hover span, a.button-large.violet:hover span, a.button-large.darkblue:hover span, a.button-large.lightblue:hover span, a.button-large.cyan:hover span, a.button-large.lightgreen:hover span, a.button-large.darkgreen:hover span, a.button-large.gold:hover span, a.button-large.brown:hover span { background-position: 0 -65px } a.tag { display: block; float: center; height: 30px; font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; text-decoration: none; text-shadow: 0px 1px 0px #fff; color: #757575; background: url(../images/assets/tag.png) no-repeat scroll 100% 0; padding-right: 30px; margin: 0 10px 10px 0; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a.more { display: block; float: center; height: 30px; font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 10px; text-transform: uppercase; text-decoration: none; text-shadow: 0px 1px 0px #fff; color: #757575; padding-right: 0px; margin: 0 10px 10px 0; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a.tag span { display: block; padding: 0 6px 5px 18px; line-height: 25px; background: url(../images/assets/tag_span.png) no-repeat 0 0; } /*########################################################################################################## # # ---- 20. Pricing Tables # ##########################################################################################################*/ table { position: relative; width: 960px; margin: 0 auto; clear: left; } table tr th, table tr td { width: 320px; text-align: center; } table tbody tr td { padding: 15px 0 15px 0 } th.table_header { padding: 80px 0 8px 0 } th.table_subheader { padding-bottom: 30px } th.table_price { padding-bottom: 60px } td.table_signup { padding: 40px 80px 40px 80px } table.pricing_table_light { background: url(../images/assets/table_light.png) no-repeat 0 0 } .pricing_table_light tbody tr { background: url(../images/assets/table_divider_light.png) no-repeat 10px 0 } .pricing_table_light tbody tr td { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 14px; color: #404040; text-shadow: 0px 1px 0px #fff; } .pricing_table_light th.table_header { font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 24px; color: #000; text-shadow: 0px 1px 0px #fff; } .pricing_table_light th.table_subheader { font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 14px; text-shadow: 0px 1px 0px #fff; } .pricing_table_light th.table_price { font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 24px; color: #000; text-shadow: 0px 1px 0px #fff; } .pricing_table_light th.table_price span { font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 16px; color: #666; text-shadow: 0px 1px 0px #fff; } .pricing_table_light_bottom { width: 960px; height: 75px; background: url(../images/assets/table_light_bottom.png) no-repeat; margin-bottom: 30px; } table.pricing_table_dark { background: url(../images/assets/table_dark.png) no-repeat 0 0 } .pricing_table_dark tbody tr { background: url(../images/assets/table_divider_dark.png) no-repeat 10px 0 } .pricing_table_dark tbody tr td { font-family: "CantarellRegular", Helvetica, Arial, sans-serif; font-size: 14px; color: #999; text-shadow: 0px 1px 1px #000; } .pricing_table_dark th.table_header { font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 24px; color: #fff; text-shadow: 0px 1px 1px #000; } .pricing_table_dark th.table_subheader { font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 14px; text-shadow: 0px 1px 1px #000; } .pricing_table_dark th.table_price { font-family: "TitilliumText22LBold", Helvetica, Arial, sans-serif; font-size: 24px; color: #fff; text-shadow: 0px 1px 1px #000; } .pricing_table_dark th.table_price span { font-family: "TitilliumText22LLight", Helvetica, Arial, sans-serif; font-size: 16px; color: #f4f4f4; text-shadow: 0px 1px 1px #000; } .pricing_table_dark_bottom { width: 960px; height: 75px; background: url(../images/assets/table_dark_bottom.png) no-repeat; } /*########################################################################################################## # # ---- 21. Portfolio # ##########################################################################################################*/ #portfolio .filter_categories h1 { float: left; font-family: "TitilliumText22LRegular", Helvetica, Arial, sans-serif; font-size: 16px; color: #000; text-transform: uppercase; } #portfolio .category_list { float: right } #portfolio .category_list li { display: inline-block; margin-left: 5px; } .portfolio li { overflow: hidden; float: left; margin-bottom: 10px; } figure { margin-bottom: 20px } figcaption { margin-top: 20px } .pagination li { padding-left: 0 !important } .btt { } /*################################################################################################## # # ---- 22. Extra Classes # ##################################################################################################*/ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both } .row, .clearfix { zoom: 1 } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .align-left { float: left !important; text-align: left !important; } .align-right { float: right !important; text-align: right !important; } .float-left { float: left !important; padding-right: 20px; } .float-right { float: right !important; padding-left: 20px; } .centered { text-align: center !important; float: none !important; } .block { display: block !important } .padding-right0 { padding-right: 0 !important } .padding-right10 { padding-right: 10px !important } .padding-right20 { padding-right: 20px !important } .padding-right30 { padding-right: 30px !important } .padding-right40 { padding-right: 40px !important } .padding-right50 { padding-right: 50px !important } .padding-left0 { padding-left: 0 !important } .padding-left10 { padding-left: 10px !important } .padding-left20 { padding-left: 20px !important } .padding-left30 { padding-left: 30px !important } .padding-left40 { padding-left: 40px !important } .padding-left50 { padding-left: 50px !important } .padding-top0 { padding-top: 0 !important } .padding-top10 { padding-top: 10px !important } .padding-top20 { padding-top: 20px !important } .padding-top30 { padding-top: 30px !important } .padding-top40 { padding-top: 40px !important } .padding-top50 { padding-top: 50px !important } .padding-top150 { padding-top: 150px !important } .padding-bottom0 { padding-bottom: 0 !important } .padding-bottom10 { padding-bottom: 10px !important } .padding-bottom20 { padding-bottom: 20px !important } .padding-bottom30 { padding-bottom: 30px !important } .padding-bottom40 { padding-bottom: 40px !important } .padding-bottom50 { padding-bottom: 50px !important } .margin-right0 { margin-right: 0 !important } .margin-right10 { margin-right: 10px !important } .margin-right20 { margin-right: 20px !important } .margin-right30 { margin-right: 30px !important } .margin-right40 { margin-right: 40px !important } .margin-right50 { margin-right: 50px !important } .margin-left0 { margin-left: 0 !important } .margin-left10 { margin-left: 10px !important } .margin-left20 { margin-left: 20px !important } .margin-left30 { margin-left: 30px !important } .margin-left40 { margin-left: 40px !important } .margin-left50 { margin-left: 50px !important } .margin-top0 { margin-top: 0 !important } .margin-top10 { margin-top: 10px !important } .margin-top20 { margin-top: 20px !important } .margin-top30 { margin-top: 30px !important } .margin-top40 { margin-top: 40px !important } .margin-top50 { margin-top: 50px !important } .margin-top60 { margin-top: 60px !important } .margin-top70 { margin-top: 70px !important } .margin-top80 { margin-top: 80px !important } .margin-top150 { margin-top: 150px !important } .margin-bottom0 { margin-bottom: 0 !important } .margin-bottom10 { margin-bottom: 10px !important } .margin-bottom20 { margin-bottom: 20px !important } .margin-bottom30 { margin-bottom: 30px !important } .margin-bottom40 { margin-bottom: 40px !important } .margin-bottom50 { margin-bottom: 50px !important } .margin-bottom60 { margin-bottom: 60px !important } .margin-bottom70 { margin-bottom: 70px !important } .margin-bottom80 { margin-bottom: 80px !important } .margin-bottom150 { margin-bottom: 150px !important } /*################################################################################################## # # ---- 23. @FontFace # ##################################################################################################*/ @font-face { font-family: 'TitilliumText22LThin'; src: url('../fonts/TitilliumText22L001-webfont.eot'); src: url('../fonts/TitilliumText22L001-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/TitilliumText22L001-webfont.woff') format('woff'), url('../fonts/TitilliumText22L001-webfont.ttf') format('truetype'), url('../fonts/TitilliumText22L001-webfont.svg#TitilliumText22LThin') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TitilliumText22LLight'; src: url('../fonts/TitilliumText22L002-webfont.eot'); src: url('../fonts/TitilliumText22L002-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/TitilliumText22L002-webfont.woff') format('woff'), url('../fonts/TitilliumText22L002-webfont.ttf') format('truetype'), url('../fonts/TitilliumText22L002-webfont.svg#TitilliumText22LLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TitilliumText22LRegular'; src: url('../fonts/TitilliumText22L003-webfont.eot'); src: url('../fonts/TitilliumText22L003-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/TitilliumText22L003-webfont.woff') format('woff'), url('../fonts/TitilliumText22L003-webfont.ttf') format('truetype'), url('../fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TitilliumText22LMedium'; src: url('../fonts/TitilliumText22L004-webfont.eot'); src: url('../fonts/TitilliumText22L004-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/TitilliumText22L004-webfont.woff') format('woff'), url('../fonts/TitilliumText22L004-webfont.ttf') format('truetype'), url('../fonts/TitilliumText22L004-webfont.svg#TitilliumText22LMedium') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TitilliumText22LBold'; src: url('../fonts/TitilliumText22L005-webfont.eot'); src: url('../fonts/TitilliumText22L005-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/TitilliumText22L005-webfont.woff') format('woff'), url('../fonts/TitilliumText22L005-webfont.ttf') format('truetype'), url('../fonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TitilliumText22LXBold'; src: url('../fonts/TitilliumText22L006-webfont.eot'); src: url('../fonts/TitilliumText22L006-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/TitilliumText22L006-webfont.woff') format('woff'), url('../fonts/TitilliumText22L006-webfont.ttf') format('truetype'), url('../fonts/TitilliumText22L006-webfont.svg#TitilliumText22LXBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CantarellRegular'; src: url('../fonts/Cantarell-Regular-webfont.eot'); src: url('../fonts/Cantarell-Regular-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/Cantarell-Regular-webfont.woff') format('woff'), url('../fonts/Cantarell-Regular-webfont.ttf') format('truetype'), url('../fonts/Cantarell-Regular-webfont.svg#CantarellRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CantarellOblique'; src: url('../fonts/Cantarell-Oblique-webfont.eot'); src: url('../fonts/Cantarell-Oblique-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/Cantarell-Oblique-webfont.woff') format('woff'), url('../fonts/Cantarell-Oblique-webfont.ttf') format('truetype'), url('../fonts/Cantarell-Oblique-webfont.svg#CantarellOblique') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CantarellBold'; src: url('../fonts/Cantarell-Bold-webfont.eot'); src: url('../fonts/Cantarell-Bold-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/Cantarell-Bold-webfont.woff') format('woff'), url('../fonts/Cantarell-Bold-webfont.ttf') format('truetype'), url('../fonts/Cantarell-Bold-webfont.svg#CantarellBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CantarellBoldOblique'; src: url('../fonts/Cantarell-BoldOblique-webfont.eot'); src: url('../fonts/Cantarell-BoldOblique-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/Cantarell-BoldOblique-webfont.woff') format('woff'), url('../fonts/Cantarell-BoldOblique-webfont.ttf') format('truetype'), url('../fonts/Cantarell-BoldOblique-webfont.svg#CantarellBoldOblique') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CreteRoundRegular'; src: url('../fonts/CreteRound-Regular-webfont.eot'); src: url('../fonts/CreteRound-Regular-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/CreteRound-Regular-webfont.woff') format('woff'), url('../fonts/CreteRound-Regular-webfont.ttf') format('truetype'), url('../fonts/CreteRound-Regular-webfont.svg#CreteRoundRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CreteRoundItalic'; src: url('../fonts/CreteRound-Italic-webfont.eot'); src: url('../fonts/CreteRound-Italic-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/CreteRound-Italic-webfont.woff') format('woff'), url('../fonts/CreteRound-Italic-webfont.ttf') format('truetype'), url('../fonts/CreteRound-Italic-webfont.svg#CreteRoundItalic') format('svg'); font-weight: normal; font-style: normal; }