User:Makirui/Sandbox1

   <img src="http://weknowyourdreams.com/images/kitten/kitten-08.jpg" />

Character Name

---

There is nothing like a nice sandwich

.headerContainer,z-tabs {

 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-size:14px;

}

.headerContainer {

 margin:0;
 padding:0;
 border-color:#0487BD;
 border-style:solid;
 border-width:1px 1px 0 1px;  
 display:block;
 background-color:#0487BD;
 min-height:100px;

} .headerContainer > .headerContent {

 width:100%;
 text-align:center;

}

.headerContainer > .headerContent h1 {

 color:#fff;
 text-shadow: -1px -1px 1px #B4D8E7, 1px 1px 1px #000;
 opacity:.9;
 font-variant:small-caps;
 font-size:35px;
 font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

}

.headerContainer > .headerContent hr {

 border: 0; 
 text-align:center;
 height: 1px; 
 background-image: -webkit-linear-gradient(left, #0487BD, #fff, #0487BD);
 background-image: -moz-linear-gradient(left, #0487BD, #fff, #0487BD);
 background-image: -ms-linear-gradient(left, #0487BD, #fff, #f0f0f0);
 background-image: -o-linear-gradient(left, #f0f0f0, #fff, #0487BD); 
 margin-bottom:14px;

}

.headerContainer > .headerContent hr:after {

 content: '§';
   display:inline-block;
 position:relative;
 top:-14px;
 padding:0 10px;
 color:#fff;
 font-size:25px;
 -webkit-transform: rotate(90deg);

-moz-transform: rotate(90deg); transform: rotate(90deg); }

.headerContainer .headerContent > .quote {

 color:#fff;
 font-variant:small-caps;
 letter-spacing:4px;
 font-size:16px;
 text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;

}

.headerLogo {

 float:left;
 height:100%;
 width:100px;

} .headerLogo img {

 border-radius: 50%;
 max-height:100px;
 max-width:100px;
 position:relative;
 top:10px;
 left:10px;
  -webkit-box-shadow: rgba(255,255,255,0.8) 0px 0 10px;
-moz-box-shadow: rgba(255,255,255,0.8) 0 0 10px;
box-shadow: rgba(255,255,255,0.8) 0 0 10px;
 

}

.headerContent {

 display:block;

}

.headerContainer:after {

 clear:both;

}

.contentTabs,.z-tabs {

 margin:0;
 border:0;
   display:block;
   outline:0 none;
 clear:both;

}

.z-tabs-nav {

 min-width:70px;
 float:left;
 box-shadow:0 1px 6px rgba(0,0,0,0.125);
 margin:0;
 margin-right:-1px;
 border-color:#0487BD;
 border-style:solid;
 border-width:1px 0 1px 1px;  
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 position:relative;
   padding:0;
   display:block;
   text-decoration:none;
   list-style:none;
   list-style-type:none;

}

.z-tabs.nav > li {

 position:relative;
 margin:0;
 padding:0;
 border:0;
 outline:0 none;
 display:block;
 text-decoration:none;
 list-style:none;
 list-style-type:none;

}

.z-tabs-nav > li > a {

 box-shadow:0 1px 3px -3px rgba(0,0,0,0.15);
 padding:13px 25px;
 color:white;
 text-shadow:1px 1px 1px rgba(0,0,0,.5);
     background: #1abde7;
   background: -moz-linear-gradient(top, #1abde7 0%, #1c9dd1 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1abde7), color-stop(100%,#1c9dd1));
   background: -webkit-linear-gradient(top, #1abde7 0%,#1c9dd1 100%);
   background: -o-linear-gradient(top, #1abde7 0%,#1c9dd1 100%);
   background: -ms-linear-gradient(top, #1abde7 0%,#1c9dd1 100%);
   background: linear-gradient(to bottom, #1abde7 0%,#1c9dd1 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1abde7', endColorstr='#1c9dd1',GradientType=0 );
 border-color:#0487BD;
 border-style:solid;
 border-width:0 0 1px 0;
 font-size:12px;
 line-height:18px;
 font-weight:inherit;
 cursor:pointer;
 position:relative;
 margin:0;
 display:block;
 box-sizing:content-box;

}

.z-tabs-nav > li > a:hover {

 background: #21ADDF;

}

.z-tabs-nav > li.z-active.z-first > a {

 border-bottom-width:1px;

}

.z-tabs-nav > li.z-active > a {

 background:#fff;
 color:#000F4D;
     text-shadow: 0 1px rgba(78, 78, 78, 0.1);
   filter: none;
     border-right-width: 0;
   z-index: 10;

}

.z-container {

   border-color:#0487BD;
   border-style:solid;
   border-width:1px;
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.125);
   position:relative;
   overflow:hidden;
   padding:0;
   margin:0;
   background:#fff;
   box-sizing:content-box;
   

}

.z-content {

   display:none;
 width:100%;
 height:100%;
 overflow:hidden;
 padding:0;
   box-sizing:content-box;

}

.z-content > .z-content-inner {

   padding:10px 25px;
 font-family:"Trebuchet MS", Helvetica, sans-serif;

}

.z-active {

   display:block;

}

.z-content h1 {

 font-variant:small-caps;
 font-weight:bold;

}

.z-content h2 {

 width:100%;
 background-color:#0487BD;
 color:#fff;
 padding:5px;
 font-variant:small-caps;
 letter-spacing:3px;
 text-shadow: 1px 1px 2px black;
 margin:0;

} .z-content h3 {

 width:100%;
 background-color:#B4D8E7;
 color:#000;
 padding:5px;
 font-variant:small-caps;
 letter-spacing:3px;
 font-weight:600;
 text-shadow: 1px 1px 2px #0487BD;
 margin:0;

}

.z-content .container {

 display:inline-block;
 min-width:350px;
 margin-right:10px;

}

.z-content ul {

 list-style:none;
 padding:0;
 margin:0;  

} .z-content ul li {

 padding-left:1em;
 text-ident:-7em;

} .z-content ul li:before {

 content:"Ï ";
 font-family: Wingdings; 
 color:#0487BD;

}

.z-content .container title {

 background-color:#0487BD;
 color:white;
 padding:5px;
 display:block;
 font-weight:bold;
 text-align:center;
 font-variant:small-caps;
 letter-spacing:3px;
 text-shadow: 1px 1px 2px black;
 border:1px solid #000;

}

.z-content .container section {

 display:block;
 padding:5px;
 

}

h4 {

   margin:0;

} h1 {

 margin:0;

}

.icon {

 position:absolute;
 height:20px;
 top:10px;
 left:3px;
 vertical-align:middle;

}

.icon-profile {

 content: url('http://i.imgur.com/Eat3PDV.png');
 top:10px;

}

.icon-appearance {

 content: url('http://i.imgur.com/n26NxUC.png');

}

.icon-skills {

 content: url('http://i.imgur.com/I2f362U.png');

}

.icon-allies {

 content: url('http://i.imgur.com/6sgrTTZ.png');

}

.icon-rumors {

 content: url('http://i.imgur.com/6achxtY.png');

}

.icon-history {

 content: url('http://i.imgur.com/SVvMDwy.png');

}

.icon-info {

 content: url('http://i.imgur.com/qAADVap.png');

}