/* 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; }