381 lines
9.9 KiB
CSS
381 lines
9.9 KiB
CSS
|
/*
|
||
|
|
CSS for www.theinternetvagabond.com
|
||
|
|
Written by Bill Niblock
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Utility Styles
|
||
|
|
============================= */
|
||
|
|
/*Custom Font classes*/
|
||
|
|
@font-face{
|
||
|
|
font-family: "header title";
|
||
|
|
src: url("") format("truetype");
|
||
|
|
}
|
||
|
|
/* Font used for sub title.
|
||
|
|
Font found on http://www.fontspace.com
|
||
|
|
Font created by Michael Tension (mtension AT gmail DOT com)
|
||
|
|
*/
|
||
|
|
@font-face{
|
||
|
|
font-family: "header sub";
|
||
|
|
src: url("../trinkets/Prophecy_Script.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
.clean{ clear:both;}
|
||
|
|
|
||
|
|
html{
|
||
|
|
background-color: #DDDDDD;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Header Styles
|
||
|
|
============================= */
|
||
|
|
.header{
|
||
|
|
position:fixed; top:0px; left:5%; z-index:11; z-index: 2;
|
||
|
|
height:120px; min-width: 1000px; max-width: 1000px;
|
||
|
|
background: url("../trinkets/h_bg.png") no-repeat left top;
|
||
|
|
}
|
||
|
|
.header_title{
|
||
|
|
margin-left: 200px;
|
||
|
|
font: 2.5em "header title";
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
.header_title:first-letter{
|
||
|
|
font: 2.65em "header title";
|
||
|
|
vertical-align: -35px;
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
.header_sub{
|
||
|
|
font: 1.4em "header sub";
|
||
|
|
text-align: center; vertical-align: center;
|
||
|
|
}
|
||
|
|
.navbar{
|
||
|
|
position: relative; left: 150px; bottom: 20px;
|
||
|
|
width: 80%;
|
||
|
|
}
|
||
|
|
.navlink{
|
||
|
|
float: left; width:25%; height: 28px;
|
||
|
|
background-color: #666699;
|
||
|
|
display: block; text-align: center; color: #CCCCCC;
|
||
|
|
font-size: x-large; letter-spacing: 2px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
/* min-width: 240px; */
|
||
|
|
.navat{
|
||
|
|
float:left; width:25%; height: 28px;
|
||
|
|
background-color: #CCCCCC;
|
||
|
|
display: block; text-align: center; color: #666699;
|
||
|
|
font-size: x-large; letter-spacing: 2px;
|
||
|
|
cursor: crosshair;
|
||
|
|
}
|
||
|
|
/* =============================
|
||
|
|
Sub-Header Styles
|
||
|
|
============================= */
|
||
|
|
.subheader{
|
||
|
|
position: fixed; top: 120px; left: 5%; right: 5%; z-index: 2;
|
||
|
|
border: 1px #666699 solid; border-radius: 10px;
|
||
|
|
height: 35px;
|
||
|
|
background-color: #666699;
|
||
|
|
}
|
||
|
|
.subheader_title{
|
||
|
|
float: left;
|
||
|
|
color: #CCCCCC; font-size: x-large; font-weight: bolder; letter-spacing: 2px;
|
||
|
|
margin: 2px 15px; padding: 2px;
|
||
|
|
}
|
||
|
|
.subheader_links{
|
||
|
|
float: left;
|
||
|
|
position: absolute; right: 20px;
|
||
|
|
}
|
||
|
|
.subheader_links_link{
|
||
|
|
float:left;
|
||
|
|
font-weight: bold; letter-spacing: 2px; color: #444444;
|
||
|
|
padding: 5px 15px; margin: 6px 10px;
|
||
|
|
border: 3px #996666 solid; border-radius: 5px;
|
||
|
|
background-color: #CC9999;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
New Footer Styles
|
||
|
|
============================= */
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
.footer:hover{ bottom: 0px;}
|
||
|
|
.footer_notice{
|
||
|
|
position: absolute; left: 0px; right: 0px; margin-left: auto; margin-right: auto; width: 400px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Old Footer Styles
|
||
|
|
================================
|
||
|
|
.footer{
|
||
|
|
position:fixed; bottom:0px; left:0px; right:0px; z-index:10;
|
||
|
|
margin-left:25%; margin-right:25%; padding-top:5px; padding-bottom:5px;
|
||
|
|
height:25px; width: 760px; min-width: 760px;
|
||
|
|
background-color:#111111; opacity:0.9;
|
||
|
|
border-top-left-radius: 60px; border-top-right-radius: 60px;
|
||
|
|
}
|
||
|
|
.foot_left{
|
||
|
|
float:left; width: 20%; min-width:200px; height:25px; padding-left:5px; padding-right: 25px;
|
||
|
|
border-right: 1px solid #AAAAAA;
|
||
|
|
}
|
||
|
|
.foot_right{
|
||
|
|
float:left; width: 35%; min-width:200px; height:25px;
|
||
|
|
border-left: 1px solid #AAAAAA;
|
||
|
|
}
|
||
|
|
.footer_img{
|
||
|
|
float:left;
|
||
|
|
padding-left:25px;
|
||
|
|
}
|
||
|
|
.foot_center{
|
||
|
|
float:left; width: 30%; min-width:250px; height:35px;
|
||
|
|
vertical-align: middle; text-align:center;
|
||
|
|
}
|
||
|
|
.footer_info{
|
||
|
|
font: italic 6px ariel, sans-serif;
|
||
|
|
color: #CCCCCC; letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
==============================*/
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Left-bar Styles
|
||
|
|
==============================*/
|
||
|
|
.leftbar{
|
||
|
|
position:fixed; left:0px; top:100px; bottom:0px; z-index:10;
|
||
|
|
margin-top:10%; margin-bottom:10%; width:15px; min-height: 400px;
|
||
|
|
padding-top: 30px; padding-bottom: 30px; padding-left:5px;
|
||
|
|
border-top: 2px solid blue; border-right: 2px solid blue; border-bottom: 2px solid blue;
|
||
|
|
border-bottom-right-radius: 120px; border-top-right-radius: 120px;
|
||
|
|
background-color: #666699;
|
||
|
|
overflow: hidden; white-space: nowrap;
|
||
|
|
-o-transition-property: width, border-bottom-right-radius, border-top-right-radius;
|
||
|
|
-o-transition-duration: 2s, 2s, 2s;
|
||
|
|
}
|
||
|
|
.leftbar:hover{ width:250px; border-bottom-right-radius: 20px; border-top-right-radius: 20px;}
|
||
|
|
|
||
|
|
/*.spacer{
|
||
|
|
position:absolute; right:0px; top:0px; bottom:0px; width:15px;
|
||
|
|
border-bottom-right-radius: 120px; border-top-right-radius: 120px;
|
||
|
|
background-color: #6666DD; color: #DDDDDD; vertical-align: middle;
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
.leftlist{
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
.left_title{
|
||
|
|
font: italic 14px ariel, sans-serif;
|
||
|
|
color: #CCCCCC; letter-spacing: 1px;
|
||
|
|
margin-left:20px;
|
||
|
|
}
|
||
|
|
.left_sep{
|
||
|
|
margin-left:15px; margin-right:15px; width:220px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Main Styles
|
||
|
|
============================= */
|
||
|
|
.main{
|
||
|
|
position: fixed; left: 7%; top: 120px; bottom: 5px; right: 7%;
|
||
|
|
min-height: 400px; padding: 40px 20px 20px 20px; overflow: auto;
|
||
|
|
/*border-top: 3px blue solid; border-left: 3px blue solid; border-top-left-radius: 20px; */
|
||
|
|
}
|
||
|
|
.h_left{
|
||
|
|
position: absolute; left: 5px; top:5px; bottom:5px; right:5px; min-width:900px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
News Styles
|
||
|
|
============================= */
|
||
|
|
.news_quickinfo_container{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.news_quickinfo{
|
||
|
|
padding: 5px;
|
||
|
|
border: 3px solid #996666; border-radius: 20px;
|
||
|
|
background-color: #CC9999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post{
|
||
|
|
position: relative;
|
||
|
|
padding: 5px;
|
||
|
|
border: 3px solid #666699; border-radius: 20px;
|
||
|
|
background-color: #DDDDDD;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post_adventure{
|
||
|
|
position: relative;
|
||
|
|
padding: 5px;
|
||
|
|
border: 3px solid #666699; border-radius: 20px;
|
||
|
|
background-color: #9999CC;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post_experience{
|
||
|
|
position: relative;
|
||
|
|
padding: 5px;
|
||
|
|
border: 3px solid #666699; border-radius: 20px;
|
||
|
|
background-color: #99CC99;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post_title{
|
||
|
|
float:left; padding: 0px 10px;
|
||
|
|
font-size: large; font-weight:bold;
|
||
|
|
}
|
||
|
|
.post_author{
|
||
|
|
float:left;
|
||
|
|
position: absolute; right: 20px;
|
||
|
|
}
|
||
|
|
.post_date{
|
||
|
|
float:left;
|
||
|
|
}
|
||
|
|
.post_hr{ width:75%;}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Adventure Styles
|
||
|
|
============================= */
|
||
|
|
|
||
|
|
.adv_main{
|
||
|
|
|
||
|
|
}
|
||
|
|
.adv_list{
|
||
|
|
float: left;
|
||
|
|
position: absolute; top: 50px; bottom: 20px; width: 20%; padding: 5px;
|
||
|
|
border: 3px #CDCDCD solid; border-radius: 5px;
|
||
|
|
background-color: #CBCBCB; box-shadow: 0px 0px 30px 10px #CBCBCB;
|
||
|
|
}
|
||
|
|
.adv_logs_title{
|
||
|
|
font-weight: bolder; letter-spacing: 2px;
|
||
|
|
text-align: center;
|
||
|
|
color: #666699;
|
||
|
|
}
|
||
|
|
|
||
|
|
.adv_list_item{
|
||
|
|
border: 3px #666699 solid; border-radius: 5px;
|
||
|
|
width: 80%; margin-left: auto; margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.adv_li_location{
|
||
|
|
font-weight: bold; letter-spacing: 2px; color: #444444; text-align: center;
|
||
|
|
background-color: #9999CC;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.adv_li_location:hover{
|
||
|
|
background-color: #666699; color: #CCCCCC;
|
||
|
|
}
|
||
|
|
|
||
|
|
.adv_li_links{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.adv_li_links_link{
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.adv_hr{
|
||
|
|
color: blue; background-color: blue;
|
||
|
|
width: 65%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.adv_content{
|
||
|
|
float:left; width: 68%; padding: 5px;
|
||
|
|
position: absolute; top: 45px; bottom: 10px; right: 15px;
|
||
|
|
border: 1px solid #DDDDDD; border-radius: 18px;
|
||
|
|
background-color: #DDDDDD;
|
||
|
|
}
|
||
|
|
|
||
|
|
.adv_popup_links{
|
||
|
|
display: none; position: fixed; left: 10%; width: 400px; z-index: 10;
|
||
|
|
border: 2px solid #333333; border-radius: 20px;
|
||
|
|
background-color: #BBBBBB; color: red;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
Experience Styles
|
||
|
|
============================= */
|
||
|
|
.exp_list{
|
||
|
|
float: left;
|
||
|
|
position: absolute; top: 50px; bottom: 20px; right: 20px; width: 20%; padding: 5px;
|
||
|
|
border: 3px #CDCDCD solid; border-radius: 5px;
|
||
|
|
background-color: #CBCBCB; box-shadow: 0px 0px 30px 10px #CBCBCB;
|
||
|
|
}
|
||
|
|
.exp_logs_title{
|
||
|
|
font-weight: bolder; letter-spacing: 2px;
|
||
|
|
text-align: center;
|
||
|
|
color: #666699;
|
||
|
|
}
|
||
|
|
|
||
|
|
.exp_logs_location{
|
||
|
|
font-weight: bold; letter-spacing: 2px; color: #444444; text-align: center;
|
||
|
|
padding: 5px; width: 80%; margin-left: auto; margin-right: auto;
|
||
|
|
border: 3px #669966 solid; border-radius: 5px;
|
||
|
|
background-color: #99CC99;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.exp_logs_location:hover{
|
||
|
|
background-color: #669966; color: #CCCCCC;
|
||
|
|
}
|
||
|
|
.exp_logs_a{ text-decoration: none; color: #444444;}
|
||
|
|
.exp_logs_a:link{ text-decoration: none; color: #444444;}
|
||
|
|
.exp_logs_a:hover{ text-decoration: none; color: black;}
|
||
|
|
.exp_logs_a:visited{ text-decoration: none; color: #444444;}
|
||
|
|
.exp_logs_a:focus{ text-decoration: none; color: #444444;}
|
||
|
|
.exp_hr{
|
||
|
|
color: blue; background-color: blue;
|
||
|
|
width: 65%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.exp_popup{
|
||
|
|
position: fixed; left: 10%; top: 25%; z-index: 10;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.exp_popup_tweets{
|
||
|
|
display: none; float: left; width: 250px; height: 60%; z-index: 10;
|
||
|
|
padding: 5px; margin: 5px; border: 2px solid blue; border-radius: 20px;
|
||
|
|
background-color: #BBBBBB; color: blue;
|
||
|
|
}
|
||
|
|
|
||
|
|
.exp_popup_gplus{
|
||
|
|
display: none; float: left; width: 250px; height: 500px; z-index: 11;
|
||
|
|
padding: 5px; margin: 5px; border: 2px solid red; border-radius: 20px;
|
||
|
|
background-color: #BBBBBB; color: red;
|
||
|
|
}
|
||
|
|
|
||
|
|
.exp_popup_links{
|
||
|
|
display: none; float: left; width: 250px; height: 500px; z-index: 12;
|
||
|
|
padding: 5px; margin: 5px; border: 2px solid green; border-radius: 20px;
|
||
|
|
background-color: #BBBBBB; color: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* =============================
|
||
|
|
About Styles
|
||
|
|
============================= */
|
||
|
|
.about_section{
|
||
|
|
padding: 5px;
|
||
|
|
border: 2px solid #666699; border-radius: 20px;
|
||
|
|
background-color: #DDDDDD;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about_hr{
|
||
|
|
width:10%;
|
||
|
|
color: #666699; background-color: #666699;
|
||
|
|
}
|