Alykhan Posted August 28, 2013 Share Posted August 28, 2013 Hey so I am integrating my header and footer into my site and although it is there, its not displaying the way it should like it does in the rest of my site. Somehow my style for my site is copied into WHMCS and I don't want that, I want WHMCS style to not be modified at all I just wanted to add my header and footer but still have my WHMCS still look the same as it was without the changes to header and footer. Anyways, so here is the link to my site: http://www.alykhan.ca (I want my header and footer to be like this) http://alykhan.ca/whmcs/index.php?systpl=alykhanservices (This is what it looks like right now) I'm not sure if it a problem with the header.tpl or something to do with style.css, I have a few different style.css in different locations. Here is my code for the header, what changes do I need to make to have it display the way it does on the rest of my site: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset={$charset}" /> <title>{$companyname} - {$pagetitle}{if $kbarticle.title} - {$kbarticle.title}{/if}</title> {if $systemurl}<base href="{$systemurl}" />{/if} <link rel="stylesheet" type="text/css" href="templates/{$template}/style.css" /> <script type="text/javascript" src="includes/jscript/jquery.js"></script> {$headoutput} {if $livehelpjs}{$livehelpjs}{/if} <meta http-equiv="content-type" content="text/html; charset={$charset}" /> <title>{if $kbarticle.title}{$kbarticle.title} - {/if}{$pagetitle} - {$companyname}</title> {if $systemurl}<base href="{$systemurl}" /> {/if}<script type="text/javascript" src="includes/jscript/jquery.js"></script> {if $livehelpjs}{$livehelpjs} {/if} <link href="templates/{$template}/css/bootstrap.css" rel="stylesheet"> <link href="templates/{$template}/css/whmcs.css" rel="stylesheet"> <script src="templates/{$template}/js/whmcs.js"></script> {$headoutput} <!-- Bootstrap --> <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- web font --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,800" rel="stylesheet" type="text/css"> <!-- icon fonts --> <link type="text/css" rel="stylesheet" href="templates/alykhanservices/font-icons/custom-icons/css/custom-icons.css"> <link type="text/css" rel="stylesheet" href="templates/alykhanservices/font-icons/custom-icons/css/custom-icons-ie7.css"> <!-- Custom css --> <link type="text/css" rel="stylesheet" href="templates/alykhanservices/HTML/css/layout.css"> <link type="text/css" id="colors" rel="stylesheet" href="templates/alykhanservices/HTML/css/colors.css"> <link type="text/css" rel="stylesheet" href="css/layout.css"> <link type="text/css" id="colors" rel="stylesheet" href="css/colors.css"> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> {/literal}<script src="js/modernizr-2.6.1.min.js"></script>{/literal} </head> <body onLoad="initialize('mapWrapperFullwidth')" id="boxedLayout"> <!-- Primary Page Layout ================================================== --> <!-- globalWrapper --> <div id="globalWrapper"> <!-- header --> <header id="mainHeader" class="clearfix"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner preHeader"> <div class="container"> <div class="row-fluid"> <div class="span6 clearfix"> <ul class="quickMenu"> Partners <li><a href="http://www.brandedemails.ca"> Branded Emails </a></li> <li><a href="http://www.windsites.ca">Wind Sites </a></li> <li><a href="http://www.alyk.ca">UnlockCellCodes </a></li> <ul class="quickMenu"> </ul> </div> <div class="span6 clearfix"> <ul class="socialNetwork"> <li><a href="http://www.facebook.com/#!/pages/Alykhan-Suleman-Technology-Consulting/371214272994536?fref=ts" class="icon-facebook socialIcon tips" title="follow me on Facebook"><span>facebook</span></a></li> <li><a href="http://www.twitter.com/alykhans" class="icon-twitter-bird socialIcon tips" title="follow me on Twitter (/alykhans)"><span>twitter</span></a></li> <li><a href="https://plus.google.com/111246329699784142452" class="icon-gplus socialIcon tips" title="follow me on Google +"><span>google +</span></a></li> <li><a href="http://www.linkedin.com/in/alykhan" class="icon-linkedin socialIcon tips" title="follow me on Linkedin (/alykhan)"><span>linkedin</span></a></li> </ul> </div> </div> </div> </div> </div> <div class="navbar navbar-fixed-top mainNav"> <div class="navbar-inner"> <div class="container"> <a href="index.html" class="brand"><img src="images/main-logo.png" alt="himalaya"/></a> <nav id="mainMenu"> <ul> <li><a href="http://www.alykhan.ca/index.html" class="firstLevel active" >Home</a> <ul> </ul> <li> <a href="http://www.alykhan.ca/about.html" class="firstLevel">About</a> </li> <li> <a href="http://www.alykhan.ca/services.html" class="firstLevel">Services</a> </li> <li><a href="http://www.alykhan.ca/externallinks.html" class="firstLevel">External Links</a> </li> <li><a href="http://www.alykhan.ca/clients.html" class="firstLevel">Clients</a> </li> <li><a href="http://www.alykhan.ca/http://www.alykhan.me" class="firstLevel">Portfolio</a> </li> <li> <a href="http://www.alykhan.ca/contact.html" class="firstLevel last">Contact</a> </li> </ul> </nav> </div> </div> </div> </header> <!-- header --> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav"> <li><a href="{if $loggedin}clientarea{else}index{/if}.php">{$LANG.hometitle}</a></li> </ul> {if $loggedin} <ul class="nav"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navservices} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php?action=products">{$LANG.clientareanavservices}</a></li> {if $condlinks.pmaddon}<li><a href="index.php?m=project_management">{$LANG.clientareaprojects}</a></li>{/if} <li class="divider"></li> <li><a href="cart.php">{$LANG.navservicesorder}</a></li> <li><a href="cart.php?gid=addons">{$LANG.clientareaviewaddons}</a></li> </ul> </li> </ul> {if $condlinks.domainreg || $condlinks.domaintrans}<ul class="nav"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navdomains} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php?action=domains">{$LANG.clientareanavdomains}</a></li> <li class="divider"></li> <li><a href="cart.php?gid=renewals">{$LANG.navrenewdomains}</a></li> {if $condlinks.domainreg}<li><a href="cart.php?a=add&domain=register">{$LANG.navregisterdomain}</a></li>{/if} {if $condlinks.domaintrans}<li><a href="cart.php?a=add&domain=transfer">{$LANG.navtransferdomain}</a></li>{/if} {if $enomnewtldsenabled}<li><a href="index.php?m=enomnewtlds">Preregister New TLDs</a></li>{/if} <li class="divider"></li> <li><a href="domainchecker.php">{$LANG.navwhoislookup}</a></li> </ul> </li> </ul>{/if} <ul class="nav"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navbilling} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php?action=invoices">{$LANG.invoices}</a></li> <li><a href="clientarea.php?action=quotes">{$LANG.quotestitle}</a></li> <li class="divider"></li> {if $condlinks.addfunds}<li><a href="clientarea.php?action=addfunds">{$LANG.addfunds}</a></li>{/if} {if $condlinks.masspay}<li><a href="clientarea.php?action=masspay&all=true">{$LANG.masspaytitle}</a></li>{/if} {if $condlinks.updatecc}<li><a href="clientarea.php?action=creditcard">{$LANG.navmanagecc}</a></li>{/if} </ul> </li> </ul> <ul class="nav"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.navsupport} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="supporttickets.php">{$LANG.navtickets}</a></li> <li><a href="knowledgebase.php">{$LANG.knowledgebasetitle}</a></li> <li><a href="downloads.php">{$LANG.downloadstitle}</a></li> <li><a href="serverstatus.php">{$LANG.networkstatustitle}</a></li> </ul> </li> </ul> <ul class="nav"> <li><a href="submitticket.php">{$LANG.navopenticket}</a></li> </ul> {if $condlinks.affiliates}<ul class="nav"> <li><a href="affiliates.php">{$LANG.affiliatestitle}</a></li> </ul>{/if} <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$LANG.hello}, {$loggedinuser.firstname}! <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php?action=details">{$LANG.editaccountdetails}</a></li> {if $condlinks.updatecc}<li><a href="clientarea.php?action=creditcard">{$LANG.navmanagecc}</a></li>{/if} <li><a href="clientarea.php?action=contacts">{$LANG.clientareanavcontacts}</a></li> {if $condlinks.addfunds}<li><a href="clientarea.php?action=addfunds">{$LANG.addfunds}</a></li>{/if} <li><a href="clientarea.php?action=emails">{$LANG.navemailssent}</a></li> <li><a href="clientarea.php?action=changepw">{$LANG.clientareanavchangepw}</a></li> <li class="divider"></li> <li><a href="logout.php">{$LANG.logouttitle}</a></li> </ul> </li> </ul> {else} <ul class="nav"> <li><a href="announcements.php">{$LANG.announcementstitle}</a></li> </ul> <ul class="nav"> <li><a href="knowledgebase.php">{$LANG.knowledgebasetitle}</a></li> </ul> <ul class="nav"> <li><a href="serverstatus.php">{$LANG.networkstatustitle}</a></li> </ul> <ul class="nav"> <li><a href="affiliates.php">{$LANG.affiliatestitle}</a></li> </ul> <ul class="nav"> <li><a href="contact.php">{$LANG.contactus}</a></li> </ul> <ul class="nav pull-right"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{$LANG.account} <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="clientarea.php">{$LANG.login}</a></li> <li><a href="register.php">{$LANG.register}</a></li> <li class="divider"></li> <li><a href="pwreset.php">{$LANG.forgotpw}</a></li> </ul> </li> </ul> {/if} </div><!-- /.nav-collapse --> </div> </div><!-- /navbar-inner --> </div><!-- /navbar --> <div class="whmcscontainer"> <div class="contentpadded"> {if $pagetitle eq $LANG.carttitle}<div id="whmcsorderfrm">{/if} Here is the code for my style.css, as you can see my WHMCS is modified in the process when changing my header. What changes do I need to make to have it look like normal (without any modifications to WHMCS besides the header and footer)? whmcs/css/style.css @charset "utf-8"; /* CSS Document */ body { margin: 0; padding: 0;} /* fonts for box's h2, p, a, label */ .box h2, p , a, label { font-family: 'Exo', sans-serif;} a:link, a:active, a:visited{ text-decoration:none; } /* main box styles */ .box { width: 330px; height: auto; left: 50%; top: 10%; padding: 15px; position: fixed; display: inline-block; background: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0, .4); text-align: center; border: 1px solid #b4b1b1; visibility: hidden; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .overlay:target+.box { top: 42%; opacity: 1; visibility: visible; } .overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .overlay:target { visibility: visible; opacity: 1; } /* close button you can change background */ .close { background-image:url(../images/close.png); height: 48px; width:48px; position: absolute; right: -18px;; text-align: center; text-decoration: none; top: -20px; } .close:hover { -webkit-filter: brightness(10%); } /* login with facebook button */ .fb { background-image: url(../images/fb-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#3b5998; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #133783; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.fb:hover { background-color:#5782d9; }.fb:active { position:relative; top:1px; } /* login with twitter button */ .tw { background-image: url(../images/tw-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#00aeed; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #027091; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.tw:hover { background-color:#009dd1; }.tw:active { position:relative; top:1px; } /* login signup buttons red and blue */ input[type=button] { padding: 5px 25px; border: 1px solid; font-size: 11px; cursor: pointer; } input[type=button].red { color: #fff; border-color: #cc3333; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); /* Gradient */ background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #cb4229 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#cb4229)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#cb4229 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#cb4229 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#cb4229',GradientType=0 ); /* IE6-9 */ -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } input[type=button].red:hover { background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #c9371e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#c9371e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#c9371e 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#c9371e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#c9371e',GradientType=0 ); /* IE6-9 */ } input[type=button].red:active { background: #e35940; } input[type=button].blue { color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } input[type=button].blue:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue:active { background: #9ae0e9; } input[type=button].blue-round { margin-bottom:10px; color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } input[type=button].blue-round:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue-round:active { background: #9ae0e9; } /* text fields */ .text-field { display: block; margin: 0 auto; width: 180px; height:10px; border: 1px solid #c0c2c7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #8c8f90; padding: 10px; font-style: italic; font-size: 11px; margin-bottom: 10px; -moz-box-shadow: inset 0 1px 3px -1px #b4b1b1; -webkit-box-shadow: inset 0 1px 3px -1px #b4b1b1; box-shadow: inset 0 1px 3px -1px #b4b1b1; } .text-field:focus { outline: none; box-shadow: inset 0 2px 0 rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,0.1), 0 0 5px 1px #51CBEE; } /* Error notification it is not visible because: visibility:hidden */ .error { position:absolute; width: 362px; height:50px; margin-left:-16px; margin-top:13px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color:#b20a0a; box-shadow: 0 0 10px rgba(0,0,0, .4); visibility:hidden; } .error .errortext { vertical-align:middle; margin-top:17px; font-family: 'Exo', sans-serif; } .box p { display: inline; color: #7e7e7e; font-size: 11px; } #forg { color: #7e7e7e; margin-left:95px; } #buttons, .connectwith { display:block; padding-bottom:15px; } whmcs/style.css @charset "utf-8"; /* CSS Document */ body { margin: 0; padding: 0;} /* fonts for box's h2, p, a, label */ .box h2, p , a, label { font-family: 'Exo', sans-serif;} a:link, a:active, a:visited{ text-decoration:none; } /* main box styles */ .box { width: 330px; height: auto; left: 50%; top: 10%; padding: 15px; position: fixed; display: inline-block; background: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0, .4); text-align: center; border: 1px solid #b4b1b1; visibility: hidden; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .overlay:target+.box { top: 42%; opacity: 1; visibility: visible; } .overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .overlay:target { visibility: visible; opacity: 1; } /* close button you can change background */ .close { background-image:url(../images/close.png); height: 48px; width:48px; position: absolute; right: -18px;; text-align: center; text-decoration: none; top: -20px; } .close:hover { -webkit-filter: brightness(10%); } /* login with facebook button */ .fb { background-image: url(../images/fb-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#3b5998; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #133783; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.fb:hover { background-color:#5782d9; }.fb:active { position:relative; top:1px; } /* login with twitter button */ .tw { background-image: url(../images/tw-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#00aeed; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #027091; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.tw:hover { background-color:#009dd1; }.tw:active { position:relative; top:1px; } /* login signup buttons red and blue */ input[type=button] { padding: 5px 25px; border: 1px solid; font-size: 11px; cursor: pointer; } input[type=button].red { color: #fff; border-color: #cc3333; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); /* Gradient */ background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #cb4229 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#cb4229)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#cb4229 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#cb4229 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#cb4229',GradientType=0 ); /* IE6-9 */ -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } input[type=button].red:hover { background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #c9371e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#c9371e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#c9371e 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#c9371e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#c9371e',GradientType=0 ); /* IE6-9 */ } input[type=button].red:active { background: #e35940; } input[type=button].blue { color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } input[type=button].blue:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue:active { background: #9ae0e9; } input[type=button].blue-round { margin-bottom:10px; color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } input[type=button].blue-round:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue-round:active { background: #9ae0e9; } /* text fields */ .text-field { display: block; margin: 0 auto; width: 180px; height:10px; border: 1px solid #c0c2c7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #8c8f90; padding: 10px; font-style: italic; font-size: 11px; margin-bottom: 10px; -moz-box-shadow: inset 0 1px 3px -1px #b4b1b1; -webkit-box-shadow: inset 0 1px 3px -1px #b4b1b1; box-shadow: inset 0 1px 3px -1px #b4b1b1; } .text-field:focus { outline: none; box-shadow: inset 0 2px 0 rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,0.1), 0 0 5px 1px #51CBEE; } /* Error notification it is not visible because: visibility:hidden */ .error { position:absolute; width: 362px; height:50px; margin-left:-16px; margin-top:13px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color:#b20a0a; box-shadow: 0 0 10px rgba(0,0,0, .4); visibility:hidden; } .error .errortext { vertical-align:middle; margin-top:17px; font-family: 'Exo', sans-serif; } .box p { display: inline; color: #7e7e7e; font-size: 11px; } #forg { color: #7e7e7e; margin-left:95px; } #buttons, .connectwith { display:block; padding-bottom:15px; } whmcs/template/alykhanservices/style.css /* -------------------------------------------------------------- GLOBAL -------------------------------------------------------------- */ body { background-color: #efefef; } form { margin: 0px; } body,td,input,select,textarea { font-family: Tahoma; font-size: 12px; } a { color: #65A5E6; } a:hover { text-decoration: none; } .wrapper { width: 730px; border: 0px; padding: 5px; background-color: #ffffff; margin-left: auto; margin-right: auto; } .clear { clear: both; } /* -------------------------------------------------------------- HEADINGS -------------------------------------------------------------- */ .heading { font-family: Tahoma; font-size: 18px; font-weight: normal; color: #65A5E6; } .heading2 { font-family: Tahoma; font-size: 16px; font-weight: bold; text-decoration: none; color: #000000; } .heading3 { font-family: Tahoma; font-size: 12px; font-weight: bold; color: #16679F; } /* -------------------------------------------------------------- INFO BOXES -------------------------------------------------------------- */ .contentbox { width: 75%; text-align: center; background-color: #f7f7f7; border: 1px dashed #cccccc; padding: 5px; margin-left: auto; margin-right: auto; } .errorbox { border: 1px dashed #cc0000; font-weight: bold; background-color: #FBEEEB; text-align: center; width: 90%; padding: 10px; color: #cc0000; margin-left: auto; margin-right: auto; } .successbox { border: 1px dashed #66CC00; font-weight: bold; background-color: #DDFFC6; text-align: center; width: 90%; padding: 10px; color: #009933; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------- CLIENT AREA NAVBAR -------------------------------------------------------------- */ .clientarealinks { background-color: #FDFCDD; padding: 10px; } .clientarealinks a { color: #555555; } /* -------------------------------------------------------------- TABLES -------------------------------------------------------------- */ table.topnavbar { width: 100%; } tr.topnavbar { background-color: #efefef; font-weight:bold; text-align: center; } tr.topnavbar a { color: #000000; text-decoration: none; } tr.topnavbar a:hover { color: #666666; } table.frame { width: 100%; border: 1px solid #8FBCE9; padding: 0px; } .fieldarea { background-color: #EFF2F9; text-align: right; } .clientareatable { width: 100%; background-color: #fff; } tr.clientareatableheading td, tr.clientareatableheading th { background-color: #304270; border: 0; color: #fff; font-weight: bold; text-align: center; font-size: 12px; padding: 4px; } tr.clientareatableheading td a, tr.clientareatableheading th a { color: #fff; } .clientareatable td, tr.clientareatableactive td { background-color: #fff; border-bottom: 1px solid #ccc; text-align: center; padding: 3px; } tr.clientareatablepending td { background-color: #FFFFE2; text-align: center; padding: 2px; } tr.clientareatablependingtransfer td { background-color: #FFDBBB; text-align: center; padding: 2px; } tr.clientareatablesuspended td { background-color: #E9FFD2; text-align: center; padding: 2px; } tr.clientareatableterminated td, tr.clientareatablecancelled td { background-color: #FFE1E1; text-align: center; padding: 2px; } tr.clientareatablefraud td { background-color: #DDDDDD; text-align: center; padding: 2px; } /* -------------------------------------------------------------- NETWORK ISSUES -------------------------------------------------------------- */ .networkissuessummary { background-color: #f6f6f6; border: 1px dashed #cccccc; padding: 10px; text-align: center; } .networkissuesopen { font-size: 16px; font-weight: bold; color: #65CC00; padding-right: 20px; } .networkissuesscheduled { font-size: 16px; font-weight: bold; color: #EEDD00; padding-right: 20px; } .networkissuesclosed { font-size: 16px; font-weight: bold; color: #888888; } .networkissuedescription { border-left: 5px solid #efefef; padding: 20px; padding-top: 1px; } .networkissueaffected { background-color: #FDFCDD; padding: 10px; margin-top: 10px; } /* -------------------------------------------------------------- SUPPORT TICKETS -------------------------------------------------------------- */ .clientticketreplyheader { margin-top: 20px; background-color: #92BDEA; font-weight: bold; color: #ffffff; padding: 4px 20px 4px 20px; } .clientticketreply { min-height: 80px; background-color: #ffffff; background-image: url('images/clientticketreplybg.gif'); background-repeat: repeat-x; padding: 10px; } .adminticketreplyheader { margin-top: 20px; background-color: #888888; font-weight: bold; color: #ffffff; padding: 4px 20px 4px 20px; } .adminticketreply { min-height: 80px; background-color: #ffffff; background-image: url('images/adminticketreplybg.gif'); background-repeat: repeat-x; padding: 10px; } .closeticket { border: 1px dashed #cc0000; font-weight: bold; background-color: #FBEEEB; color: #cc0000; } /* -------------------------------------------------------------- CHAT TRANSCRIPTS -------------------------------------------------------------- */ div.chat div.visitor div.name, div.chat div.operator div.name { font-weight: bold; } div.chat div.visitor div.message, div.chat div.operator div.message { padding: 0 25px; } /* -------------------------------------------------------------- KNOWLEDGEBASE -------------------------------------------------------------- */ .kbarticle { padding: 2px 5px 5px 15px; } .kbviews { color:#A8A8A8; font-size:10px; } .kbalsoread { padding: 5px 5px 5px 15px; background-color: #f8f8f8; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; font-weight: bold; margin: 10px 0 10px 0; } /* -------------------------------------------------------------- TEXT COLORS -------------------------------------------------------------- */ .textblack { color: #000000; } .textblue { color: #224488; } .textgreen { color: #779500; } .textgrey { color: #888888; } .textgold { color: #ffbb55; } .textorange { color: #ff6600; } .textred { color: #cc0000; } /* -------------------------------------------------------------- BUTTONS -------------------------------------------------------------- */ input.button,input.buttongo,input.buttonwarn { margin:0 7px 0 0; background-color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; width:auto; overflow:visible; padding:4px 7px 3px 7px; } input.button:hover{ background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699; } input.buttongo:hover{ background-color:#E6EFC2; border:1px solid #C6D880; color:#529214; } input.buttonwarn:hover{ background-color:#fbe3e4; border:1px solid #fbc2c4; color:#d12f19; } /* -------------------------------------------------------------- TWITTER FEED -------------------------------------------------------------- */ #twitterfeed ul { list-style-type: none; padding: 0; margin: 15px 0 20px 0; } #twitterfeed li { background-image: url(../../images/twittericon.png); background-repeat: no-repeat; background-position: 0; margin: 0 20px 10px 20px; padding-left: 25px; } #twitterfeed p { text-align: center; margin: 15px; } #announcementstwitter { float: right; width: 250px; margin: 0 0 20px 10px; padding: 10px 0 10px 0; border: 1px dashed #f5e303; background-color: #ffffec; } #announcementstwitterfeed ul { list-style-type: none; padding: 0; margin: 15px 0 0 0; } #announcementstwitterfeed li { padding: 10px; border-top: 1px dashed #f5e303; } #announcementstwitterfeed p { text-align: center; padding: 10px; margin: 10px 0 0 0; border-top: 1px dashed #f5e303; } .tweetbutton { float: right; margin: 0 15px 15px 15px; } /* -------------------------------------------------------------- QUOTES -------------------------------------------------------------- */ .quotecontainer { border: 1px solid #ccc; background-color: #fff; background-image:url('../../images/quote.png'); background-repeat:no-repeat; background-position: 10px 11px; color: #666; margin: 10px; } .quotecontainer:hover { background-color: #efefef; cursor: hand; cursor: pointer; } .quotecontainer .quoteid { float: left; width: 80px; padding: 13px 0 0 40px; text-align: center; font-size: 24px; } .quotecontainer .quoteleft { float: left; padding: 10px 0 10px 0; font-size: 11px; } .quotecontainer .quoteleft .subject { font-weight: bold; font-size: 14px; padding-bottom: 4px; color: #000; width: 350px; } .quotecontainer .quoteright { float: right; padding: 10px 15px 0 0; text-align: right; } .quotecontainer .quoteright .stage { font-weight: bold; font-size: 12px; padding-bottom: 4px; } /* -------------------------------------------------------------- CLIENT AREA HOMEPAGE -------------------------------------------------------------- */ .duebalance { background-color: #F2FFE1; width: 80%; margin: 10px auto 0 auto; padding: 5px 0 2px 0; font-size: 18px; text-align: center; color: #86BC16; } .duebalance.overdue { background-color: #FFB9B9; color: #cc0000; } .creditbalance { background-color: #F2FFE1; width: 80%; margin: 0 auto 10px auto; padding: 2px 0 5px 0; font-size: 15px; color: #86BC16; text-align: center; } .creditbalance.overdue { background-color: #FFB9B9; color: #fff; } .balanceoptions { text-align: center; margin: 5px 10px 0 0; font-size: 12px; } .homeyourdetails { margin: 15px 0 0 0; padding: 5px; font-size: 12px; } .homeyourdetails .title { font-size: 14px; font-weight: bold; text-align: center; } .homeyourdetails .update { float: right; margin: 35px 30px 0 0; font-size: 11px; text-align: center; } .homeyourdetails .update a { color: #000; } .homeyourdetails .details { border-left: 10px solid #f2f2f2; padding: 10px 0 10px 20px; margin: 15px; width: 400px; } .homequicklinks { float: right; margin: 0; width: 310px; padding: 5px; text-align: center; font-size: 10px; } .homequicklinks .title { font-size: 14px; font-weight: bold; padding-bottom: 5px; text-align: center; } .homequicklinks .cols { float: left; width: 150px; margin-left: 5px; } .homequicklinks ul { list-style-type: none; margin: 0; } .homequicklinks li { font-size: 14px; margin: 0 0 5px -40px; padding: 4px; background-color: #f2f2f2; text-align: center; } .homequicklinks li:hover { background-color: #C6DCF4; } .homequicklinks li:hover a { color: #fff; } .quickjumpbar { border: 1px dashed #ccc; background-color: #f2f2f2; margin: 15px 0 0 0; padding: 10px; font-size: 13px; } .quickjumpbar .col1 { float: left; width: 20%; font-size: 16px; font-weight: bold; text-align: center; } .quickjumpbar .cols { float: left; width: 40%; text-align: center; } .quickjumpbar input { border: 1px solid #ccc; padding: 3px; font-size: 12px; } .clear { clear: both; } /* Security */ div#twofaactivation { margin: 50px auto; padding: 20px; width: 75%; min-height: 250px; background-color: #fff; border: 4px solid #efefef; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } div#twofaactivation p { margin: 15px 0; } whmcs/templates/alykhanservices/css/style.css @charset "utf-8"; /* CSS Document */ body { margin: 0; padding: 0;} /* fonts for box's h2, p, a, label */ .box h2, p , a, label { font-family: 'Exo', sans-serif;} a:link, a:active, a:visited{ text-decoration:none; } /* main box styles */ .box { width: 330px; height: auto; left: 50%; top: 10%; padding: 15px; position: fixed; display: inline-block; background: white; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0, .4); text-align: center; border: 1px solid #b4b1b1; visibility: hidden; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .overlay:target+.box { top: 42%; opacity: 1; visibility: visible; } .overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .overlay:target { visibility: visible; opacity: 1; } /* close button you can change background */ .close { background-image:url(../images/close.png); height: 48px; width:48px; position: absolute; right: -18px;; text-align: center; text-decoration: none; top: -20px; } .close:hover { -webkit-filter: brightness(10%); } /* login with facebook button */ .fb { background-image: url(../images/fb-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#3b5998; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #133783; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.fb:hover { background-color:#5782d9; }.fb:active { position:relative; top:1px; } /* login with twitter button */ .tw { background-image: url(../images/tw-icon.png); background-repeat: no-repeat; background-position: 5% 42%; -moz-box-shadow:inset 0px 0px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background-color:#00aeed; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #027091; display:inline-block; color:#ffffff; font-family:Trebuchet MS; font-size:10px; font-weight:bold; padding:5px 11px 5px 30px; text-decoration:none; cursor: pointer; }.tw:hover { background-color:#009dd1; }.tw:active { position:relative; top:1px; } /* login signup buttons red and blue */ input[type=button] { padding: 5px 25px; border: 1px solid; font-size: 11px; cursor: pointer; } input[type=button].red { color: #fff; border-color: #cc3333; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.6); text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); /* Gradient */ background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #cb4229 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#cb4229)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#cb4229 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#cb4229 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#cb4229 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#cb4229',GradientType=0 ); /* IE6-9 */ -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } input[type=button].red:hover { background: #e35940; /* Old browsers */ background: -moz-linear-gradient(top, #e35940 0%, #c9371e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e35940), color-stop(100%,#c9371e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e35940 0%,#c9371e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e35940 0%,#c9371e 100%); /* IE10+ */ background: linear-gradient(to bottom, #e35940 0%,#c9371e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e35940', endColorstr='#c9371e',GradientType=0 ); /* IE6-9 */ } input[type=button].red:active { background: #e35940; } input[type=button].blue { color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } input[type=button].blue:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue:active { background: #9ae0e9; } input[type=button].blue-round { margin-bottom:10px; color: #000; border-color: #0099cc; -moz-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; -webkit-box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; box-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.; text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.; /* Gradient */ background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #82c8d1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#82c8d1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#82c8d1 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#82c8d1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#82c8d1',GradientType=0 ); /* IE6-9 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } input[type=button].blue-round:hover { background: #9ae0e9; /* Old browsers */ background: -moz-linear-gradient(top, #9ae0e9 0%, #69c4ce 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ae0e9), color-stop(100%,#69c4ce)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #9ae0e9 0%,#69c4ce 100%); /* IE10+ */ background: linear-gradient(to bottom, #9ae0e9 0%,#69c4ce 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ae0e9', endColorstr='#69c4ce',GradientType=0 ); /* IE6-9 */ } input[type=button].blue-round:active { background: #9ae0e9; } /* text fields */ .text-field { display: block; margin: 0 auto; width: 180px; height:10px; border: 1px solid #c0c2c7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #8c8f90; padding: 10px; font-style: italic; font-size: 11px; margin-bottom: 10px; -moz-box-shadow: inset 0 1px 3px -1px #b4b1b1; -webkit-box-shadow: inset 0 1px 3px -1px #b4b1b1; box-shadow: inset 0 1px 3px -1px #b4b1b1; } .text-field:focus { outline: none; box-shadow: inset 0 2px 0 rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,0.1), 0 0 5px 1px #51CBEE; } /* Error notification it is not visible because: visibility:hidden */ .error { position:absolute; width: 362px; height:50px; margin-left:-16px; margin-top:13px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color:#b20a0a; box-shadow: 0 0 10px rgba(0,0,0, .4); visibility:hidden; } .error .errortext { vertical-align:middle; margin-top:17px; font-family: 'Exo', sans-serif; } .box p { display: inline; color: #7e7e7e; font-size: 11px; } #forg { color: #7e7e7e; margin-left:95px; } #buttons, .connectwith { display:block; padding-bottom:15px; } WHMCS support and technical support won't help me out so I'd appreciate any assistance I can get! 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.