/**
*
* CSS for QuXilver Square Theme
*
* Autor: Waldi
* Crated: October 2013
* Clean: December 2014
*
**/
/************************************************************************************/
/******************* Standard Baseline + Utility classes ****************************/
/************************************************************************************/
/* Everything is a boder-box */
* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
/* TODO init for a couple of elements together */
p { margin: 0px; }
ul { margin: 0px; padding: 0px; }
/* Backgrounds */
#container-header, .snippet .feature-boxes, #home .features-icons, #appstore .apps-quixilver,
#appstore .apps-quixilver-plus, #appstore .apps-quixilver-customized, #app .app-box,
#price .tables .body p:nth-child(odd), #news #latest-post .text, #features .feature-box:nth-child(odd) {
background-color: #EFF4FF;
}
/* Headings */
h1 { color: #1359f0; font-size: 150%; font-weight: normal; line-height: 130%; }
h1 { margin: 0px; padding: 0px; }
h2 { color: #1359f0; font-size: 120%; font-weight: normal; }
h2 { margin: 0px; padding: 0px; }
h3 { color: #1359f0; font-size: 100%; font-weight: normal; }
h3 { margin: 0px; padding: 0px; }
h4 { margin: 0px; padding: 0px; }
h4 { color: #919191; font-size: 100%; font-weight: bold; }
/* Various tags */
a { text-decoration: none; color: #32cd32; }
ul { list-style-image: url('/wp-content/images/list-style-checkmark-grey-10.png');}
ul { margin: 0; padding: 0; padding-left: 20px;}
/* Image */
img { max-width: 100%; }
img.transparent-transition { opacity: 0.8; filter:alpha(opacity=80); /* For IE8 and earlier */ }
img.transparent-transition { transition: all .3s ease-in; -webkit-transition: all .3s ease-in; }
img.transparent-transition { -moz-transition: all .3s ease-in; }
img.transparent-transition { behavior: url(/wp-content/tools/pie/PIE.htc); }
img.transparent-transition:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }
/* Button & CTA-Button */
.button { height: 34px; line-height: 34px; }
.button { text-align: center; cursor: pointer; font-weight: bold; /* _TO-DELETE */ background-color: #32c532; }
.button { color: white !important; /* _TO-DELETE */ text-decoration: none !important; }
.button { transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; }
.button { display: block; }
.button { behavior: url(/wp-content/tools/pie/PIE.htc); }
.button:hover { background-color: #32d532; }
.button a { color: white; font-weight: bold; display: block; padding: 0 20px; }
.button .cta { color: white; font-weight: bold; display: block; padding: 0 20px; }
/* CTA button/link (Call-to-Action) */
.cta { }
/********** Utility classes **********/
.float-left { float: left; }
.float-right { float: right; }
.clear { clear:both; }
.display-none { display: none; }
.display-block { display: block; float:left; }
/********** Colors ************/
.color-blue { color: #1359f0; }
.color-green { color: #32c532; }
.color-gray { color: #919191; }
.color-vigience { color: #ab3436 }
/********** Fonts *************/
.font-normal { font-weight: normal; }
/************************************************************************************/
/************** Body + Container: Header, Menu, Content, Footer *********************/
/************************************************************************************/
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Body - 100% */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* body { color: #919191; font: 16px arial, helvetica, sans-serif; line-height: 115%; } */
body {
width: 100%;
color: #919191;
font: 16px "proxima-nova-1","proxima-nova-2",sans-serif;
line-height: 140%;
margin: 0;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Container - Header + Menu - 100% */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#container-header {
width: 100%;
padding: 0px;
padding-top: 20px;
position: fixed; top: 0px;
z-index: 999;
background-color: #EFF4FF;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Header - 85% - Max 1000px */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#header { width: 85%; max-width: 1000px; margin: 0px auto; }
#header-left { width: 50%; float: left; }
#header-left p { font-size: 80%; margin-top: -5px; margin-left: 3px; }
#header-left img.logo { width: 200px; }
#header-right { width: 50%; float: left; }
#flags { float: right; }
#flags p { float: right; }
#flags img { margin-left: 10px; }
#buttons p { float: right; margin-right: 3px; margin-left: 20px; font-size: 120%; }
#searchform { margin-top: 20px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Main Menu - 85% - Max 1000px */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.menu-main { width: 85%; max-width: 1000px; margin: 30px auto 0px; }
.menu-main ul { background: #1359f0; }
.menu-main li { display: inline-block; }
.menu-main li a { display: block; line-height: 34px; padding: 0px 15px; }
.menu-main li a { color: white; text-decoration: none; }
.menu-main li:last-child { float:right; background: #32c532; }
/* Clear floated "li" elements */
/* Parent Menu */
.menu-main > ul { width: 100%; list-style: none; padding: 0px; }
.menu-main > ul > li:hover > a { background: dodgerblue; color: white; }
/* Highlight current menu item */
.menu-main .current-menu-item { /* background: #c6d9f1; */ background: dodgerblue; }
.menu-main .current-menu-parent { background: dodgerblue; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Container - Content + Footer - 85 % - Max 1000px */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#container-content-footer { margin: 200px auto 20px; overflow:hidden; width: 85%; max-width: 1000px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Content */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Content without sidebars */
#content { }
/* Content with left or right sidebar */
#content-left, #content-right {
width: 77%; float: left;
}
#content-left {
padding-right: 2%;
border-right: 1px solid lavender;
}
#content-right {
padding-left: 4%;
border-left: 1px solid lavender;
}
/* Content with 2 sidebars */
#content-middle {
width: 68%; padding-left: 3%; padding-right: 3%; float: left;
border-left: 1px solid lavender; border-right: 1px solid lavender;
}
/* Sidebar - normal */
#content-sidebar-left, #content-sidebar-right {
width: 23%; float: left;
font-size: 85%; line-height: 130%;
}
#content-sidebar-left { padding-right: 2%; }
#content-sidebar-right { padding-left: 2%; }
/* Sidebar - small */
#content-sidebar-left-small, #content-sidebar-right-small {
width: 16%; float: left; line-height: 130%;
}
#content-sidebar-left-small {
padding-right: 1%;
}
#content-sidebar-right-small {
padding-left: 1%;
font-size: 85%;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Footer */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#footer { margin-top: 60px; margin-bottom: 30px; font-size: 90%; }
#footer-heading { margin-bottom: 20px; }
#footer-heading p.heading { color: #1359f0; font-size: 120%; font-weight: bold; text-align: right; }
#footer-heading p { text-align: right; }
#footer-left { width: 35%; float: left; margin-top: -50px; }
#footer-left .top { width: 100%; }
#footer-left .bottom { width: 100%; margin-top: 20px; }
/* Footer Menu */
#footer-right { width: 65%; font-size: 90%; line-height: 150%; float: left; }
#footer-right .element { width: 25%; padding-left: 3%; float: right; }
#footer-right .element .heading { font-weight: bold; margin-bottom: 7px; margin-left: 40px; }
.menu-footer { }
.menu-footer ul { list-style-type: none; list-style-image: none; padding-left: 0px; }
.menu-footer li { margin-left: 40px; }
/************************************************************************************/
/************************** Page - Search Results ***********************************/
/************************************************************************************/
#search-query { font-size: 25px; margin-top: 50px; }
#search-query p span { color: orange; }
#search-results { margin-top: 50px; }
#search-results .search-result { margin-top: 40px; }
#search-results .search-result .post-header { font-weight: bold; }
#search-results .search-result .post-content { margin-top: 20px; }
#search-results #no-results { margin-top: 50px; font-weight: bold; }
/************************************************************************************/
/****************************** Page - Homepage *************************************/
/************************************************************************************/
#home h2 { font-size: 150%; }
/********** Slider ***********/
.flexslider { box-shadow: none !important; -webkit-box-shadow: none !important; }
.flexslider { -moz-box-shadow: none !important; -o-box-shadow: none !important; }
.flexslider { border-radius: 0 !important; -webkit-border-radius: 0 !important; }
.flexslider { -moz-border-radius: 0 !important; -o-border-radius: 0 !important; }
#slider { border: none; margin-bottom: 0px; }
/* Reset width: 100% from flexslider settings */
#slider .image img { width: auto; }
#slider ul.slides { height: 300px; }
#slider ul.slides li { height: 100%; }
#slider ul.slides li .left { width: 42%; height: 100%; float: left; }
#slider ul.slides li .right { width: 53%; height: 100%; margin-left: 5%; float: left; }
#slider ul.slides li .right .text { height: 73%; }
#slider ul.slides li .right .buttons { height: 27%; }
#slider ul.slides li .right .buttons > a { font-size: 120%; line-height: 34px; }
#slider ul.slides li .right p { margin-top: 25px; font-size: 120%; }
#slider ul.slides li .right .button { margin-left: 20px; }
/* Navigation Buttons */
#slider ol.flex-control-nav { }
#slider ol.flex-control-nav li { margin-left: 20px; }
/********* Feature (page section) *********/
.feature { margin-top: 80px; }
.feature h2 { text-align: center; }
.feature .subheader { font-size: 130%; line-height: 130%; text-align: center; }
.feature .left { width: 44%; padding: 0 3%; float: left; margin-top: 30px; }
.feature .right { width: 47%; margin-left: 3%; float: left; margin-top: 60px; }
.feature .right ul { list-style-image: none; line-height: 150%; }
.feature > p { text-align: center; margin-top: 20px; }
/********** Features icons (icon box) **********/
#home .features-icons { margin-top: 70px; text-align: center; margin-top: 50px; padding: 20px 0;}
#home .features-icons .icon-container { width: 70%; margin: auto; margin-top: 40px; }
#home .features-icons .icon-container .icon { width: 50%; float: left; margin-top: 10px; }
#home .features-icons .icon-container .icon .text { width: 60%; float: left; padding: 5%; }
#home .features-icons .icon-container .icon .image { width: 40%; float: left; }
/************************************************************************************/
/****************************** Page - Features *************************************/
/************************************************************************************/
/* Sidebar: features */
#sidebar-features .section { margin-top: 15px; }
#sidebar-features .section p { margin-top: 10px; }
#sidebar-features .section h3 { color: #919191; font-weight: bold; }
/* Features (page section) */
#features .feature-boxes { margin-top: 40px; }
#features .feature-boxes ul { list-style-image: none; margin: 20px 0; }
#features .feature-box { padding: 3%; margin-top: 20px; }
#features .feature-box .text { width: 50%; float: left; }
#features .feature-box .text p { margin-top: 20px; }
#features .feature-box > .image { width: 48%; float: left; margin: 0% 1% 0% 1%; } /* Fix bug with ">" */
/* Features icons (icon box) */
#features .features-icons { margin-top: 50px; }
#features .features-icons .icon-container { margin-top: 20px; }
/* Bug - Problem with resizing when width is 25% */
#features .features-icons .icon-container .icon { width: 23%; padding-right: 5%; float: left; }
#features .features-icons .icon-container .icon a { display: block; } /* because text-align: center; */
#features .features-icons .icon-container .icon h3 { color: #32c532; }
#features .features-icons .icon-container .icon img { margin-top: 10px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Sub-Pages: Feature pages */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#features .benefits-summary { margin-top: 50px; }
#features .benefits-summary ul { margin-top: 30px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Sub-Page: Introduction */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#introduction .text{ width: 50%; padding-right: 5%; float:left; margin-top: 40px; }
#introduction .text .section { margin-top: 20px; }
#introduction .text .section h2 { margin-bottom: 20px; }
#introduction .text .section li { line-height: 30px; }
#introduction .video{ width: 50%; padding-right: 5%; float:left; margin-top: 40px; }
#introduction .video img { margin-top: 50px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Sub-Page: Capabilities */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#capabilities { margin-top: 50px; }
#capabilities .element-container { margin-top: 60px; }
#capabilities .element { margin-top: 20px; }
#capabilities .element-left { width: 30%; float: left; font-weight: bold; }
#capabilities .element-right { width: 70%; float: left; padding-left: 3%; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Sub-Page: Functionalities */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#functionalities .element-container { width: 100%; margin: 50px auto 0 auto; }
#functionalities .features { margin-top: 20px; }
#functionalities .features .element { margin-top: 40px; }
#functionalities .features .element-left { color: #1359f0; width: 20%; float: left; font-weight: bold; }
#functionalities .features .element-left ul { list-style-image: url('/wp-content/images/list-style-checkmark-blue-16.png'); }
#functionalities .features .element-left ul { padding-left: 30px; }
#functionalities .features .element-right { width: 80%; float: left; }
#functionalities .features .element-right ul { list-style-type: none; list-style-image: none; }
#functionalities .features .element-right .section-left { width: 50%; float: left; }
#functionalities .features .element-right .section-right { width: 50%; float: left; }
/************************************************************************************/
/****************************** Page - App Store ************************************/
/************************************************************************************/
#sidebar-appstore { padding: 10px; padding-left: 0; }
#sidebar-appstore p { margin-top: 10px; }
#sidebar-appstore .section { margin-bottom: 20px; }
#sidebar-appstore .section a { margin-top: 10px; clear: both; }
/* For all solution boxes */
#appstore .solution-box { width: 100%; border: 1px solid lavender; padding: 3%; }
/* Main solution box */
.apps-quixilver { padding: 3%; margin-top: 30px; }
.apps-quixilver .solution-box { margin-top: 20px; padding: 3%; }
.apps-quixilver .solution-box .quixilver-app-logo { width: 10%; float: left; padding-right: 2%; }
.apps-quixilver .solution-box .description { width: 90%; float: left; }
.apps-quixilver .solution-box .description .button { margin-top: 20px; }
.apps-quixilver .solution-box p { margin-top: 10px; }
/* Applications */
.apps-quixilver-plus { padding: 3%; margin-top: 20px; }
.apps-quixilver-plus > p { margin-top: 15px; }
.apps-quixilver-plus .wrapper-box-left { float: left; width: 50%; padding-right: 1%; }
.apps-quixilver-plus .wrapper-box-right { float: right; width: 50%; padding-left: 1%; }
.apps-quixilver-plus .solution-box { height: 210px; margin-top: 20px; float: left; }
.apps-quixilver-plus .solution-box { font-size: 85%; }
.apps-quixilver-plus .solution-box .quixilver-app-logo { width: 20%; float: left; }
.apps-quixilver-plus .solution-box .description { width: 80%; float: left; }
.apps-quixilver-plus .solution-box .description h3 { margin-top: 10px; margin-bottom: 20px; font-size: 120%; }
.apps-quixilver-plus .solution-box .description h3 a { color: #1359f0; }
.apps-quixilver-plus .solution-box .description ul { list-style-image: none; line-height: 125%; margin-top: 10px; }
.apps-quixilver-plus .solution-box .description a { margin-top: 20px; }
/* Customized QuiXilver */
.apps-quixilver-customized { padding: 3%; margin-top: 20px; }
.apps-quixilver-customized p { margin-top: 15px; }
.apps-quixilver-customized a { display: block; margin-top: 5px; }
/************************************************************************************/
/****************************** Page - Apps *****************************************/
/************************************************************************************/
/* CTA button */
#app .button { margin-top: 20px; }
/* Application Description */
#app .app-boxes { margin-top: 40px; }
#app .app-boxes .app-box { padding: 20px; margin-bottom: 20px; }
#app .app-boxes .app-box h2 { font-size: 120%; }
#app .app-boxes .app-box > .image { width: 40%; padding-right: 4%; float: left; }
#app .app-boxes .app-box .text { width: 60%; float: left; }
#app .app-boxes .app-box .text ul { list-style-image: none; margin-top: 20px; }
#app .app-boxes .app-box .text li { margin-top: 10px; }
/* What is the focus of this app */
#app .focus { margin-top: 20px; }
#app .focus .focus-word { font-size: 120%; font-weight: bold; }
/* Contact link */
#app .contact { margin-top: 30px; color: #1359f0; }
/************************************************************************************/
/****************************** Page - Price ****************************************/
/************************************************************************************/
/* Table */
#price .tables .head { height: 100px; }
#price .tables .head h2 { font-size: 150%; font-weight: bold; margin-bottom: 20px; }
#price .tables .body { margin-top: 30px; }
#price .tables .body p:nth-child(odd) { /* See background settings for several elements */ }
#price .tables .table-features { width: 25%; padding-right: 2%; float: left; }
#price .tables .table-features { font-weight: bold; text-align: left; }
#price .tables .table-features .body p { display: block; height: 60px; padding: 10px; }
#price .tables .table-category { width: 25%; padding-right: 2%; float: left; text-align: center; }
#price .tables .table-category .head a { font-size: 130%; }
#price .tables .table-category .body p { display: block; height: 60px; padding: 20px; }
#price .tables .table-link { width: 25%; padding-right: 2%; float: left; }
#price .tables .table-link { margin-top: 30px; text-align: center; }
#price .tables .table-link a { font-size: 130%; }
#price .tables .table-link p { margin-top: 10px; margin-bottom: 10px; }
/* Note - should belond inside .tables element */
#price .notes { font-size: 80%; }
/* Contact */
#price .contact { margin-top: 50px; }
#price .contact .header { width: 25%; float: left; margin-top: 10px; }
#price .contact .links { width: 75%; float: left; padding-left: 1%; margin-top: 10px; }
#price .contact .button { margin-top: 20px; }
/* Features */
#price .feature-boxes { margin-top: 50px; }
#price .feature-boxes .feature-box { width: 25%; padding-right: 1%; float:left; }
#price .feature-boxes .feature-box { font-size: 70%; margin-top: 20px; }
#price .feature-boxes .feature-box h3 { font-size: 120%; }
#price .feature-boxes .feature-box p { margin-top: 10px; }
/************************************************************************************/
/****************************** Page - Customer *************************************/
/************************************************************************************/
/* Quote boxes */
#customers h2 { margin-top: 50px; text-align: right; }
.customer-box-1 { width: 50%; padding-right: 10%; float: left; margin-top: 30px; }
.customer-box-2 { width: 50%; padding-right: 10%; float: left; margin-top: 30px; }
.customer-box-3 { width: 50%; padding-right: 10%; float: left; margin-top: 30px; }
.customer-box-4 { width: 50%; padding-right: 10%; float: left; margin-top: 30px; }
.customer-box-5 { width: 50%; padding-right: 10%; float: left; margin-top: 30px; }
.customer-box-6 { width: 50%; padding-right: 10%; float: left; margin-top: 30px; }
.customer-box-7 { width: 50%; padding-right: 10%; float: left; margin-top: 30px; }
/* Quote content */
#customers .quote { color: cornflowerblue; }
#customers .company { width: 100%; padding-right: 10%; float: right; margin-top: 20px; }
#customers .company { font-size: 80% }
#customers .company .logo { width: 30%; float: left; }
#customers .company .person { width: 70%; padding-left: 10%; float: left; }
/************************************************************************************/
/****************************** Page - About Us *************************************/
/************************************************************************************/
/* Sidebar left contains menu */
#sidebar-about-us-left .menu-about-us a { color: #919191; }
#sidebar-about-us-left .menu-about-us ul { list-style-type: none; list-style-image: none; padding-left: 0px; }
#sidebar-about-us-left .menu-about-us li { margin-bottom: 20px; }
/* Highlight current menu item */
#sidebar-about-us-left .menu-about-us .current-menu-item a { color: #1359f0; font-weight: bold; }
/* Sidebar right */
#sidebar-about-us-right h2 { margin-bottom: 5px; }
#sidebar-about-us-right .section { /* border: 1px solid lavender; */ padding: 10px; margin-bottom: 15px; }
#sidebar-about-us-right .section p { margin-top: 15px; }
/* Content */
#about-us ul { color: #1359f0; margin-top: 20px; }
#about-us ul { list-style-image: url('/wp-content/images/list-style-checkmark-blue-10.png'); }
#about-us p { margin-top: 20px; }
#about-us h2 { margin-top: 30px; }
#about-us img { display: block; margin-top: 20px; }
/************************************************************************************/
/**************************** Page - Blog (category) *******************************/
/************************************************************************************/
/* Social Sharing Buttons */
.ssba { float: right; margin-top: 15px; }
/* Sidebar */
#sidebar-news .section { margin-top: 20px; }
#sidebar-news .section a { margin-top: 15px; }
#sidebar-news .section p { margin-top: 15px; }
/* News flash */
#news-flash { width: 100%; }
#news-flash .container { margin: 20px 0px; border: 4px solid lavender; padding: 10px; height: 50px;}
/* Content */
#news .post-title a { font-size: 125%; color: #1359f0; }
#news .post-content { width: 100%; margin-top: 10px; }
#news .author { font-size: 80%; }
/* Latest post (should be merged with #posts) */
#news #latest-post { margin-top: 50px; }
#news #latest-post .text { width: 60%; padding: 2%; float: left; }
#news #latest-post .image { width: 40%; float: left; }
#news #latest-post .image a { display: block; }
/* width and height has to be set(reset) to initial value because
* wordpress hard-codes these attributes in the ![]()
tag,
* -> if set width manually then also set height needs to be reset */
#news #latest-post .image img { width: auto; height: auto; padding-left: 10%;}
/* Posts */
#news #posts { margin-top: 50px; font-size: 90%; }
#news #posts .post { margin-top: 30px; }
#news #posts .post .image { width: 30%; padding-right: 5%; float: left; }
/* width and height has to be set(reset) to initial value because
* wordpress hard-codes these attributes in the ![]()
tag,
* -> if set width manually then also set height needs to be reset */
#news #posts .post .image img { width: auto; height: auto; }
#news #posts .post .text { width: 70%; float: left; }
/************************************************************************************/
/**************************** Page - Single Post page ******************************/
/************************************************************************************/
/* Sub-page: Single Post */
#single-post h2 { margin-top: 40px; }
#single-post p { margin-top: 20px; }
#single-post ul { margin-top: 20px; }
#single-post li { margin-top: 10px; }
#single-post img { display: block; margin-top: 20px; }
#single-post .left { display: block; width: 55%; margin-right: 5%; float: left; }
#single-post .right { display: block; width: 35%; margin-right: 5%; float: left; }
/************************************************************************************/
/****************************** Page - QuiXilver Security ***************************/
/************************************************************************************/
#quixilver-security h2 { margin-top: 40px; }
#quixilver-security p { margin-top: 15px; }
#quixilver-security ul { margin-top: 20px; list-style-image: none; padding-left: 40px; }
#quixilver-security li { margin-top: 10px; }
#quixilver-security .security-features { margin-top: 25px; }
#quixilver-security .security-features .header { background: whitesmoke; padding: 20px; }
#quixilver-security .security-features .header h2 { margin-top: 0px; }
#quixilver-security .security-features .features { margin-top: 10px; padding: 10px; background: whitesmoke; }
/************************************************************************************/
/****************************** Pages - Landing Pages *******************************/
/************************************************************************************/
/* Page - Productivity */
#landing-page-productivity { font-size: 18px; font-family: "Open Sans", sans-serif; }
#landing-page-productivity h2 { font-weight: bold; }
#landing-page-productivity p { margin-top: 20px; }
#landing-page-productivity section { margin-top: 50px; }
#landing-page-productivity ul { }
#landing-page-productivity li { margin-top: 20px; list-style-image: none; }
#landing-page-productivity .cite-text { width: 70%; font-style: italic; font-family: Arial, sans-serif; }
#landing-page-productivity .cite-name { width: 30%; float: right; margin-top: 10px; }
#landing-page-productivity .image-one { float: left; width: 50%; padding: 5% 0%; }
#landing-page-productivity .text-one { float: left; width: 50%; }
#landing-page-productivity .image-two { float: left; width: 40%; padding: 0% 5%; }
#landing-page-productivity .text-two { float: left; width: 60%; padding: 10% 0%; }
#landing-page-productivity .image-three { float: left; width: 50%; padding: 5% 0%; }
#landing-page-productivity .text-three { float: left; width: 50%; }
#landing-page-productivity h3 { margin-bottom: 20px; }
#landing-page-productivity .video { float: left; width: 50%; }
#landing-page-productivity .pdf { float: left; width: 50%; }
#landing-page-productivity .video p { margin-top: 0px; }
#landing-page-productivity .pdf p { margin-top: 0px; }
/* Page: Try for free or buy && Get app for free */
#landing-page p { margin-top: 20px; }
#landing-page .section-full-width { margin-bottom: 40px; }
#landing-page .section-small-width { max-width: 600px; margin-bottom: 40px; }
#footer-landing-page { margin-top: 50px; }
#footer-landing-page .bring-people-together { width: 100%; }
#footer-landing-page .bring-people-together p.heading { color: #1359f0; font-size: 120%; }
#footer-landing-page .bring-people-together p.heading { font-weight: bold; text-align: right; }
#footer-landing-page .bring-people-together p { text-align: right; margin-top: 5px !important; }
#footer-landing-page .feature-box { width: 100%; margin-top: 40px; }
#footer-landing-page .feature-box { font-size: 80%; line-height: 120%; }
#footer-landing-page .feature-box .element { width: 22%; margin-right: 3%; float: left; }
#footer-landing-page .feature-box .element p { margin-bottom: 20px; }
#try-for-free-or-buy .button { margin-top: 20px; }
#try-for-free-or-buy .buying-options{ margin-top: 20px; }
#try-for-free-or-buy .buying-options .option { margin-top: 40px; }
#try-for-free-or-buy .buying-options .option .left { width: 40%; float:left; }
#try-for-free-or-buy .buying-options .option .left p br { display: none; }
#try-for-free-or-buy .buying-options .option .left h3 { font-size: 120%; }
#try-for-free-or-buy .buying-options .option .left p { margin-top: 10px; }
#try-for-free-or-buy .buying-options .option .right { width: 60%; padding-left: 5%; float:left; }
#try-for-free-or-buy .buying-options{ margin-top: 20px; }
#try-for-free-or-buy .buying-options{ margin-top: 20px; }
#get-app-for-free { }
/************************************************************************************/
/******************************* Page - Contact Form ********************************/
/************************************************************************************/
/* Form Wrapper */
.ninja-forms-cont {
margin-left: 1px; /* Box shadow should be fully visible */
width: 90%;
max-width: 500px;
}
/* Success Message */
.ninja-forms-cont .ninja-forms-success-msg { color: green; margin-top: 30px; }
/* Hide Error Message in header */
.ninja-forms-cont .ninja-forms-error-msg { display: none; }
/* Error Message under a field */
.ninja-forms-cont .ninja-forms-field-error { color: red; margin-top: 10px; }
/* Requred Fields Notification */
.ninja-forms-required-items {
margin: 20px 0px;
}
/* Label */
.ninja-forms-cont label {
font-weight: normal !important;
}
/* All fields :focus */
.ninja-forms-cont .myForm:focus {
outline: 0;
border-color: rgba(82,168,236,.8);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1),0 0 8px rgba(82,168,236,.6);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1),0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 3px rgba(0,0,0,.1),0 0 8px rgba(82,168,236,.6);
}
/* General Height */
.ninja-forms-cont input.myForm,
.ninja-forms-cont select.myForm,
.ninja-forms-cont textarea.myForm {
height: 30px;
}
/* Textarea */
.ninja-forms-cont textarea.myForm { height: 100px; }
/* Input fields */
.ninja-forms-cont input.myForm {
display: inline-block;
padding: 4px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 18px;
color: black;
border: 1px solid #ccc;
border-radius: 0px;
-moz-transition: border .2s linear,box-shadow .2s linear;
-o-transition: border .2s linear,box-shadow .2s linear;
-webkit-transition: border .2s linear,box-shadow .2s linear;
transition: border .2s linear,box-shadow .2s linear;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* Submit button */
.ninja-forms-cont input[type=submit].myForm {
float: right;
width: auto;
text-align: center;
cursor: pointer;
background-color: #32c532;
color: white;
padding: 7px 20px;
text-decoration: none;
transition: all .5s ease;
-webkit-transition: all .5s ease; -moz-transition: all .5s ease;
text-shadow: none; background-image: none;
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
border: 0; border-top: 0; border-bottom: 0;
border-right: 0; border-left: 0;
position: relative; display: block;
font: 16px arial, helvetica, sans-serif;
behavior: url(/wp-content/tools/pie/PIE.htc);
}
/* Submit button :hover */
.ninja-forms-cont input[type=submit]:hover { background-color: #32cd30; }
/* Footer */
.content-footer { margin-top: 50px; }
.content-footer p { margin-bottom: 20px; }
/************************************************************************************/
/****************************** Snippets ********************************************/
/************************************************************************************/
/* Snippet - call us */
.snippet .call-us .element { width: 30%; margin-right: 3%; float: left; }
/* Snippet - feature-boxes */
.snippet .feature-boxes { padding: 20px 0; }
.snippet .feature-boxes { margin: 80px auto 0 auto; }
.snippet .feature-boxes h2 { text-align: center; }
.snippet .feature-boxes .element { width: 25%; padding-right: 3%; margin-top: 20px; float: left; line-height: 120%; }
.snippet .feature-boxes .element h3 { margin-bottom: 20px; margin-left: 10px; }
.snippet .feature-boxes .element a { margin-top: 10px; margin-left: 20px; font-size: 80%; }
.snippet .feature-boxes .element li { margin-top: 10px; font-size: 80%; }
/* Snippet - video */
.snippet .video-quixilver .subheader { font-size: 150%; }
.snippet .video-quixilver .subheader { margin-top: 20px; text-align: center; }
/*****************************************************************************************/
/********************************* IE Fixes **********************************************/
/*****************************************************************************************/
/* lte IE9: remove border of images within tags */
a img {
border: none;
}
/*****************************************************************************************/
/********************************* Media quearies ****************************************/
/*****************************************************************************************/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Large fixed - container max-width: 1000px / width: 85% */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* At 1000px (85%), left and right margin is 90px (7,5%) -> 1180px */
/* Including scrollbar -> total: 1200px */
@media screen and (min-width: 1200px) {
/* Debug */
/* #container-header::after {
content: "Large fixed";
}
*/
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Large floating - container max-width: 1000px / width: 100% */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1199px) {
/* Debug */
/* #container-header::after {
content: "Large floating";
}
*/
/**************** General *******************/
/* Container widths */
#header, .menu-main, #container-content-footer {
width: 98%;
}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Medium */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 999px) {
/* Debug */
/* #container-header::after {
content: "Medium";
}
*/
/**************** General *******************/
/* Container widths */
#header, .menu-main, #container-content-footer {
width: 98%;
}
#container-content-footer {
margin-top: 230px;
}
#content-right, #content-left, #content-middle {
width: 98%;
border: none;
}
/* Hide sidebars */
#content-sidebar-left, #content-sidebar-right,
#content-sidebar-left-small, #content-sidebar-right-small {
display: none;
}
/* Menu */
.menu-main li:last-child { display: none; }
.menu-main > ul {background: none; }
.menu-main li {
width: 24%;
background: #1359f0;
border: 1px solid grey;
margin-top: 3px;
}
/* Footer */
#footer-left { float:none; }
#footer-left .top p { display: none; }
#footer-right { float:none; width: 100%; margin-top: 20px;}
#footer-right .element { padding: 0px; }
#footer-right .element .heading { margin-left: 0px; }
.menu-footer li { margin-left: 0px; }
.menu-footer li a { display: block; line-height: 40px; }
/**************** Page - Homepage *******************/
.snippet .feature-boxes { display: none; }
/**************** Page - Price *******************/
#price .tables .table-features .body p span { display: none; }
#price .tables .table-features .body p { height: 100px; }
#price .tables .table-category .body p { height: 100px; }
#price .tables .head { height: 120px; }
#price .feature-boxes { display: none; }
#price .contact .button { display: none; }
#price .contact .header { width: 40%; }
#price .contact .links { width: 60%; }
/**************** Page - About us *******************/
#about-us h1 { display: none; }
#content-sidebar-left-small {
display: inherit;
float: none;
width: 100%;
}
#content-sidebar-left-small li {
width: 30%;
display: inline-block;
padding-left: 3%;
padding-right: 3%;
line-height: 30px;
}
#sidebar-about-us-left .menu-about-us a { color: #32cd32; }
/**************** Page - Blog ***************************/
#news-flash { display: none; }
/**************** Landing Page - ALL *******************/
#footer-landing-page .feature-box { display: none; }
/**************** Landing Page - Productivity *******************/
#landing-page-productivity .cta.float-right { float: left; }
#landing-page-productivity .image-one img.float-right { float: none; }
#landing-page-productivity .image-two img.float-right { float: none; }
#landing-page-productivity .image-three img.float-right { float: none; }
#landing-page-productivity .image-three p.float-right { float: none; }
#landing-page-productivity .image-one { width: 100%; float: none; }
#landing-page-productivity .image-two { display: none; }
#landing-page-productivity .image-three { width: 100%; float: none; }
#landing-page-productivity .text-one { width: 100%; float: none; }
#landing-page-productivity .text-two { width: 100%; float: none; padding: 0px; }
#landing-page-productivity .text-three { width: 100%; float: none; padding: 0px; }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Small */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 700px) {
/* Debug */
/* #container-header::after {
content: "Small";
}
*/
/**************** General *******************/
/* Container widths */
#container-header {
position: inherit;
}
#container-content-footer {
margin-top: 20px;
}
/* Header */
#header label { display: none; }
#header-left { width: 60%; }
#header-right { width: 40%; }
#searchsubmit {
display: block;
margin-top: 10px;
}
/* Content - Hide all H1 */
#container-content-footer h1 { display: none; }
/* Footer */
#footer-left { margin-top: 20px; width: 100%; }
#footer-right { float:none; width: 100%; margin-top: 20px;}
/**************** Page - Homepage *******************/
#slider { display: none; }
#slider + .feature { margin-top: 20px; } /* Correct margin */
#slider + .feature h2 { display: none; }
#home .feature .left { width: 100%; float: none; text-align: center; }
#home .feature .right { width: 100%; float: none; }
#home .features-icons h2 + p { margin-top: 10px; }
#home .features-icons .icon-container.icon-container { width: 100%; }
.feature .subheader { margin-top: 10px; }
/**************** Page - Features *******************/
#features .features-icons .icon-container .icon h3 { display: none; }
#features .feature-box .text { width: 100%; }
#features .feature-box > .image { display: none; }
/**************** Page - App Store *******************/
.apps-quixilver .solution-box .quixilver-app-logo { width: 100%; float: none; }
.apps-quixilver .solution-box .description { width: 100%; float: none; }
.apps-quixilver-plus .solution-box .description ul { display: none; }
.apps-quixilver-plus .solution-box .description p { display: none; }
.apps-quixilver-plus .solution-box .quixilver-app-logo {
width: 100%;
float: none;
height: 60px;
}
.apps-quixilver-plus .solution-box .description {
width: 100%;
float: none;
}
.apps-quixilver-plus .solution-box .description h3 {
height: 40px;
}
/**************** Page - Apps *******************/
#app .app-boxes .app-box > .image { display: none; }
#app .app-boxes .app-box .text { width: 100%; }
/**************** Page - Price *******************/
#price .tables .head a + p { display: none; }
#price .contact .header { width: 50%; }
#price .contact .links { width: 50%; }
/**************** Page - Customers *******************/
.customer-box-1 { width: 100%; }
.customer-box-2 { width: 100%; }
.customer-box-3 { width: 100%; }
.customer-box-4 { width: 100%; }
.customer-box-5 { width: 100%; }
.customer-box-6 { width: 100%; }
.customer-box-7 { width: 100%; }
#customers h1 {display: none; }
#customers h2 {display: none; }
/**************** Page - About us *******************/
#content-sidebar-left-small li {
width: 48%;
}
/**************** Page - Blog *******************/
#single-post .left { float:none; width: 100%; }
#single-post .right { float:none; width: 100%; }
/**************** Landing Page - Try for free or buy *******************/
#try-for-free-or-buy .buying-options .option .left {
width: 40%;
}
#try-for-free-or-buy .buying-options .option .right {
width: 60%;
}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Extra Small */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 500px) {
/* Debug */
/* #container-header::after {
content: "Extra Small";
}
*/
/**************** General *******************/
/* Header */
#header label { display: none; }
#header-left p { display: none; }
#header-right { width: 100%; float:none; }
#header-right div { float: none; width: 100%; }
#header-right #buttons { display: none; }
#searchsubmit { display: inline; }
/* Menu */
.menu-main li { width: 48%; }
/* Footer */
#footer-right .element { width: 33%; }
#footer-right .element:nth-child(2) { display: none; }
/**************** Page - Homepage *******************/
#home .features-icons p { display: none; }
#home .features-icons .icon-container .icon { width: 100%; }
#home .features-icons .icon-container .icon .text { width: 50%; }
#home .features-icons .icon-container .icon .text br { display: none; }
#home .features-icons .icon-container .icon .image { width: 50%; }
/**************** Page - App *******************/
#app .app-boxes .app-box h2 br { display: none; }
/**************** Page - Customers *******************/
/**************** Page - Price *******************/
#price .tables .head {
border: 1px solid grey;
margin-top: 10px;
padding: 5%;
}
#price .tables .head br { display: none; }
#price .tables .body { display: none; }
#price .tables .table-features { display: none; }
#price .tables .clear + .table-link { display: none; }
#price .tables .table-category { width: 100%; float: none; }
#price .tables .table-link { width: 100%; float: none; }
#price .notes { display: none; }
#price .contact .header { width: 100%; float: none; }
#price .contact .link { width: 100%; float: none; }
/**************** Page - Blog *******************/
#news #latest-post .text { width: 100%; float: none; }
#news #latest-post .image { display: none; }
#news #posts .post .text { width: 100%; float: none; }
#news #posts .post .image { display: none; }
#news .post .post-content { display: none; }
/**************** Page - Security *******************/
#quixilver-security ul { padding-left: 20px; }
/**************** Landing Page - Get app for free *******************/
#get-app-for-free .section-small-width p br { display: none; }
/**************** Landing Page - Try for free or buy *******************/
#try-for-free-or-buy .buying-options .option .left {
float: none; width: 100%; text-align: center;
}
#try-for-free-or-buy .buying-options .option .right {
float: none; width: 100%;
text-align: center;
padding-left: 0px;
}
/**************** Snippet - Call-us *******************/
.snippet .call-us .element { float: none; width: 100%; }
}