User:Ret Samys/common.css: Difference between revisions

Latest revision as of 07:03, 4 June 2017

/***************************************
*                                      *
*        drivecomic.com mimicry        *
*                                      *
***************************************/

/* only for big enough screens:*/
@media screen and (min-width: 1000px){

html{
background: #01415c url(http://drive.mcslp.net/images/6/69/Alnilam-Stars-Pattern.png);
height:100%;
}

body{
background: linear-gradient(rgba(0,0,0,.9),transparent,transparent);
height: 100%;
margin: 0;
background-repeat: no-repeat;
}

/* Top page white bar */

#mw-page-base{
background:transparent;
z-index:1;
}

#mw-page-base:after {     
content:'\A';     
position:absolute;     
background:white;     
top:0; 
bottom:0;     
left:0;      
height:7px;
width:100%;
z-index:10;
}

/* header */

#mw-head-base{
height:216px !important;
}

#mw-head{
left: 0;
right: 0;
width: 940px !important;
margin: auto;
}

#mw-panel{
width:100% !important;
padding:0 !important;
}

#p-logo{
border-top: solid 5px white;
border-right: solid 10px white;
border-left: solid 10px white;
border-bottom: solid 7px white;
border-radius: 0 0 5px 5px;
margin: auto;
position: absolute;
z-index: 5;
right: 860px;
box-shadow: 0 0 20px black;
}

#p-personal{
background: repeating-linear-gradient(#1B1E20 ,#1B1E20 3px,#353C3F 3px, #353C3F 5px);
box-shadow: 0 0 20px black;
z-index: 1;
height: 163px;
padding: 0;
transform: skewX(-22deg);
width: 845px;
margin-left:100px
}

#p-personal-label{
display:initial !important;
font-size: 0;
background: url('http://cdn.sheldoncomics.com/media/posts/728x90_new.jpg') white;
height: 90px;
width: 728px;
z-index: 900;
transform: skewX(22deg);
margin-left: 70px;
margin-top: 10px;
border: 4px solid #333;
}

#p-personal ul{
transform: skewX(22deg);
padding:0 !important;
position: absolute;
bottom: 15px;
left: 100px;
}

#p-personal ul li{
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-30deg);
background-image: linear-gradient(#3D6577,#6594A8);
padding: 5px 13px;
text-transform: lowercase;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: .9em;
box-shadow: 0 0 5px white;
border: solid 1px white;
height: 16px;
}

#p-personal ul li:hover{
background:#8E2323;
}

#p-personal ul li:hover a{
color:white;
text-shadow:0 0 3px white;
text-decoration:none;
}

#p-personal ul li a{
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(30deg);
display: inline-block;
color: #013348;
font-weight: bold;
}

/* side content */

#right-navigation,#mw-panel,#footer{
width:14%;
}

/* article content */

#content{
margin: auto !important;
width: 830px !important;
padding: 10px !important;
border-radius: 10px !important;
box-shadow: 0 0 50px black,0 0 15px black,0 0 10px rgba(0,0,255,.3) inset !important;
color: #02425B !important;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
font-weight: 500 !important;
left: 0 !important;
right: 0 !important;
position:relative !important;
z-index:5 !important;
}

#content b,#content strong,#content a{
/*color: black;*/
font-weight:900;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* navigation bar */

#right-navigation,#left-navigation{
margin-top:184px !important;
height: 32px !important;
}

.vectorTabs{
background:initial !important;
position: absolute !important;
z-index: 2 !important;
margin: auto !important;
padding:0 !important;
left: 0 !important;
right: 0 !important;
display: table !important;
background: #CC3232 !important;
height: 2em !important;
text-shadow: 0 0 1px !important;
}

#right-navigation .vectorTabs{
transform: translateX(50%);
}

#left-navigation .vectorTabs{
transform: translateX(-50%);
}

.vectortTabs.emptyPortlet{
z-index:0;
}

#left-navigation .vectorTabs:before { /* triangle */
content: "\A";
background: #CC3232;
width: 2em;
height: 4.8em;
transform: rotate(45deg);
position: absolute;
left: -2em;
z-index: -1;
}

#right-navigation .vectorTabs:after{ /* triangle */
content: "\A";
background: #CC3232;
width: 2em;
height: 4.8em;
transform: rotate(-45deg);
position: absolute;

z-index: -1;
}

.vectorTabs ul, .vectorTabs ul li,.vectorTabs ul li span{
margin: 0 !important;
padding: 0 !important;
background:initial !important;
}

.vectorTabs ul{
padding-top:.4em !important;
}

.vectorTabs a{
white-space: nowrap;
color: white !important;
text-transform: uppercase;
font-family: Consolas,Courier New,monospace;
padding-left:.7em !important;
padding-right:.7em !important;
padding-top:0 !important;
font-size:1em !important;
height:1em !important;
overflow:hidden !important;
border-left:solid white 2px;
border-right:solid white 2px;
}

.vectorTabs li.icon a{
line-height: 3em !important;
max-width: 5px !important;
overflow: hidden !important;
}

.vectorMenu{
top:-.5em;
z-index:6;
}

h3#p-cactions-label{
background: linear-gradient(transparent,rgba(255,255,255,.15)) !important;
}

h3#p-cactions-label:hover{
background: linear-gradient(transparent,rgba(255,255,255,.3)) !important;
}

h3#p-cactions-label span{
color:white;
}

}