/* ----------------------------------------------------------
   CSS for Qt Project Rawdog
---------------------------------------------------------- */

html { height: 100%; overflow-x: hidden !important;  }
* { box-sizing: border-box; -moz-box-sizing: border-box; }

/* Web fonts ---------------------------------------------- */

@font-face {
  font-family: 'Qt Icons';
  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.eot?-tgjuoj");
  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.eot?#iefix-tgjuoj") format("embedded-opentype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.woff?-tgjuoj") format("woff"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.ttf?-tgjuoj") format("truetype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/icomoon.svg?-tgjuoj#icomoon") format("svg");
  font-weight: normal;
  font-style: normal; }
/* titillium-web-regular - latin_latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.eot");
  /* IE9 Compat Modes */
  src: local("Titillium Web"), local("TitilliumWeb-Regular"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.eot?#iefix") format("embedded-opentype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.woff2") format("woff2"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.woff") format("woff"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.ttf") format("truetype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-regular.svg#TitilliumWeb") format("svg");
  /* Legacy iOS */ }
/* titillium-web-italic - latin_latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.eot");
  /* IE9 Compat Modes */
  src: local("Titillium WebItalic"), local("TitilliumWeb-Italic"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.eot?#iefix") format("embedded-opentype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.woff2") format("woff2"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.woff") format("woff"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.ttf") format("truetype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-italic.svg#TitilliumWeb") format("svg");
  /* Legacy iOS */ }
/* titillium-web-600 - latin_latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.eot");
  /* IE9 Compat Modes */
  src: local("Titillium WebSemiBold"), local("TitilliumWeb-SemiBold"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.eot?#iefix") format("embedded-opentype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.woff2") format("woff2"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.woff") format("woff"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.ttf") format("truetype"), url("//d33sqmjvzgs8hq.cloudfront.net/wp-content/themes/oneqt/assets/fonts/titillium-web-v4-latin_latin-ext-600.svg#TitilliumWeb") format("svg");
  /* Legacy iOS */ }

/* Header ---------------------------------------------- */

#navbar { box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.1); }
.no-rgba #menuextras li a:before { text-align: center; } /* Only for ie8 */

/* Images ---------------------------------------------- */

.responsive-image { width: 100%; height: auto; }
a.xmlbutton img { max-width: 16px; margin-right: 0.5em; display: inline; }

/* Typo ---------------------------------------------- */

body {
    background-color: #ffffff;
    color: #404244;
    font-family: "Titillium Web", Helvetica, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.625;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p { margin: 1em 0; }
a { color: #17a81a; text-decoration: none; }

h1, h2, h3 { margin: 1em 0; line-height: 1; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }

h2.itemtitle { font-size: 2.1875em; margin: -10px 0 0 0; font-weight: 300; }
article footer { font-size: 0.8em; color: #7c7c7c; margin-top: -0.4em; margin-bottom: 2em; }
article footer a { color: #7c7c7c; }

.content .wrapper aside { font-size: 0.8em;}
.content .wrapper aside h3 {
    font-size: 1.4em;
    font-weight: bold;
    margin: 1em 0 0.8em;
}
.content .wrapper aside a:visited,
.content .wrapper aside a {
    color: #44a51c;
    text-decoration: none;
    font-weight: bold;
}
.content .wrapper aside a:focus,
.content .wrapper aside a:hover {
    text-decoration: underline;
}

/* Structure ---------------------------------------------- */

.content {
    max-width: 100%;
    margin: 0 auto;
    padding-top: 120px;
    overflow-y: auto;
}
.content .wrapper {
    max-width: 1280px;
    padding: 0 10px;
    margin: 0 auto;
}

/* Main content ---------------------------------------------- */

.content .wrapper .content-column {
    width: 65%;
    float: left;
    padding: 0 68px; /* For date box */
    overflow-x: hidden;
}

div.day { position: relative; padding-top: 0; }
div.day > h2 {
    margin: 0;
    top: 2em;
    position: absolute;
    left: -68px;
}

h2 time {
    width: 48px;
    height: 48px;
    padding: 10px 0 0 0;
    font-size: 20.78px;
    text-transform: uppercase;
    line-height: 0.8em;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #41cd52;
    display: block;
}

h2 time:before, h2 time:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0 0;
    border-color: #ffffff transparent transparent transparent;
}
h2 time:after {
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    border-width: 0 0 8px 8px;
    border-color: transparent transparent #ffffff transparent;
}

#items .day:first-child h2 { top: 0; }
h2 time span { display: block; font-size: 11.08px; font-weight: normal; }

article { position: relative; padding: 3em 0 2em 0; border-bottom: 1px solid #E8E8E8; overflow-y: auto; }
#items .day:first-child article { padding-top: 0; }
#items .day:last-child article { margin-bottom: 3em; border-bottom: none; }
article div, article img { width: auto; max-width: 100%; height: auto; }
article img { display: block; margin: 1em 0; }

article ul { list-style-type: none; margin: 2em 0; padding: 0px; }
article ul li:before { content: "- ";  }
article ul li { padding: 0 0 .6em 2.5em; color: #7c7c7c; }
article ul li:last-child { padding: 0 0 0 2.5em; }

/* Aside ---------------------------------------------- */

.content .wrapper aside {
    width: 35%;
    float: left;
    padding-left: 68px;
    border-left: 1px solid #e8e8e8;
    overflow-x: hidden;
}
.content .wrapper aside ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.content .wrapper aside .rss-feed {
    display: block;
    background: url('images/icon-rss.png') 3px center no-repeat;
    line-height: 16px;
    height: 16px;
    padding-left: 30px;
}
.content .wrapper aside .icon-links {
    margin-top: 8px;
}
.content .wrapper aside .icon-links a {
    display: block;
    height: 37px;
    padding-left: 45px;
    line-height: 32px;
}
.content .wrapper aside .icon-links .qtproject-twitter a {
    background: url('images/icon-twitter.png') left top no-repeat;
}
.content .wrapper aside .icon-links .qtproject-gplus a {
    background: url('images/icon-gplus.png') left top no-repeat;
}
.content .wrapper aside .icon-links .qt-meetup a {
    background: url('images/icon-meetup.png') left top no-repeat;
}
.content .wrapper aside .recent-posts time {
    display: block;
    color: #7c7c7c;
    font-weight: normal;
    font-size: 13px;
    margin-top: -3px;
    margin-bottom: 2px;
}

footer {
  padding-top: 12px;
}

header h2 a {
    text-decoration: none;
    color: #262827;
    line-height: 1.2em;
}

/* Footer */

footer { padding-top: 12px; }
ul#menu-footer-menu > li > a { margin-bottom: 1.6em; }
ul#menu-footer-menu ul.sub-menu a { margin-bottom: 0.2em; }

.no-rgba #footerbar .theqtcompany { background: url("theqtcompany.png") no-repeat; } /* Only for ie8 */









/* -------------------------------------------------------
   ALL SCREENS UNDER 1200 ... 0px <-> 1199px
------------------------------------------------------- */
@media only screen and (max-width: 1120px) {

    /* Header */
    .main, .navbar-header, #footerbar>div { width: 100%; margin: 0; }
    #navbar .navbar-toggle { margin: 11px 0 9px 0; }

    /* Structure */
    .content { width: 100%; margin: 0; padding-top: 30px; }
    .content .wrapper { width: 100%; padding: 0 15px; margin: 0; }

}

/* -------------------------------------------------------
   TABLETS PORTRAIT ... 768px <-> 959px
------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 959px) {

    /* Main content ---------------------------------------------- */
    .content .wrapper .content-column { width: 70%; padding: 0 20px 0 60px; }
    div.day > h2 { left: -60px; }
    h2 time { width: 44px; height: 44px; }
    /* Aside ---------------------------------------------- */
    .content .wrapper aside { width: 30%; padding-left: 20px; }

}

/* -------------------------------------------------------
   SMARTPHONES PORTRAIT & LANDSCAPE ... 0 <-> 767px
------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    /* Main content & Aside ---------------------------------------------- */
    .content .wrapper .content-column, .content .wrapper aside  { width: 100%; padding: 0; float: none; }
    h2 time { display: none; }

}

/* -------------------------------------------------------
   SMARTPHONES LANDSCAPE ... 480px <-> 767px
------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* -------------------------------------------------------
   SMARTPHONES PORTRAIT ... 0px <-> 479px
------------------------------------------------------- */
@media only screen and (max-width: 479px) {
}
