/* Colors
	#00AAEA	Tinkerforge Blau
	#40BBE8	Tinkerforge Hover Blau
	#B3B3B3 Tinkerforge Grau
	#333 	Dunkeles Grau
	#ECECEC Hintergrund Grau
	#D6D6D6	Footer Grau
*/


/*	Breakpoints
	Min-Width: 520px, In Docu: 750px
	768px
	960px
	1280px
*/

@import 'normalize.css';
@import 'pure.css';
@import 'pure-grid.css';

/*@import 'pure-grid-old-ie.css';*/

* {
    box-sizing: border-box;
}

html {
    min-width: 520px;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: #575757;
    background-color: #444444;
}

@media only screen and (min-width: 960px) {
    html {
        /*font-size: 16px;*/
    }
}

body {
    color: #333;
    background-color: #fff;
    margin: 0;
}

a {
    color: #00AAEA;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.tf-main {
    width: 100%;
}

.tf-content {
    padding-bottom: 50px;
}

.tf-container {
    max-width: 1280px;
    margin: auto;
    padding: 0px 10px;
    overflow: visible;
}

.tf-container-plain {
    max-width: 1280px;
    margin: auto;
    overflow: visible;
}

.tf-container-video {
    max-width: 900px;
    margin: auto;
    padding: 0px 10px;
    overflow: visible;
}


.tf-odd-row {
    background-color: #FFF;
}

.tf-even-row {
    background-color: #F2F2F2;
}


/* Buttons */

.tf-button {
    display: inline-block;
    border: 2px solid #00AAEA;
    border-radius: 1.5em;
    line-height: 2em;
    padding: .25em 1.25em;
    background-color: transparent;
    color: #00AAEA;
}

.tf-odd-row .tf-button {
    background-color: #fff;
}

.tf-button:hover {
    text-decoration: none;
    color: #fff;
    background-color: #00AAEA;
    border-color: #00AAEA;
    box-shadow: 0 1px 4px #222;
    transition: all 0.25s;
}

.tf-center {
    margin: 0 auto;
}


/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 10px;
    font-weight: 400;
}

h1 {
    margin-top: 0px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    font-size: 2.57em;
    line-height: 1.11;
    border-bottom: 1px solid #b3b3b3;
}

h2 {
    margin-top: 30px;
    font-size: 2em;
    line-height: 1.14;
}

h3 {
    margin-top: 25px;
    font-size: 1.71em;
    line-height: 1.16;
}

h4 {
    margin-top: 20px;
    font-size: 1.42em;
    line-height: 1.2;
}

h5 {
    margin-top: 15px;
    font-size: 1.28em;
    line-height: 1.22;
}

h6 {
    margin-top: 10px;
    font-size: 1em;
    line-height: 1.28;
}

p {
    margin: 1em 0;
}


/* Header and nav */

.tf-header {
    font-family: 'Open Sans', sans-serif;
    background-color: #00AAEA;
    padding: 15px 0px 15px 0px;
}

.tf-header .tf-container {
    background-color: #00AAEA;
}


/* hide download button of menu on small screens */


/* align logo according to content */

@media only screen and (max-width: 960px) {
    #tf-nav-downloads {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    #tf-nav-downloads {
        display: inline-block;
    }
}

@media only screen and (max-width: 960px) {
	.shop-home-boxes {
		display: none;
  }
}

@media only screen and (min-width: 960px) {
	.shop-home-boxes {
		display: inline-block;
	}
}

/* main navigation */

.tf-nav-main {
    transition: background-color 0.15s;
    margin: 0;
    padding: 7px 0 0 0;
}

.tf-nav-main li {
    display: inline-block;
    text-align: center;
    margin-right: 20px;
}

.tf-nav-main li a {
    font-size: 1.3em;
    line-height: 2em;
    text-decoration: none;
    padding: 7px 7px 3px 7px;
    color: #fff;
    border-bottom: 3px solid #00AAEA;
}

.tf-nav-main li a:hover,
.tf-active-nav-item {
    border-bottom: 3px solid #fff !important;
    transition: border-bottom 0.2s;
}


/* Language Switch new */

.tf-ls-language {
    border-radius: 2em;
    text-align: center;
    cursor: pointer;
    height: 30px;
    padding-right: 5px;
    display: none;
}

.tf-ls-name {
    text-align: left;
}

.tf-ls-language a {
    line-height: 30px;
    color: #fff;
    text-decoration: none;
}

.tf-ls-language a:hover {
    text-decoration: underline;
}

.tf-ls-language:first-of-type { 
    margin-bottom: 5px; 
}

.active {
    display: block;
}

.tf-ls {
    margin-top: 12px;
    max-width: 100px;
    max-height: 50px;
}

.tf-ls:hover {
    margin-top: -6px;
}

.tf-ls:hover .tf-ls-language {
    background: #40BBE8;
    display: block;
}

.tf-ls-flag {
    float: left;
    background: #40BBE8;
    height: 30px;
    width: 30px;
    border-radius: 60px;
}

.tf-ls-flag img {
    width: 30px;
    height: 30px;
    padding: 9px 6px;
}

@media only screen and (max-width: 960px) {
    .tf-ls:hover .tf-ls-language {
        background: transparent;
    }
}


/* Content */

.tf-default-content {
    padding: 50px 0;
}


/* tables */

table {
    border-spacing: -0px;
    border-collapse: inherit;
    width: 100%;
    line-height: 1.8;
    border-bottom: 1px solid #B3B3B3;
}

table th {
    border: 0;
    border-top: 1px solid #B3B3B3;
    border-bottom: 1px solid #B3B3B3;
    font-size: 110%;
    text-align: left;
    padding: 2px 0 2px 7px;
}

table td {
    border: 0;
    padding: 2px 0 2px 7px;
    vertical-align: top;
}


/* Footer */

footer {
    font-size: 14px;
    background-color: #444444;
    width: 100%;
    height: 100%;
    min-height: 200px;
    /* background-color: #D6D6D6; */
    color: #333;
}

footer div {
    color: #fff;
    vertical-align: top;
}

footer h4 {
    margin-top: 40px;
    margin-bottom: 20px;
}

footer a {
    color: #ededed;
    text-decoration: none;
    margin-right: 5px;
    white-space: nowrap;
}

.tf-social-media {
    margin-top: 30px;
    padding: 30px 0;
    border-top: 1px solid #fff;
    display: inherit;
}

.tf-award-flag {
    font-size: 14px;
    width: 125px;
    float: right;
    padding: 20px 10px 10px 10px;
    background-color: #fff;
    color: #000;
    text-align: center;
    box-shadow: 0 1px 4px;
    border-top-style: solid;
    border-width: 1px;
    border-color: #E0E0E0;
}

.tf-award-flag img {
    width: 100%;
    margin: auto;
}

.tf-award-flag p {
    margin-bottom: 14px;
}


/* TOC-Tree */

.toctree {
    padding-right: 25px;
    margin-bottom: 50px;
}

.toctree ul {
    list-style: none;
    padding-left: 12px;
    padding-right: 5px;
    margin-left: 1px;
    margin-bottom: 12px;
}

.toctree li {
    line-height: 1.1em;
    margin: 0.6em 0;
    word-wrap: break-word;
}

@media only screen and (max-width: 960px) {
    .toctree li {
        margin: 0.8em 0;
    }
}

.toctree a {
    color: #333;
    transition: all 0.2s;
}


/*level1*/

.toctree-l1>a {
    font-size: 110%;
    font-weight: 600;
    padding-left: 20px;
    margin-left: -6px;
}

.toctree-l1>ul {
    margin-bottom: 15px;
    padding-left: 20px;
    border-left: 1px solid #B3B3B3;
}


/*level2*/

.toctree-l2>ul {
    /*	border-left: 1px solid #B3B3B3;		*/
}


/*level3*/

.toctree-l3>ul {
    /*	border-left: 1px solid #B3B3B3;	*/
}


/*level4*/

.toctree-l4>ul {
    /*	border-left: 1px solid #B3B3B3;		*/
}


/*level5*/

.toctree-l5>ul {
    /*	border-left: 1px solid #B3B3B3;		*/
}


/*level6*/

.toctree-l6>ul {
    /*	border-left: 1px solid #B3B3B3;		*/
}

li.current>a {
    color: #00AAEA;
}


/* Highlight Current Item */

.current-toc-highlight {
    padding-top: 1px;
    padding-bottom: 3px;
    background-color: #ecf0f1;
    border-top: 3px solid #00AAEA;
    border-radius: 2px;
    margin-top: 8px;
}


/* Hover effekte*/

.toctree a:hover {
    color: #00AAEA;
}

.tf-btn-more-up {
    color: #00AAEA;
    background-image: url("/static/img/icons/arrow-down.png");
    background-repeat: no-repeat;
    background-position: left center;
}

.tf-btn-more-down {
    background-image: url("/static/img/icons/arrow-right.png");
    background-repeat: no-repeat;
    background-position: left center;
}