shy's code

<style>

.ui-tooltip {
    background: #ff6898  !important;
    border: 1px dashed #c7346d !important;
    color: #eee !important;
border-radius: 30px;
transition: 0.5s;
font-size: 10px;
box-shadow: 3px 0px 4px #c7346d;
}

#eventtxt {
    background: #555;
    color: white;
}

.button, .button_tall {
    font: 12px/13px "Arial";
    font-weight: normal;
    letter-spacing: 1px;
    color: #fff;
    border: 2px solid #c7346d;
    margin: 5px;
    background-image: none;
    padding: 0 10px;
    background-color: #fff;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: visible;
    height: inherit;
    background: -webkit-gradient(linear,0% 0%,0% 100%,from(#ff6898),to(#ff6898));
    background: -webkit-linear-gradient(top,#ff6898,#ff6898);
    background: -moz-linear-gradient(top,#ff6898,#ff6898);
    background: -ms-linear-gradient(top,#ff6898,#ff6898);
    background: -o-linear-gradient(top,#ff6898,#ff6898);
    background-color: #ff6898!important;
transition: 0.5s;
}

.button:hover, .button_tall:hover {
    border-color: #c7346d;
    color: #fff;
opacity: 0.5;
transition: 0.5s;
}

input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
outline: none;
}

.item_box {
    text-align: center;
    float: left;
    width: 125px;
    margin: 10px;
color: white;
    opacity: 0.5;
transition: 0.5s;
}

.item_box:hover {
    text-align: center;
    float: left;
    width: 125px;
    margin: 10px;
    opacity: 9;
transition: 0.5s;
}

#eventtxt a {
    color: white;
}

::-moz-selection {
background-color: #f8ff96;
color: #c7346d; }

::selection {
background-color: #f8ff96;
color: #c7346d; }

::-webkit-scrollbar {
    width: 8px;
     transition: 0.5; }

::-webkit-scrollbar-button {
    width: 8px;
     transition: 0.5; }

::-webkit-scrollbar-track {
    background:#444;
    border-radius:1px;
    border: thin solid #444;
     transition: 0.5; }

::-webkit-scrollbar-thumb {
    background:#111;
    border-radius:1px;
     transition: 0.5; }


#menu_holder div.menu_dropdown div.menu_dropdown_inner {
    background: #f8ff96;
    overflow: auto;
    position: relative;
    top: 5px;
    left: 5px;
transition: 0.5s;
color: #398a68;
}

#contentholder {
    background-image: none;
    width: 1080px;
    left: 9px;
    color: #000;
    padding: 5px 0 10px 0;
}


#cattery_infobox {
width: 1200px;
}

 #cattery_infobox i {display: none;}

.ci_notice { display:none; }

.sf-menu { display:none; }

#sidebanners { display:none; }

#gametime { display:none; }

#notice { display:none; }

#addbookmark { display:none; }

#bodyi { display:none; }

#titleimg { display:none; }

#titletxt { display:none; }

#updatetimegoaway{ display:none; }

#menu_holder div.menu_dropdown a {
    display: block;
    margin-bottom: 2px;
    color: #398a68;
opacity: 0.5;
transition: 0.5s;
}

#menu_holder div.menu_dropdown a:hover {
    display: block;
    margin-bottom: 2px;
    color: #c7346d;
transition: 0.5s;
}

.breed_count {
    letter-spacing: 1.5px;
    float: left;
    opacity: 0.5;
    margin-right: 5px;
    padding: 3px;
    font-weight: normal;
    color: #000;
transition:  0.5s;
}

.breed_count:hover {
    letter-spacing: 1.5px;
    float: left;
    opacity: 1;
    margin-right: 5px;
    padding: 3px;
    font-weight: normal;
    color: #000;
transition: 0.5s;
}

#content {
    left: 9px;
    color: #000;
    padding: 5px 0 10px 0;
    background-color: #c0ffba;
}
#content {
    height: auto;
    position: relative;
    font: 12px/14px "Arial";
}
#content {
    background-image: none;
    width: 770px;
    left: 9px;
    color: #000;
    padding: 5px 0 10px 0;
}

.menu_dropdown_bkg {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 271px;
    height: 35px;
    z-index: 1500;
color: #398a68;
    display: none;
}

body {
width: 1573px;
cursor: crosshair;
  -webkit-user-drag: none;
background-color: #c0ffba;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
    cursor: crosshair;
    outline: none;
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin-top: .5em;
    padding: 0px 50px;
    width: 200px;
background-color: #c7346d;
}

#menu_holder {
    z-index: 3;
    width: 364px;
    height: 40px;
    overflow: visible;
    position: absolute;
    top: 0;
    left: 790px;
}

#holder {
    position: absolute;
    top: 0;
    left: 130px;
    height: 100%;
}

.menu_shadow {
    display: none;
    top: 0;
    height: 41px;
    position: absolute;
    z-index: 3;
    background: #c7346d;
}

#menu_holder div.menu_dropdown div.menu_subtitle {
    font-weight: bold;
    margin-bottom: 4px;
    display: block;
    letter-spacing: 1px;
    color: #c7346d;
}

#menu_holder div.menu_dropdown {
    font-size: 11px;
    line-height: 12px;
    background: #f8ff96;
    position: absolute;
    z-index: 1000;
    display: none;
}


#mweor_good_text span, .good_label {
    background: #398a68;
    padding: 2px 45px;
    margin: 0 5px;
    font-size: 12px;
    line-height: 14px;
    color: white;
border-radius: 30px;
border: 1px dashed #c0ffba;
transition: 0.5s;
}

#mweor_good_text span, .good_label:hover {
  opacity: 0.5;
    padding: 2px 45px;
    margin: 0 5px;
    font-size: 12px;
    line-height: 14px;
    color: white;
border-radius: 30px;
border: 1px dashed #c0ffba;
transition: 0.5s;
}

.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: none;
}



.theader, tr.theader {
    background: #c7346d;
}

.plain_table {
    padding: 0;
    text-align: left;
    font-size: 12px;
    display: none;
}

.plain_table {
    padding: 0;
    text-align: center;
    font-size: 12px;
width: 500px;
border: none;
}


#cattery_infobox {
display: none;
}

.text_medium {
    font-size: 15px;
    line-height: 16px;
}


#footer { display: none; }


#topbanner { display:none; }

#bottombanner img { display: none; }

.ci_notice { display:none; }

.sf-menu { display:none; }

#sidebanners { display:none; }

#footer { display:none; }

#topbanner { display:none; }

#bodyi { display:none; }

#footer { display:none; }

#messageplayer { display: none; }

#cattery_descbox {
    position: relative;
    width: 1230px;
height: 920px;
    float: left;
    padding: 4px;
    right: 10px;
    overflow: hidden;
    background: none;
}

/*mweor tabs*/

.ui-widget-content {

    border: 1px solid #83bdc9;

    background: #83bdc9;

transition: 0.5s;

    color: #000;

}

.ui-widget-content {
    width: 900px;
    background: #fff;
    color: #000;
text-align: center;
border: 22px solid #888;
transition: 0.5s;

}


#mweor_tabs .ui-widget-header {

    width: 723px;

    border: 1px solid #fff;

    background: #fff;

    margin-left: -3px !important;

color: white;

    margin-top: -3px !important;

transition: 0.5s;

outline: none;

}



 .ui-widget-header {

    border: 1px solid #fff;

    background: #fff;

outline: none;

transition: 0.5s;

color: white;

}



.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {

    border: 1px solid #333;

outline: none;

transition: 0.5s;

color: white;

    background: #333 !important;

}



.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {

    background: #333;

outline: none;

    border: 1px solid #333;

transition: 0.5s;

color: white;

}

 .ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
    color: white;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #333;
    outline: none;
    border: 1px solid #333;
    transition: .5s;
    color: #fff;
}


.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-



focus {

    background: #333;

    border: 1px solid #333;

color: white;

transition: 0.5s;

outline: none;

cursor: crosshair;

}


.ui-widget-overlay {

    background: #333;

color: white;

cursor: crosshair;

outline: none;

    opacity: 0.5;

transition: 0.5s;


}

</style>

<style>
    .tabs {
          position: relative;
          min-height: 100px;
          clear: both;
          margin: 25px 0;
          top: 0px;
        }
        .tabs .tab {
          float: left;
        }
        .tabs .tab label {
          background: #ff6898;
          padding: 5px 50px;
border-bottom: 3px solid #ff6898;
          border-radius: 200px 200px 0px 0px;
-moz-border-radius: 200px 200px 0px 0px;
-webkit-border-radius: 200px 200px 0px 0px;
          position: relative;
color: white;
          left: 1px;
transition: 0.5s;
          cursor: crosshair;
        }

 .tabs .tab label:hover {
opacity: 0.5;
background-color: #398a68;
transition: 0.5s;
          cursor: crosshair;
        }

        .tabs .tab [type=radio] {
          display: none;
        }
        .tabs .content {
          position: absolute;
          top: 18px;
          left: 0;
          background: #f8ff96;
          right: 0;
          bottom: 0;
          padding: 20px;
width: 620px;
height: 420px;
  border-top: 10px solid #ff6898;
border-bottom: 10px solid #c7346d;
border-left: 10px solid #398a68;
border-right: 10px solid #398a68;
          overflow:auto;
transition: 0.5s;
color: #398a68;

        }
        .tabs [type=radio]:checked ~ label {
          background: #c7346d;
          color: #fff;
          z-index: 2;
transition: 0.5s;
cursor: crosshair;
border-bottom: 3px solid #c7346d;

        }
        .tabs [type=radio]:checked ~ label ~ .content {
          z-index: 1;
        }

        h {
        background-color: #c7346d;
        padding: 2px;
        color: white;
        }

         u {
       color: #398a68;
        }

        b {
        color: #398a68;
        }

        p {
font-size: 10px;
margin: 5px;
}

h1 {
font-size: 30px;
color: #c7346d;
}

h5 {
margin-top: -15px;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.5px;
color: #398a68;
}

quote {
border-left: 5px solid #398a68;
background-color: #c7346d;
padding: 9px 70px;
margin: auto;
color: #fff;
transition: 0.5s;
}

quote:hover {
border-left: 5px solid #c7346d;
background-color: #398a68;
transition: 0.5s;
color: white;
}

a {
color: #ff6898;
text-decoration: none;
transition: 0.5s;
}

a:hover {
color: #c7346d;
transition: 0.5s;
}

.column {
    float: left;
    width: 33.33%;
    padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
    content: "";
    clear: both;
    display: table;
}
</style>

    <div class="tabs">

       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Cattery</label>

           <div class="content">
<h1>Header One</h1>
  <h5>header 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
  <br><br>
  <b>bold text</b> <i>italic text</i> <u>underlined text</u> <s>strike text</s> <a href="www.mweor.com">link text</a> <h>highlighted text</h>
  <br><br><br>
  <quote>your snazzy quote goes here  - name</quote> </p>
           </div>
       </div>

       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">About</label>

           <div class="content">
             <h1>Header One</h1>
  <h5>header 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
  <br><br>
  <b>bold text</b> <i>italic text</i> <u>underlined text</u> <s>strike text</s> <a href="www.mweor.com">link text</a> <h>highlighted text</h>
  <br><br><br>
  <quote>your snazzy quote goes here  - name</quote> </p>
           </div>
       </div>

        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Customs</label>

           <div class="content">
  <h1>Header One</h1>
  <h5>header 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
  <br><br>
  <b>bold text</b> <i>italic text</i> <u>underlined text</u> <s>strike text</s> <a href="www.mweor.com">link text</a> <h>highlighted text</h>
  <br><br><br>
  <quote>your snazzy quote goes here  - name</quote> </p>0
           </div>
       </div>

        <div class="tab">
           <input type="radio" id="tab-4" name="tab-group-1">
           <label for="tab-4">Pets</label>

        <div class="content">
<h1>Header One</h1>
  <h5>header 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
  <br><br>
  <b>bold text</b> <i>italic text</i> <u>underlined text</u> <s>strike text</s> <a href="www.mweor.com">link text</a> <h>highlighted text</h>
  <br><br><br>
  <quote>your snazzy quote goes here  - name</quote> </p>
           </div>
       </div>

        <div class="tab">
           <input type="radio" id="tab-5" name="tab-group-1">
           <label for="tab-5">Other</label>

        <div class="content">
<h1>Header One</h1>
  <h5>header 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
  <br><br>
  <b>bold text</b> <i>italic text</i> <u>underlined text</u> <s>strike text</s> <a href="www.mweor.com">link text</a> <h>highlighted text</h>
  <br><br><br>
  <quote>your snazzy quote goes here  - name</quote> </p>
           </div>
       </div>
    </div>

<style>

#mweor_buttons2 {
 position: absolute;
 left: 680px;
 top: 285px;
 width: 100%;
}

#mweor_buttons2 a {
    background-color: #398a68;
    border: none;
    color: white;
    padding: 5px 190px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.5s;
}

/* Darker background on mouse-over */
#mweor_buttons2 a:hover {
    transition: 0.5s;
    opacity: 0.5;
cursor: crosshair;
}
</style>

<div id="mweor_buttons2">
<a href="/messages.php?user=87144" >send me a message</a>
</div>

<style>

#mweor_buttons {
position: absolute;
top: 310px;
left: 695px;
}

#mweor_buttons a {
    background-color: #ff6898;
    border: 3px solid #ff6898;
    color: white; /* White text */
    padding: 10px 133px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 200px;
    display: table; /* Make the buttons appear below each other */
    text-decoration: none;
    text-align: center;
    font-family: calibri;
    font-size: 13px;
    margin: 5px;
    transition: 0.5s;
}

/* Add a background color on hover */
#mweor_buttons a:hover {
    transition: 0.5s;
background-color: #c7346d;
border: 3px solid #c7346d;
cursor: crosshair;
    text-shadow: 0px 10px 0px #eee;
}

</style>


<div id="mweor_buttons">
<a href="/usershop.php?id=87144"> Shop </a>
  <a href="/cattery_offspring.php?id=87144"> Offspring List </a>
  <a href="/cattery_expected.php?id=87144"> Expected Mwits </a>
  <a href="/cattery_retired.php?id=87144"> Retired Mweors </a>
  <a href="/cattery_overview.php?id=87144"> Overview </a>
</div>


<div id="creditbutton">
  <a>Layout by Oakhearted (#196723) For Shy (#87144)</a>
  </div>

  <style>
 #creditbutton {
position: absolute;
top: 820px;
left: 0px;
}

#creditbutton a {
 background-color: #f8ff96;
border: 3px solid #f8ff96;
    color: #398a68;
    padding: 10px 133px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 890px;
    display: table; /* Make the buttons appear below each other */
    text-decoration: none;
    text-align: center;
    font-family: calibri;
    font-size: 13px;
    margin: 5px;
    transition: 0.5s;
}

/* Add a background color on hover */
#creditbutton a:hover {
opacity: 0.8;
    transition: 0.5s;
   cursor: crosshair;
   background-color: #f8ff96;
   border: 3px solid #f8ff96;
    text-shadow: 0px 10px 0px #eee;
}
</style>

<style>
#profilepicholder {
position: relative;
top: -130px;
left: 700px;
width: 430px;
padding: 10px;
  border-top: 10px solid #ff6898;
border-bottom: 10px solid #c7346d;
border-left: 10px solid #398a68;
border-right: 10px solid #f8ff96;
color: #2a363b;
text-align: center;
background-color: rgba(255,255,255,0.9);
}
#profilepicholder img {
position: relative;
left: 0px;
top: -5px;
border: 0px solid #ccc;
width: 150px;
height: 150px;
}

#links {
text-decoration: none;
position: relative;
top: 140px;
left: 690px;
width: 440px;
padding: 10px;
height: 230px;
  border-top: 10px solid #ff6898;
border-bottom: 10px solid #c7346d;
border-left: 10px solid #398a68;
border-right: 10px solid #f8ff96;
color: #2a363b;
z-index: 9;
text-align: center;
background-color: white;
}

#links a {
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: #ff6898;
    padding: 9px;
    width: 410px;
    transition: all 0.3s ease;
    color: white;
    font-size: 15px;
    margin: 5px;
    border-radius: 50px;
    left: 0px;
    top: 20px;
    position: relative;
}

#links a:hover {
    background-color: #398a68;
    letter-spacing: 2px;
    text-shadow: 0px 10px 0px  #c0ffba;
cursor: crosshair;

}

#box1 {
position: absolute;
  border-top: 10px solid #ff6898;
border-bottom: 10px solid #c7346d;
border-left: 10px solid #398a68;
border-right: 10px solid #f8ff96;
color: #2a363b;
text-align: center;
padding: 10px;
width: 640px;
height: 240px;
top: 535px;
background-color: white;
transition: 0.5s;
}

#box1 img {
transition: 0.5s;
}

#box1 img:hover {
opacity: 0.5;
transition: 0.5s;
}

</style>

<div id="profilepicholder">
<img src="http://orig10.deviantart.net/9cab/f/2017/109/3/3/oreocat_by_cupidmakes-db6eeop.png">
<br>
<a style=" font-family: calibri; font-size: 20px; font-weight: normal; cursor: crosshair;">Shy</a>
<br>
<a style="line-height: 20px; font-family: calibri; font-size: 12px; font-weight: normal; cursor: crosshair;">Run Away Wolves</a>
<br>
(#87144)
</div>


<div id="links">
  <a href="linkurlhere">link 01</a>
  <a href="linkurlhere">link 02</a>
  <a href="linkurlhere">link 03</a>
   <a href="linkurlhere">link 04</a>
   <a href="linkurlhere">link 05</a>
</div>



<div id="box1">
<marquee behavior="scroll" direction="left">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=240%C3%97240&w=240&h=240" width="240" height="240">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=240%C3%97240&w=240&h=240" width="240" height="240">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=240%C3%97240&w=240&h=240" width="240" height="240">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=240%C3%97240&w=240&h=240" width="240" height="240">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=240%C3%97240&w=240&h=240" width="240" height="240">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=240%C3%97240&w=240&h=240" width="240" height="240">
</marquee>
</div>