html{
heigth: 100%;/* >>> hinzugef�gt Januar 2016!!! <<< siehe #textscroll */
}
body {
margin: 0;
padding: 0;
overflow:hidden;
height:100%;/* >>> hinzugefuegt Januar 2016!!! <<< siehe #textscroll */
background: #ffcc66;
text-align: center;
font-family: Verdana, Helvetica,Sans-Serif;
font-size: 11px;
min-width: 320px;
/* - Verlauf innerhalb des orangen Hintergrundes - */
/*
* background: #fcd689;
background: #fcd689\0/;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#FFffcc66, endColorstr=#FFfcd689);
background-image: -moz-linear-gradient(
left bottom,
#ffcc66,
#fcd689
);
background-image: -webkit-gradient(
linear,
left bottom, right top,
from(#ffcc66),
to(#fcd689)
);
*/
}
body:before { /* Schatten oben im body */
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
z-index: 100;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
#container, #containergross {
/* The Rule of Thirds and Golden Ratio account for why sidebars, for example, are usually about a third of the width of the page and why the main content area is roughly equal to the design�s width divided by 1.62 (equalling phi in mathematics) >> 794:1,62=490,12 */
padding: 0;
width: 794px;
text-align: left;
/* height: 450px; */
position: absolute;
top: 47%;
margin-top: -256px;
margin-left: -400px;
left: 50%;
heigth: 100%;/* >>> hinzugef�gt Januar 2016!!! <<< siehe #textscroll */
box-sizing: padding-box;/* >>> hinzugef�gt Januar 2016!!! <<< siehe #textscroll */
-moz-box-sizing: padding-box;/* >>> hinzugef�gt Januar 2016!!! <<< siehe #textscroll */
-webkit-box-sizing: padding-box;/* >>> hinzugef�gt Januar 2016!!! <<< siehe #textscroll */
}
#containergross { /* f�rs Projekt: Junge Roma in Berlin */
top: 50%;
margin-left: -485px;
}
#nav { /* MEN� LINKS */
float: left;
padding-top: 0;
padding-right: 0;
padding-left: 0;
/* padding-bottom: 0; */
margin: 0;
width: 140px; /*26. Mai 2014: width: 120px;*/
}
#containergross #nav { /* f�rs Projekt: Junge Roma in Berlin */
padding-right: 10px;
}
#nav_logo { /* LOGO */
background-image: url(../Webbilder/logosoleil.gif);
background-repeat:no-repeat;
width:81px;
height:110px;
padding-bottom:0;
}
#nav_logo_title h1 {
margin-left:-1000px;
visibility:hidden;
padding-bottom:0;
}
#nav_links {
padding-top: 25px; left:0;
}
/* #container2 = Navigation hoch und Inhalt im Fenster */
#container2 {
margin-left: 130px;
heigth: 100%;/* >>> hinzugef�gt Januar 2016!!! <<< siehe #textscroll */
}
#container2, #container2gross {
/* #container2gross = ..junge_roma_in_berlin/junge_roma_in_berlin.php */
height: 500px;
}
div.clear {
clear: both;
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
margin: 0;
overflow: hidden;
width: 100%;
padding-top: 0;
height: 1px;
}
/* Men� oben (gerade nicht aktiv) */
/*#topContent {
padding-bottom: 1em;
padding-top: 0;
}
#topContent li {
padding-right: 0.5em;
DISPLAY: inline;
padding-left: 0.5em;
padding-bottom: 0.5em;
padding-top: 0.5em;
} */
/* '' index.php mit Bild von Robert Conev '''''''''''''''''''''''''''''''''''''''''''' */
#cont {
height: 496px !important;
height: 496px;
margin: 20px 0px 0px 10px;
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
padding-top: 0;
-moz-border-radius:24px;
-khtml-border-radius:24px;
-webkit-border-radius:24px;
border-radius:24px;
-moz-box-shadow: 3px 3px 15px rgba(100,80,50,0.5);
-webkit-box-shadow: 3px 3px 15px rgba(100,80,50,0.5);
box-shadow: 3px 3px 15px rgba(100,80,50,0.5);
/*background-image: url(../Webbilder/Hgbild/robert_conev_tugba.png) no-repeat left top;
background: rgba(255,255,204,1) url(../Webbilder/Hgbild/robert_conev_tugba.png) no-repeat left top;*/
background: #ffffcc url(../Webbilder/Hgbild/robert_conev_tugba.png) no-repeat left top;
}
#robert {
position:absolute;
padding-top: 450px;
padding-left: 30px;
width: 200px;
height: 500px;
}
#robert p, robert a {
font:normal 9px Verdana, sans-serif;
color:#ffffcc;
letter-spacing:0;
}
#robert a:link, #robert a:visited {
color:#ffffcc;
text-decoration:underline;
}
#robert a:hover {
color:#ffffcc;
text-decoration: none;
}
#robert a:active {
color: #CC0000;
text-decoration: none;
}
/* '' index.php Ende '''''''''''''''''''''''''''''''''''''''''''''''''''''' */
#cont2 {
margin: 20px 0 0 0;
padding: 0;
heigth: 100%;/* >>> hinzugef�gt Januar 2016!!! <<< siehe #textscroll */
}
#textScroll, #textScrollgross {
/* -------- #textScrollgross = ../junge_roma_in_berlin/junge_roma_in_berlin.php -------- */
overflow:scroll;
overflow-y:scroll;/* >>> hinzugef�gt Januar 2016!!! <<< */
/* >>> hinzugef�gt Januar 2016!!! <<<
Beide Deklarationsbl�cke bewirken dasselbe:*/
overflow-x: hidden;
overflow-y: visible;
overflow:hidden visible;
overflow-style:scrollbar;
position:relative;/* >>> hinzugef�gt Januar 2016!!! <<< */
color:#666;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
background: #ffffcc;
/* background: rgba(255,255,204); */
background: rgba(255,255,204,1);
background-color:#ffffcc;
-moz-border-radius:24px;
-khtml-border-radius:24px;
-webkit-border-radius:24px;
border-radius:24px;
-moz-box-shadow: 3px 3px 15px rgba(100,80,50,0.5);
-webkit-box-shadow: 3px 3px 15px rgba(100,80,50,0.5);
box-shadow: 3px 3px 15px rgba(100,80,50,0.5);
}
#textScroll {
margin: 20px 0 0 0;
height: 476px !important;
height: 476px;
}
#textScrollgross {
margin: 0 0 0 0;
height: 500px !important;
height: 456px;
}
/* -------- #aktuell in:
../junge_roma_in_berlin/fuss.inc_junge_roma_in_berlin
= Logos rechts vom Inhalt -------- */
#aktuell {
float:right;
width:160px;
/* aus container */
position: absolute;
top: 50%;
margin-top: -256px;
margin-left: 320px;
left: 50%;
/* aus textScroll */
overflow:hidden;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
color:#666;
/* aus container2gross */
height: 500px;
}
/* '' MEN� LINKS ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */
#navcontainermenu, #navcontainermenugross {
/* #navcontainermenugross = Men� links in ../junge_roma_in_berlin/junge_roma_in_berlin.php */
left:0;
padding-top: 22px;
width: 10em;
height: 100%;
font-family: Verdana, "Century Gothic", Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffcc66;
font-size: 0.9em;
color:#007cc3;
}
#navcontainermenugross {
padding-top: 62px;
}
#navcontainermenu.rot, #navcontainermenugross.rot {
color:#c2262a;
}
#navcontainermenu ul, #navcontainermenugross ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainermenu li, #navcontainermenugross li {
border-bottom: 1px solid #ffcc66; /* Farbe zw. Items */
margin: 0;
}
#navcontainermenu li a, #navcontainermenugross li a {
display: block;
padding: 4px 4px 3px 0.5em;
border-left: 10px solid #508fc4;/* 007cc3; -- Rechtecksfarbe links */
border-right: 10px solid #transparent; /* Rechtecksfarbe rechts */
background-color: #ffcc66; /* zentrale HGfarbe normal */
color: #007cc3; /* Textfarbe normal */
font-weight:bold;
text-decoration: none;
width: 100%;
}
/* Mod�les_de_bo�tes.doc___Box Model Hack von Tantek �elik
------------------------------------------------------------- */
html>body #navcontainermenu li a, html>body #navcontainermenugross li a {
width: 110px; /* >>> 26/05/2014: 10em;*/
/* width: auto; */
font-weight:bold;
}
#navcontainermenu li a, #navcontainermenugross li a {
font-weight:normal;
}
#navcontainermenu li a:hover, #navcontainermenugross li a:hover {
border-left: 10px solid #508fc4; /* Rechtecksfarbe links en rollover */
/* border-right: 10px solid #F6AE4E; */ /* Rechtecksfarbe rechts in rollover */
border-right: 10px solid #FABB61; /* Rechtecksfarbe rechts in rollover */
background-color:#F79A3C; /* Zentralfarbe rollover */
color: #ffffcc;
clear:both;
}
#navcontainermenu li.rot a:hover, #navcontainermenugross li.rot a:hover {
color: #ffffcc;
}
#navcontainermenu li a:active, #navcontainermenugross li a:active {
border-left: 10px solid #508fc4; /* Rechtecksfarbe links en rollover */
/* border-right: 10px solid #F6AE4E; Rechtecksfarbe rechts in rollover */
/* border-right: 10px solid #FABB61; FABB61 Rechtecksfarbe rechts in rollover */
/* background-color:#F79A3C; Zentralfarbe rollover */
color: #CC0000;
}
#navlist a {
font-size:10.5px;
}
#navlist li {
/* Erster Item mit andersfarbiger Viereck: Start */
clear: both;
}
#navlist a.current { /* Farbe des Men�s in Roll-over */
background-color: #ffcc66;
border-color: #5bd #ffcc66 #068 #007cc3/* 508fc4 */;
}
#navlist a.current:hover {
background: #28b;
border-color: #069 #6cf #5bd #c2262a;
border-right: 10px solid #3399cc;
/* padding: 0.4em 0.35em 0.25em 0.9em; */
}
#navlist a.current:hover {
color:#ffffcc;
}
#navlist a.current2 {
background-color: #ffcc66;
border-color: #5bd #ffcc66 #068 #c2262a;
}
#navlist a.current2:hover {
background: #28b;
border-color: #069 #6cf #5bd #c2262a;
border-right: 10px solid #3399cc;
/* padding: 0.4em 0.35em 0.25em 0.9em; */
}
#navlist a.current2:hover {
color:#ffffcc;
}
#navlist a.current3 {
border-color: #5bd #ffcc66 #068 #508fc4;
}
#navlist a.current3:hover {
background: #508fc4;
border-color: #069 #6cf #5bd #c2262a;
border-right: 10px solid #70a5d1;
/* padding: 0.4em 0.35em 0.25em 0.9em; */
}
#navlist a.current3:hover {
color:#ffffcc;
}
#navlist a.current:active {
color: #CC0000;
}
#smenu1 ul li {
/* border-bottom: 1px solid #007cc3; */ /* Randfarbe zwischen Items */
margin: 0;
}
ul#smenu1 {
display: none; /* Untermen�s werden nicht angezeigt */
}
#smenu1 li {
/* padding: 4px 4px 4px 0.5em; */
/* border-bottom: 1px solid #007cc3; */
/* 9D9A97 -- Rechtecksfarbe links */
border-right: 10px solid #ffcc66; /* Rechtecksfarbe rechts */
/* >>>>> background-color: #ffcc66; ff9933 -- Zentralfarbe */
color: #007cc3; /* Zentralfarbe Text normal */
text-decoration: none;
width: 100%;
font-weight:normal;
float: left; */
}
html>body #smenu1 li a {
width: 10em;
/* width: auto; */
font-weight:normal;
}
ul#smenu1 a:hover {
border-left: 10px solid #007cc3;/* 508fc4; */ /* Rechtecksfarbe links in rollover */
/* border-right: 10px solid #F6AE4E; Rechtecksfarbe rechts in rollover */
/* border-right: 10px solid #FABB61; /* Rechtecksfarbe rechts in rollover */
background-color:#f79a3c; /* Zentralfarbe in rollover */
color: #ffffcc;
clear:both;
}
ul#smenu1 a:active {
border-left: 10px solid #508fc4; /* Rechtecksfarbe links en rollover */
/* border-right: 10px solid #F6AE4E; Rechtecksfarbe rechts in rollover */
/* border-right: 10px solid #FABB61; FABB61 -- Rechtecksfarbe rechts in rollover */
/* background-color:#F79A3C; Zentralfarbe rollover */
color: #CC0000;
}
/* - LINKS MEN� EXTRA ------------------------------------- */
#navcontainermenu ul#extra {
padding-top:0px;
padding-left:10px;
margin-top:5px;
}
#navcontainermenu ul#extra li a {
border-left: 0 solid #508fc4;
}
#navcontainermenu ul#extra a, #navcontainermenu ul#extra a:link, #navcontainermenu ul#extra a:visited {
color:#007cc3;
}
#navcontainermenu ul#extra a, #navcontainermenu ul#extra a:link, #navcontainermenu ul#extra a:visited {
/* border: 1px solid #ffcc66; */
color: #007cc3;
/* font-weight: bold; */
text-decoration: none;
font-weight:normal;
}
#navcontainermenu ul#extra a:hover, #navcontainermenu ul#extra a:active, #navcontainermenu ul#extra a:focus {
border: none;
color: #ffffcc;
background-color: #007cc3;
text-decoration: none;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#3399cc, endColorstr=#007cc3);
background-image: -moz-linear-gradient(top, #3399cc, #007cc3);
background-image: -webkit-gradient(linear, left top, left bottom, from(#3399cc), to(#007cc3));
}
/* - LINKS MEN� EXTRA Ende ------------------------------------ */
/* '' MEN� LINKS Ende '''''''''''''''''''''''''''''''''''''''''''''''''''''' */
/* '' MEN� OBEN ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */
#navlisthoch {
margin: 0 0 0 0;
padding: 0;
font-family: Verdana, "Century Gothic", Geneva, Arial, Helvetica, sans-serif;
font-size: 1.3em;
/* text-shadow: 1px 1px 2px rgba(255,255,204,0.8); */
}
#navlisthoch li {
display: inline;
font-size: 0.7em;
padding-left:3px;
}
#navlisthoch a, #navlisthoch a:link, #navlisthoch a:visited {
/* border: 1px solid #ffcc66; */
/* padding: 1px; */
padding: 0 0.5em 0 0.5em;
color: #007cc3;
text-decoration: none;
font-weight:bold;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#navlisthoch a:hover, #navlisthoch a:active, #navlisthoch a:focus {
color: #ffffcc;
background-color: #007cc3;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
/* fade in/out */
/*http://stackoverflow.com/questions/6008324/fade-effect-on-link-hover*/
#navlisthoch a {
color: #c2262a;
background: #ffcc66;
padding: 5px;
-webkit-transition-property: color, background;
-webkit-transition-duration: 0.3s, 0.3s;
-webkit-transition-timing-function: linear, ease-in;
-o-transition-property: color, background;;
-o-transition-duration: 0.3s, 0.3s;
-o-transition-timing-function: linear, ease-in;
-ms-transition:-property: color, background;
-ms-transition-duration: 0.3s, 0.3s;
-ms-transition-timing-function: linear, ease-in;
-moz-transition-property: color, background;
-moz-transition-duration: 0.3s, 0.3s;
-moz-transition-timing-function: linear, ease-in;
transition-property: color, background;
transition-duration: 0.3s, 0.3s;
transition-timing-function: linear, ease-in;
}
/* ENDE fade in/ou */
/* '' ENDE MEN� OBEN ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' */