Bootstrap Snippet menu using HTML CSS

/****************************************************************** Theme Name: Minuscula Theme URI: http://quadroideas.com Description: A minimalistic and multi-purpose WordPress theme by Quadro Ideas. Author: Quadro Ideas Author URI: http://quadroideas.com License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Version: 1.0.2 ******************************************************************/ /****************************************************************** RESET STYLES ******************************************************************/ /* general reset */ html, body, div, span, object, embed, ruby, output, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } html { overflow-y: scroll; } /* html 5 reset */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } /* ul & li resets */ ol, ul { list-style: none; } /* blockquote reset */ blockquote, q { quotes:none; } /* link style resets */ a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } a:hover, a:active { outline: none; } /* table resets */ td, td img { vertical-align: top; } /* type & header styles */ p { hyphenate:auto; hyphenate-before:2; hyphenate-after:3; hyphenate-lines:3; orphans:4; margin-bottom: 20px; } select, input, textarea, button { font:99% sans-serif; } body, select, input, textarea { color: #444; } small, .small { font-size:0.75em; letter-spacing:.05em; font-style:italic; line-height:1.75em; } strong, th, .strong { font-weight: bold; } em, .em { font-style: italic; } ins, .ins { background-color:#ff9; color:#000; text-decoration:none; } mark, .mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del, .del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } dl { margin-bottom: 20px; } dt { font-weight: bold; } /* code & pre box resets */ pre { padding: 15px; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } /* form & input resets */ pre, code, kbd, samp { font-family: monospace, sans-serif; margin: 1.5em; } input, select { vertical-align:middle; } textarea { overflow: auto; } .ie6 legend, .ie7 legend { margin-left: -7px; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } label, input[type=button], input[type=submit], button { cursor: pointer; } button, input, select, textarea { margin: 0; } /* vaidation */ input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } button { width: auto; overflow: visible; } /* image resets */ .ie7 img, .iem7 img { -ms-interpolation-mode: bicubic; } /* hidden elements */ .hidden { display: none; visibility: hidden; } .visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } /* clearfixes */ .clearfix:after, .menu ul:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix { zoom: 1; } .clearfix:after { clear: both; } /****************************************************************** COMMON & REUSABLE STYLES ******************************************************************/ /* text alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* highlighting search term on search page */ mark, .search-term { background: #EBE16F; } /* alerts & notices */ .help, .info, .error, .success { margin: 20px 0; padding: 10px; border: 1px solid #cecece; } .help { border-color: #E0C618; background: #EBE16F; } .info { border-color: #92cae4; background: #d5edf8; } .error { border-color: #fbc2c4; background: #fbe3e4; } .success { border-color: #c6d880; background: #e6efc2; } .rounded5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /****************************************************************** GENERAL LAYOUT STYLES ******************************************************************/ body { background-color: #fff; line-height: 20px; -webkit-text-size-adjust : 100%; /* font size on apple devices */ -ms-text-size-adjust : 100%; /* font size on windows devices */ } #container, .wrap { width: 100%; margin: 0 auto; padding: 0; position: relative; overflow: hidden; } #main { background: #fff; /* adds bg to post area */ margin: 0 auto; padding: 0 0 20px; width: 1000px; } .home #main { padding: 40px 0 0; } #main.large-slider { margin-top: 522px; } #main.regular-slider { margin-top: 20px; } #main.hidden-main { padding: 0; background: none; } /****************************************************************** LINK STYLES ******************************************************************/ a, a:visited, a:hover { text-decoration: none; } a { -webkit-transition: color 0.6s ease-in; -moz-transition: color 0.6s ease-in; -o-transition: color 0.6s ease-in; transition: color 0.6s ease-in; } a:link { -webkit-tap-highlight-color: #f01d4f; } a:link { -webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights links on Iphones & iPads */ } /****************************************************************** TEXT SELECTION STYLES ******************************************************************/ /* Safari, Chrome, iPhones, iPads */ ::-webkit-selection, /* Firefox */ ::-moz-selection, /* The Rest of em */ ::selection { color:#fff; text-shadow : none; } /****************************************************************** HEADLINES & TITLES ******************************************************************/ h2, .h2 { font-weight: normal; clear: both; margin-bottom: 20px; } h3, .h3, h4, .h4, h5, .h5 { font-weight: normal; margin-bottom: 20px; } /****************************************************************** HEADER SYTLES ******************************************************************/ header[role=banner] { width: 1000px; margin: 0 auto 30px; min-height: 100px; } #logo.logo-large-slider { position: absolute; left: 0; } #logo { position: relative; width: 100%; margin: 30px auto 0; text-align: center; text-transform: uppercase; z-index: 9; } #logo::first-letter { text-transform: lowercase; } #logo a { color: #fff; } .wf-loading #logo, .wf-loading #logo a { display: none; } /* To avoid Google Fonts FOUT */ .wf-active #logo, .wf-inactive #logo a { visibility: visible; } #logo.topleft { float: left; margin: 0 0 20px; max-width: 300px; left: auto; text-align: left; } #logo.topleft a { float: left; margin: 20px 0 0; } #logo.topleft a::first-letter { text-transform: lowercase; } #tagline { position: relative; margin: 0 auto; z-index: 10; text-transform: none; text-align: center; } .wf-loading #tagline { visibility: hidden; } .wf-active #tagline, .wf-inactive #tagline { visibility: visible; } #tagline.topleft { float: left; text-align: left; clear: left; } nav ul.topleft { text-align: right; float: right; } nav ul.topleft li { text-align: center; } #large-slider { height: 600px; width: 100%; position: absolute; top: 0; z-index: 0; overflow: hidden; margin: 0 auto; } .quadro-slide { width: 100% !important; height: 100%; } #large-slider .quadro-slide img { min-width: 100%; min-height: 100%; width: auto; height: auto; } #large-slider .quadro-slide img.short { width: auto; height: 100%; } #large-slider .quadro-slide img.tall { width: 100%; height: auto; } .large-slider-slider-caption { position: absolute; bottom: 60px; width: 540px; } .large-slider-slider-caption.left { text-align: left; } .large-slider-slider-caption.right { text-align: right; float: right; clear: both; } .large-slider-slider-caption.left * { float: left; clear: both; } .large-slider-slider-caption.right * { float: right; clear: both; } .slider-caption { z-index: 9; color: #fff; } .large-slider-slider-caption h2 { display: inline-block; width: auto; padding: 10px; margin-bottom: 3px; color: #fff; } #regular-slider .slider-caption h2 { position: relative; top: 20px; left: 20px; color: #fff; padding: 0; margin-right: 20px; } .slider-caption h2 a{ font-size: inherit; color: inherit; } #regular-slider .slider-caption p { position: relative; left: 0; padding-left: 80px; text-align: right; color: #fff; } .large-slider-slider-caption p { display: inline-block; padding: 10px; margin-bottom: 3px; color: #fff; } .large-slider-slider-caption p:only-child { margin-bottom: 0; } .regular-slider-slider-caption { display: none; position: absolute; top: 0; right: 0; width: 320px; height: 340px; padding: 20px 20px 40px; } .regular-slider-slider-caption .transpback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter: alpha(opacity=90); /* for IE */ opacity: 0.9; /* CSS3 standard */ } .regular-slider-slider-caption.left { left: 0; } .regular-slider-slider-caption h2 + p { margin-top: 60px; text-align: right; } .slide-read-more { color: #fff; text-decoration: none; font-style: italic; z-index: 9; } .large-slider-slider-caption .slide-read-more { font: 16px arial,sans-serif; display: inline-block; padding: 10px; color: #fff; } .regular-slider-slider-caption .slide-read-more { position: absolute; top: 355px; right: 20px; width: 200px; text-align: right; } .regular-slider-slider-caption.left a.slide-read-more { right: 20px; } #regular-slider { height: 400px; width: 1000px; overflow: hidden; margin: 0 auto 25px; } .quadro-slide { display: none; } .quadro-slide:first-child:last-child { display: block; position: relative; } .regular-slider .quadro-slide { width: 1000px; overflow: hidden; } #regular-slider img { position: absolute; } .video-slide-back { width: 100%; height: 100%; position: absolute; z-index: -1; } .quadro-slide iframe { position: absolute; top: 40px; max-width: 580px; } .video-slide-back.right + iframe { left: 35px; } .video-slide-back.left + iframe { right: 35px; } .slide-arrow { position: absolute; top: 40px; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; filter: alpha(opacity=90); /* for IE */ opacity: 0.9; /* CSS3 standard */ } .slide-arrow.large { top: -39px; left: 100px; border-left: 14px solid transparent; border-right: 14px solid transparent; filter: alpha(opacity=60); /* for IE */ opacity: 0.6; /* CSS3 standard */ } #slider-container { position: relative; z-index: 0; } .slider-nav { position: absolute; z-index: 999; bottom: 0; width: 100%; height: 20px; text-align: center; } .slider-nav.large { top: 580px; } .slider-nav a { width: 20px; height: 5px; background: #000; background: rgba(0, 0, 0, 0.7); display: inline-block; margin: 0 5px 0 0; outline: none; } .slider-nav a:last-child { margin: 0; } .slider-nav .cycle-pager-active, .slider-nav a:hover { background: #fff; background: rgba(255, 255, 255, 0.7); } .slider-nav a:before, .slider-nav a:after { content: " "; display: block; width: 20px; height: 5px; } .slider-nav a:before { position: relative; top: -5px; } .static-slider + .slider-nav { display: none; } /****************************************************************** NAVIGATION STYLES (Main Navigation) ******************************************************************/ .wf-loading p.the-link { display: none; } /* To avoid Google Fonts FOUT */ .wf-active p.the-link, .wf-inactive p.the-link { visibility: visible; } .menu { position: relative; /*z-index: 10;*/ display: block; } nav ul { margin: 0 auto; text-align: center; height: 86px; } nav ul li { list-style-type: none; display: inline-block; vertical-align: top; min-width: 85px; } .color-tag { margin: 0; min-width: 85px; height: 53px; filter: alpha(opacity=80); /* for IE */ opacity: 0.8; /* CSS3 standard */ -moz-transition: height 0.4s ease-in-out; -webkit-transition: height 0.4s ease-in-out; -o-transition: height 0.4s ease-in-out; transition: height 0.4s ease-in-out; } .menu li:hover a p.color-tag { height: 80px; } nav ul li a { display: block; text-decoration: none; } .the-link { padding: 8px 15px 5px; margin-bottom: 0; color: #fff; text-transform: uppercase; } .the-link::first-letter { text-transform: lowercase; } .the-link:hover { color: #fff; } nav ul li ul.sub-menu { position: absolute; left: -9999em; z-index: 10; width: 160px; height: auto; filter: alpha(opacity=0); /* for IE */ opacity: 0; /* CSS3 standard */ -moz-transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } nav ul li:hover ul.sub-menu { filter: alpha(opacity=100); /* for IE */ opacity: 1; /* CSS3 standard */ } .sub-menu-transp { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; z-index: -1; filter: alpha(opacity=70); /* for IE */ opacity: 0.7; /* CSS3 standard */ } .sub-menu .color-tag { display: none; } nav ul li ul li { display: block; text-align: left; padding: 10px 15px; text-align: left !important; } nav ul li ul li * p.the-link:hover { color: #fff; } nav * .sub-menu li p.color-tag { height: 0; background: none;} nav ul.menu li:hover ul.sub-menu li p.color-tag { display: none; } nav ul li ul li a .the-link { background: none; padding: 0; text-transform: none; } nav ul li ul li a .the-link::first-letter { background: none; padding: 0; text-transform: none; } nav ul li:hover ul { left: auto; } nav ul li ul li ul.sub-menu { left: -9999em; position: absolute; margin-left: 145px; top: auto; margin-top: -30px; } nav ul li ul li:hover ul.sub-menu { left: auto; } /****************************************************************** HOMEPAGE STYLES ******************************************************************/ #slogan { margin: 0 auto 40px; text-align: center; width: 940px; } #home-tophtml-section, #home-bottomhtml-section, #portfolio-section, #home-services-section, #home-recent-news, #home-widgets-section { margin: 0 auto 40px; width: 940px; padding: 0; clear: both; } #portfolio-section { position: relative; } .page-template-portfolio-php #portfolio-section { margin: 0 auto 20px; } #home-services-section h3 { margin: 5px 0 0; text-transform: uppercase; } #home-services-section h3:first-letter { text-transform: lowercase; } .home-services-item { width: 280px; position: relative; float: left; } .home-services-item:first-child, .home-services-item:nth-child(2) { margin-right: 50px; } .home-services-item p { letter-spacing: -0.2px; margin-bottom: 20px; } .service-pic { float: left; margin: 5px 10px 0 0; padding-bottom: 5px; /* Fixing Subtitle Position for Title Line Height Setting */ } p.service-tag { line-height: 24px; margin: 0 0 5px; } .services-read-more { float: right; font: 12px arial,sans-serif; margin: 20px 0 0; text-decoration: none; } #recent-news-headings { float: left; width: 220px; margin-right: 20px; } #recent-news-headings h3 { text-transform: uppercase; margin-bottom: 0; } #recent-news-headings h3:first-letter { text-transform: lowercase; } .home-recent-news-item h4 { margin-bottom: 0; } .home-recent-news-item { width: 190px; float: left; color: #555; margin: 0 20px 0 0 !important; padding: 0 15px; } .home-recent-news-item:last-child { margin: 0 !important; } .home-recent-news-item h4 a { color: #555; text-transform: none; margin-bottom: 20px; } .news-item-date { font-size: 11px; margin-bottom: 20px; } .home-recent-news-item p { margin: 0 0 20px; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .news-read-more { font: 12px arial,sans-serif; font-style: italic; text-decoration: none; float: right; } .home-recent-news-item.format-aside, .home-recent-news-item.format-link, .home-recent-news-item.format-status, .home-recent-news-item.format-quote { margin-top: 20px !important; } .home-recent-news-item.format-quote .arrow { display: none !important; } .home-recent-news-item.format-quote blockquote:before { margin-right: 5px !important; } .recents-format-image-pic { width: 100%; margin: 0 0 20px; } .home-recent-news-item.format-video img { width: 190px; } .home-recent-news-item div.jp-video-play { top: 40px !important; left: 75px; width: 30px; height: 30px; padding: 10px 1px 1px 18px; } .home-recent-news-item.format-video .video-thumb-container { height: 120px; margin: 0 0 20px; position: relative; overflow: hidden; } .home-recent-news-item.format-status p, .home-recent-news-item.format-aside p { min-height: 40px; background: #eee; padding: 10px 10px; } .home-recent-news-item.format-status .status-arrow, .home-recent-news-item.format-aside .status-arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #eee; margin-left: 10px; margin-top: -25px; } .home-recent-news-item .gallery-container .gallery-attachment { width: 190px; } .home-recent-news-item .gallery-nav { display: none; } .home-recent-news-item a.jp-video-play-icon { border-bottom: 10px solid transparent; border-left: 15px solid #fff; border-top: 10px solid transparent; } #portfolio-headings { margin: 0 0 20px; max-width: 360px; float: left; clear: right; } #portfolio-headings h3 { text-transform: uppercase; margin-bottom: 0; } #portfolio-headings h3:first-letter { text-transform: lowercase; } .section-subtitle { margin-bottom: 0; } #home-tophtml-section img, #home-bottomhtml-section img { max-width: 100%; height: auto; } /****************************************************************** POSTS & PAGE & CONTENT STYLES ******************************************************************/ article[id*=post-] { padding: 0 0 20px; width: 600px; overflow: visible; } #ribbon { padding: 0 30px; width: 940px; } .page-title { display: inline-block; color: #fff; font-size: 24px; line-height: 60px; font-weight: normal; text-transform: uppercase; } .page-title:first-letter { text-transform: lowercase; } .page-description { display: inline; color: #fff; font-size: 14px; } #google-map-iframe { width: 1000px; } /* Remove gMap Controls */ #google-map-iframe .gmnoprint, #google-map-widget .gmnoprint { display: none; } .leftsidebar div.page .attachment-pagefeat { margin-left: 0; } article section { padding: 0 30px; } #blogsection { width: 600px; float: left; } .blogpost section { padding: 0; } article.blogpost { margin: 40px 30px 20px; width: 600px; } .single article.blogpost { padding: 0; border: none; } .single-quadro_services .type-quadro_services, article.type-attachment { float: left; } .blogpost h2 a { color: inherit; word-wrap: break-word; } .post_content img { margin: 20px 0; max-width: 100%; } .entry-content .twitter-tweet-rendered { max-width:100%!important; } .attachment-blogpostfeat { margin: 0 0 20px; max-width: 100%; } .readmore-link { float:right; margin: 20px 0 0; } section.regular { width: 600px; overflow: hidden; } section.fullwidth { width: 940px; overflow: hidden; } #prev-next-links div { margin: 30px 0 0; -webkit-transition: color 0.6s ease-in; -moz-transition: color 0.6s ease-in; -o-transition: color 0.6s ease-in; transition: color 0.6s ease-in; } #prev-next-links .alignleft { clear: left; } #prev-next-links .alignright { clear: right; } /* sidebar styles */ .rightsidebar #sidebar{ float: right; width: 315px; margin: 100px 0 0; padding: 0 11px; } .leftsidebar #sidebar { float: left; width: 280px; margin: 100px 0 20px; padding: 0 30px 0; } #sidebar.blog { margin: 40px 0 20px; } .rightsidebar article.page { float: left; } .leftsidebar article.page { float: right; padding-right: 30px; margin-right: 30px; } .rightsidebar article.post { float: left; } .leftsidebar article.post { float: right; } .leftsidebar .attachment-pagefeat, .leftsidebar #google-map-iframe, .leftsidebar .page #ribbon { margin-left: -340px; } .leftsidebar div.page #ribbon, .single .leftsidebar div #ribbon { margin-left: 0; } .leftsidebar #blogsection { float: right; } #topsidebar { float: left; width: 940px; margin: 40px 30px; padding: 0 0 20px; border-bottom: 1px solid #eee; } #sidebar.featimg { margin: 300px 0 20px; } /* archive title */ .archive_title { padding: 0 20px; margin: 20px 0; } /* post meta information */ .meta { margin: 0 0 20px; font-size: 11px; color: #888; padding: 0 0 0 10px; border-left: 1px solid #eee; } .format-aside .meta { margin: 20px 0 0; } .meta span { display: inline-block; } .meta time { color: #000; } .commentslink { cursor: pointer; } /* Post Formats Styles */ .post_content { margin: 40px 0 0; } .format-video iframe { margin-bottom: 20px; } .format-video img { margin: 0; } .format-image-pic { width: 600px; margin: 0 0 20px; } .format-status section { float: left; display: inline; width: 455px; min-height: 40px; background: #eee; padding: 18px 20px; overflow: hidden; } .format-status p:last-child { margin-bottom: 0; } .status-gravatar { background: #eee; padding: 8px; display: inline-block; height: 64px; width: 64px; float: left; } .status-arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 15px solid #eee; display: inline; margin-top: 10px; margin-left: 10px; float: left; } .format-aside section, .format-link .the-link-title { background: #eee; padding: 20px; } .the-link-title { font-size: 18px; color: #333; display: block; } .the-link-title:after { content: " (Link \2192)"; color: #888; } .format-aside .the-post-title, .format-quote .the-post-title, .format-link .the-post-title, .format-quote .posted-by-info, .format-link .posted-by-info { display: none; } .arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #eee; margin: 0 0 -15px 10px; display: none; } .format-quote .arrow.other-arrow, .format-link .arrow.other-arrow { margin: 0 0 0 10px; } .format-aside .arrow, .format-quote .arrow.other-arrow, .format-link .arrow.other-arrow { display: block; } /* gallery styles */ .format-gallery, .gallery { position: relative; margin: 0 0 20px; } .gallery-container .gallery-attachment { width: 600px; } .left-arrow, .right-arrow { position: absolute; z-index: 101; top: 0; font: 18px "Arial"; line-height: 10px; padding: 3px 7px 8px; color: #fff; background: #222; /* Background Color for IE8 */ background: rgba(0, 0, 0, 0.6); cursor: pointer; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .arrow-controls { display: none; } .arrow-controls.show { display: block; } .left-arrow::selection, .right-arrow::selection { background: none; } .left-arrow { right: 28px; } .right-arrow { right: 0; padding-left: 3px;} .gallery-nav { position: absolute; z-index: 101; top: 2px; left: 10px; width: 300px; } .gallery-nav a { width: 20px; height: 5px; background: #000; background: rgba(0, 0, 0, 0.7); display: inline-block; margin: 0 5px 0 0; outline: none; } .gallery-nav a:last-child { margin: 0; } .gallery-nav .cycle-pager-active, .gallery-nav a:hover { background: #fff; background: rgba(255, 255, 255, 0.7); } /* Post Content styles */ .blogpost section.post_content, .format-status section.post_content, .format-aside section.post_content { margin: 0; } .post_content ul, .post_content ol { margin: 20px 0 20px 20px; } .post_content ul { list-style: circle; } .post_content ol { list-style: decimal; } .post_content li { padding: 5px 0 5px; } .post_content table { border: 1px solid #ddd; text-align: center; margin: 20px auto; } .post_content table tr { background: #fff; } .post_content table tr th { background: #f5f5f5; padding: 15px 20px; } .post_content table tr td { padding: 15px 20px; } .post_content blockquote { font-style: italic; background: #eee; padding: 20px; margin: 20px 0; } .the-quote blockquote { margin: 0; display: block; } blockquote p { display: inline; } blockquote:before { content: "\201C"; font-family: Arial, sans-serif; font-size: 40px; line-height: 0; vertical-align: -15px; margin-right: 15px; } blockquote:after { content: "\201D"; font-family: Arial, sans-serif; font-size: 40px; line-height: 0; vertical-align: -24px; margin-left: 5px; } .quote-author, .link-url { font-size: 18px; margin: 5px 0 15px; } blockquote.twt-tweet:before, blockquote.twt-tweet:after { content: ""; } .post_content video, .post_content object { margin: 40px 0; max-width: 100%; display: block; } .sticky { padding: 20px 0 !important; border-top: 4px double #888; border-bottom: 4px double #888; } /* image alignment & styles */ .alignleft, img.alignleft { margin-right: 20px; display: inline; float: left; } .alignright, img.alignright { margin-left: 20px; display: inline; float: right; } .aligncenter, img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; } .alignnone { margin: 20px; } /* image gallery styles */ .gallery-columns-1, .gallery-columns-2, .gallery-columns-3, .gallery-columns-4, .gallery-columns-5, .gallery-columns-6, .gallery-columns-7, .gallery-columns-8 { clear: both; } .gallery dl img { border: 2px solid #eee !important; filter: alpha(opacity=100); /* for IE */ opacity: 1; /* CSS3 standard */ background: #fff; padding: 4px; } .gallery-caption { margin-top: -15px; font-style: italic; font-size: 10px; } .gallery dl a:hover img{ border: 2px solid #ccc !important; filter: alpha(opacity=90); /* for IE */ opacity: 0.90; /* CSS3 standard */ } /* wp caption styles */ .wp-caption { margin-bottom: 20px; text-align: center; padding-top: 5px; max-width: 100%; } .wp-caption img { border: 0 none; padding: 0; margin: 0; max-width: 100%; height: auto; } .wp-caption p.wp-caption-text { font-size: 11px; font-style: italic; margin: 5px 0 -5px; } /* misc styles */ #sidebar + .help, #sidebar + .info, #sidebar + .error, #sidebar + .success { float: left; margin: 20px; max-width: 50%; } embed { max-width: 100%; } .wp-smiley { margin: 0 !important; max-height: 1em; } article[id*=post-] footer { clear: both; margin: 20px 0 0; padding-bottom: 20px; } /* Navigation Styles */ .navigation { display: inline-block; width: 600px; padding: 0 30px; margin: 0 0 40px; font: italic 12px Arial; } .navigation div { margin: 40px 0 0; } .author-box { padding: 20px; margin: 40px 30px 0; width: 100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .author-arrow { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; margin: 0 0 0 60px; } .author-box .avatar { float: left; margin: 0 20px 0 0; } .author-box h2 { clear: none; color: #fff; } .author-bio { margin: 0; width: 420px; float: left; color: #fff; } /* Portfolio Styles */ #portfolio-categories { float: right; margin:0 0 20px 0; font-size: 14px; text-transform: uppercase; list-style: none; } #portfolio-categories li { float: left; } #portfolio-categories li:first-letter { text-transform: lowercase; } #portfolio-categories li a { color: #3d3d3d; text-decoration: none; } #portfolio-categories li p.slash{ display: inline; margin: 0 10px; } #portfolio-categories li:last-child p.slash { display: none; } ul.works_list { list-style:none; overflow: hidden; padding: 0; margin:0; clear: right; } .works_list li { float: left; display: block; padding: 0; margin: 0 5px 5px 0; } .works_list.portfolio-small li:nth-child(5n) { margin: 0 0 5px 0; } .works_list.portfolio-medium li:nth-child(3n) { margin: 0 0 5px 0; } .works_list li article { line-height: 0; } .item-container { position: relative; cursor: pointer; overflow: hidden; } .item-container img { margin: 0; } .attachment-portfolio-medium { width: 310px; height: 310px; } .attachment-portfolio-small { width: 184px; height: 184px; } .works_list li .work-info { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; color: #525252; font: 18px Arial, sans-serif; overflow: hidden; } .works_list li:hover .work-info { z-index: 1; } .full li .work-info { height: auto; bottom: 0; } .works_list li .work-info h4 { font-weight: normal; color: #fff; text-transform: none; margin: -150px 0 20px; padding: 0 20px; text-align: center; position: relative; } .full li .work-info h4 { margin: 20px 0; text-align: left; display: none; } .works_list li .work-info p { color: #fff; margin-top: 600px; padding: 0 20px; text-align: center; line-height: 20px; } .full li .work-info p { text-align: left; width: 360px; margin: 0 0 20px 0 ; display: none; } .works_list li .work-info .info-controls-arrow { display: none; position: absolute; bottom: 1px; right: 8px; color: #fff; } .works_list li .work-info .transpback { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1000; filter: alpha(opacity=92); /* for IE */ opacity: 0.92; /* CSS3 standard */ } .full li .item-container article img{ width: 940px; } .full li .item-container { height: 410px; overflow: hidden; } #portfolio-section #projects-grid { clear: both; } #portfolio-section.home #portfolio-categories { padding-top: 20px; } .portfolio-showcase { width: 940px; padding: 40px 0; margin: 0 30px; border-bottom: 1px solid #eee; overflow: hidden } #showcase-holder .portfolio-showcase { margin: 0 0 40px; padding: 0 0 40px; } #portfolio-section.home #showcase-holder .portfolio-showcase { margin: 0; } #showcase-holder { width: 100%; display: none; clear: both; } .imgsection { width: 600px; float: left; } .imgsection img { margin: 0; } .portfolio-data { width: 280px; float: right; } .portfolio-data img { width: 100%; height: auto; margin: 10px 0 !important; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .portfolio-data h2 { clear: both; margin: 40px 0 0; color: #555; font-weight: normal; } .project-meta { border-left: 1px solid #eee; padding: 2px 0 2px 10px; margin: 8px 0 20px; } .project-meta p { margin: 0; } .portfolio-cats { font-size: 14px; } .portfolio-cats .separator { padding: 0 2px; } .portfolio-cats .separator:last-child { display: none; } .portfolio-controls { float: right; display: block; cursor: pointer; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .portfolio-controls span { background: #ddd; color: #fff; font-weight: bold; font: 15px "Arial"; line-height: 22px; margin-left: 2px; } .portfolio-controls span:hover { background: #888; } .portfolio-left-arrow, .portfolio-right-arrow { vertical-align: 1px; padding: 1px 3px 3px; } .first.portfolio-left-arrow, .last.portfolio-right-arrow { cursor: default; } .first.portfolio-left-arrow:hover, .last.portfolio-right-arrow:hover { background: #ddd; } .portfolio-close-button { padding: 2px 6px; } .portfolio-image { width: 600px; float: left; } .portfolio-showcase .gallery { float: left; width: 600px; margin: 0; } .gallery-element { display: none; } .gallery-element img { margin: 0; } .portf-gallery-container { z-index: 0; } .portf-gallery-container .gallery-attachment { width: 600px; } .portfolio-video { margin: 40px 0 0; float: left; width: 600px; } .video-first { margin: 0 0 40px; float: left; } .video-first:last-child { margin: 0; } #loader { display: none; position: fixed; z-index: 1000; top: 40%; left: 46%; height: 80px; width: 80px; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; filter:alpha(opacity=80); /* for IE */ opacity:0.8; /* CSS3 standard */ } #loadercircle { height: 74px; width: 74px; background: #000 url(library/images/loader.gif) no-repeat center center; margin: 3px auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /****************************************************************** CONTACT FORM TEMPLATE STYLES ******************************************************************/ #contact { width: 600px; margin-top: 40px; } #contact:first-child { margin-top: 0; } #contact.shortcode { margin: 20px 0; padding: 0; border: none; } #contact-form .error, #contact-form-shortcode .error { color: #555; display: inline-block; margin: 0 0 10px 10px; padding: 2px 5px; } input:required, textarea:required { -moz-box-shadow:none; -webkit-box-shadow:none; -o-box-shadow:none; box-shadow:none; } /****************************************************************** WIDGETS ******************************************************************/ .widget { color: #333; padding: 0; margin-bottom: 20px; } #sidebar .widget { width: 100%; } .widgettitle { color: #fff; background: #BDBDBD; font-weight: normal; text-transform: uppercase; line-height: 40px; padding: 0 10px; margin-bottom: 0; clear: both; } .widget a { color: #333; } .widgettitle::first-letter { text-transform: lowercase; } .widget-arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #BDBDBD; margin: 0 0 5px 10px; display: block; } .widget-r-arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #ddd; display: inline; margin: 10px 5px 0 0; float: left; } /* recent-posts widget */ .widget_recent_entries ul li { margin-bottom: 10px; } /* Quadro Recent Posts widget */ .recents li { margin: 0 0 10px; } .recents li img { float: left; clear: left; } .recents .postdata { float: left; max-width: 60%; padding-left: 10px; } .recents li a { vertical-align: middle; text-indent: 5px hanging; } .recents .meta { font-size: 10px; line-height: 12px; border: none; padding: 0; margin: 0; } /* tag-cloud widget */ .widget_tag_cloud a { text-transform: lowercase; } .widget_tag_cloud a:after { content: " /"; font-size: 15px; color: #888; } .widget_tag_cloud a:last-child:after { content: ""; } /* calendar widget */ #wp-calendar { width: 220px; border-spacing: 5px 0; } #wp-calendar th { padding: 2px 8px; background: #eee; font-weight: normal; } #wp-calendar tr td { text-align: center; } #wp-calendar caption { margin-bottom: 5px; } #wp-calendar #today { background: #eee; } #wp-calendar #prev { text-align: left; } #wp-calendar #next { text-align: right; } /* category widget */ .widget_categories ul li a:after { content: " \2192"; } .widget_categories ul ul.children { text-indent: 20px; } .widget_categories ul ul.children li a:before { content: "- "; } /* recent-comments widget */ #recentcomments li { color: #888; } /* search widget */ .widget_search { zoom: 1; } .widget_search input#s { min-height: 40px; width: 200px; background: #ddd; outline: none; border: none; color: #fff; font-weight: normal; padding: 0 10px; float: left; } .widget_search:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .widget_search:after { clear: both; } .footer-layout3:nth-child(1) .widget_search input#s, .top-sidebar-layoutc:nth-child(1) .widget_search input#s, .widgets-layoutc:nth-child(1) .widget_search input#s, .footer-layout4:nth-child(3) .widget_search input#s, .top-sidebar-layoutd:nth-child(3) .widget_search input#s, .widgets-layoutd:nth-child(3) .widget_search input#s, .footer-layout5 .widget_search input#s, .top-sidebar-layoute .widget_search input#s, .widgets-layoute .widget_search input#s { width: 370px; } .footer-layout1 .widget_search input#s, .top-sidebar-layouta .widget_search input#s, .widgets-layouta .widget_search input#s, .footer-layout3:nth-child(2) .widget_search input#s, .footer-layout3:nth-child(3) .widget_search input#s, .top-sidebar-layoutc:nth-child(2) .widget_search input#s, .top-sidebar-layoutc:nth-child(3) .widget_search input#s, .widgets-layoutc:nth-child(2) .widget_search input#s, .widgets-layoutc:nth-child(3) .widget_search input#s, .footer-layout4:nth-child(1) .widget_search input#s, .footer-layout4:nth-child(2) .widget_search input#s, .top-sidebar-layoutd:nth-child(1) .widget_search input#s, .top-sidebar-layoutd:nth-child(2) .widget_search input#s, .widgets-layoutd:nth-child(1) .widget_search input#s, .widgets-layoutd:nth-child(2) .widget_search input#s { width: 135px; } .footer-layout2 .widget_search input#s, .top-sidebar-layoutb .widget_search input#s, .widgets-layoutb .widget_search input#s { width: 210px; } #searchsubmit { height: 40px; width: 40px; float: right; border: none; outline: none; display: inline; background: url(library/images/searchbtn.png) no-repeat center; -moz-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } #searchsubmit:hover { filter:alpha(opacity=70); /* for IE */ opacity:0.7; /* CSS3 standard */ } /* text widget */ .widget_text { color: #333; } .widget_archive ul li a:after, .widget_meta ul li a:after, .widget_pages ul li a:after, .widget_links ul li a:after { content: " \2192"; } /* Image Widget */ .widget-image-container { border: 5px solid #eee; height: 100%; font-size: 50px; } .widget-image { width: 100%; } /* Gmap Widget */ #google-map-widget { border: 5px solid #eee; } /* Contact Form Widget */ .widget #contact_name, .widget #contact_email, .widget #contact_subject { width: 60% !important; max-width: 178px !important; } .widget #contact-form-shortcode textarea { padding: 4%; } #contact-form-shortcode { width: 100%; overflow: hidden; } .widget #contact-form-shortcode label { padding-left: 10px; } /* Twitter Widget */ .widget_quadro_twitter_widget .widgettitle { margin-bottom: 20px; } .widget_quadro_twitter_widget .widget-arrow { display: none; } .twtr-hd, .twtr-ft { display: none; } .twtr-tweet-wrap { padding: 0 !important; margin: 0; } .widget .twtr-tweet-text p { background: #f5f5f5; padding: 10px !important; } .widget .twtr-tweet-text em { text-align: right; margin-top: 20px !important; } .twtr-timestamp, .twtr-reply, .twtr-rt { color: #888 !important; font-size: 10px !important; } .widget-arrow-right { width: 0; height: 0; float: right; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #f5f5f5; margin: 0 10px 0 0; display: block; } .twtr-tweet { border-bottom: none !important; } /* Video Widget and other Embbeds */ .widget iframe, .widget object, .widget embed { width: 100%; } /****************************************************************** FOOTER STYLES ******************************************************************/ footer[role=contentinfo] { width: 1000px; margin: 20px auto; } #inner-footer { margin: 0 auto; padding: 40px 30px 20px; background: #fff; } #inner-footer > div { float: left; display: inline; margin-right: 20px; min-height: 1px; } #inner-footer > div:last-child { margin-right: 0; } .footer-layout1 { width: 220px; } .footer-layout2 { width: 300px; } .footer-layout3:nth-child(1) { width: 460px; } .footer-layout3:nth-child(2), .footer-layout3:nth-child(3) { width: 220px; } .footer-layout4:nth-child(1), .footer-layout4:nth-child(2) { width: 220px; } .footer-layout4:nth-child(3) { width: 460px; } .footer-layout5 { width: 460px; } #bottom-footer { margin-top: 20px; padding: 0 0 70px; } #bottom-footer p { font-size: 11px; } #copyright { float: right; padding: 0; } .social-icon { float: left; margin: 0 5px 0 0; } .social-icon:last-child { margin: 0; } /****************************************************************** TOP SIDEBAR STYLES ******************************************************************/ #topsidebar > div { float: left; display: inline; margin-right: 20px; min-height: 1px; } #topsidebar > div:last-child { margin-right: 0; } .top-sidebar-layouta { width: 220px; } .top-sidebar-layoutb { width: 300px; } .top-sidebar-layoutc:nth-child(1) { width: 460px; } .top-sidebar-layoutc:nth-child(2), .top-sidebar-layoutc:nth-child(3) { width: 220px; } .top-sidebar-layoutd:nth-child(1), .top-sidebar-layoutd:nth-child(2) { width: 220px; } .top-sidebar-layoutd:nth-child(3) { width: 460px; } .top-sidebar-layoute { width: 460px; } /****************************************************************** HOMEPAGE WIDGETS SECTION STYLES ******************************************************************/ #home-widgets-section > div { float: left; display: inline; margin-right: 20px; min-height: 1px; } #home-widgets-section > div:last-child { margin-right: 0; } .widgets-layouta { width: 220px; } .widgets-layoutb { width: 300px; } .widgets-layoutc:nth-child(1) { width: 460px; } .widgets-layoutc:nth-child(2), .widgets-layoutc:nth-child(3) { width: 220px; } .widgets-layoutd:nth-child(1), .widgets-layoutd:nth-child(2) { width: 220px; } .widgets-layoutd:nth-child(3) { width: 460px; } .widgets-layoute { width: 460px; } /****************************************************************** SHORTCODES STYLES ******************************************************************/ /* Dropcap Shortcode */ .dropcap:first-letter { float: left; font-size: 30px; line-height: 38px; text-align: center; color: #fff; background: #ddd; height: 40px; width: 24px; padding: 0 8px; margin-right: 4px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /* Highlight Shortcolde */ .highlighted { padding: 3px; } /* List Shortcode */ ul.quadro-list { margin: 20px 0; list-style: none; } ul.quadro-list li { padding: 5px 0 5px 25px; } ul.list-1 li { background: url(library/images/lists/1.png) no-repeat left center; } ul.list-2 li { background: url(library/images/lists/2.png) no-repeat left center; } ul.list-3 li { background: url(library/images/lists/3.png) no-repeat left center; } ul.list-4 li { background: url(library/images/lists/4.png) no-repeat left center; } ul.list-5 li { background: url(library/images/lists/5.png) no-repeat left center; } ul.list-6 li { background: url(library/images/lists/6.png) no-repeat left center; } ul.list-7 li { background: url(library/images/lists/7.png) no-repeat left center; } ul.list-8 li { background: url(library/images/lists/8.png) no-repeat left center; } ul.list-9 li { background: url(library/images/lists/9.png) no-repeat left center; } ul.list-10 li { background: url(library/images/lists/10.png) no-repeat left center; } ul.list-11 li { background: url(library/images/lists/11.png) no-repeat left center; } ul.list-12 li { background: url(library/images/lists/12.png) no-repeat left center; } ul.list-13 li { background: url(library/images/lists/13.png) no-repeat left center; } ul.list-14 li { background: url(library/images/lists/14.png) no-repeat left center; } ul.list-15 li { background: url(library/images/lists/15.png) no-repeat left center; } ul.list-16 li { background: url(library/images/lists/16.png) no-repeat left center; } ul.list-17 li { background: url(library/images/lists/17.png) no-repeat left center; } ul.list-18 li { background: url(library/images/lists/18.png) no-repeat left center; } /* Columns Shortcode */ .one-half { width: 48%; } .one-third { width: 30.66%; } .two-thirds { width: 65.33%; } .one-fourth { width: 22%; } .three-fourths { width: 74%; } .one-fifth { width: 16.8%; } .two-fifths { width: 37.6%; } .three-fifths { width: 58.4%; } .four-fifths { width: 67.2%; } .one-sixth { width: 13.33%; } .one-half, .one-third, .two-thirds, .one-fourth, .three-fourths, .one-fifth, .two-fifths, .three-fifths, .four-fifths, .one-sixth { float: left; margin: 0 4% 20px 0; } .last-column { margin-right: 0; } /* Toggle Shortcode */ h3.toggle-title, h3.toggle-open-title { cursor: pointer; margin: 10px 0; padding: 5px 0 5px 25px; background: url(library/images/plus.png) no-repeat left center; } h3.toggle-title.active, h3.toggle-open-title.active { background: url(library/images/minus.png) no-repeat left center; color: #111; } h3.toggle-title:hover, h3.toggle-open-title:hover { color: #111; } .toggle-content, .toggle-open-content { padding-bottom: 10px; margin: 0 0 10px 25px; } /* Tabs Shortcode */ .tabs-container { margin: 0 0 20px 0; clear: both; border: solid 1px #ddd; } ul.tabs-nav { background: #f5f5f5; list-style: none; margin: 0; } .tabs-nav h4 { margin: 0; } .tabs-nav li { float: left; padding: 10px 20px; } .tabs-nav li:hover { background: #eaeaea; } .tabs-nav .selected { background: #fff; border-bottom: solid 1px #fff; } .tabs-nav h4 a { color: #555; } .tabs-nav .selected h4 a { color: #111; } .tab-content { padding: 20px; background: #fff; } /* Accordion Toggle Shortcode */ .accordion-wrapper { margin: 0 0 20px; border: solid 1px #ddd; } h4.accordion-toggle { background: #f5f5f5; color: #555; padding: 10px; margin: 0; border-bottom: solid 1px #fff; display: block; cursor: pointer; } h4.accordion-toggle:hover { background: #eaeaea; } h4.accordion-toggle.active { font-weight: normal; color: #111; } .accordion-container { padding: 15px 20px; } /* Call To Action Shortcode */ .call-to-action { background: #f8f8f8; border: 1px solid #ddd; clear: both; padding: 10px; margin: 0 0 20px; } .call-to-action p { float: left; width: 70%; margin: 20px 0 15px 20px; color: #555; font-weight: normal; line-height: 30px; } .call-to-action .btn-container { float: right; width: 20%; text-align: right; margin: 10px 20px 10px 0; } .call-to-action .btn-container button { width: 120px; float: right; -moz-box-shadow: 0 0 1px #000; -webkit-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; } /* Buttons Shortcode */ button, .button { margin: 10px 0; padding: 10px 20px; color: #fff; background: #888; display: inline-block; border: none; -webkit-transition: background-color .2s linear; transition: background-color .2s linear; } .button.small-button { font-size: 10px; padding: 5px 10px; } .button.large-button { font-size: 18px; padding: 15px 25px; } .button:hover { background-color: #555 !important; color: #fff; } /* Divider Shortcode */ .divider { margin: 20px 0; height: 1px; display: block; clear: both; border-bottom: solid 1px #ddd; } /****************************************************************** COMMENT AND CONTACT FORM STYLES ******************************************************************/ .comments-section { float: left; padding: 55px 0 20px; width: 600px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .page .comments-section { margin: 0 30px; } .page-template-blog-php .comments-section { padding: 30px 0 0; } .page-template-blog-php .leftsidebar .comments-section { padding: 30px 0 0; margin: 0; } .page-template-blog-php .comments-section { margin: 0; } #comments-nmbr { display: inline-block; font-size: 18px; font-weight: normal; } /* h3 comment title */ .comment-nav ul li { color: #000; } .commentlist { margin: 0; } .commentlist li { position: relative; padding: 0 0 10px; clear: both; overflow: hidden; } .commentlist li article { max-width: 600px; } .commentlist li { margin: 0; } .commentlist li[class*=depth-2] { margin: 10px 0 0 80px; } .commentlist .vcard { padding: 15px 80px 0; } .commentlist .vcard .author-name { font-style: normal; font-size: 15px; color: #333; line-height: 15px; display: block; } .commentlist .vcard time a { text-decoration: none; color: #999; } .commentlist .vcard time a:hover { text-decoration: none; } .commentlist .vcard img.avatar { position: absolute; left: 0; top: 0; } .commentlist li .comment_content { margin: 20px 0 0 50px; padding-left: 30px; } .commentlist li .comment_content p { border-bottom: 1px solid #eee; padding: 0 0 20px; width: 100%; } .commentlist li[class*=depth-1] > article .comment_content p { width: 100%; } .commentlist li ul.children { padding-top: 14px; } .commentlist .comment-reply-link { position: absolute; left: 0; top: 65px; } .commentlist a.comment-reply-link:hover { opacity: 1; } .comment section { padding-right: 0; } .bypostauthor { } /* comment form styles */ #respond { padding: 40px 0; } .page-template-blog-php #respond { padding: 20px 0 0; } #comment-form-title { margin: 0 0 20px; font-weight: normal; letter-spacing: 1px; } #commentform { margin: 20px 0 0; } #commentform li, #contact-form p, #contact-form-shortcode p { overflow: hidden; margin-bottom: 10px; } #commentform label, #contact-form label, #contact-form-shortcode label { padding-left: 20px; color: #333; letter-spacing: 1px; } #commentform label { vertical-align: -5px; } #commentform small { color: #333; font-style: normal; } #commentform #author, #commentform #email, #commentform #url, #commentform #comment, #contact_name, #contact_email, #contact_subject, #contact-form textarea, #contact-form-shortcode textarea { background: #eee; } #commentform #author:focus, #commentform #email:focus, #commentform #url:focus, #commentform #comment:focus, #contact_name:focus, #contact_email:focus, #contact_subject:focus, #contact-form textarea:focus, #contact-form-shortcode textarea:focus { outline: none; background: #eee; } #commentform #author, #commentform #email, #commentform #url, #contact_name, #contact_email, #contact_subject { padding: 3px 6px; width: 178px; height: 24px; border: none; } #commentform #comment, #contact-form textarea, #contact-form-shortcode textarea { resize: none; line-height: 20px; padding: 5px 2%; padding: 5px 2%; width: 100%; height: 160px; border: none; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } #commentform #submit, #contact-form .sendbutton, #contact-form-shortcode .sendbutton { padding: 6px 15px; color: #fff; border: none; float: right; } #commentform label + input { float: left; } #contact-form textarea, #contact-form-shortcode textarea { margin-bottom: -10px; } /* form validation */ #commentform input:invalid, #commentform textarea:invalid { border-color: red; outline: none; background-color: #f6e7eb; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* no comments */ .nocomments { margin: 0; } /****************************************************************** MEDIA QUERIES & DEVICE STYLES ******************************************************************/ @media only screen and (max-width: 959px) { nav ul.topleft{ display:none; } #main { width: 760px; } #main.large-slider { margin-top: 622px; } #navigation { position: absolute; top: 0; z-index: 1000; min-width: 760px; width: 760px; margin: 0 auto; } .the-link { background: none; } #navigation-back { position: absolute; width: 100%; height: 100%; z-index: -1; filter: alpha(opacity=98); /* for IE */ opacity: 0.98; /* CSS3 standard */ } #menu-opener { height: 25px; cursor: pointer; z-index: 10; margin-bottom: 0; background-image: url('library/images/navicon.png'); background-repeat: no-repeat; background-position: center; } .menu { display: none; height: auto; width: 60%; margin: 0 auto 10px; } .menu li { height: auto; display: block; margin: 0 auto; padding: 10px 0; border-bottom: 1px solid #222; } nav ul li { min-width: 0; } .menu li:last-child { border: none; } .color-tag { display: none; } nav ul li ul.sub-menu { position: relative; left: 0; width: 100%; filter: alpha(opacity=100); /* for IE */ opacity: 1; /* CSS3 standard */ } nav ul li ul.sub-menu li { display: inline-block; border-bottom: none !important; margin: 0 5px; } .sub-menu li:hover { background: none; } .sub-menu .sub-menu-transp { display: none; } nav ul li ul li ul.sub-menu { position: relative; margin: 10px 0 0 -5px; left: auto; filter: alpha(opacity=100); /* for IE */ opacity: 1; /* CSS3 standard */ } nav ul li ul li ul.sub-menu li { display: block; width: 100px; } .sub-menu li a { text-align: center; } .caption-container { width: 760px; } #regular-slider { width: 760px; height: 304px; margin-top: 0; } .regular-slider-slider-caption { width: 280px; height: 244px; } #regular-slider .slider-caption h2 { top: 0; max-width: 230px; } #regular-slider .slider-caption p { padding-left: 40px; } .regular-slider-slider-caption h2 + p { margin-top: 20px; } .regular-slider-slider-caption .slide-read-more { top: 260px; } .video-slide-back.right + iframe { left: 20px; } .video-slide-back.left + iframe { right: 20px; } header[role="banner"] { min-height: 0; } header[role="banner"], footer[role="contentinfo"], .attachment-pagefeat, #regular-slider, #google-map-iframe { width: 760px; } nav ul.topleft, #tagline.topleft { text-align: center; float: none; } #logo, #logo.topleft { margin: 80px auto 0; text-align: center; float: none; width: 100%; max-width: 100%; left: 0; } #logo.topleft a { float: none; margin: 0; } #ribbon, section.fullwidth, #slogan, #home-tophtml-section, #home-bottomhtml-section, #home-widgets-section, #portfolio-section, #home-services-section, #home-recent-news, .portfolio-showcase, .full li .item-container article img { width: 700px; } article[id*="post-"], section.regular, .comments-section, #contact, #blogsection, .gallery-container .gallery-attachment, .portfolio-showcase .imgsection, .portfolio-image, .portfolio-showcase .gallery, .portf-gallery-container .gallery-attachment, .format-image-pic { width: 460px; } article.type-post header { overflow-x: hidden; } .format-status section { width: 315px; } .attachment-blogpostfeat { width: 460px; height: auto; } .jp-progress-area { width: 295px !important; } .jp-progress { width: 255px !important; } .jp-time-holder { left: 275px !important; } .jp-video-area, .jp-video-area img { width: 100% !important; height: auto !important; } div.jp-video-play { top: 29% !important; } .home-recent-news-item .jp-progress-area { margin-left: 10px !important; padding: 20px 10px !important; width: 100px !important; } .home-recent-news-item div.jp-audio div.jp-progress { width: 98px !important; } .rightsidebar #sidebar { width: 200px; padding: 0 30px 0 10px; } .leftsidebar #sidebar { width: 200px; padding: 0 10px 0 30px; } #topsidebar { width: 700px; } .leftsidebar .attachment-pagefeat, .leftsidebar #google-map-iframe, .leftsidebar .page #ribbon { margin-left: -240px; } .footer-layout1, .top-sidebar-layouta, .widgets-layouta { width: 160px; } .footer-layout2, .top-sidebar-layoutb, .widgets-layoutb { width: 220px; } .footer-layout3:nth-child(1), .top-sidebar-layoutc:nth-child(1), .widgets-layoutc:nth-child(1) { width: 340px; } .footer-layout3:nth-child(2), .footer-layout3:nth-child(3), .top-sidebar-layoutc:nth-child(2), .top-sidebar-layoutc:nth-child(3), .widgets-layoutc:nth-child(2), .widgets-layoutc:nth-child(3) { width: 160px; } .footer-layout4:nth-child(1), .footer-layout4:nth-child(2), .top-sidebar-layoutd:nth-child(1), .top-sidebar-layoutd:nth-child(2), .widgets-layoutd:nth-child(1), .widgets-layoutd:nth-child(2) { width: 160px; } .footer-layout4:nth-child(3), .top-sidebar-layoutd:nth-child(3), .widgets-layoutd:nth-child(3) { width: 340px; } .footer-layout5, .top-sidebar-layoute, .widgets-layoute { width: 340px; } /* Widget Sizes Fixing */ #sidebar .widget_search input#s { width: 120px; } .footer-layout3:nth-child(1) .widget_search input#s, .top-sidebar-layoutc:nth-child(1) .widget_search input#s, .widgets-layoutc:nth-child(1) .widget_search input#s, .footer-layout4:nth-child(3) .widget_search input#s, .top-sidebar-layoutd:nth-child(3) .widget_search input#s, .widgets-layoutd:nth-child(3) .widget_search input#s, .footer-layout5 .widget_search input#s, .top-sidebar-layoute .widget_search input#s, .widgets-layoute .widget_search input#s { width: 255px; } .footer-layout1 .widget_search input#s, .top-sidebar-layouta .widget_search input#s, .widgets-layouta .widget_search input#s, .footer-layout3:nth-child(2) .widget_search input#s, .footer-layout3:nth-child(3) .widget_search input#s, .top-sidebar-layoutc:nth-child(2) .widget_search input#s, .top-sidebar-layoutc:nth-child(3) .widget_search input#s, .widgets-layoutc:nth-child(2) .widget_search input#s, .widgets-layoutc:nth-child(3) .widget_search input#s, .footer-layout4:nth-child(1) .widget_search input#s, .footer-layout4:nth-child(2) .widget_search input#s, .top-sidebar-layoutd:nth-child(1) .widget_search input#s, .top-sidebar-layoutd:nth-child(2) .widget_search input#s, .widgets-layoutd:nth-child(1) .widget_search input#s, .widgets-layoutd:nth-child(2) .widget_search input#s { width: 80px; } .footer-layout2 .widget_search input#s, .top-sidebar-layoutb .widget_search input#s, .widgets-layoutb .widget_search input#s { width: 135px; } .footer-layout1 .quadro-rpost .postdata, .top-sidebar-layouta .quadro-rpost .postdata, .widgets-layouta .quadro-rpost .postdata { max-width: 55%; } .portfolio-medium .item-container img { width: 230px; height: 230px; } .portfolio-small .item-container img { width: 136px; height: 136px; } .full li .item-container { height: 280px; } .work-info.portfolio-medium p { display: none; } .portfolio-video { margin-top: 20px; width: 460px; } .imgsection { width: 460px; float: left; } .imgsection img { margin: 0; } .portfolio-data { width: 200px; } #recent-news-headings { margin-bottom: 20px; float: none; } .home-recent-news-item:first-of-type { clear: left; } .home-services-item { width: 200px; overflow: hidden; } .author-bio { width: 300px; } .author-box .avatar { width: 100px; height: auto; } } @media only screen and (max-width: 759px) { #main { width: 520px; } #navigation { min-width: 520px; width: 520px; } .menu { width: 80%; } .home #main { padding: 20px 0 0; } #main.large-slider { margin-top: 422px; } #large-slider { height: 400px; } .large-slider-slider-caption { width: 520px; bottom: 0; } .large-slider-slider-caption.right { left: 0; text-align: left; } .large-slider-slider-caption h2, .large-slider-slider-caption h2 a, .large-slider-slider-caption p:first-child, .large-slider-slider-caption p:first-child * { width: 500px; margin-bottom: 0; font-size: 32px !important; line-height: 34px !important; } .large-slider-slider-caption h2 + p, .large-slider-slider-caption h2 + p * { width: 500px; margin-bottom: 0; padding-top: 0; font-size: 18px !important; line-height: 20px !important; } .large-slider-slider-caption .slide-read-more { display: none; } .slider-nav.large { top: 400px; } #regular-slider { width: 520px; height: 208px; margin-top: 0; } .regular-slider-slider-caption { height: 148px; width: 200px; right: 0; } .regular-slider-slider-caption .slide-read-more { top: 180px; } #regular-slider .slider-caption h2 { top: 0; max-width: 200px; } .regular-slider-slider-caption h2 { display: inline-block; } .regular-slider-slider-caption h2 + p { display: none; } .video-slide-back.right + iframe { left: 25px; } .video-slide-back.left + iframe { right: 25px; } .slide-arrow.left { left: 240px; } .quadro-slide iframe { top: 40px; } header[role="banner"], footer[role="contentinfo"], .attachment-pagefeat, #regular-slider { width: 520px; } .attachment-pagefeat { height: 104px; } .attachment-blogpostfeat { width: 320px; } .post_content { margin-top: 10px; } .rightsidebar #sidebar, .leftsidebar #sidebar { margin: 70px 0 0; } #sidebar.blog { margin-top: 10px; } #sidebar.featimg { margin-top: 174px; } #respond { padding: 20px 0; } #ribbon, section.fullwidth, #slogan, #home-tophtml-section, #home-bottomhtml-section, #home-widgets-section, #portfolio-section, #home-services-section, #home-recent-news, .portfolio-showcase { width: 500px; } article[id*="post-"], section.regular, .comments-section, #contact, #blogsection, .gallery-container .gallery-attachment, .portfolio-showcase .imgsection, .portfolio-image, .portfolio-showcase .gallery, .portf-gallery-container .gallery-attachment { width: 320px; } .page .comments-section { margin: 0; } #ribbon, section.regular, section.fullwidth, .page .comments-section { padding: 0 10px; } .page-template-blog-php .comments-section { padding: 20px 0; } .format-status section { width: 175px; } .format-image-pic { width: 320px; } .jp-progress-area { width: 155px !important; } .jp-progress { width: 115px !important; } .jp-time-holder { left: 135px !important; } div.jp-video-play { top: 20% !important; } .gallery-nav { width: 200px; } article.blogpost { margin: 40px 10px 0; } article.blogpost:first-child { margin-top: 10px; } #google-map-iframe { width: 520px; height: 104px !important; } .rightsidebar #sidebar, .leftsidebar #sidebar { width: 160px; padding: 0 10px; } #topsidebar { width: 500px; margin: 10px 10px 20px 10px; } .leftsidebar .attachment-pagefeat, .leftsidebar #google-map-iframe, .leftsidebar .page #ribbon { margin-left: -180px; } .leftsidebar article.page { margin: 0; padding-right: 20px; } .footer-layout2 .widget .twtr-tweet-text em { width: 90px; margin: 10px auto !important; text-align: center; } .quadro-rpost .postdata { max-width: 54%; } .quadro-rpost .postdata .meta { border: none; } #sidebar .widget #contact_name, #sidebar .widget #contact_email, #sidebar .widget #contact_subject { width: 100% !important; } #inner-footer { padding: 20px 10px; } #social-area { text-align: center; } .social-icon { float: none; } #copyright { clear: both; float: none; text-align: center; } .footer-layout1, .top-sidebar-layouta, .widgets-layouta { width: 240px; } .footer-layout1:nth-child(2), .top-sidebar-layouta:nth-child(2), .widgets-layouta:nth-child(2) { margin-right: 0!important; } .footer-layout2, .top-sidebar-layoutb, .widgets-layoutb { width: 150px; margin-right: 25px !important; } .footer-layout2:last-child, .top-sidebar-layoutb:last-child, .widgets-layoutb:last-child { margin-right: 0 !important; } .footer-layout3:nth-child(1), .top-sidebar-layoutc:nth-child(1), .widgets-layoutc:nth-child(1) { width: 500px; } .footer-layout3:nth-child(2), .footer-layout3:nth-child(3), .top-sidebar-layoutc:nth-child(2), .top-sidebar-layoutc:nth-child(3), .widgets-layoutc:nth-child(2), .widgets-layoutc:nth-child(3) { width: 240px; } .footer-layout4:nth-child(1), .footer-layout4:nth-child(2), .top-sidebar-layoutd:nth-child(1), .top-sidebar-layoutd:nth-child(2), .widgets-layoutd:nth-child(1), .widgets-layoutd:nth-child(2) { width: 240px; } .footer-layout4:nth-child(2), .top-sidebar-layoutd:nth-child(2), .widgets-layoutd:nth-child(2) { margin-right: 0 !important; } .footer-layout4:nth-child(3), .top-sidebar-layoutd:nth-child(3), .widgets-layoutd:nth-child(3) { width: 500px; } .footer-layout5, .top-sidebar-layoute, .widgets-layoute { width: 500px; margin-right: 0!important; } /* Widget Sizes Fixing */ #sidebar .widget_search input#s { width: 80px; } .footer-layout3:nth-child(1) .widget_search input#s, .top-sidebar-layoutc:nth-child(1) .widget_search input#s, .widgets-layoutc:nth-child(1) .widget_search input#s, .footer-layout4:nth-child(3) .widget_search input#s, .top-sidebar-layoutd:nth-child(3) .widget_search input#s, .widgets-layoutd:nth-child(3) .widget_search input#s, .footer-layout5 .widget_search input#s, .top-sidebar-layoute .widget_search input#s, .widgets-layoute .widget_search input#s { width: 255px; } .footer-layout3:nth-child(2) .widget_search input#s, .footer-layout3:nth-child(3) .widget_search input#s, .top-sidebar-layoutc:nth-child(2) .widget_search input#s, .top-sidebar-layoutc:nth-child(3) .widget_search input#s, .widgets-layoutc:nth-child(2) .widget_search input#s, .widgets-layoutc:nth-child(3) .widget_search input#s, .footer-layout4:nth-child(1) .widget_search input#s, .footer-layout4:nth-child(2) .widget_search input#s, .top-sidebar-layoutd:nth-child(1) .widget_search input#s, .top-sidebar-layoutd:nth-child(2) .widget_search input#s, .widgets-layoutd:nth-child(1) .widget_search input#s, .widgets-layoutd:nth-child(2) .widget_search input#s { width: 80px; } .footer-layout1 .widget_search input#s, .top-sidebar-layouta .widget_search input#s, .widgets-layouta .widget_search input#s { width: 150px; } .footer-layout2 .widget_search input#s, .top-sidebar-layoutb .widget_search input#s, .widgets-layoutb .widget_search input#s { width: 70px; } .footer-layout2 .quadro-rpost .postdata, .top-sidebar-layoutb .quadro-rpost .postdata, .widgets-layoutb .quadro-rpost .postdata { max-width: 52%; } .works_list.portfolio-medium li, .works_list.portfolio-medium li:nth-child(3n) { margin: 0 6px 6px 0; } .works_list.portfolio-medium li:nth-child(2n) { margin: 0 0 6px 0; } .works_list.portfolio-small li, .works_list.portfolio-small li:nth-child(5n) { margin: 0 4px 4px 0; } .works_list.portfolio-small li:nth-child(3n) { margin: 0 0 4px 0; } .portfolio-medium .item-container img { width: 247px; height: 247px; } .portfolio-small .item-container img { width: 164px; height: 164px; } .full li .item-container article img { width: 500px; } .full li .item-container { height: 220px; } .portfolio-video { margin-top: 20px; width: 320px; } #showcase-holder .portfolio-showcase { margin: 0 0 20px; padding: 0 0 10px; } .portfolio-data { width: 160px; } #home-widgets-section { padding: 0 10px; } #portfolio-section.home #portfolio-categories { padding-top: 0; } .home-recent-news-item { width: 150px; margin-right: 25px !important; padding: 0; } .home-recent-news-item p { margin: 0 0 10px; } .home-recent-news-item .play-arrow { border-bottom: 10px solid transparent; border-left: 15px solid white; border-top: 10px solid transparent; } .home-recent-news-item .jp-progress-area { margin-left: 10px; padding: 10px !important; width: 75px !important; height: auto; } .home-recent-news-item div.jp-audio div.jp-progress { width: 74px !important; } .home-recent-news-item a.jp-pause { width: 25px; padding: 10px 7px 10px 13px; } .home-recent-news-item .pause-bars { height: 20px; width: 6px; } .home-recent-news-item .gallery-container .gallery-attachment { width: 150px; } .home-recent-news-item.format-video .video-thumb-container { height: 100px; } .home-recent-news-item.format-video img { width: 150px; } .home-recent-news-item div.jp-video-play { top: 30px !important; left: 55px !important; } .home-services-item { width: 150px; } .home-services-item:first-child, .home-services-item:nth-child(2) { margin-right: 25px; } .home-services-item img { margin-left: 0; } img.attachment-services { width: 100%; height: auto; } .gallery-icon .attachment-thumbnail { width: 80%; height: auto; } .author-box { margin: 40px 10px 0; } .author-bio { width: auto; float: none; } .author-box .avatar { width: 70px; } .call-to-action p { width: 100%; margin: 0 auto 15px; text-align: center; } .call-to-action .btn-container { float: none; width: 100%; margin: 0; text-align: center; } .call-to-action .btn-container button { float: none; } } @media only screen and (max-width: 519px) { #main { width: 100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .home #main { padding: 20px 10px 0; } #navigation { min-width: 100%; width: 100%; } .menu { width: 100%; } body, p { font-size: 16px !important; line-height: 30px; } .large-slider-slider-caption { bottom: 0; width: 100%; padding: 10px 10px 20px; } .large-slider-slider-caption.left, .large-slider-slider-caption.right { left: 0 !important; padding: 0; } .large-slider-slider-caption h2, .large-slider-slider-caption h2 a, .large-slider-slider-caption p, .large-slider-slider-caption p:first-child, .large-slider-slider-caption p:first-child *, .large-slider-slider-caption h2 + p, .large-slider-slider-caption h2 + p * { width: 100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .large-slider-slider-caption h2, .large-slider-slider-caption h2 a, .large-slider-slider-caption p:first-child, .large-slider-slider-caption p:first-child * { font-size: 24px !important; line-height: 26px !important; } .slider-nav.large { position: relative; top: -5px; } #large-slider, #regular-slider { position: relative; width: 100%; height: 208px; margin-top: 0; } #large-slider .quadro-slide, #regular-slider .quadro-slide { height: 208px; } #large-slider .quadro-slide img.short, #regular-slider .quadro-slide img.short { width: auto !important; height: 100% !important; margin-top: 0 !important; } #large-slider .quadro-slide img.tall, #regular-slider .quadro-slide img.tall { width: 100% !important; height: auto !important; margin-top: 0 !important; } .regular-slider-slider-caption .transpback { height: 100%; } .regular-slider-slider-caption { width: 100%; height: auto; top: auto; bottom: 0; padding: 0; } .regular-slider-slider-caption h2 { display: inline-block; } .large-slider-slider-caption .slide-read-more, .large-slider-slider-caption h2 + p, .regular-slider-slider-caption .slide-read-more, .regular-slider-slider-caption h2 + p, .slide-arrow, .video-slide-back.right, .video-slide img { display: none; } #regular-slider .slider-caption h2 { left: 0; margin-bottom: 0; padding: 10px; max-width: auto; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .video-slide .slider-caption { display: none !important; } .video-slide-back.right + iframe { left: 0; } .quadro-slide iframe { top: 0px; } .slider-nav { bottom: -15px; } #main.large-slider { margin-top: 5px; } header[role="banner"], footer[role="contentinfo"], .attachment-pagefeat, .attachment-blogpostfeat, .format-image-pic, .home-services-item img.attachment-services, .home-recent-news-item .gallery-container .gallery-attachment, .recents-format-image-pic, .home-recent-news-item.format-video img, .full li .item-container article img, .portf-gallery-container, .portf-gallery-container .gallery-attachment { width: 100%; } #slogan { padding: 0 10px 20px; margin-top: 0; } .attachment-pagefeat { height: auto; } .post_content { margin-top: 10px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } #sidebar.featimg { margin-top: 20px; } #logo.logo-large-slider { position: relative; left: auto; } #logo img { max-width: 60%; } #tagline { max-width: 90%; } #ribbon, section.fullwidth, #slogan, #home-tophtml-section, #home-bottomhtml-section, #home-widgets-section, #portfolio-section, #home-services-section, #home-recent-news, .portfolio-showcase, article[id*="post-"], section.regular, .comments-section, #contact, #blogsection, .gallery-container .gallery-attachment, .portfolio-showcase .imgsection, .portfolio-image, .portfolio-showcase .gallery, .portf-gallery-container .gallery-attachment { width: 100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .gallery-container, .gallery-element, #sidebar .widget #contact_name, #sidebar .widget #contact_email, #sidebar .widget #contact_subject { width: 100% !important; } #commentform label, #contact-form label, #contact-form-shortcode label { display: block; padding: 0; } #ribbon, section.regular, section.fullwidth { padding: 0 10px; } .format-status section { width: 60%; margin: 0 0 20px !important; } .format-aside .meta { margin: 20px 0; } .post_content img { width: 100%; height: auto; } .post_content .jp-current-time { display: none; } .post_content .jp-progress-area { width: 40% !important; } .post_content .jp-progress { width: 98% !important; } div.jp-video div.jp-interface { width: 100%; margin: 0 auto; } div.jp-video-play { top: 20% !important; } .gallery-nav { width: 60%; } .single article.blogpost, article.blogpost { margin: 40px 0 0; padding: 0 10px 20px; } .sticky { padding: 20px 10px !important; } #google-map-iframe { width: 100%; height: 180px; } .rightsidebar #sidebar, .leftsidebar #sidebar { width: 100%; padding: 0 10px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } #topsidebar { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ width: 100%; margin: 0 0 20px 0; padding: 10px; } .leftsidebar .attachment-pagefeat, .leftsidebar #google-map-iframe, .leftsidebar .page #ribbon { margin-left: 0; } .leftsidebar article.page { padding: 0; } .quadro-rpost .postdata { width: auto; max-width: 100%; } .quadro-rpost .postdata .meta { font-size: 12px !important; line-height: 14px !important; } .footer-layout2 .widget .twtr-tweet-text em { width: 100%; display: inline; } #bottom-footer { padding: 10px 10px 20px; } .footer-layout1, .top-sidebar-layouta, .widgets-layouta, .footer-layout1:nth-child(2), .top-sidebar-layouta:nth-child(2), .widgets-layouta:nth-child(2), .footer-layout2, .top-sidebar-layoutb, .widgets-layoutb, .footer-layout2:last-child, .top-sidebar-layoutb:last-child, .widgets-layoutb:last-child, .footer-layout3:nth-child(1), .top-sidebar-layoutc:nth-child(1), .widgets-layoutc:nth-child(1), .footer-layout3:nth-child(2), .footer-layout3:nth-child(3), .top-sidebar-layoutc:nth-child(2), .top-sidebar-layoutc:nth-child(3), .widgets-layoutc:nth-child(2), .widgets-layoutc:nth-child(3), .footer-layout4:nth-child(1), .footer-layout4:nth-child(2), .top-sidebar-layoutd:nth-child(1), .top-sidebar-layoutd:nth-child(2), .widgets-layoutd:nth-child(1), .widgets-layoutd:nth-child(2), .footer-layout4:nth-child(2), .top-sidebar-layoutd:nth-child(2), .widgets-layoutd:nth-child(2), .footer-layout4:nth-child(3), .top-sidebar-layoutd:nth-child(3), .widgets-layoutd:nth-child(3), .footer-layout5, .top-sidebar-layoute, .widgets-layoute { width: 100%; margin-right: 0!important; } /* Widget Sizes Fixing */ #sidebar .widget_search input#s, .footer-layout3:nth-child(1) .widget_search input#s, .top-sidebar-layoutc:nth-child(1) .widget_search input#s, .widgets-layoutc:nth-child(1) .widget_search input#s, .footer-layout4:nth-child(3) .widget_search input#s, .top-sidebar-layoutd:nth-child(3) .widget_search input#s, .widgets-layoutd:nth-child(3) .widget_search input#s, .footer-layout5 .widget_search input#s, .top-sidebar-layoute .widget_search input#s, .widgets-layoute .widget_search input#s, .footer-layout1 .widget_search input#s, .top-sidebar-layouta .widget_search input#s, .widgets-layouta .widget_search input#s, .footer-layout3:nth-child(2) .widget_search input#s, .footer-layout3:nth-child(3) .widget_search input#s, .top-sidebar-layoutc:nth-child(2) .widget_search input#s, .top-sidebar-layoutc:nth-child(3) .widget_search input#s, .widgets-layoutc:nth-child(2) .widget_search input#s, .widgets-layoutc:nth-child(3) .widget_search input#s, .footer-layout4:nth-child(1) .widget_search input#s, .footer-layout4:nth-child(2) .widget_search input#s, .top-sidebar-layoutd:nth-child(1) .widget_search input#s, .top-sidebar-layoutd:nth-child(2) .widget_search input#s, .widgets-layoutd:nth-child(1) .widget_search input#s, .widgets-layoutd:nth-child(2) .widget_search input#s, .footer-layout2 .widget_search input#s, .top-sidebar-layoutb .widget_search input#s, .widgets-layoutb .widget_search input#s { width: 72%; } #portfolio-section.home #portfolio-categories { clear: both; padding-top: 0px; } .works_list.portfolio-medium li, .works_list.portfolio-medium li:nth-child(3n) { margin: 0 0 6px 0; width: 100%; } .works_list.portfolio-small li, .works_list.portfolio-small li:nth-child(3n), .works_list.portfolio-small li:nth-child(5n) { margin: 0 2% 2% 0; width: 49%; } .works_list.portfolio-small li:nth-child(2n) { margin: 0 0 2% 0; } .portfolio-medium .item-container img, .portfolio-small .item-container img { width: 100%; height: auto; } .work-info.full { display: none; } .full li .item-container { height: 150px; } #showcase-holder .portfolio-showcase { margin: 0 0 20px !important; padding: 0 0 20px; position: relative; overflow: visible; } .portfolio-video { width: 100%; margin-top: 20px; } .portfolio-data { width: 100%; float: none; } .portfolio-data h2 { padding-top: 20px; } .portfolio-controls { position: absolute; top: -54px; right: 0; } .portfolio-controls span { font-size: 26px; } #loader { left: 42%; } .page-template-portfolio-page-php #showcase-holder .portfolio-showcase { padding-top: 50px; } .page-template-portfolio-page-php .portfolio-controls { top: 10px; } .home-recent-news-item { width: 100%; margin: 0 0 20px 0 !important; } .news-item-date { margin-bottom: 10px; } .home-recent-news-item.format-video .video-thumb-container { height: 220px; } .home-recent-news-item div.jp-video-play { top: 35% !important; left: 35% !important; width: 65px; height: 50px; padding: 10px 1px 1px 50px; } .home-recent-news-item a.jp-video-play-icon { border-bottom: 20px solid transparent; border-left: 30px solid white; border-top: 20px solid transparent; } .home-recent-news-item div.jp-audio div.jp-type-single div.jp-interface { height: 60px; } .home-recent-news-item .jp-progress-area { padding: 10px !important; width: 70% !important; display: inline; } .home-recent-news-item div.jp-audio div.jp-progress { width: 85% !important; } .home-recent-news-item .jp-time-holder { display: inline; top: 5px; right: 25px; } .home-recent-news-item .jp-current-time { position: absolute; right: -15px; } .home-services-item { width: 100%; margin-bottom: 20px; } .home-services-item:first-child, .home-services-item:nth-child(2) { margin-right: 0; } .author-box { padding: 10px; margin: 40px auto 0; width: 95%; } #commentform p { clear: both; margin: 0; } #commentform label + input { float: none; } #commentform #url { margin-bottom: 20px; } #commentform #submit { margin-top: 0; } .one-half, .one-third, .two-thirds, .one-fourth, .three-fourths, .one-fifth, .two-fifths, .three-fifths, .four-fifths, .one-sixth { width: 100%; margin: 0 0 20px 0; } } /****************************************************************** IE SPECIFIC FIXES ******************************************************************/ /* Are you having a tough time fixing IE bugs? Simply use the html class to target the specific version of IE. To target the .post_content area in IE6, use: html.ie6 .post_content { ... } To target the .post_content area in IE7, use: html.ie7 .post_content { ... } To target the .post_content area in IE8, use: html.ie8 .post_content { ... } */ html.ie8 .works_list li { margin: 0 3px 3px 0; } html.ie8 .works_list.portfolio-small li:nth-child(5n), html.ie8 .works_list.portfolio-medium li:nth-child(3n) { margin: 0 0 3px 0; } html.ie8 .gallery-element img { max-width: none; } /****************************************************************** JPLAYER STYLES ******************************************************************/ div.jp-video { position: relative; } .jp-video-area { border: 10px solid #eee; margin-bottom: 20px; background: #222; min-height: 100px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .jp-video-area video, .jp-video-area object { margin: 0; } div.jp-audio div.jp-interface { position: relative; width:100%; } div.jp-video div.jp-interface { width:100%; } div.jp-video div.jp-interface, div.jp-audio div.jp-type-single div.jp-interface, div.jp-audio div.jp-type-playlist div.jp-interface { height: 80px; } /* @group CONTROLS */ div.jp-controls-holder { clear: both; margin: 0 auto; position: relative; overflow: hidden; top: -8px; } div.jp-interface ul.jp-controls { list-style-type: none; margin: 0; padding: 0; overflow: hidden; display: inline; } div.jp-video ul.jp-controls, div.jp-interface ul.jp-controls li { display: inline; float: left; padding: 0; } div.jp-interface ul.jp-controls a { display: block; overflow: hidden; text-indent: -9999px; } .play-arrow { width: 0; height: 0; border-bottom: 20px solid transparent; border-left: 30px solid #fff; border-top: 20px solid transparent; } a.jp-play { background: #eee; padding: 10px 12px 10px 18px; } .pause-bars { width: 10px; height: 40px; margin-right: 6px; background: #fff; float: left; } a.jp-pause { background: #eee; width: 32px; padding: 10px 11px 10px 17px; } a.jp-play:hover { background: #ccc; } a.jp-pause { background: #eee; display: none; } a.jp-pause:hover { background: #ccc; } a.jp-stop, a.jp-previous, a.jp-next { width: 28px; height: 28px; margin-top: 6px; } /* @end */ /* @group progress bar */ .small-arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 15px solid #eee; display: inline-block; margin-top: 20px; margin-left: 10px; float: left; } .home-recent-news-item .small-arrow { display: none; } .jp-progress-area { position: relative; display: inline; float: left; padding: 20px; background: #eee; width: 435px; } .home-recent-news-item .jp-progress-area { margin-left: 10px; padding: 20px 10px; width: 100px; } .home-recent-news-item div.jp-audio div.jp-progress { width: 98px; } .home-recent-news-item .jp-time-holder { display: none; } .jp-progress { height: 20px; width: 380px; overflow: visible; background-color: #ccc; display: inline-block; float: left; } div.jp-seek-bar { background: #bcbcbc url('library/images/seek-pattern.png') repeat; width: 0; height: 20px; cursor: pointer; } div.jp-play-bar { background: #888; width: 0; height: 20px; position: relative; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .jp-play-cursor { height: 40px; top: -10px; right: -17px; width: 20px; position: absolute; background: url("library/images/progress-cursor.png") no-repeat right top; } /* @end */ /* @group volume controls */ div.jp-volume-bar { overflow: hidden; width: 46px; height: 5px; cursor: pointer; display: inline-block; float: left; margin-left: 10px; } div.jp-audio div.jp-volume-bar, div.jp-video div.jp-volume-bar { height: 60px; width: 30px; background: #eee; position: relative; } .home-recent-news-item div.jp-volume-bar { display: none !important; } div.jp-volume-bar-value { background: #888; position: absolute; bottom: 0; left: 5px; width: 20px; height: 5px; z-index: 2; } .jp-volume-white-area { position: absolute; background: #fff; bottom: 10px; left: 5px; width: 20px; height: 40px; z-index: 1; } .volume-bars { position: absolute; bottom: 10px; left: 5px; width: 20px; height: 40px; z-index: 4; } .volume-bottom { position: absolute; bottom: 0; left: 0; background: #eee; width: 30px; height: 10px; z-index: 3; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .volume-top { position: absolute; top: 0; left: 0; background: #eee; width: 30px; height: 10px; z-index: 3; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; border-top-right-radius: 5px; border-top-left-radius: 5px; } .barofvolume { width: 20px; height: 4px; margin-top: 3px; background: #eee; } /* @end */ /* @group current time and duration */ .jp-time-holder { position: absolute; top: 19px; left: 405px; } div.jp-current-time, div.jp-duration { font-size: 11px; font-family: Arial; margin: 0 0 0 15px; color: #000; } div.jp-video div.jp-current-time { margin-left: 20px; } div.jp-video div.jp-duration { margin-right: 20px; } /* @end */ div.jp-video-play { position: absolute; top: 31%; left: 45%; cursor: pointer; width: 30px; height: 47px; background: #ccc; padding: 10px 12px 3px 18px; } body.browser-gecko div.jp-video-play { position: absolute; top: 31%; left: 45%; z-index: 1000; cursor: pointer; width: 60px; height: 60px; background: url('../images/playbutton.png') no-repeat; } body.browser-gecko a.jp-video-play-icon { display: none; } div.jp-video-full div.jp-video-area { height: 100%; z-index: 1000; } a.jp-video-play-icon { width: 0; height: 0; display: inline-block; border-bottom: 20px solid transparent; border-left: 30px solid #fff; border-top: 20px solid transparent; } div.jp-video-play:hover { background: #aaa; } body.browser-gecko div.jp-video-play:hover { background: url('../images/playbutton-hover.png') no-repeat; } div.jp-jplayer audio, div.jp-jplayer { width: 0px; height: 0px; } div.jp-jplayer { background-color: #000; } /* @group NO SOLUTION error feedback */ .jp-no-solution { position: absolute; width: 390px; margin-left: -202px; left: 50%; top: 10px; padding: 5px; background-color: #eee; border: 2px solid #009be3; display: none; } .jp-no-solution a { color: #000; } .jp-no-solution span { display: block; font-weight: bold; } .jp-video-area img { display: block; } /****************************************************************** PRINT STYLES ******************************************************************/ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } #slogan_side{ font-family: "Abel"; font-size: 36px; line-height: 40px; margin: 0 auto 40px; text-align: center; color: #E53F0B; } #name_{width:300px; height:25px; border:solid 1px #CCC;} #name_box{width:300px; height:100px; border:solid 1px #CCC;}

"menu"
Bootstrap 3.3.0 Snippet by prabuanan

Related: See More

Questions / Comments:

"menu" Bootstrap 3.3.0 Snippet by prabuanan

Related: See More

Questions / Comments:

"menu"
Bootstrap 3.3.0 Snippet by prabuanan