html, body {
height:100%;
}
/* this PART ON THE LEFT-SIDE IN MENU IS BG SHOWING THROUGH */
body {
width: 100%;
background: #d1281f;
overflow: hidden;
background-image: url(../images-peepoo/madbg2.jpg) ;
font-family: 'Electrolize', Arial, sans-serif;
font-weight: 400;
font-size: 15px;
color: #fff;
}
a{
text-decoration: none;
}
a{
text-decoration: none;
}
#header{
z-index:2000;
position: absolute;
width: auto;
}
#header h1{
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 20px;
background: #000;
}
#navigation {
text-align:center;
z-index:77;
margin-top: 50px;
width: auto;
display:block;
list-style:none;
}
#navigation a{
width:80%;
color: #444;
display: block;
background: #fff;
background: rgba(255,255,255,0.9);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 14px;
}
#navigation a:hover {
background: #ddd;
}
.half {width:40%;
}
/* HERE IS THE LEFT-BORDER */
.content{
right: 40px;
left: 200px;
top: 0px;
position: absolute;
padding-bottom: 30px;
}
.content h2{
font-size: 110px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
border-left: 8px solid rgba(63,148,148, 0.5);
font-size: 18px;
padding: 10px;
line-height: 24px;
color: #000;
padding: 10px;
margin: 3px 0px;
width:auto;
}
.panel{
background-image: url(../images/bgimg.png) ;
min-width: 100%;
height: 98%;
overflow:auto;
margin-top: -150%;
position: absolute;
background: #000;
box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
/* THIS IS THE MAIN Pages from left-menu */
.panel:target{
margin-top: 0%;
background-color: #3387CC;
background-image: url(../images/bgimg.png) ;
}
/* links */
#about:target ~ #header #navigation #link-home,
#daddy:target ~ #header #navigation #link-portfolio,
#pee1:target ~ #header #navigation #link-pee1,
#pee2:target ~ #header #navigation #link-pee2,
#pee4:target ~ #header #navigation #link-pee4,
#pee5:target ~ #header #navigation #link-pee5,
#pee6:target ~ #header #navigation #link-pee6,
#pee7:target ~ #header #navigation #link-pee7,
#pee8:target ~ #header #navigation #link-pee8,
#poo1:target ~ #header #navigation #link-poo1,
#poo2:target ~ #header #navigation #link-poo2,
#pee1:target ~ #header-h #navigation-v #link-pee1,
#pee1:target ~ #header-h #navigation-v #link-pee1,
#peea:target ~ #header #navigation #link-peea,
#pee2:target ~ #header #navigation #link-pee2,
#pee4:target ~ #header #navigation #link-pee4,
#pee5:target ~ #header #navigation #link-pee5,
#pee6:target ~ #header #navigation #link-pee6,
#pee7:target ~ #header #navigation #link-pee7,
#pee8:target ~ #header #navigation #link-pee8,
{
background: #000;
color: #fff;
}
/*Horizontal Sliding*/
#header-h{
position: absolute;
width:1270px;
left: 14px;
}
#header-h h1{
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 20px;
background: #000;
}
#navigation-v {
text-align:center;
width: 1270px;
display:block;
list-style:none;
margin-left: -10px;
}
#navigation-v a{
float:left;
color: #CC0066/*#444*/;
display: block;
background: #fff;
background: rgba(255,255,255,0.5);/* JAZZY HERE IS THE TRANSPARENCY 0,5 */
line-height: 40px;
padding: 0px 10px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 20px;
font-weight: bolder;
z-index:0;
margin-left: 1px;
}
/* this is for the top menu */
#navigation-v a:hover {
background: #000000/*#ddd*/;
}
.content-v{
right: 40px;
left: 10px;
top: 0px;
position: absolute;
padding-bottom: 30px;
}
.content-v h2{
font-size: 110px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content-v p{
border-left: 8px solid rgba(63,148,148, 0.5);
font-size: 18px;
padding: 10px;
line-height: 24px;
color: #000;
padding: 10px;
margin: 3px 0px;
width:auto;
}
/* this is the bg during transitions */
.panel-v{
background-image: url(../images/bgimg.png) ;
overflow-y:auto;
width: 100%;
min-height: 100%;
position: absolute;
background-color: /*#00AEA8*/; /* putting no color here gives the page a hot transition(transparent effect!! */
box-shadow: 4px -4px 4px rgba(0,0,0,0.2);
left: -102%;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
/* this is for the top -menu */
.panel-v:target{
left: 0%;
background-color: #FF99FF/*#00AEA8*/; /* xxxx here is the panel color xxxxxxxx */
background-image: url(../images/bgimg.png) ; /* xxxxx xxxxxxxx */
}
/* links */
#about:target ~ #header #navigation #link-home,
#daddy:target ~ #header #navigation #link-portfolio,
#pee1:target ~ #header #navigation #link-pee1,
#pee2:target ~ #header #navigation #link-pee2,
#pee4:target ~ #header #navigation #link-pee4,
#pee5:target ~ #header #navigation #link-pee5,
#pee6:target ~ #header #navigation #link-pee6,
#pee7:target ~ #header #navigation #link-pee7,
#pee8:target ~ #header #navigation #link-pee8,
#poo1:target ~ #header #navigation #link-poo1,
#poo2:target ~ #header #navigation #link-poo2,
#pee1:target ~ #header-h #navigation-v #link-pee1,
#about2:target ~ #header-h #navigation-v #link-about2,
#contact2:target ~ #header-h #navigation-v #link-contact2,
#peea:target ~ #header #navigation #link-peea,
#pee2:target ~ #header #navigation #link-pee2,
#pee4:target ~ #header #navigation #link-pee4,
#pee5:target ~ #header #navigation #link-pee5,
#pee6:target ~ #header #navigation #link-pee6,
#pee7:target ~ #header #navigation #link-pee7,
#pee8:target ~ #header #navigation #link-pee8,
{
background: #000;
color: #fff;
}
#preview{
width: 1250px;
height: 400px;
background-color: #66CCFF;
margin-bottom: 15px;
}
#prev{
max-height: 400px;
max-width: 830px;
margin: 5px 5px 5px 5px;
float: left;
margin-right: 5px;
}
#words{
float: left;
padding-left: 5px;
padding-top: 10px;
padding-bottom: 10px;
color:#000;
font-weight: bolder;
max-width: 400px;
}
/* */