Difference between revisions of "User:MogDog66/userpagev2/Page.css"

From Team Fortress Wiki
Jump to: navigation, search
(For the greater good)
Line 1: Line 1:
/* Styling */
+
/* HTML RESTYLES AND CUSTOMIZATIONS */
 
+
.heading-title { color: #fdfdfc; font-size: 22px; font-family: TF2 Build, Arial; font-weight: bold;text-shadow:1px 1px 2px #000000; }
 
.heading-strong { font-family: TF2 Build; font-size: 60px; color: #666666;text-shadow:3px 3px 3px #ffffff; }
 
.link-title { font-family:TF2 Build;font-size:18px;color:#fdfdfc;text-shadow:1px 1px 1px black;width:170px; }
 
 
 
.tlink a:link { color: #FDFDFC !important; font-weight:normal; } /* unvisited link */
 
.tlink a:visited { color: #E6E6E4 !important; font-weight:normal; } /* visited link */
 
.tlink a:hover { color: #FDFDFC !important; font-weight:bold; text-decoration:none !important; }  /* mouse over link */
 
.tlink a:active { color: #FDFDFC !important; font-weight:normal; }    /* selected link */
 
 
 
.secondary-link a:link { color: #767676 !important; font-weight:normal; } /* unvisited link */
 
.secondary-link a:visited { color: #858585 !important; font-weight:normal; } /* visited link */
 
.secondary-link a:hover { color: #767676 !important; font-weight:bold; text-decoration:none !important; }  /* mouse over link */
 
.secondary-link a:active { color: #767676 !important; font-weight:normal; }    /* selected link */
 
 
 
.background {
 
  background-image:url('http://wiki.teamfortress.com/w/images/b/b9/User_MogDog66_Spy_mask.png');
 
  background-repeat:no-repeat;
 
}
 
 
 
 
#bodyContent ul { padding:0px; margin:0px; list-style-image: none; }
 
#bodyContent ul { padding:0px; margin:0px; list-style-image: none; }
#bodyContent li { list-style-image:url(http://wiki.teamfortress.com/w/images/f/f5/User_MogDog66_Dot.png); }
+
#bodyContent li { list-style-image:url(http://wiki.teamfortress.com/w/images/b/bc/User_MogDog66_Mp-Dot.png); }
  
/* Tables */
+
#global-wrapper a { color: #b96518 !important; }
 +
#global-wrapper a:hover { color: #f09643 !important; text-decoration:none; }
  
.table-container { width:100%;border:0px;overflow:hidden;text-align:center;border-spacing:5px 7px }
+
/* CLASS SELECTOR BOX */
.table-content { background:#dddddd; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;border:1px solid black;font-size: 15px; font-family: TF2 Build, Arial; }
 
  
.achtable-container { border-spacing: 3px; width: 100%; text-align: center; vertical-align: middle; }
+
.mp-classSelector { background:url('http://i.imgur.com/33MCZ.png') no-repeat; width:713px; height:80px; margin:auto auto; }
.achtable-content { background:#a6a6a6;color:#fdfdfc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; }
+
.mp-classSelector td a { display:block; padding: 0px 0px 39px 39px; }
 +
.mp-classSelector td a:hover { text-decoration:none; }
  
.toc-container { width:155px;text-align:center;background-color:#bbbbbb;font-size:15px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; }
+
#scout { background:url('http://i.imgur.com/ndEKw.png') no-repeat; background-position:center; }
.toc-header { font-family:TF2 Build,Arial;font-size:16px;text-shadow:1px 1px 2px #fdfdfc;border-bottom:1px solid #666666;color:#323131 }
+
#scout:hover { background:url('http://i.imgur.com/vmEup.png') no-repeat; background-position:center; }
.toc-content { font-family:TF2 Secondary,Arial;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; }
 
.toc-content-highlight { font-family:TF2 Secondary,Arial;background-color:#cdcbcb;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; }
 
  
/* Collapsible containers */
+
#soldier{ background:url('http://i.imgur.com/Wszay.png') no-repeat; background-position:center; }
 +
#soldier:hover { background:url('http://i.imgur.com/0ebtT.png') no-repeat; background-position:center; }
  
.mog-loadout .poot-tabs-title
+
#pyro{ background:url('http://i.imgur.com/Dt9He.png') no-repeat; background-position:center; }
{
+
#pyro:hover { background:url('http://i.imgur.com/qL5zH.png') no-repeat; background-position:center; }
  background:#a6a6a6;
 
  font-weight:bold;
 
  text-shadow: 1px 1px 1px #000000;
 
  color:#fdfdfc;
 
  text-align:center;
 
  padding-left:1em;
 
  padding-right:1em;
 
  margin-bottom:2px;
 
  -moz-border-radius: 4px;
 
  -webkit-border-radius: 4px;
 
  border-radius: 4px;
 
}
 
  
.mog-loadout .poot-tabs-title a {
+
#demoman{ background:url('http://i.imgur.com/iMY37.png') no-repeat; background-position:center; }
  color: #FDFDFC !important;
+
#demoman:hover { background:url('http://i.imgur.com/uQ5YK.png') no-repeat; background-position:center; }
}
 
  
.mog-loadout .poot-tabs-title a:visited {
+
#heavy{ background:url('http://i.imgur.com/S7tgM.png') no-repeat; background-position:center; }
  color: #E6E6E4 !important;
+
#heavy:hover { background:url('http://i.imgur.com/pBxmm.png') no-repeat; background-position:center; }
}
 
  
.mog-loadout .poot-tabs-title a:hover {
+
#engineer{ background:url('http://i.imgur.com/knWQ6.png') no-repeat; background-position:center; }
  color: #FDFDFC !important;
+
#engineer:hover { background:url('http://i.imgur.com/7d8sB.png') no-repeat; background-position:center; }
  font-weight:bold;
 
  text-decoration:none !important;
 
}
 
  
.mog-loadout .poot-tabs-title a:active {
+
#medic{ background:url('http://i.imgur.com/usiFF.png') no-repeat; background-position:center; }
  color: #FDFDFC !important;
+
#medic:hover { background:url('http://i.imgur.com/4IkSE.png') no-repeat; background-position:center; }
}
 
  
 +
#sniper{ background:url('http://i.imgur.com/6NgKS.png') no-repeat; background-position:center; }
 +
#sniper:hover { background:url('http://i.imgur.com/rGfvF.png') no-repeat; background-position:center; }
  
.mog-loadout .poot-tabs-vertical .poot-tabs > ul > li, .poot-tabs-horizontal .poot-tabs > ul a {
+
#spy{ background:url('http://i.imgur.com/XUefA.png') no-repeat; background-position:center; }
  color: #FDFDFC !important;
+
#spy:hover { background:url('http://i.imgur.com/hpCEV.png') no-repeat; background-position:center; }
}
 
  
.mog-loadout .poot-tabs-vertical .poot-tabs > ul > li, .poot-tabs-horizontal .poot-tabs > ul a:visited {
+
/* CONTENT BOXES, CONTAINERS, AND STYLES */
  color: #E6E6E4 !important;
 
}
 
 
 
.mog-loadout .poot-tabs-vertical .poot-tabs > ul > li, .poot-tabs-horizontal .poot-tabs > ul a:hover {
 
  color: #FDFDFC !important;
 
  font-weight:bold;
 
  text-decoration:none !important;
 
}
 
  
.mog-loadout .poot-tabs-vertical .poot-tabs > ul > li, .poot-tabs-horizontal .poot-tabs > ul a:active {
+
.mp-column {
  color: #FDFDFC !important;
+
width: 90%;
 +
margin: 10px auto;
 
}
 
}
.mog-loadout .poot-tabs-vertical .poot-tabs > ul > li, .poot-tabs-horizontal .poot-tabs > ul
+
.mp-LeftBox {
{
+
box-sizing : border-box;
  background:#bbbbbb;
+
-moz-box-sizing:border-box;
  color:#fdfdfc;
+
-webkit-box-sizing:border-box;
  margin-bottom:2px;
+
width : 49%;
  -moz-border-radius: 4px;
+
padding : 8px;
  -webkit-border-radius: 4px;
+
background-color: #dad9d8;
  border-radius: 4px;
+
border : #4f4945 solid 2px;
 +
background:url('http://i.imgur.com/Lbuam.png') repeat-x; background-position:top;
 +
float : left;
 +
position: relative;  
 
}
 
}
 
+
.mp-RightBox {
.mog-loadout .poot-tabs > ul > li.poot-tabs-selected
+
box-sizing : border-box;
{
+
-moz-box-sizing:border-box;
  background:#838383;
+
-webkit-box-sizing:border-box;
  color:#fdfdfc;
+
width : 49%;
  font-weight:bold;
+
padding : 8px;
  -moz-border-radius: 5px;
+
background-color: #dad9d8;
  -webkit-border-radius: 5px;
+
border : #4f4945 solid 2px;
  border-radius: 5px;
+
background:url('http://i.imgur.com/Lbuam.png') repeat-x; background-position:top;
 +
float : right;
 +
position: relative;  
 
}
 
}
  
.mog-loadout .poot-tabs-container
+
.mp-title {
{
+
position:absolute;
  display:block;
+
top:-24px;
  margin-left:auto;
+
left:-3px;
  margin-right:auto;
+
display:inline-block;
  -moz-border-radius: 4px;
+
padding: 10px 10px 10px 0px;
  -webkit-border-radius: 4px;
+
width: auto;
  border-radius: 4px;
+
height:12px;
  border:1px solid black;
+
z-index:2;
  padding:3px;
+
font-size:17px;
 +
color:#4f4944;
 +
text-shadow: 1px 2px 1px #c9b9b7;
 +
background-color:#fdfdfd;
 +
font-family:'Blackoak Thin Std Wiki 2';
 
}
 
}
  
.mog-loadout .poot-tabs-content
+
#mp-indexTable {
{
+
text-align:center;
  position:relative;
+
width:100%;
  background:#c2c2c2;
+
font-weight:bold;
  height: auto;
+
font-size:1.5em;
  -moz-border-radius: 4px;
+
font-family: TF2;
  -webkit-border-radius: 4px;
 
  border-radius: 4px;
 
 
}
 
}
 
 
/* Containers */
 
 
.global-container { margin:auto; padding-top:15px; padding-bottom:25px;width:1233px; }
 
 
.generic-container {
 
  color: #353535;
 
  text-align: left;
 
  font-family: Verdana,Arial;
 
  font-size: 12px;
 
  background: #dddddd;
 
  width: 70%;
 
  padding: 30px;
 
  padding-top: 60px;
 
  margin: 16px auto 0px auto;
 
  -moz-border-radius: 10px;
 
  -webkit-border-radius: 10px;
 
  border-radius: 10px;
 
  border: 1px solid black;
 
  overflow: hidden;
 
  position: relative;
 
  float:left;
 
}
 
 
.opening-container {
 
  background: #dddddd;
 
  border: 1px solid black;
 
  width: 1233px;
 
  text-align: center;
 
  margin: 15px auto 5px auto;
 
  -moz-border-radius: 10px;
 
  -webkit-border-radius: 10px;
 
  border-radius: 10px;
 
  overflow: hidden;
 
}
 
 
.opening-content-left { width: 42%; padding: 30px; position: relative; float: left; padding-top: 12%; padding-bottom: 10%; margin: 1px auto 10px auto; overflow: hidden; }
 
 
.opening-content-right { padding: 5px; padding-top: 2%; padding-bottom: 5%; padding-right: 10%; float:right; overflow: hidden; position: relative; }
 
 
.title-container {
 
  position: absolute;
 
  top: 0;
 
  left: 0;
 
  width: 100%;
 
  background: #bbbbbb;
 
  border-bottom: 1px solid black;
 
  -moz-border-radius: 10px;
 
  -webkit-border-radius: 10px;
 
  border-radius: 10px;
 
  text-align: center;
 
}
 
 
.link-container { padding-top:3px;padding-left:13px;padding-bottom:7px; }
 
 
.landi-container {
 
  color: #353535;
 
  background: #dddddd;
 
  width: 709px;
 
  text-align: left;
 
  padding: 14px;
 
  padding-right: 200px;
 
  padding-top: 10px;
 
  padding-bottom:10px;
 
  margin: 16px auto 0px auto;
 
  -moz-border-radius: 10px;
 
  -webkit-border-radius: 10px;
 
  border-radius: 10px;
 
  border: 1px solid black;
 
  overflow: hidden;
 
  position: relative;
 
  float: left;
 
}
 
 
.scout-positioner { float: left; padding-top: 52px }
 
 
.landi-content {
 
  color: #353535;
 
  font-family: Verdana,Arial;
 
  font-size: 12px;
 
  background: #dddddd;
 
  text-align: left;
 
  padding: 10px;
 
  width: 550px;
 
  padding-top: 60px;
 
  padding-right: 18px;
 
  margin: 13px auto 0px;
 
  -moz-border-radius: 10px;
 
  -webkit-border-radius: 10px;
 
  border-radius: 10px;
 
  border: 1px solid black;
 
  position: relative;
 
}
 
 
.scout-container {
 
  background: #bbbbbb;
 
  padding: 7px;
 
  padding-right: 10px;
 
  padding-top: 1px;
 
  padding-bottom:10px;
 
  -moz-border-radius: 13px;
 
  -webkit-border-radius: 13px;
 
  border-radius: 13px;
 
  border: 2px solid black;
 
  overflow: hidden;
 
  width: 260px;
 
  position: relative;
 
  left: 12px;
 
  top: 12px;
 
}
 
 
.tandl-container {
 
  color: #353535;
 
  font-family: Verdana,Arial;
 
  font-size: 12px;
 
  background: #dddddd;
 
  width: 32%;
 
  text-align: left;
 
  padding: 25px;
 
  padding-top: 59px;
 
  margin: 17px auto auto;
 
  -moz-border-radius: 10px;
 
  -webkit-border-radius: 10px;
 
  border-radius: 10px;
 
  border: 1px solid black;
 
  overflow: hidden;
 
  position: relative;
 
  float:left;
 
}
 
 
.userbox-container {
 
  background: #dddddd;
 
  font-family: Verdana,Arial;
 
  width: 285px;
 
  -moz-border-radius: 10px;
 
  -webkit-border-radius: 10px;
 
  border-radius: 10px;
 
  border: 1px solid black;
 
  overflow: hidden;
 
  position: relative;
 
  float: right;
 
}
 
 
.userbox-title-container-top {
 
  position: absolute;
 
  top: 0;
 
  left: 0;
 
  width: 100%;
 
  padding-bottom:11px;
 
  padding-top:11px;
 
  background: #bbbbbb;
 
  border-bottom: 1px solid black;
 
  -moz-border-radius: 10px;
 
  -webkit-border-radius: 10px;
 
  border-radius: 10px;
 
  text-align: center;
 
}
 
 
.userbox-title-container-middle {
 
  top: 0;
 
  left: 0;
 
  width: 100%;
 
  background: #bbbbbb;
 
  border-top: 1px solid black;
 
  border-bottom: 1px solid black;
 
  -moz-border-radius: 10px;
 
  -webkit-border-radius: 10px;
 
  border-radius: 10px;
 
  padding-bottom:11px;
 
  padding-top:11px;
 
  text-align: center;
 
}
 
 
.userbox-padding { padding: 25px; padding-left: 18px; padding-bottom: 10px; padding-top: 7px; margin: 10px auto 10px auto; }
 
 
/* Misc. */
 
#background-img { z-index: 32; }
 

Revision as of 04:46, 30 August 2012

/* HTML RESTYLES AND CUSTOMIZATIONS */
 
#bodyContent ul { padding:0px; margin:0px; list-style-image: none; }
#bodyContent li { list-style-image:url(http://wiki.teamfortress.com/w/images/b/bc/User_MogDog66_Mp-Dot.png); }

#global-wrapper a { color: #b96518 !important; }
#global-wrapper a:hover { color: #f09643 !important; text-decoration:none; }

/* CLASS SELECTOR BOX */

.mp-classSelector { background:url('http://i.imgur.com/33MCZ.png') no-repeat; width:713px; height:80px; margin:auto auto; }
.mp-classSelector td a { display:block; padding: 0px 0px 39px 39px; }
.mp-classSelector td a:hover { text-decoration:none; }

#scout { background:url('http://i.imgur.com/ndEKw.png') no-repeat; background-position:center; }
#scout:hover { background:url('http://i.imgur.com/vmEup.png') no-repeat; background-position:center; }

#soldier{ background:url('http://i.imgur.com/Wszay.png') no-repeat; background-position:center; }
#soldier:hover { background:url('http://i.imgur.com/0ebtT.png') no-repeat; background-position:center; }

#pyro{ background:url('http://i.imgur.com/Dt9He.png') no-repeat; background-position:center; }
#pyro:hover { background:url('http://i.imgur.com/qL5zH.png') no-repeat; background-position:center; }

#demoman{ background:url('http://i.imgur.com/iMY37.png') no-repeat; background-position:center; }
#demoman:hover { background:url('http://i.imgur.com/uQ5YK.png') no-repeat; background-position:center; }

#heavy{ background:url('http://i.imgur.com/S7tgM.png') no-repeat; background-position:center; }
#heavy:hover { background:url('http://i.imgur.com/pBxmm.png') no-repeat; background-position:center; }

#engineer{ background:url('http://i.imgur.com/knWQ6.png') no-repeat; background-position:center; }
#engineer:hover { background:url('http://i.imgur.com/7d8sB.png') no-repeat; background-position:center; }

#medic{ background:url('http://i.imgur.com/usiFF.png') no-repeat; background-position:center; }
#medic:hover { background:url('http://i.imgur.com/4IkSE.png') no-repeat; background-position:center; }

#sniper{ background:url('http://i.imgur.com/6NgKS.png') no-repeat; background-position:center; }
#sniper:hover { background:url('http://i.imgur.com/rGfvF.png') no-repeat; background-position:center; }

#spy{ background:url('http://i.imgur.com/XUefA.png') no-repeat; background-position:center; }
#spy:hover { background:url('http://i.imgur.com/hpCEV.png') no-repeat; background-position:center; }

/* CONTENT BOXES, CONTAINERS, AND STYLES */

.mp-column {
	width: 90%;
	margin: 10px auto;
}
.mp-LeftBox {
	box-sizing : border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	width : 49%;
	padding : 8px;
	background-color: #dad9d8;
	border : #4f4945 solid 2px;
	background:url('http://i.imgur.com/Lbuam.png') repeat-x; background-position:top;
	float : left;
	position: relative; 
}
.mp-RightBox {
	box-sizing : border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	width : 49%;
	padding : 8px;
	background-color: #dad9d8;
	border : #4f4945 solid 2px;
	background:url('http://i.imgur.com/Lbuam.png') repeat-x; background-position:top;
	float : right;
	position: relative; 
}

.mp-title {
	position:absolute;
	top:-24px;
	left:-3px;
	display:inline-block;
	padding: 10px 10px 10px 0px;
	width: auto;
	height:12px;
	z-index:2;
	font-size:17px;
	color:#4f4944;
	text-shadow: 1px 2px 1px #c9b9b7;
	background-color:#fdfdfd;
	font-family:'Blackoak Thin Std Wiki 2';
}

#mp-indexTable {
	text-align:center;
	width:100%;
	font-weight:bold;
	font-size:1.5em;
	font-family: TF2;
}