278 lines
7.5 KiB
CSS
278 lines
7.5 KiB
CSS
|
/*
|
||
|
|
CSS for hmu.theinternetvagabond.com
|
||
|
|
Written by Bill Niblock
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Meta Styles
|
||
|
|
============================= */
|
||
|
|
.clean{ clear:both;}
|
||
|
|
|
||
|
|
.error{
|
||
|
|
margin: auto; padding-top: 10%;
|
||
|
|
width: 400px; height: 400px;
|
||
|
|
font: bolder 16px serif; color: red;
|
||
|
|
text-align: center; letter-spacing: 2px; vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
body { background-color: ;}
|
||
|
|
|
||
|
|
.header{
|
||
|
|
position: fixed; top: 0px; left: 0px; right: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.torso{
|
||
|
|
position: fixed; top: 100px; left: 0px; right: 0px; bottom: 75px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Title Styles
|
||
|
|
============================= */
|
||
|
|
.title_cont{
|
||
|
|
float: left;
|
||
|
|
position: relative; top: 0px; left: 20px;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
font: italic bolder 24px serif;
|
||
|
|
color: blue; letter-spacing: 5px;
|
||
|
|
}
|
||
|
|
.btitle{
|
||
|
|
font: italic bolder 58px serif;
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
.utitle{
|
||
|
|
width: 100%; margin: 0px 0px 20px 75px; height: 2px; border-width: 0px;
|
||
|
|
color: yellow; background-color: yellow;
|
||
|
|
}
|
||
|
|
.stitle{
|
||
|
|
position: absolute; right: -70px; bottom: -10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Current Fight Styles
|
||
|
|
============================= */
|
||
|
|
.current_cont{
|
||
|
|
float: left;
|
||
|
|
position: absolute; top: 15px; right: 30px;
|
||
|
|
}
|
||
|
|
.current{
|
||
|
|
float: left;
|
||
|
|
position: absolute; right: 0px; width: 800px;
|
||
|
|
}
|
||
|
|
.current_team#team1{
|
||
|
|
float: left; width: 300px; height: 25px;
|
||
|
|
padding: 5px 10px 0px 10px; margin: 0px 10px;
|
||
|
|
border: 3px solid brown; background-color: #D29494;
|
||
|
|
font: italic bold 16px serif; text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.current_team#team2{
|
||
|
|
float: left; width: 300px; height: 25px;
|
||
|
|
padding: 5px 10px 0px 10px; margin: 0px 10px;
|
||
|
|
border: 3px solid orange; background-color: #FFD280;
|
||
|
|
font: italic bold 16px serif; text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.current_vs{
|
||
|
|
float: left; width: 50px; padding: 7.5px 0px 0px 0px;
|
||
|
|
font: bold 20px; text-align: center;
|
||
|
|
color: black; text-decoration: overline underline;
|
||
|
|
}
|
||
|
|
.current_arena{
|
||
|
|
position: relative; bottom: -10px; right: 30px; width: 400px; height: 20px;
|
||
|
|
padding: 2px 20px; margin-left: auto; margin-right: auto;
|
||
|
|
border: 3px solid black; background-color: lightgrey;
|
||
|
|
font: italic bold 16px serif; text-align: center; vertical-align: middle;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Menu Styles
|
||
|
|
============================= */
|
||
|
|
.menu_cont{
|
||
|
|
position: relative; top: 10px;
|
||
|
|
margin-left: auto; margin-right: auto; width: 1060px;
|
||
|
|
padding: 0px 0px 0px 0px;
|
||
|
|
}
|
||
|
|
.menu_item{
|
||
|
|
float: left; width:150px; height: 28px;
|
||
|
|
background-color: white;
|
||
|
|
display: block; text-align: center; color: blue;
|
||
|
|
font-size: 24px; letter-spacing: 2px;
|
||
|
|
border: 3px solid blue; border-radius: 20px;
|
||
|
|
margin-left: 10px; margin-right: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.menu_item_selected{
|
||
|
|
float: left; width:150px; height: 28px;
|
||
|
|
background-color: blue;
|
||
|
|
display: block; text-align: center; color: yellow;
|
||
|
|
font-size: 24px; letter-spacing: 2px;
|
||
|
|
border: 3px solid blue; border-radius: 20px;
|
||
|
|
margin-left: 10px; margin-right: 10px;
|
||
|
|
cursor: crosshair;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Footer Styles
|
||
|
|
============================= */
|
||
|
|
.tiv_footer{
|
||
|
|
position: fixed; bottom: -20px; left: 10px; right: 10px; height: 17px; z-index: 10;
|
||
|
|
border: 1px #666699 solid; border-top-left-radius: 5px; border-top-right-radius: 5px;
|
||
|
|
background-color: #666699;
|
||
|
|
-o-transition-property: bottom;
|
||
|
|
-moz-transition-property: bottom;
|
||
|
|
-webkit-transition-property: bottom;
|
||
|
|
-o-transition-duration: 1s;
|
||
|
|
-moz-transition-duration: 1s;
|
||
|
|
-webkit-transition-duration: 1s;
|
||
|
|
}
|
||
|
|
.tiv_footer:hover{ bottom: 0px;}
|
||
|
|
|
||
|
|
.tiv_footer_notice{
|
||
|
|
position: absolute; left: 0px; right: 0px; margin-left: auto; margin-right: auto; width: 400px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.tiv_footer_notice_text{
|
||
|
|
font-weight: lighter; font-size: 10px; letter-spacing: 2px; color: #444444;
|
||
|
|
padding: 1px 7px; margin: -6px 10px 0px;
|
||
|
|
border: 3px #996666 solid; border-radius: 5px;
|
||
|
|
background-color: #CC9999;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Main Styles
|
||
|
|
============================= */
|
||
|
|
.main{
|
||
|
|
position: relative; top: 15px;
|
||
|
|
margin-left: auto; margin-right: auto;
|
||
|
|
width: 100%; max-width: 1600px; height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Main Styles - Stories
|
||
|
|
============================= */
|
||
|
|
.stories{
|
||
|
|
margin-left: auto; margin-right: auto; padding-top: 2%;
|
||
|
|
min-width: 1000px; max-width: 1000px; width: 1000px;
|
||
|
|
}
|
||
|
|
.story_cont{
|
||
|
|
border: 2px solid blue; border-radius: 10px;
|
||
|
|
font: 18px serif;
|
||
|
|
}
|
||
|
|
.story_title{
|
||
|
|
padding: 5px 5px 5px 30px;
|
||
|
|
background-color: blue; color: yellow;
|
||
|
|
border-top-left-radius: 8px; border-top-right-radius: 8px;
|
||
|
|
}
|
||
|
|
.story_details{
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.story_cont[id^=fight] .story_details{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Main Styles - Heroes
|
||
|
|
============================= */
|
||
|
|
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Main Styles - Teams
|
||
|
|
============================= */
|
||
|
|
.teams{
|
||
|
|
margin-left: auto; margin-right: auto; padding-left: 3%;
|
||
|
|
min-width: 1200px; max-width: 1200px; width: 1200px;
|
||
|
|
}
|
||
|
|
.team_cont{
|
||
|
|
float: left; width: 480px; height: 150px;
|
||
|
|
padding: 10px; margin: 3%;
|
||
|
|
border-top: 4px solid darkgrey; border-left: 4px solid darkgrey;
|
||
|
|
border-right: 4px solid grey; border-bottom: 4px solid grey;
|
||
|
|
box-shadow: 15px 20px 5px #D9D9D9;
|
||
|
|
}
|
||
|
|
.team_cont#team1{
|
||
|
|
background-color: #D29494;
|
||
|
|
}
|
||
|
|
.team_pic{
|
||
|
|
float: left; width: 140px; height: 140px; z-index: 1;
|
||
|
|
margin-top: 2px; margin-bottom: 2px; margin-left: 2px;
|
||
|
|
border: 2px solid grey; outline: 2px solid darkgrey;
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
.team_syn{
|
||
|
|
float: left;
|
||
|
|
width: 300px; height: 140px;
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
.team_title{
|
||
|
|
font: bold 20px serif;
|
||
|
|
}
|
||
|
|
.team_about{
|
||
|
|
font: 16px serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*The Info-Popup Styles for the Teams page */
|
||
|
|
|
||
|
|
.info_popup{
|
||
|
|
position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 2;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.info_popup_background{
|
||
|
|
position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 3;
|
||
|
|
margin-left: auto; margin-right: auto; padding: 20px;
|
||
|
|
background-color: black;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.info_popup_foreground{
|
||
|
|
position: relative; top: 5%; bottom: 5%; z-index: 4;
|
||
|
|
margin-left: auto; margin-right: auto; width: 500px; height: 90%;
|
||
|
|
background-color: white;
|
||
|
|
}
|
||
|
|
.info_popup_close{
|
||
|
|
position: absolute; top: 2px; right: 2px; padding-left: 5px;
|
||
|
|
background-color: darkred; color: lightgrey;
|
||
|
|
font: 10px sans-serif; letter-spacing: 5px; text-align: center;
|
||
|
|
cursor: crosshair;
|
||
|
|
}
|
||
|
|
.info_popup_detail{
|
||
|
|
padding: 20px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Main Styles - Arenas
|
||
|
|
============================= */
|
||
|
|
.arenas{
|
||
|
|
margin-left: auto; margin-right: auto; padding-left: 3%;
|
||
|
|
min-width: 1200px; max-width: 1200px; width: 1200px;
|
||
|
|
}
|
||
|
|
.arena_cont{
|
||
|
|
float: left; width: 40%; height: 100px;
|
||
|
|
padding: 10px; margin: 3%; background-color: #FAFAFA;
|
||
|
|
border-top: 4px solid darkgrey; border-left: 4px solid darkgrey;
|
||
|
|
border-right: 4px solid grey; border-bottom: 4px solid grey;
|
||
|
|
box-shadow: 15px 20px 5px #D9D9D9;
|
||
|
|
}
|
||
|
|
.arena_title{
|
||
|
|
font: bold 20px serif;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.arena_limit{
|
||
|
|
font: bold 12px serif;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.arena_about{
|
||
|
|
font: italic 16px serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Main Styles - Results
|
||
|
|
============================= */
|
||
|
|
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Main Styles - Login/Betting
|
||
|
|
============================= */
|