Tab Panel Style with css salesforce

<apex:page sidebar="false" showHeader="false">
 <style>
    .activeTab {
        background-color: #1797C0;
        font-weight: bold;
        box-shadow: 5px 5px 2px #888888;
        color: #FFFFFF !important;
        font-size: 12px;
        height: 25px;
        cursor: pointer;
        border: 0px solid #FFFFFF !important;
        background-image: none;
        }
    .inactiveTab {
        background-color: #e2f1f6;
        font-weight: bold;
        color: #000000 !important;
        font-size: 12px;
        height: 25px;
        cursor: pointer;
        border: 0px;
        border-radius: 1px;
        background-image: none;
    }
    a:hover {
        background:#ffffff; /*BG color is a must for IE6*/
        text-decoration:none;
    }
    a.tooltip span {
        display:none;
        padding:2px 3px;
        margin-left:8px;
        width:250px;
    }
    a.tooltip:hover span{
        display:inline;
        position:absolute;
        background:#FFC;
        border:1px solid #cccccc;
        color:#000000;
    }
    div.tooltip {
    width: 20px;
    float: right;
    display:inline;
}

div.tooltip span {
    display: none;
    font-weight:normal;
    text-align:left;
    padding: 3px 5px;
    margin-left: 8px;
    width: 250px;
}

div.tooltip:hover span {
    display: inline;
    position: absolute;
    border: 1px solid #cccccc;
    background: #FFC;
    color: #000000;
    z-index:10000;
}
    </style>
    <script>
    function myFunction() {
        //alert('<a href="mailto:someone@example.com??subject=Please provide your details&body=Please provide the below details-.%0D%0A%0D%0AFull Name:%0D%0AEmail:%0D%0AOrganization:%0D%0AEvent Name:%0D%0AReason:%0D%0A" target="_top">skill_search@accenture.com</a>');
        var myWindow = window.open("", "MsgWindow", "width=300,height=300");
        myWindow.document.write("<a href='mailto:someone@example.com??subject=Please provide your details&body=Please provide the below details-.%0D%0A%0D%0AFull Name:%0D%0AEmail:%0D%0AOrganization:%0D%0AEvent Name:%0D%0AReason:%0D%0A' target='_top'>skill_search@accenture.com</a>")
    }
    </script>
    <div style="border: 0;font-size: 47%;font: inherit;vertical-align: top;margin-top: -4px;">
    <img src="{!$Resource.AccentureLogo}" alt="Company Logo" width="360" height="120"/>
    <font size="5" style="font-family: initial;margin-left: 150px;padding-top:26px;font-size: 40px;">Welcome to Skill Search and Assist Portal.</font>
    </div>
    <br/>
    <div style="width:75%;float:left;display:inline-block;">
    <span id="theBlock" style="overflow-y: auto; overflow-x: none;height:450px;display:block;border:2px solid #FF8C00;">
    <apex:tabPanel switchType="client" selectedTab="name1" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="My Profile" name="name1" id="tab1">            
        <apex:form >
            <apex:pageBlock >
                <apex:pageBlockSection columns="1">              
                    <a class="tooltip" target="_blank">
                        mouse me
                        <span>
                            Hello How are you guys ? <a href="#home"> Hello</a>
                         
                        </span>
                    </a>
                    <apex:outputLink onmouseover="myFunction()">
                        <apex:outputText value="Fazurulla Ganganapalli"></apex:outputText>
                    </apex:outputLink>                  
                    <apex:inputText label="Last Name"/>
                    <apex:inputText label="Email ID"/>
                </apex:pageBlockSection>
                <apex:outputText value="enter your phone number" />
            <apex:inputText /><c:helpicon helpText="Please Enter your Phone Number"/>
            </apex:pageBlock>          
            <apex:outputLink value="mailto:skill_search@accenture.com?subject=Please provide your details&body=Please provide the below details-.%0D%0A%0D%0AFull Name:%0D%0AEmail:%0D%0AOrganization:%0D%0AEvent Name:%0D%0AReason:%0D%0A">
            skill_search@accenture.com<img src="/img/func_icons/util/mailCloseEnv16.gif"/>
            </apex:outputLink>
            </apex:form>        
        </apex:tab>
        <apex:tab label="Skill Search" name="name2" id="tab2">
            <apex:include pageName="ResourceRosterloginPage"/>
        </apex:tab>
        <apex:tab label="Search Forums" name="name3" id="tab3">
            <apex:include pageName="ResourceRosterloginPage"/>
        </apex:tab>
        <apex:tab label="My Bookmarks" name="name4" id="tab4">
            <apex:include pageName="ResourceRosterloginPage"/>
        </apex:tab>
         <apex:tab label="Logout" name="name5" id="tab5">
        </apex:tab>
    </apex:tabPanel>
    </span>  
    </div>
    <apex:form >
    <div style="background-color: #e2f1f6;border: 2px solid #FF8C00;font-weight: bold;color: #000000;padding: .4em;opacity: 1;transition: opacity 1s, height 0;height: 450px;width: 20%;display: inline-block;margin-left: 20px;border-radius: 5px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;">
         <apex:outputText value="Question Description" style="font-size:14px;margin-left:10px;" />
         <br/>
         <apex:inputTextarea style="margin-left:10px;width:90%;height:90%;"/>
      </div>
      </apex:form>
   </apex:page>