/*
Style.css für rasiermesser-ratgeber.de
*/

/* Abstände aller Elemente in allen Browsern auf 0 setzen */
* { margin: 0; padding: 0; }
p { margin-bottom: 1em; }

/* Scrollbar im Firefox erzwingen*/
html { height: 101%; }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 300;
	src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url("RobotoCondensed-Light.ttf") format('truetype');
}
@font-face {
	font-family: "Roboto Condensed";
	font-style: italic;
	font-weight: 300;
	src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'), url("RobotoCondensed-LightItalic.ttf") format('truetype');
}

/* Normal */
@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url("RobotoCondensed-Regular.ttf") format('truetype');
}
@font-face {
	font-family: "Roboto Condensed";
	font-style: italic;
	font-weight: 400;
	src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'), url("RobotoCondensed-Italic.ttf") format('truetype');
}

/* Bold */
@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 700;
	src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url("RobotoCondensed-Bold.ttf") format('truetype');
}
@font-face {
	font-family: "Roboto Condensed";
	font-style: italic;
	font-weight: 700;
	src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'), url("RobotoCondensed-BoldItalic.ttf") format('truetype');
}

body { font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; font-size:100%; color:#444; background-color:#819e6f; }
body a, body a:visited { color: #6b7770; font-weight:bold; text-decoration:none; }
body a:hover { color:#75A57B; font-weight:bold; text-decoration:none; }
img { height:auto; max-width:97%; margin-top:5px; }
img.nob { border:none; height:auto; max-width:100%; }
.clear { clear:both; height:0; }

/** Header **/
#header { width:980px; margin:0 auto; background:#556f77; margin-top:1%; }
.header-text p { margin:0; }
.header-text { text-align:center; color:#FFF; font-size:150%; font-weight:bold; letter-spacing: 0.5px; padding:0.75%; font-family: "Roboto Condensed", Helvetica, Arial, sans-serif; }
@media only screen and (max-width:1015px) { #header { width:98%; } }
@media only screen and (max-width:830px) { .header-text { letter-spacing:1px; } }
@media only screen and (max-width:760px) { .htw {  font-size:100%; margin: 0 auto;letter-spacing:normal; } }
@media only screen and (max-width:410px) { .htw { display:none; } }

#page { width: 980px; margin:0 auto; margin-top:1%; margin-bottom:1%; display:table; }
@media only screen and (max-width:1015px) { #page { width:96%; } }

  
/** Content **/
#content { width:65.6166667%; /*652px;*/ float:right; padding:1% 1% 1% 1%; background: #FCFCFC; border-radius: 0.5em; }
@media only screen and (max-width:700px) { #content { float:none; border-left:none; width:96%;  margin:0 auto; padding:1% 2%; } }

#inhalt { display:table; margin:1em auto 1em auto; font-size:87.5%; padding:1.5% 2% 0 2%; font-weight:bold; background:#F4F0E7; border-bottom:2px solid #884500; text-align:center; }
#inhalt ol { margin:-10px 0 3px 0; list-style:none; }
#inhalt ol li { padding:3px 0; line-height:1.4;  }
#inhalt a { font-weight:normal; color:#884500; padding:5px 5px 5px 2px; }
#inhalt a:before { content: "\00BB"; padding-right: 5px; font-weight: normal; }
.inhalt a:hover, #inhalt a:focus { background:#D2DBE3; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }


#content h1 { font-size:190%; margin:0.5% 0 1% 0; color: #6b7770; font-family: "Open Sans Condensed"; text-transform:uppercase; letter-spacing: -0.02em; text-align:center; }
#content-text { line-height:1.5; text-align:justify; }
#content-text p { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; left:200px; font-size:110%; }
#content-text h2, #content-text h3 { margin: 5px 0px 0px 0px; margin-bottom: 6px; padding: 0 0 4px 0; font-size:120%; }
#content-text a { padding:0.15em 0.25em 0.15em 0.25em; background:#e5eecc; text-decoration:none; cursor:pointer; border-radius:0.5em; }
#content-text a:hover, .content-text a:focus { background:#FFED9A; text-decoration:none; cursor:pointer; border-radius:0.5em; }
#content-text a.noback { background:none; }
#content-text a.noback:hover { background:none; }
#content-text ul, #content-text ol { list-style: none; margin: 0 0 5px 21px; }
#content-text ul li, #content-text ol li { text-align:left; padding-bottom:7px; font-size:95%; }
#content-text img { height:auto; max-width:97%; margin-top:5px; border-radius:0.5em; }
#content-text img.last { border:none; height:auto; max-width:100%; }
#content-text img.nob { border:none; height:auto; max-width:100%; }

.desc { line-height:1.45; text-align:left; border-radius: 0.5em; padding:4px 6px; margin-bottom:1em; background:#FFED9A; font-weight:bold; font-size:100%; }
.oben { font-weight:normal; font-size:87.5%; float:right; background: #ffffcd; /* padding:15px 0; */ }
#content-text .oben a { font-weight: normal; color: #000; border: 1px solid #72b238; border-left: 4px solid #72b238; background: #ffffcd; padding: 3px 5px; }
.oben a:hover { font-weight:normal; }

/** Sidebar **/
#sidebar { width:30.8416667%; /*306px;*/ float:left; font-size:87.5%; font-weight:bold; margin:0 0 1% 0; }
@media only screen and (max-width:700px) { #sidebar { float:none; width:90%; margin: 0 auto; font-size:100%; margin-bottom:0.5em; } }
@media only screen and (max-width:310px) { #sidebar { font-size:87.5%; } }


.sb-bild { border:none; margin-top:10px; }
.sidebar-nav { margin-bottom:1em; background:#FCFCFC; border:0px solid #C4C5BD; border-radius: 0.5em; font-family: 'Open Sans Condensed', sans-serif; font-size: 115%; text-transform: uppercase; }
.sidebar-nav ul, .sidebar-nav ol { list-style-type:none; padding:0% 0; }
.sidebar-nav li { border-bottom:1px solid #d6e2e8; line-height:1.3; }
.sidebar-nav li:last-child { border:none;}
.sidebar-nav li:last-child a:hover { border-radius: 0 0 0.5em 0.5em;}
.sidebar-nav li a { display:block; padding:7px 5px; color: #75A57B; }
.sidebar-nav li:nth-child(2n+1) a { color: #6b7770; }
.sidebar-nav li a:hover, .sidebar-nav ul li a:focus { background: #FFED9A; text-decoration:none;}
.sb-ueb { background: #4c4f3e; color:#FFF; font-weight:bold; padding:7px 5px; border-radius: 0.5em 0.5em 0 0; }
@media only screen and (max-width:700px) { .sb-bild { display:block; margin:0 auto; margin-top:2em; } }
@media only screen and (max-width:700px) { .sidebar-nav { text-align:center; margin-top:1em; } .sidebar-nav ul { margin:2px 0; } .sidebar-nav ul li a { padding:9px; } .sidebar-nav ul li a:before { content: ""; padding:0; } }

.sidebar-nav-top { margin-bottom:1em; background:#FCFCFC; border:0px solid #C4C5BD; border-bottom:0px solid #0077c7; border-radius: 0.5em; font-family: 'Open Sans Condensed', sans-serif; text-transform: uppercase; font-size: 115%; }
.sidebar-nav-top ul, .sidebar-nav ol { list-style-type:none; padding:0% 0; }
.sidebar-nav-top li { border-bottom:1px solid #C4C5BD; line-height:1.3; }
.sidebar-nav-top li:last-child { border:none;}
.sidebar-nav-top li:last-child a:hover { border-radius: 0.5em;}
.sidebar-nav-top li a { display:block; padding:7px 5px; color:#00af64; }
.sidebar-nav-top li:nth-child(2n+1) a { color:#6b7770; }
.sidebar-nav-top li a:hover, .sidebar-nav ul li a:focus { background: #FFED9A; text-decoration:none;}

/**Breadcrumb **/
.bread { width:960px; margin:0 auto; text-align:center; padding-bottom:0.5%; }
.breadcrumb { display:inline; font-size:68.75%; }
.breadcrumb a { color:#361B00; background:none; font-weight:normal; }
.breadcrumb a:hover { color:#361B00; font-weight:normal; text-decoration:none; }
@media only screen and (max-width:1015px) { .bread { width:96%; } }

/** Footer **/
#footer { width:980px; margin:0 auto; margin-bottom:1em; background: #4c4f3e; border-radius: 0.5em; }
.footer-text { font-size:85%; color:#FFF; padding:1%; text-align:center; }
.footer-text p { margin:0; }
.footer-text a { color:#FFF; text-decoration:none; font-weight:normal; }
.footer-text a { padding: 5px 2px; }
.footer-text a:visited { color:#FFF; text-decoration:none; font-weight:normal; }
.footer-text a:active { color:#FFF; text-decoration:none; font-weight:normal; }
.footer-text a:hover { color:#FFF; text-decoration:underline; font-weight:normal; }
@media only screen and (max-width:1015px) { #footer { width:98%; } }
@media only screen and (max-width:800px) { .footer-text { padding:1.5%; } }
@media only screen and (max-width:450px) { .footer-text { padding:2%; line-height:3; } }
@media only screen and (max-width:450px) { .ftw { white-space:nowrap; } }

img.alignleft, div.alignleft { float:left; margin-right:12px; margin-bottom:0px; border:0; }
img.alignright, div.alignright { float:right; margin-left:12px; margin-bottom:0px; border:0; z-index:9999; }
img.aligncenter, div.aligncenter { text-align:center; display:block; margin-left:auto; margin-right:auto; border:0; }
img.alignnone, div.alignnone { margin:10px; border:0; }

#content .lis {line-height: 1.3; float: left; font-size: 100%; border-radius:0.5em; background: #e5eecc; padding: 10px 5px 0px 5px; margin-right: 10px; margin-bottom:10px; margin-top:5px;}
#content .lis strong { font-size: 100%; }
#content .lis li { list-style-image:url(arrow.png); margin: 0px 5px 0px 5px; padding-left: 0px; font-size: 90%; }
#content .lis1 {line-height: 1.3; float: left; font-size: 100%; border-radius:0.5em; background: #e5eecc; padding: 10px 5px 0px 5px; margin: 2px; margin-bottom:10px;}
#content .lis1 strong { font-size: 100%; }
#content .lis h3 { font-size:112.5%; color: #6b7770; margin:0 0 0.3em 0.3em; text-align:left; border:none; }
#content .lis1 li { list-style-type:none; padding-left: 0px; font-size: 90%; margin-left: 0px; }

.totop { font-size: 11px; line-height: 14px; float: right; margin-top: -15px; margin-bottom: 5px; color: #000;}
#content p.share { height: 44px; text-align: center; border-bottom: 1px solid #ddd; border-top: 0px solid #ddd;}

.trenner { background: url("http://www.rasiermesser-ratgeber.de/trenner.png") 0 0 no-repeat; height: 65px; margin-bottom: 1px;}


/* Images And Videos 
--------------------------------------------- */
#content .caption { max-width: 30%; margin-top: 10px!important; margin-bottom: 10px!important; margin:5px; }
#content .caption a { background:none; }	
#content .caption img {	background: #eff0f0; border: 1px solid #ddd; max-width: 95%; }	
#content .caption { padding: 8px 4px 4px; background: #eee; border-radius: 0.5em; text-align: center; }
#content .caption .caption-text { font-style: italic; font-size: 12px; font-size: 0.857142857rem; color: #757575; }
#content .caption-text p { font-style: italic; font-size: 80%; font-size: 0.857142857rem; line-height: 100%; color: #757575; }
#content .caption-text a, #content .capbutton a { font-style: normal; font-weight: bold; font-size: 14px; line-height: 2; text-decoration: none; display: block; margin: 5px 5px; background: #6b7770; color: #fff!important; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
#content .caption-text a:hover, #content .capbutton a:hover { font-style: normal; font-weight: bold; font-size: 14px; line-height: 2; text-decoration: none;	display: block;	margin: 5px 5px; background: #f9b200; color: #fff!important; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
#content p.caption-text { margin-bottom: 8px; max-height:42px; overflow:hidden; }
@media only screen and (max-width:890px) { #content .caption { max-width:29.5%; } }
@media only screen and (max-width:770px) { #content .caption { max-width:29%; } }
@media only screen and (max-width:700px) { #content .caption { max-width:30%; } }
@media only screen and (max-width:610px) { #content .caption { max-width:29.5%; } }
@media only screen and (max-width:530px) { #content .caption { max-width:29%; } }
/*
@media only screen and (max-width:890px) { #content .caption { margin:1 auto; width:100%; max-width: 150px; } }
@media only screen and (max-width:845px) { #content .caption { margin:1 auto; width:100%; max-width: 142px; } }
@media only screen and (max-width:790px) { #content .caption { margin:1 auto; width:100%; max-width: 130px; } }
@media only screen and (max-width:620px) { #content .caption { margin:1 auto; width:100%; max-width: 160px; } }
@media only screen and (max-width:600px) { #content .caption { margin:1 auto; width:100%; max-width: 152px; } }
@media only screen and (max-width:570px) { #content .caption { margin:1 auto; width:100%; max-width: 138px; } }
@media only screen and (max-width:530px) { #content .caption { margin:1 auto; width:100%; max-width: 135px; } }*/
@media only screen and (max-width:510px) { #content .caption { float:none; margin:0 auto; width:100%; max-width:300px; } }
@media only screen and (max-width:425px) { #content .caption { float:none; margin:0 auto; width:100%; max-width:230px; } }

table{clear:both;width:96%;border:1px solid #ccc;padding:0;margin-right:10px;margin-left:10px;font-size:90%;}
table tr th{border:1px solid #ccc;text-align:center;background:#fff;color:#000;margin:0;padding:3px;width:50%;}
table tr td{border:1px solid #ccc;text-align:center;margin:0;padding:3px}

.vid { float: left; margin: 15px 12px 5px 0; }
.vid p { text-align: center; }