/*---------------------------------------------------------------------------------------------------------
DESKTOP CSS - >900px
---------------------------------------------------------------------------------------------------------*/
/*@media (min-width: 900px) {*/
input[type="submit"], input[type="button"], input[type="reset"] {
font-size: 12pt;
}
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="tel"], input[type="date"], input[type="datetime"] {
font-size: 12pt;
}
select {
font-size: 16px;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
a {
text-decoration: none;
}
.FREEProductPlacement {
width: 100%;
border-radius: 15px;
padding: 5px;
TEXT-ALIGN: center;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #ffffff;
text-shadow: 2px 2px 2px #333;
font-size: 14px;
background-color: #dd4444;
}
.FREEProductPlacement div a:hover{
text-decoration:none;
}
.FREEProductPlacement img {
border:1px solid #333;
}
.ProductPlacementHeader {
TEXT-ALIGN: center;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #ffffff;
text-shadow: 2px 2px 2px #333;
font-size: 14px;
}
.ProductPlacementStrapline {
TEXT-ALIGN: center;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #ffffff;
font-size: 12px;
}
.allproducts div {
text-align: center;
padding-bottom: 10px;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
COLOR: #444;
display: inherit;
/*width: 500px;*/
FONT-SIZE: 16pt;
line-height: 24pt;
}
.allproducts div a {
color: royalblue;
}
.allproducts div a:hover {
color: royalblue;
font-weight: bolder;
}
.salenowon {
border-color: #CC0000;
font-size: 16pt;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #CC0000;
border-radius: 10px;
padding: 10px;
border-left: 6px solid #7c0404; /* Add a bold left border */
text-shadow: 2px 2px 2px #333;
}
.embroiderydownloadlink {
display: block; /* Makes the tag cover the full clickable area */
text-decoration: none; /* Removes underline from links */
}
.orders {
border-width: 1px;
border-color: #808080;
width: 100%;
background-color: #CCCCCC;
}
.orders TD {
background-color: #ffffff;
color: #444;
font-size: 11pt;
}
.orders th {
background-color: #6699FF;
color: #FFFFFF;
height: 30px;
font-size: 12pt;
}
.orders a {
color: #0066FF;
}
.orders a:hover {
color: #0066FF;
text-decoration: underline;
}
.bigimage {
width: 100%;
}
.defaultproductspage {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
}
.defaultproductspage div {
text-align: center;
padding-bottom: 10px;
COLOR: #444444;
text-align: center;
vertical-align: top;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
}
.embnarativetext {
font-size: 16px;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #545454;
width: 100%;
}
.centretablecell { /* desktop */
TEXT-ALIGN: left;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
FONT-SIZE: 12pt;
COLOR: #444444;
}
.normaltxt {
TEXT-ALIGN: center;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
FONT-SIZE: 12pt;
COLOR: #444444;
}
.tableheader {
TEXT-ALIGN: center;
font-size: 22px;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #ffffff;
border-radius: 10px;
background-color: #4f73e3;
padding: 5px 20px 5px 20px;
}
.tableheaderGreen {
TEXT-ALIGN: center;
font-size: 22px;
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
color: #ffffff;
border-radius: 15px;
background-color: #1eb922;
padding: 20px;
border:2px dashed #216c12;
}
.tableheaderGreen a {
color: #fff;
text-decoration: none;
display: inline-block; /* ensures transform affects layout */
transition: color 0.3s ease, transform 0.3s ease;
}
.tableheaderGreen a:hover {
color: #ffd966; /* soft gold highlight */
transform: translateY(-2px); /* subtle lift */
}
.tableheader a {
color: #ffffff;
}
.tableheader a:hover {
color: #ffffff;
text-decoration-color:#fff;
}
.normaltxtleft {
TEXT-ALIGN: left;
font-family: "Segoe UI Light",sans-serif;
FONT-SIZE: 12pt;
COLOR: #444;
line-height:18pt;
}
.normaltxtleft a:hover {
text-decoration: underline;
COLOR: blue;
}
.cmcontainer
{
background-color: black;
position: fixed ;
bottom: 0px;
left:0px;
z-index:10000;
width:100%;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
animation-duration:.5s;
}
.cmtable
{
color: white;
font-family: 'Arial, Segoe UI light', Helvetica, sans-serif;
font-size:12pt;
width:100%;
vertical-align:middle;
height:70px;
padding-left:10px;
}
.cmtable a
{
color:lightgrey ;
text-decoration:underline;
}
.cmbutton
{
transition: all 1s;
background-color: gold;
padding-top:15px;
color:black;
font-family: 'Arial Rounded MT', Arial;
font-size:12pt;
text-align:center;
width:150px;
height:35px;
}
.cmbutton:hover
{
background-color: green;
width:175px;
height:40px;
font-size:14pt;
}
.emailstuff {
text-decoration:none;
}
.registration
{
}
.registration div
{
background:#ffffff;
text-align:center;
vertical-align:middle;
margin:3px;
display:inline-block;
}
.embheadervt {
BACKGROUND-IMAGE: url(../images/embbgmainvt.jpg);
WIDTH: 672px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 222px
}
.contactus
{
color: #003399;
font-size: 12pt;
font-family: 'Segoe UI light' , Arial, Helvetica, sans-serif;
text-align:center;
}
.contactus DIV
{
width: 50%;
float:left;
text-align:left;
}
.thewidth402
{
width:402px;
}
.stdborder
{
COLOR: #444444;
text-align: center;
vertical-align: top;
font-family: 'Segoe UI light' , Arial, Helvetica, sans-serif;
}
.stdborder div
{
text-align:center;
vertical-align:top;
display:inherit;
font-family: 'Segoe UI light' , Arial, Helvetica, sans-serif;
font-size:12pt;
}
.stdborderwitharefs /* desktop */
{
color: #003399;
text-align: center;
vertical-align: top;
}
.stdborderwitharefs div {
text-align: center;
vertical-align: top;
display: inherit;
width: 300px;
font-size: 14pt;
line-height: 20pt;
padding: 15px;
}
.stdborderwitharefs div a {
background-color: #0000dd;
color: #ffffff;
padding: 10px;
font-size: 18px;
}
.stdborderwitharefs div b {
display: inline-block;
text-align: center;
vertical-align: top;
width: 300px;
font-size: 18pt;
line-height: 20pt;
background-color: #4f73e3;
height: 50px;
border: 2px solid #ccc;
padding: 10px;
color: #fff;
}
.stdborderwitharefs div a:hover {
background-color: #0000dd;
color: #ffffff;
padding: 10px;
}
.thewidth314
{
width:314px;
}
.productpagelinks a:hover /* desktop */
{
text-decoration: underline;
color: #003399;
}
.productpagelinks LI A /* desktop*/ {
font-family: "Segoe UI Light",sans-serif;
COLOR: #444;
}
#spb
{
}
#spbmobile
{
display:none;
}
.embheader2021 {
BACKGROUND-IMAGE: url(../images/embbgmain.jpg);
BACKGROUND-REPEAT: no-repeat;
border-radius: 20px;
color: #fff;
margin-bottom: 10px;
padding: 10px;
text-align: center;
margin: 5px 5px 5px 5px;
}
.embheadernohide {
BACKGROUND-IMAGE: url(../images/embbgmain.jpg);
BACKGROUND-REPEAT: no-repeat;
border-radius: 20px;
color: #fff;
margin-bottom: 10px;
padding: 10px;
text-align: center;
margin: 5px 5px 5px 5px;
}
.embheader {
BACKGROUND-IMAGE: url(../images/embbgmain.jpg);
BACKGROUND-REPEAT: repeat;
border-radius: 20px;
color: #fff;
margin-bottom: 10px;
padding: 10px;
text-align: center;
margin: 5px 5px 5px 5px;
font-size:16pt;
line-height:22pt;
}
.embheader a {
color: #fff;
}
.embheader a:hover {
color: #ffffff;
font-weight:bolder;
text-decoration:underline;
}
.embheader h1 {
color: #fff;
font-size:28pt;
line-height:32pt;
}
#trialbuy
{
height:50px;
}
#trialbuymobile
{
display:none;
height:0px;
}
.thewidth780
{
width:780px;
}
.printemailsharefooter {
font-family: Arial, Helvetica, sans-serif;
width: 300px;
text-align: center;
align-content: center;
background-color: #fff;
font-size: 11pt;
font-weight: 600;
color: royalblue;
}
.printemailsharefooter td {
width: 33%;
padding-left: 10px;
padding-right: 10px;
}
.printemailsharefooter a {
color:royalblue;
}
.printemailsharefooter a:hover {
color: black;
text-decoration:underline;
}
/* Customer login page */
.signintextboxes {
width: 200px;
font-family: "Segoe UI Light",sans-serif;
font-size: 12pt;
}
.signingpage {
font-family: Verdana;
color: #444444;
font-size: 12pt;
width: 100%;
font-family: "Segoe UI Light",sans-serif;
padding:0px;
}
.newuser {
background-color: #CC0000;
color: #fff;
font-size: 15pt;
text-align: center;
padding: 10px;
border: 1px solid #b70505;
border-radius: 10px;
}
.existinguser {
background-color: #003399;
color: #fff;
font-size: 15pt;
text-align: center;
border-radius: 10px;
padding: 10px;
border: 1px solid #043eae;
}
/* end of customer login page */
.thewidth {
max-width: 900px;
}
.bigmenu
{
display:block;
}
.mobilemenu
{
display:none;
}
#slideshow { width:900px; height:400px; margin: 1px; border:0px solid #5176e4 }
#nav { width: 100px; margin: 0px; float: left }
#nav li { width: 15px; float: left; margin: 0px; list-style: none; padding: 3px; display: block }
#nav a { width: 15px; padding: 0px; display: block; border: 0px solid #ccc; }
#nav li.activeLI { background: #5176e4;}
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
.pagetitlebanner {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
background-color: #456ce1;
height: 150px;
color: #FFFFFF;
padding-bottom: 20px;
}
.pagetitlebannernewmobile {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
padding-bottom: 20px;
width: 100%;
border-radius:10px;
}
.pagetitlebannernewmobileold {
font-family: 'Segoe UI Light';
height: 150px;
color: #FFFFFF;
padding-bottom: 20px;
display: none;
}
.pagetitlebannernew {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
height: 150px;
color: #FFFFFF;
padding-bottom: 20px;
}
.subpagetitle {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
font-size: 16pt;
font-weight: bolder;
}
.subpagetitleband
{
BACKGROUND-COLOR: #ffffff;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #cccccc;
}
/*---------------------------------------------------------------------------------------------------------
GENERIC
---------------------------------------------------------------------------------------------------------*/
.menuchild
{
z-index: 9999;
display:none;
}
.menuparentnode
{
display: inline-block;
background-color: #f0f0f0;
padding-top:5px;
padding-bottom:5px;
}
.menuchildnode
{
background-color: #ffffff;
padding-top:5px;
padding-bottom:5px;
}
.menuchildtextblank
{
display:inline-block;
width:100%;
background-color: #999999;
color:#ffffff;
font-family: "Segoe UI Light" ,sans-serif;
font-size:15pt;
}
.menuchildtext
{
display:inline-block;
width:80%;
}
.menuchildfollow
{
display: inline-block;
width: 20%;
text-align: center;
}
.menuparenttext
{
display:inline-block;
width:80%;
}
.menuparentfollow
{
display: inline-block;
width: 20%;
text-align: center;
}
.menuparentopen
{
display: inline-block;
width: 20%;
text-align:center;
}
.smalltabletxt
{
TEXT-ALIGN: center;
FONT-FAMILY: Arial;
FONT-SIZE: 7pt;
FONT-WEIGHT: bolder
}
.navlinks
{
BORDER-BOTTOM: black 1pt solid;
TEXT-ALIGN: center;
BORDER-LEFT: black 1pt solid;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
BORDER-TOP: black 1pt solid;
FONT-WEIGHT: bolder;
BORDER-RIGHT: black 1pt solid
}
.largetablehdr
{
TEXT-ALIGN: center;
FONT-FAMILY: Arial
}
.smalltablehdr
{
TEXT-ALIGN: center;
FONT-FAMILY: Verdana;
FONT-SIZE: 8pt;
FONT-WEIGHT: bolder
}
.smallhitxt
{
BACKGROUND-COLOR: black;
FONT-FAMILY: Verdana;
FONT-SIZE: 8pt
}
.tablehdr
{
TEXT-ALIGN: center;
BACKGROUND-COLOR: black;
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt;
FONT-WEIGHT: bolder
}
.navlinkhover {
BORDER-BOTTOM: 1pt outset;
BORDER-LEFT: 1pt outset;
BACKGROUND-COLOR: #5179f1;
COLOR: white;
BORDER-TOP: 1pt outset;
CURSOR: pointer;
BORDER-RIGHT: 1pt outset
}
.navlinkout
{
BORDER-BOTTOM: #a0a0a0 1pt;
BORDER-LEFT: #a0a0a0 1pt solid;
BACKGROUND-COLOR: #ededed;
BORDER-TOP: #a0a0a0 1pt;
CURSOR: default;
BORDER-RIGHT: #a0a0a0 1pt solid
}
.pageheader
{
TEXT-ALIGN: left;
FONT-STYLE: italic;
FONT-FAMILY: 'Times New Roman', Verdana;
COLOR: white;
FONT-SIZE: 24pt;
FONT-WEIGHT: bolder
}
.menutable
{
BORDER-BOTTOM: black 1pt;
TEXT-ALIGN: center;
BORDER-LEFT: black 1pt;
BACKGROUND-COLOR: #ededed;
WIDTH: 100%;
FONT-FAMILY: Arial;
HEIGHT: 25pt;
FONT-SIZE: 8pt;
BORDER-TOP: 1pt;
FONT-WEIGHT: bolder;
MARGIN-RIGHT: 0px;
BORDER-RIGHT: black 1pt
}
.menutableButtons
{
BORDER-BOTTOM: black 1pt;
TEXT-ALIGN: center;
BORDER-LEFT: black 1pt;
PADDING-BOTTOM: 0px;
BACKGROUND-COLOR: #ededed;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
FONT-FAMILY: Arial;
HEIGHT: 25pt;
FONT-SIZE: 8pt;
BORDER-TOP: black 1pt;
BORDER-RIGHT: black 1pt;
PADDING-TOP: 0px
}
.normaltxt a:hover
{
text-decoration:underline;
}
.menucell
{
BORDER-LEFT: #a0a0a0 1pt solid;
BACKGROUND-POSITION: center center;
COLOR: black;
BORDER-RIGHT: #a0a0a0 1pt solid
}
.menucellButtons {
BACKGROUND-IMAGE: url(../images/MenuButtons/ButtonUp.jpg);
TEXT-ALIGN: center;
BORDER-LEFT: #a0a0a0 1pt;
WIDTH: 75pt;
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: center center;
COLOR: white;
CURSOR: pointer;
}
.menucellButtonsOver {
BACKGROUND-IMAGE: url(../images/MenuButtons/ButtonDown.jpg);
TEXT-ALIGN: center;
BORDER-LEFT: #a0a0a0 1pt;
WIDTH: 75pt;
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: center center;
COLOR: white;
CURSOR: pointer;
}
.cpsmalltablehdr
{
TEXT-ALIGN: center;
BACKGROUND-COLOR: #d2d2d2;
FONT-FAMILY: Arial;
FONT-SIZE: 8pt;
FONT-WEIGHT: bolder
}
.cptable
{
TEXT-ALIGN: center;
BACKGROUND-COLOR: black;
WIDTH: 90%
}
.cpsmallcelltxt
{
BACKGROUND-COLOR: #eef1ff;
FONT-FAMILY: Verdana;
FONT-SIZE: 8pt
}
.producthdr {
FONT-FAMILY: 'Segoe UI Light', Arial, Helvetica, sans-serif;
FONT-SIZE: 14pt;
line-height: 20pt;
}
.menuinfohdr
{
BACKGROUND-COLOR: #5179f1;
FONT-FAMILY: Arial;
COLOR: white;
FONT-SIZE: 10pt;
FONT-WEIGHT: bolder
}
.menuinfobody
{
FONT-FAMILY: Arial;
FONT-SIZE: 10pt
}
.pagesubheader1
{
background-image: url(../images/pageheaderbar.gif);
background-color: royalblue;
font-family: Arial;
color: white;
font-size: 14pt;
height: 60px;
}
.pagesubheader2
{
BACKGROUND-IMAGE: url(../images/pageheaderbar.gif);
BACKGROUND-COLOR: royalblue;
FONT-FAMILY: Arial;
COLOR: white;
FONT-SIZE: 14pt
}
.navlinkoutside
{
}
.menutableside
{
TEXT-ALIGN: center;
BACKGROUND-COLOR: #ededed;
FONT-FAMILY: Arial;
COLOR: mediumblue;
MARGIN-LEFT: 0px;
FONT-SIZE: 10pt;
FONT-WEIGHT: bolder
}
.SideTableHdr
{
BORDER-BOTTOM: black 1px;
BORDER-LEFT: black 1px;
BACKGROUND-COLOR: black;
FONT-FAMILY: Arial;
FONT-SIZE: 8pt;
BORDER-TOP: black 1px;
FONT-WEIGHT: bolder;
BORDER-RIGHT: black 1px
}
.SideTableTxt {
TEXT-ALIGN: left;
WIDTH: 200pt;
FONT-FAMILY: Arial;
FONT-SIZE: 8pt;
CURSOR: pointer;
}
.SideTableCell
{
TEXT-ALIGN: center;
FONT-FAMILY: Arial;
FONT-SIZE: 8pt;
FONT-WEIGHT: lighter
}
.centerTableHdr
{
TEXT-ALIGN: center;
BACKGROUND-COLOR: royalblue;
FONT-FAMILY: Arial;
HEIGHT: 35px;
COLOR: white;
FONT-SIZE: 9pt;
FONT-WEIGHT: bolder
}
.download {
CURSOR: pointer;
}
.login {
BORDER-BOTTOM: 1px;
BORDER-LEFT: 1px;
FONT-FAMILY: Arial;
COLOR: tomato;
FONT-SIZE: 8pt;
BORDER-TOP: 1px;
CURSOR: pointer;
FONT-WEIGHT: bolder;
BORDER-RIGHT: 1px;
TEXT-DECORATION: underline
}
.hand {
FONT-FAMILY: Verdana;
FONT-SIZE: 8pt;
CURSOR: pointer;
}
.normaltxtbold
{
FONT-FAMILY: Arial;
FONT-SIZE: 9pt;
FONT-WEIGHT: bolder
}
.loginbeforebig {
FONT-FAMILY: Arial;
FONT-SIZE: 12pt;
CURSOR: pointer;
FONT-WEIGHT: bolder
}
.loginbig {
FONT-FAMILY: Arial;
COLOR: tomato;
FONT-SIZE: 12pt;
CURSOR: pointer;
FONT-WEIGHT: bolder
}
.login10 {
FONT-FAMILY: Arial;
COLOR: tomato;
FONT-SIZE: 10pt;
CURSOR: pointer;
}
.loginbefore10
{
FONT-FAMILY: Arial;
FONT-SIZE: 10pt
}
.login8 {
FONT-FAMILY: Arial;
COLOR: tomato;
CURSOR: pointer;
}
.loginbefore8
{
FONT-FAMILY: Arial
}
.select
{
WIDTH: 136pt;
FONT-FAMILY: Arial;
FONT-SIZE: 10pt
}
.userareatxt
{
FONT-FAMILY: Verdana;
FONT-SIZE: 8pt
}
.menutablenormal
{
TEXT-ALIGN: center;
FONT-FAMILY: Arial;
COLOR: mediumblue;
MARGIN-LEFT: 0px;
FONT-SIZE: 10pt
}
/* back stop for all tables that don't have classes yet*/
TABLE {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
COLOR: #454545;
FONT-SIZE: 18px
}
.buttons
{
BORDER-BOTTOM: 1px outset;
BORDER-LEFT: 1px outset;
FONT-FAMILY: Arial;
COLOR: #494949;
BORDER-TOP: 1px outset;
BORDER-RIGHT: 1px outset
}
#mediumtext
{
FONT-FAMILY: Arial;
COLOR: black;
FONT-SIZE: 10pt
}
#mediumtext A
{
COLOR: black;
TEXT-DECORATION: underline
}
#mediumtext A:hover
{
TEXT-DECORATION: none
}
#homepagemenus
{
TEXT-ALIGN: left;
WIDTH: 150px;
FONT-FAMILY: Arial;
COLOR: midnightblue;
FONT-SIZE: 10pt;
FONT-WEIGHT: bolder
}
#homepagemenus A
{
WIDTH: 150px;
COLOR: midnightblue
}
#homepagemenus A:hover
{
BORDER-BOTTOM: 1px;
BORDER-LEFT: 1px;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: royalblue;
PADDING-LEFT: 2px;
WIDTH: 150px;
PADDING-RIGHT: 2px;
COLOR: white;
BORDER-TOP: 1px;
BORDER-RIGHT: 1px;
PADDING-TOP: 2px
}
#topmenucell
{
BACKGROUND-IMAGE: url(../images/MenuButtons/menubar.gif);
BORDER-BOTTOM: 1px outset;
TEXT-ALIGN: center;
BORDER-LEFT: 1px outset;
FONT-FAMILY: Arial;
HEIGHT: 30px;
FONT-SIZE: 10pt;
BORDER-TOP: 1px outset;
BORDER-RIGHT: 1px outset
}
#topmenucell A
{
COLOR: white;
FONT-WEIGHT: bolder
}
#topmenucell A:hover
{
TEXT-ALIGN: center;
BACKGROUND-REPEAT: repeat;
BACKGROUND-POSITION: center center;
COLOR: darkblue;
FONT-WEIGHT: bolder
}
#topmenubar
{
BORDER-BOTTOM: black 1px;
TEXT-ALIGN: center;
BORDER-LEFT: 1px;
WIDTH: 100%;
BORDER-TOP: 1px;
BORDER-RIGHT: 1px
}
#topmenucellselected
{
BACKGROUND-IMAGE: url(../images/MenuButtons/menubarhover.gif);
BORDER-BOTTOM: 1px outset;
TEXT-ALIGN: center;
BORDER-LEFT: 1px outset;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
FONT-FAMILY: Arial;
HEIGHT: 30px;
COLOR: darkblue;
BORDER-TOP: 1px outset;
FONT-WEIGHT: bolder;
BORDER-RIGHT: 1px outset;
PADDING-TOP: 0px
}
.tableheaderred {
TEXT-ALIGN: center;
font-size: 22px;
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
color: #ffffff;
border-radius: 15px;
background-color: #cc0000;
padding: 5px 20px 5px 20px;
}
#leftsidemenu
{
}
#rightsidemenu
{
BACKGROUND-COLOR: #f1f1f1
}
#webpageeditortitle
{
TEXT-ALIGN: center;
PADDING-BOTTOM: 10px;
FONT-FAMILY: Arial;
COLOR: darkblue;
FONT-SIZE: 22pt;
PADDING-TOP: 10px
}
#editbutton
{
BORDER-BOTTOM: 1px outset;
BORDER-LEFT: 1px outset;
FONT-FAMILY: Arial;
FONT-SIZE: 7pt;
BORDER-TOP: 1px outset;
BORDER-RIGHT: 1px outset
}
#errmsg
{
BORDER-BOTTOM: 1px outset;
BORDER-LEFT: 1px outset;
PADDING-BOTTOM: 5px;
BACKGROUND-COLOR: #cc0000;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
FONT-FAMILY: Arial;
COLOR: white;
FONT-SIZE: 12pt;
BORDER-TOP: 1px outset;
BORDER-RIGHT: 1px outset;
PADDING-TOP: 5px
}
.errmsg {
BORDER: 1px outset;
background-color:#cc0000;
PADDING: 5px;
FONT-FAMILY: Arial;
COLOR: white;
FONT-SIZE: 12pt;
}
#confirmationmsg {
BORDER: 1px outset;
PADDING: 5px;
BACKGROUND-COLOR: #1a8a26;
FONT-FAMILY: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
COLOR: white;
FONT-SIZE: 9pt;
}
#signupform
{
BACKGROUND-COLOR: #f1f1f1;
FONT-FAMILY: Arial;
FONT-SIZE: 8pt
}
#headerphonenumber
{
TEXT-ALIGN: right;
FONT-FAMILY: Arial;
COLOR: midnightblue
}
#highlight
{
BACKGROUND-IMAGE: url(../images/bghighlight.gif);
WIDTH: 172px;
FONT-FAMILY: Arial;
HEIGHT: 199px;
COLOR: darkturquoise;
MARGIN-RIGHT: 0px
}
#highlightheader
{
FONT-FAMILY: Arial;
HEIGHT: 30px;
COLOR: aliceblue;
FONT-SIZE: 12pt;
FONT-WEIGHT: bolder
}
#highlightbody
{
FONT-FAMILY: Arial;
HEIGHT: 110px;
COLOR: black;
FONT-SIZE: 9pt;
FONT-WEIGHT: bolder
}
#portfoliolinks
{
}
#portfoliolinks A
{
}
#portfoliolinks A:hover
{
BACKGROUND-COLOR: royalblue;
COLOR: white
}
#highlightprice
{
BACKGROUND-IMAGE: url(../images/price.gif);
WIDTH: 153px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: Arial;
HEIGHT: 23px;
COLOR: white;
FONT-SIZE: 12pt;
FONT-WEIGHT: bolder
}
#bgbox
{
BACKGROUND-IMAGE: url(../images/bgstdfeatures.gif);
WIDTH: 559px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 217px
}
#webpackages
{
BORDER-BOTTOM: 1px;
TEXT-ALIGN: center;
BACKGROUND-COLOR: #91a8c8;
FONT-FAMILY: Arial;
COLOR: #0b3997;
FONT-SIZE: 8pt;
BORDER-RIGHT: royalblue
}
#webpackages TD
{
BACKGROUND-COLOR: #cdd9f0;
BORDER-RIGHT: 2px
}
#webpackages #name
{
TEXT-ALIGN: left;
BACKGROUND-COLOR: #dee6f6;
FONT-FAMILY: Arial;
FONT-WEIGHT: bolder
}
#webpackages #header
{
BORDER-BOTTOM: 1px;
TEXT-ALIGN: left;
BORDER-LEFT: 1px;
BACKGROUND-COLOR: #eff3fb;
FONT-STYLE: italic;
HEIGHT: 40px;
FONT-SIZE: 11pt;
BORDER-TOP: 1px;
FONT-WEIGHT: bolder;
BORDER-RIGHT: 1px
}
#portfoliopic
{
BORDER-BOTTOM: lightslategray 1px solid;
TEXT-ALIGN: center;
BORDER-LEFT: lightslategray 1px solid;
WIDTH: 150px;
FONT-FAMILY: Arial;
FONT-SIZE: 8pt;
BORDER-TOP: lightslategray 1px solid;
BORDER-RIGHT: lightslategray 1px solid
}
#webpackages #body
{
TEXT-ALIGN: left
}
#webpackages #name2
{
BACKGROUND-COLOR: #dee6f6;
FONT-FAMILY: Arial;
FONT-WEIGHT: bolder
}
#webpackages #header2
{
BORDER-BOTTOM: 1px;
BORDER-LEFT: 1px;
BACKGROUND-COLOR: #eff3fb;
FONT-STYLE: italic;
HEIGHT: 40px;
FONT-SIZE: 11pt;
BORDER-TOP: 1px;
FONT-WEIGHT: bolder;
BORDER-RIGHT: 1px
}
#banner
{
BORDER-BOTTOM: 2px outset;
TEXT-ALIGN: center;
BORDER-LEFT: 2px outset;
PADDING-BOTTOM: 4px;
BACKGROUND-COLOR: royalblue;
PADDING-LEFT: 4px;
PADDING-RIGHT: 4px;
FONT-FAMILY: Arial;
COLOR: white;
BORDER-TOP: 2px outset;
BORDER-RIGHT: 2px outset;
PADDING-TOP: 4px
}
#bgboxsml
{
BACKGROUND-IMAGE: url(../images/bgstdfeaturessml.gif);
WIDTH: 559px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 143px
}
#bgbox606px
{
BACKGROUND-IMAGE: url(../images/bgstdfeaturesconvert.gif);
WIDTH: 606px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 167px
}
#bgbox756x101
{
BACKGROUND-IMAGE: url(../images/homepagebanner.gif);
WIDTH: 756px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 101px
}
#topbar
{
BACKGROUND-COLOR: #ededed;
FONT-FAMILY: Arial;
HEIGHT: 25pt;
FONT-SIZE: 8pt
}
#initialcaps
{
TEXT-TRANSFORM: capitalize;
}
#regusersdiv
{
WIDTH: 190px;
FONT-FAMILY: Verdana;
HEIGHT: 350px;
FONT-SIZE: 8pt;
OVERFLOW: auto
}
#shoutboxdiv
{
FONT-FAMILY: Arial;
HEIGHT: 300px;
FONT-SIZE: 8pt;
OVERFLOW: auto
}
#shoutbox
{
BACKGROUND-COLOR: silver;
FONT-FAMILY: Arial;
FONT-SIZE: 8pt
}
#shoutbox TD
{
BACKGROUND-COLOR: white
}
#topbarlink
{
PADDING-BOTTOM: 3px;
TEXT-TRANSFORM: capitalize;
PADDING-LEFT: 3px;
PADDING-RIGHT: 3px;
PADDING-TOP: 3px
}
#topbarlink A:hover
{
BORDER-BOTTOM: gray 1px solid;
BORDER-LEFT: gray 1px solid;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: lightgrey;
PADDING-LEFT: 2px;
PADDING-RIGHT: 2px;
BORDER-TOP: gray 1px solid;
BORDER-RIGHT: gray 1px solid;
PADDING-TOP: 2px
}
#topbarlink A
{
PADDING-BOTTOM: 3px;
PADDING-LEFT: 3px;
PADDING-RIGHT: 3px;
PADDING-TOP: 3px
}
#links
{
font-family: "Segoe UI Light" ,sans-serif;
}
#links A:hover
{
COLOR: blue;
TEXT-DECORATION: underline
}
.links
{
font-family: "Segoe UI Light" ,sans-serif;
}
.links A:hover
{
COLOR: blue;
TEXT-DECORATION: underline
}
.buttonsnew
{
BORDER-BOTTOM: 1px outset;
BORDER-LEFT: 1px outset;
FONT-FAMILY: Arial;
HEIGHT: 30px;
BORDER-TOP: 1px outset;
FONT-WEIGHT: bolder;
BORDER-RIGHT: 1px outset
}
#adbox
{
BORDER-BOTTOM: gray 1px solid;
TEXT-ALIGN: center;
BORDER-LEFT: gray 1px solid;
FONT-SIZE: 8pt;
BORDER-TOP: gray 1px solid;
BORDER-RIGHT: gray 1px solid
}
#adboxhdr
{
BACKGROUND-IMAGE: url(../images/pageheaderbar.gif);
BORDER-BOTTOM: gray 1px solid;
TEXT-ALIGN: center;
BORDER-LEFT: gray 1px solid;
BACKGROUND-COLOR: royalblue;
FONT-FAMILY: Arial;
COLOR: white;
BORDER-TOP: gray 1px solid;
FONT-WEIGHT: bolder;
BORDER-RIGHT: gray 1px solid
}
#Adverts
{
FONT-FAMILY: Arial;
FONT-SIZE: 8pt
}
#actionbuttons
{
BORDER-BOTTOM: gray 1px solid;
BORDER-LEFT: gray 1px solid;
BACKGROUND-COLOR: plum;
BORDER-TOP: gray 1px solid;
BORDER-RIGHT: gray 1px solid
}
.icecolours {
BACKGROUND-COLOR: #aaa;
HEIGHT: 30px;
}
.icecolours td {
border-top: 1px solid #808080;
}
.icecolourshdr {
BACKGROUND-COLOR: #666;
FONT-WEIGHT: bolder;
COLOR: aliceblue;
HEIGHT: 30px;
}
.ctcolours {
BACKGROUND-COLOR: #6699ff;
HEIGHT: 30px;
white-space: nowrap;
}
.ctcolourshdr {
BACKGROUND-COLOR: #6699ff;
FONT-WEIGHT: bolder;
COLOR: aliceblue;
HEIGHT: 30px;
}
.ctcolours td {
border-top: 1px solid #003399;
}
.edscolours {
BACKGROUND-COLOR: #cc99cc;
HEIGHT: 30px;
white-space: nowrap;
}
.edscolours td {
border-top: 1px solid #003399;
}
.edscolourshdr {
BACKGROUND-COLOR: #cc99cc;
FONT-WEIGHT: bolder;
COLOR: aliceblue;
HEIGHT: 30px;
}
.vtcolours {
BACKGROUND-COLOR: #66cc99;
HEIGHT: 30px;
white-space: nowrap;
}
.vtcolours td {
border-top: 1px solid #003399;
border-bottom: 1px solid #003399;
}
.vtcolourshdr {
BACKGROUND-COLOR: #66cc99;
FONT-WEIGHT: bolder;
COLOR: aliceblue;
HEIGHT: 30px;
}
#userlineodd
{
BACKGROUND-COLOR: skyblue
}
#tableborder
{
BORDER-BOTTOM: royalblue 1px solid;
BORDER-LEFT: royalblue 1px solid;
BORDER-TOP: royalblue 1px solid;
BORDER-RIGHT: royalblue 1px solid
}
#busads1
{
BACKGROUND-COLOR: skyblue;
FONT-FAMILY: Arial;
FONT-SIZE: 8pt
}
#busads2
{
FONT-FAMILY: Arial;
FONT-SIZE: 8pt
}
#tableheadernoimage
{
BACKGROUND-COLOR: royalblue;
FONT-FAMILY: Arial;
COLOR: white;
FONT-SIZE: 8pt;
FONT-WEIGHT: bolder
}
#userlineeven
{
BACKGROUND-COLOR: gainsboro
}
#bottommenu
{
BORDER-BOTTOM: gray 1px;
BORDER-LEFT: gray 1px;
PADDING-BOTTOM: 0px;
MARGIN: 0px 0px 0px 150px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: gray 1px;
BORDER-RIGHT: gray 1px;
PADDING-TOP: 0px
}
#bottommenu LI
{
PADDING-BOTTOM: 2px;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
FONT-FAMILY: Verdana;
FLOAT: left;
COLOR: gray;
FONT-SIZE: 10pt;
FONT-WEIGHT: bolder;
PADDING-TOP: 2px
}
#bottommenu LI A
{
PADDING-LEFT: 12px;
PADDING-RIGHT: 12px;
FONT-SIZE: 0.85em;
TEXT-DECORATION: none
}
#bottommenu LI A:hover
{
COLOR: #000000;
TEXT-DECORATION: none
}
#bottommenucontainer
{
BORDER-BOTTOM: gray 2px;
BORDER-LEFT: gray 2px;
BORDER-TOP: gray 2px;
BORDER-RIGHT: gray 2px
}
.headermenu2
{
BORDER-BOTTOM: gray 1px solid;
BORDER-LEFT: gray 1px;
BACKGROUND-COLOR: blue;
MARGIN: 0px;
FONT-FAMILY: Arial;
FONT-SIZE: 11pt;
BORDER-TOP: gray 1px;
BORDER-RIGHT: gray 1px
}
.headermenu2 LI
{
Z-INDEX: 0;
BORDER-BOTTOM: medium none;
PADDING-BOTTOM: 10px;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
PADDING-LEFT: 7px;
PADDING-RIGHT: 7px;
FLOAT: right;
COLOR: white;
PADDING-TOP: 7px
}
.headermenu2 LI A
{
PADDING-BOTTOM: 2px;
MARGIN: 0px;
PADDING-LEFT: 2px;
PADDING-RIGHT: 2px;
COLOR: white;
FONT-SIZE: 8pt;
PADDING-TOP: 2px
}
.headermenu2 LI A:hover
{
BORDER-BOTTOM: gray 1px;
BORDER-LEFT: gray 1px;
PADDING-BOTTOM: 2px;
MARGIN: 0px;
PADDING-LEFT: 2px;
PADDING-RIGHT: 2px;
COLOR: white;
BORDER-TOP: gray 1px;
BORDER-RIGHT: gray 1px;
TEXT-DECORATION: underline;
PADDING-TOP: 2px
}
.headermenu
{
BORDER-BOTTOM: gray 1px;
BORDER-LEFT: gray 1px;
MARGIN: 0px;
FONT-FAMILY: Arial;
COLOR: #193cc5;
FONT-SIZE: 11pt;
BORDER-TOP: gray 1px;
BORDER-RIGHT: gray 1px
}
.headermenu LI
{
Z-INDEX: 0;
BORDER-BOTTOM: medium none;
LIST-STYLE-TYPE: none;
PADDING-LEFT: 2px;
PADDING-RIGHT: 2px;
FLOAT: left;
COLOR: #193cc5;
PADDING-TOP: 0px
}
.headermenu LI A
{
COLOR: #193cc5;
FONT-SIZE: 8pt
}
.headermenu LI A:hover
{
BORDER-BOTTOM: gray 1px;
BORDER-LEFT: gray 1px;
COLOR: #193cc5;
BORDER-TOP: gray 1px;
BORDER-RIGHT: gray 1px;
TEXT-DECORATION: underline
}
#bottommenucontainer
{
BORDER-BOTTOM: gray 2px;
BORDER-LEFT: gray 2px;
BORDER-TOP: gray 2px;
BORDER-RIGHT: gray 2px
}
.customerloginbox
{
BORDER-BOTTOM: medium none;
TEXT-ALIGN: center;
BORDER-LEFT: medium none;
WIDTH: 230px;
FONT-FAMILY: Arial;
BORDER-TOP: medium none;
BORDER-RIGHT: medium none
}
.downloadrequestbox
{
BORDER-BOTTOM: medium none;
BORDER-LEFT: medium none;
WIDTH: 300px;
FONT-FAMILY: Arial;
BORDER-TOP: medium none;
BORDER-RIGHT: medium none
}
.topmenucell
{
BACKGROUND-IMAGE: url(../images/MenuButtons/menubar.gif);
BORDER-BOTTOM: 1px outset;
TEXT-ALIGN: center;
BORDER-LEFT: 1px outset;
FONT-FAMILY: Arial;
HEIGHT: 30px;
FONT-SIZE: 10pt;
BORDER-TOP: 1px outset;
BORDER-RIGHT: 1px outset
}
.topmenucell A
{
COLOR: white;
FONT-WEIGHT: bolder
}
.topmenucell A:hover
{
TEXT-ALIGN: center;
BACKGROUND-REPEAT: repeat;
BACKGROUND-POSITION: center center;
COLOR: darkblue;
FONT-WEIGHT: bolder
}
.highlightbody
{
FONT-FAMILY: Arial;
HEIGHT: 110px;
COLOR: black;
FONT-SIZE: 9pt;
FONT-WEIGHT: bolder
}
.highlightheader
{
FONT-FAMILY: Arial;
HEIGHT: 30px;
COLOR: aliceblue;
FONT-SIZE: 12pt;
FONT-WEIGHT: bolder
}
.highlight
{
BACKGROUND-IMAGE: url(../images/bghighlight.gif);
WIDTH: 172px;
FONT-FAMILY: Arial;
HEIGHT: 199px;
COLOR: darkturquoise;
MARGIN-RIGHT: 0px
}
.tableheaderstats {
BACKGROUND-COLOR: #003399;
TEXT-ALIGN: center;
FONT-FAMILY: Arial;
HEIGHT: 30px;
COLOR: white;
font-size:16px;
vertical-align:middle;
text-align:center;
}
.homepagemenus
{
TEXT-ALIGN: left;
FONT-FAMILY: Arial;
COLOR: midnightblue;
FONT-SIZE: 10pt;
FONT-WEIGHT: bolder
}
.homepagemenus A
{
WIDTH: 100%;
COLOR: midnightblue
}
.homepagemenus A:hover
{
BORDER-BOTTOM: 1px;
BORDER-LEFT: 1px;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: royalblue;
PADDING-LEFT: 2px;
WIDTH: 100%;
PADDING-RIGHT: 2px;
COLOR: white;
BORDER-TOP: 1px;
BORDER-RIGHT: 1px;
PADDING-TOP: 2px
}
.mediumtext
{
FONT-FAMILY: Arial;
COLOR: black;
FONT-SIZE: 10pt
}
.mediumtext A
{
COLOR: black;
TEXT-DECORATION: underline
}
.mediumtext A:hover
{
TEXT-DECORATION: none
}
.secondsleft
{
BORDER-BOTTOM: #cc0000 2px solid;
TEXT-ALIGN: center;
BORDER-LEFT: #cc0000 2px solid;
WIDTH: 800px;
FONT-FAMILY: Arial;
COLOR: #cc0000;
FONT-SIZE: 14pt;
BORDER-TOP: #cc0000 2px solid;
FONT-WEIGHT: bolder;
BORDER-RIGHT: #cc0000 2px solid
}
.nothanks
{
FONT-FAMILY: Arial;
FONT-WEIGHT: bolder;
font-size:14pt;
}
#tableheaderhelp
{
TEXT-ALIGN: center;
BACKGROUND-COLOR: royalblue;
FONT-FAMILY: Arial;
HEIGHT: 20px;
COLOR: #ffffff;
FONT-WEIGHT: bolder
}
.tableheaderhelp {
TEXT-ALIGN: center;
BACKGROUND-COLOR: royalblue;
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
HEIGHT: 20px;
COLOR: #ffffff;
border-radius: 15px;
padding: 10px 0px 10px 0px;
}
.currencyheader {
BACKGROUND-COLOR: royalblue;
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
COLOR: white;
FONT-SIZE: 10pt;
FONT-WEIGHT: bolder;
border-radius: 5px;
}
.currencyheaderuap
{
border-bottom: #ffffff 1px solid;
border-left: #ffffff 1px solid;
background-color: #CC0000;
font-family: Arial;
color: #ffffff;
border-top: #ffffff 1px solid;
border-right: #ffffff 1px solid;
}
.sidemenu
{
border-bottom: #d2d2d2 1px;
border-left: #d2d2d2 1px solid;
width: 210px;
font-family: Verdana;
color: #33334b;
font-size: 8pt;
border-top: #d2d2d2 1px solid;
border-right: #d2d2d2 1px solid;
text-align: left;
}
.sidemenutitle
{
BACKGROUND-IMAGE: url(../images/sidemenutitle.gif);
PADDING-LEFT: 10px;
BACKGROUND-REPEAT: repeat-x;
FONT-FAMILY: Verdana;
HEIGHT: 31px;
COLOR: #666666;
FONT-SIZE: 9pt;
FONT-WEIGHT: bolder
}
.sidemenuitemEDS
{
background-color: #ab46ac;
BORDER-BOTTOM: #d2d2d2 1px solid;
PADDING-LEFT: 10px;
WIDTH: 210px;
FONT-FAMILY: Verdana;
HEIGHT: 23px;
COLOR: #33334b;
FONT-SIZE: 8pt
}
.sidemenuitemEDS A
{
COLOR: #ffffff;
}
.sidemenuitemEDS A:hover
{
TEXT-DECORATION: underline
}
.sidemenuitemVT
{
background-color: #269b55;
BORDER-BOTTOM: #d2d2d2 1px solid;
PADDING-LEFT: 10px;
WIDTH: 210px;
FONT-FAMILY: Verdana;
HEIGHT: 23px;
COLOR: #33334b;
FONT-SIZE: 8pt
}
.sidemenuitemVT A
{
COLOR: #ffffff;
}
.sidemenuitemVT A:hover
{
TEXT-DECORATION: underline
}
.sidemenuitemCT
{
background-color: #4f73e3;
BORDER-BOTTOM: #d2d2d2 1px solid;
PADDING-LEFT: 10px;
WIDTH: 210px;
FONT-FAMILY: Verdana;
HEIGHT: 23px;
COLOR: #33334b;
FONT-SIZE: 8pt
}
.sidemenuitemCT A
{
COLOR: #ffffff;
}
.sidemenuitemCT A:hover
{
TEXT-DECORATION: underline
}
.sidemenuitem
{
BORDER-BOTTOM: #d2d2d2 1px solid;
PADDING-LEFT: 10px;
WIDTH: 210px;
font-family: "Segoe UI Light" ,sans-serif;
HEIGHT: 23px;
COLOR: #666666;
FONT-SIZE: 10pt;
}
.sidemenuitem A
{
COLOR: #666666;
}
.sidemenuitem A:hover
{
color: #0000FF;
}
.sidemenu TD
{
}
.headermenu
{
FONT-FAMILY: Verdana;
FONT-SIZE: 10pt
}
.headermenu #hmright
{
BACKGROUND-IMAGE: url(../images/headmenuright.gif);
WIDTH: 7px;
BACKGROUND-REPEAT: repeat-y;
BACKGROUND-POSITION: center center;
HEIGHT: 27px
}
.headermenu #hmbottomright
{
BACKGROUND-IMAGE: url(../images/headmenubottomright.gif);
WIDTH: 7px;
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-POSITION: center top;
HEIGHT: 7px
}
.headermenu #hmbottom
{
BACKGROUND-IMAGE: url(../images/headmenubottom.gif);
WIDTH: 8px;
BACKGROUND-REPEAT: repeat-x;
HEIGHT: 10px
}
.headermenu #MyAccountButton
{
BACKGROUND-IMAGE: url(../images/myaccount.gif);
BACKGROUND-COLOR: white;
MARGIN-TOP: 0px;
WIDTH: 230px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: Verdana;
BACKGROUND-POSITION: center center;
HEIGHT: 29px;
COLOR: #193cc5;
FONT-WEIGHT: bolder
}
.headermenu #MyAccountButton A
{
COLOR: #193cc5
}
.headermenu #MyAccountButton A:hover
{
TEXT-DECORATION: underline
}
.headermenu #MyAccountButtonLoggedIn
{
BACKGROUND-IMAGE: url(../images/myaccountloggedin.gif);
BACKGROUND-COLOR: white;
MARGIN-TOP: 0px;
WIDTH: 230px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: Verdana;
BACKGROUND-POSITION: center center;
HEIGHT: 29px;
COLOR: #ffffff;
FONT-WEIGHT: bolder
}
.headermenu #MyAccountButtonLoggedIn A
{
COLOR: #ffffff
}
.headermenu #MyAccountButtonLoggedIn A:hover
{
TEXT-DECORATION: underline
}
.headermenu #hmleft
{
BACKGROUND-IMAGE: url(../images/headmenuleft.gif);
WIDTH: 7px;
BACKGROUND-REPEAT: repeat-y;
HEIGHT: 27px
}
.headermenu #hmbottomleft
{
BACKGROUND-IMAGE: url(../images/headmenubottomleft.gif);
WIDTH: 7px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 7px
}
.headermenu #inside
{
BACKGROUND-COLOR: white
}
.FAQpoints
{
}
.FAQpoints A:hover
{
COLOR: royalblue
}
.latestcustomers
{
width: 780px;
font-family: Verdana;
font-size: 7pt;
overflow: auto;
}
thead th {
position:sticky;
top:0;
}
.userheader {
border: 3px solid #003399;
border-radius: 5px;
background-color: #3366FF;
color: #FFFFFF;
font-size: 22px;
padding-top: 5px;
padding-bottom: 5px;
}
.useradminheader {
background-color: #009900;
color: #FFFFFF;
font-size: 18px;
}
.moneyback
{
border-style: solid;
font-size: 24pt;
font-family: arial, Helvetica, sans-serif;
color: #FFFFFF;
BACKGROUND-COLOR: royalblue;
}
.userareabox
{
border: 1px solid #C0C0C0;
}
.userareaheader {
height: 40px;
font-size: 20px;
font-family: Montserrat, Arial, Helvetica, sans-serif;
color: #ffffff;
vertical-align: middle;
border-radius: 10px;
padding:5px 20px 5px 20px ;
}
.userareaheader
{
font-family: arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: royalblue;
}
.userareaheader a
{
color: yellow;
background-color: royalblue;
}
.userareaheader a:hover
{
text-decoration: underline;
}
.ChooseCurrency {
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: royalblue;
border-radius: 5px;
padding: 5px 10px 5px 10px;
}
.onedaysalenowon {
border-color: #CC0000;
border-style: solid;
font-size: 24pt;
font-family: arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #CC0000;
padding:10px;
}
.onedaysalenowon a {
color:#fff;
text-decoration:underline;
}
.onedaysalenowon a:hover {
color: #003399;
text-decoration: none ;
}
.coronamessage {
border-color: #003399;
border: solid 2px #003399;
font-size: 12pt;
font-family: arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: royalblue;
}
.MobileText {
font-size: 40pt;
font-family: arial, Helvetica, sans-serif;
}
.embheaderct
{
BACKGROUND-IMAGE: url(../images/embbgct.jpg);
WIDTH: 672px;
BACKGROUND-REPEAT: repeat;
HEIGHT: 222px
}
.embheaderct H1
{
COLOR: #ffffff;
FONT-SIZE: 18pt
}
.embheaderct H2
{
COLOR: #000000;
FONT-SIZE: 16pt
}
.embheaderct H3
{
COLOR: #000000;
FONT-SIZE: 14pt
}
.embheadereds
{
BACKGROUND-IMAGE: url(../images/embbgmaineds.jpg);
WIDTH: 672px;
BACKGROUND-REPEAT: no-repeat;
HEIGHT: 222px
}
.embheadereds H1
{
COLOR: #ffffff;
FONT-SIZE: 18pt
}
.embheadereds H2
{
COLOR: #000000;
FONT-SIZE: 16pt
}
.embheadereds H3
{
COLOR: #000000;
FONT-SIZE: 12pt
}
.embheadervt H1
{
COLOR: #ffffff;
FONT-SIZE: 18pt
}
.embheadervt H2
{
COLOR: #000000;
FONT-SIZE: 14pt
}
.embheadervt H3
{
COLOR: #000000;
FONT-SIZE: 12pt
}
.userareabuybox
{
background-color: #ffffff;
border-spacing:7px;
}
.userareabuybox a:hover {
text-decoration: underline;
}
.detailmenuheader {
color: #FFFFFF;
font-size: 22px;
background-color: #4f73e3;
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
padding: 8px;
border-radius: 15px;
}
.sepbar
{
color: #4f73e3;
height:2px;
}
.galleryheading
{
color: #4f73e3;
font-size: 20px;
font-family: Tahoma;
border-bottom-style: solid;
border-bottom-width: thick;
border-bottom-color: #4f73e3;
display:inline-block;
}
.productpageheader
{
font-size: 26px;
font-family: Arial, Helvetica, sans-serif;
color: #4169e1;
}
h3, h4, h2, h1 {
padding: 0px;
margin: 0px;
}
.pageh1 {
font-size: 40pt;
}
.pageh2 {
font-size: 18pt;
}
.productpagetoplink
{
font-size: 11px;
color: #003399;
border-bottom-style: solid;
border-bottom-width: thick;
border-bottom-color: #4f73e3;
}
.productpagetoplink a
{
font-size: 11px;
color: #003399;
}
.productpagetoplink a:hover
{
font-size: 11px;
color: #003399;
text-decoration: underline;
}
.userareamenu {
border: 1px solid #999999;
width: 220px;
font-size: 12px;
font-family: Tahoma;
color: #808080;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.userareamenu UL {
list-style-type: none;
margin: 1px;
padding-left: 5px;
}
.userareamenu UL LI UL LI
{
border-style: none;
background-image: none;
padding-left: 1px;
padding-top: 1px;
padding-bottom: 1px;
}
.userareamenu UL LI UL LI A {
display: block;
background-image: none;
margin: 0px;
color: #808080;
font-size: 12px;
background-color: #fff;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 1px;
font-weight: normal;
}
.userareamenu UL LI UL LI A:hover
{
background-color: #3366FF;
color: #FFFFFF;
}
.userareamenu UL LI
{
display: block;
text-align: left;
font-size: 15px;
background-position: 0px 8px;
background-repeat: no-repeat;
background-image: url('../images/arrow.png');
font-weight: bold;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 1px;
border-top-width: 1px;
}
.SoftwareDownloads table{
background-color: #2aaa1c;
color: #fff;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
font-size:18px;
text-align:center;
border-radius:5px;
padding:2px 5px 2px 5px;
font-weight:900;
}
.SoftwareDownloads td {
padding: 10px 5px 10px 10px;
margin:20px;
}
.SoftwareDownloads table:hover{
background-color: #cc0000;
}
.highlightred
{
color: #dd0000;
}
.userareamain {
padding: 8px;
border: 1px solid #999999;
background-color: #eee;
border-radius: 10px;
max-width: 1000px;
margin-top: 5px;
}
.welcomename {
font-size: 20px;
FONT-FAMILY: 'Segoe UI light', Arial, Helvetica, sans-serif;
}
.welcome {
font-size: 18px;
FONT-FAMILY: 'Segoe UI light', Arial, Helvetica, sans-serif;
color: #666666;
}
.webpackages
{
BORDER-BOTTOM: 1px;
TEXT-ALIGN: center;
BACKGROUND-COLOR: #91a8c8;
FONT-FAMILY: Arial;
COLOR: #0b3997;
FONT-SIZE: 8pt;
BORDER-RIGHT: royalblue
}
.webpackages th
{
BORDER-BOTTOM: 1px;
TEXT-ALIGN: left;
BORDER-LEFT: 1px;
BACKGROUND-COLOR: #eff3fb;
FONT-STYLE: italic;
HEIGHT: 40px;
FONT-SIZE: 14pt;
BORDER-TOP: 1px;
FONT-WEIGHT: bolder;
BORDER-RIGHT: 1px
}
.webpackages td
{
TEXT-ALIGN: left;
BACKGROUND-COLOR: #dee6f6;
FONT-FAMILY: Arial;
FONT-SIZE: 11pt;
}
.webpackages a
{
color: #0b3997;
text-decoration: underline;
}
.webpackages a:hover
{
color: #0b3997;
}
.downloadprotection
{
font-family: Arial, Helvetica, sans-serif;
}
.downloadprotection a
{
font-family: Arial, Helvetica, sans-serif;
color: #6699FF;
}
.downloadprotection a:hover
{
text-decoration: underline;
}
.baskethdr {
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
font-size: 25px;
background-color: royalblue;
color: #ffffff;
border-radius: 15px;
}
.basketlineodd {
background-color: #ffffff;
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #444444;
height: 70px;
}
.basketlineeven {
background-color: #efefef;
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #444444;
height: 70px;
}
.stdtable
{
color:#003399;
}
.currencyselectbox {
font-family: 'Courier New', Courier, monospace;
padding: 1px;
background-color: #f9f9f9; /* Initial background color */
border: 2px solid #ccc; /* Border styling */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Indicates interactivity */
transition: all 0.3s ease; /* Smooth transition */
}
/* Hover Effect */
.currencyselectbox:hover {
background-color: #e6e6e6; /* Slightly darker background on hover */
border-color: #888; /* Highlight border on hover */
transform: translateY(-2px); /* Subtle lift effect */
}
/* Focus Effect */
.currencyselectbox:focus {
outline: none; /* Remove default browser outline */
background-color: #fff; /* Brighter background when focused */
border-color: #6699ff; /* Highlight border with a primary color */
box-shadow: 0 0 5px rgba(102, 153, 255, 0.5); /* Soft glow effect */
}
.zoom
{
}
.zoom a:hover
{
transform:scale(1.2);
zoom:1.2;
}
#tableheader {
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: royalblue;
TEXT-ALIGN: center;
FONT-FAMILY: Arial;
HEIGHT: 30px;
COLOR: aliceblue;
FONT-WEIGHT: bolder;
border-radius: 5px;
}
.numberplates
{
font-family: 'Segoe UI light' , Arial, Helvetica, sans-serif;
text-align: left;
font-size: 11pt;
color: #000000;
}
.numberplates td
{
border: 1px solid #cccccc;
}
.numberplates th
{
background-color: #456ce1;
color:#ffffff;
font-weight: bold;
font-size: 22pt;
}
.aboutus
{
color: #003399;
font-size: 14pt;
font-family: 'Segoe UI light' , Arial, Helvetica, sans-serif;
text-align:center;
}
.aboutus a
{
color: #003399;
font-size: 14pt;
font-family: 'Segoe UI light' , Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:underline;
}
.numberplates input
{
font-size: 22px;
}
.formats
{
font-family: 'Segoe UI light' , Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
text-align: center;
color: #444444;
}
.formats div
{
border: 1px dotted #0066FF;
background:#ffffff;
text-align:center;
vertical-align:middle;
width:200px;
height:170px;
margin:3px;
display:inline-block;
}
.userstatsother table {
/*border: 1px solid #cccccc;*/
/*font-size: 12pt;*/
/*font-family: 'Segoe UI light', Arial, Helvetica, sans-serif;*/
}
.userstatsother div {
display: inline-block;
vertical-align: top;
}
.userstats div {
display: inline-block;
vertical-align: top;
}
.userstats {
font-size: 12pt;
}
.userstats table,
.userstats table table,
.userstats div {
font-size: 12pt;
font-family: 'Segoe UI light', Arial, Helvetica, sans-serif;
}
.userstats td {
vertical-align: top;
}
.activationsdiv {
width: 90vw; /* Full browser viewport width */
height: 200px;
background-color: darkgrey;
overflow-x: auto; /* Enable horizontal scrolling */
overflow-y: hidden; /* Prevent unnecessary vertical scrolling */
box-sizing: border-box; /* Include padding/borders in width calculation */
}
.activationsdiv td {
white-space: nowrap;
padding-right:3px;
}
.activationsdiv table {
background-color: #fff;
}
.statssdivs {
border: thin solid #C0C0C0;
height: 250px;
overflow: auto;
background-color: #FFFFFF;
}
.salespercentdiv
{
width: 150px;
height: 50px;
overflow: auto;
background-color:aqua;
}
.clicker {
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
transition: all .5s ease-in;
background: #f5f5f5;
padding: 20px;
color:#999999;
}
.clicker:hover {
background: #4571e1;
color:#ffffff;
}
.clicker:hover a{
background: #4571e1;
color:#ffffff;
}
.gdpr
{
font-size:12pt;
font-family: Arial, Helvetica, sans-serif;
background-color:khaki;
color:black;
border: 2px double #cc0000;
text-align:center;
}
.gdpr a
{
text-decoration:underline;
}
.gdpr a:hover
{
text-decoration:underline;
color:cornflowerblue;
}
.usermessages {
width: 100%;
font-size: 12pt;
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
background-color: #eee;
color: #444444;
text-align: left;
vertical-align: top;
}
.usermessages th {
background-color: #676666;
text-align: left;
vertical-align: top;
color: white;
padding:5px;
}
.usermessages tr:nth-child(even) {
background: #DDD;
}
.usermessages tr:nth-child(odd) {
background: #FFF;
}
.usermessages td {
text-align: left;
vertical-align: top;
}
.usermessages a {
text-decoration: underline;
}
.usermessages a:hover {
text-decoration: underline;
color: cornflowerblue;
}
.tooltip
{
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
background-color: #fce037;
color:#000;
border: 1px solid #f8f880;
text-align:center;
}
.trialerpaid{
color:white;
background-color:#2a7a29;
}
.badactivity a {
color: white;
background-color: #cc0000;
}
.badactivity a:hover {
color: white;
background-color: #cc0000;
text-decoration-line:underline;
}
.badactivity div{
color: white;
background-color: #cc0000;
}
.regpagetext div {
font-size: 16pt;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #fff;
border:3px solid #cccccc;
padding:10px;
font-weight:bolder;
background-color:#4066df;
}
.buynowbutton {
font-size: 16pt;
font-family: Arial, 'Segoe UI Light', Helvetica, sans-serif;
background-color: #00aa00;
color: #fff;
font-weight: bolder;
border: 2px solid gray;
padding: 10px;
}
.buynowbutton2 {
font-size: 16pt;
font-family: Arial, 'Segoe UI Light', Helvetica, sans-serif;
font-weight: bolder;
padding: 10px;
}
/*.formatlist li {
FONT-FAMILY: Montserrat, Arial, Helvetica, sans-serif;
padding: 5px 5px 5px 5px;
margin-bottom: 10px;
list-style-type: none;
color: #333;
background-color: #56c28c;
font-size: 14pt;
border-radius: 5px;
text-align:center;
}
.formatlist ul {
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding: 10px 5px 10px 5px;
width: 100%;
}
*/
.admindisplayblocks {
display: inline-block;
vertical-align: top;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
}
.admindisplayblocks table th {
background-color: royalblue;
font-size: larger;
color: white;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
}
.standardtabledisplaysoddevencolours {
}
.standardtabledisplaysoddevencolours tr:nth-child(even) {
background: #DDD;
}
.standardtabledisplaysoddevencolours tr:nth-child(odd) {
background: #FFF;
}
.standardtabledisplaysoddevencolours tr:hover {
background: #ccc;
}
.standardtabledisplaysoddevencolours th {
position: sticky;
top: 0; /* Sticks the header at the top of the viewport */
/*z-index: 2; /* Ensures the header remains on top of other elements */
}
.usheaderbgcolour th {
background-color: #003399;
}
.datafields {
display: inline-block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
padding: 2px;
}
.datafieldsamountpaid{
display: inline-block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
padding: 2px;
}
.datafieldsamountpaid input{
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
}
.usermaintenancetable {
width: 100%;
max-width: 900px;
text-align: center !important;
align-content: center !important;
}
.usermaintenancetable div {
/*box-sizing:border-box ;*/
}
.tablecontentsautoscroll {
width: 90vw; /* Full browser viewport width */
overflow: auto;
box-sizing: border-box; /* Include padding/borders in width calculation */
text-align: center;
}
.tablecontentsautoscroll > * {
margin: 0;
padding: 0;
}
.userareaappdetailstable th {
text-align: left;
color: #fff;
font-size: 18px;
white-space: nowrap;
}
.userareaappdetailstable td {
text-align: left;
/*font-size: 12px;*/
white-space: nowrap;
}
.addnewpayment {
border: 3px solid #555454;
border-radius: 5px;
background-color: #c4c2c2;
color: #FFFFFF;
font-size: 22px;
padding-top: 5px;
padding-bottom: 15px;
}
.addnewpayment input {
font-size: 22px;
padding-top: 5px;
padding-bottom: 5px;
}
.amber {
background-color: #d9a21e;
text-align: center;
font-size: 16px;
border-radius: 5px;
color: #fff;
}
.green {
background-color: #15b915;
text-align: center;
font-size: 16px;
border-radius: 5px;
color: #fff;
}
.red {
background-color: #ed2626;
text-align: center ;
font-size: 16px;
border-radius: 5px;
color:#fff;
}
/* standard and product pages */
.productpagetext {
font-size: 20px;
COLOR: #666;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
}
.productpagetext div {
display: inline-block;
vertical-align: top;
font-size: 20px;
line-height: 32px;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
}
.productpagetext a {
color: #666;
}
.productpagetext a:hover {
font-weight:bolder ;
}
.productpagefullsegments {
padding: 10px;
width: 100%;
vertical-align: top;
box-sizing: border-box; /* ensure contents remain inside container*/
}
.productpagehalfsegments {
padding-top: 10px;
padding-bottom: 10px;
width: 48%;
vertical-align: top;
line-height: 30px;
box-sizing: border-box; /* ensure contents remain inside container*/
}
/* Product page section headers*/
.productpagesectionheader, .tableheader {
font-family: "Segoe UI Light", Arial, Helvetica, sans-serif;
box-sizing: border-box; /* ensure contents remain inside container*/
font-size: 22px;
font-weight: bold;
color: #fff;
border-radius: 10px;
background-color: #4f73e3;
padding: 5px;
border-left: 6px solid #063ce6; /* Add a bold left border */
width: 100%;
z-index: 10;
text-shadow: 2px 2px 2px #333;
}
.productpagesectionheader div {
display: inline-block;
font-size: 20px;
font-family: "Segoe UI Light", Arial, Helvetica, sans-serif;
color: #fff;
}
.productpagesectionheader div a {
font-size: 14px;
font-family: "Segoe UI Light", Arial, Helvetica, sans-serif;
color: #fff;
}
.productpagesectionheader div a:hover {
text-decoration: none;
}
/* product pages sub section headers */
.productpagefeatureheader {
box-sizing: border-box; /* ensure contents remain inside container*/
width: 100%;
text-align: center;
background-color: #bfd1f5; /* Light blue background */
color: #333; /* Dark text color for contrast */
padding: 5px; /* Add some spacing inside the header */
border-left: 6px solid #007acc; /* Add a bold left border */
font-family: Arial, sans-serif; /* Ensure a clean, readable font */
margin-top: 10px;
border-radius: 10px;
}
.productheaderimageandtextplacement {
padding: 0px;
width: 50%;
vertical-align: top;
}
/* product pages buy now buttons */
.productbuynow {
box-sizing: border-box;
width:100%;
border-radius:5px;
border:3px dashed #ccc;
background-color:#0b960a;
color:#fff;
padding:15px;
}
/* Back to top buttons */
.backtotop table {
background-color: #bb0000;
color: #fff;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
border-radius: 5px;
padding: 5px 5px 5px 5px;
font-weight: 900;
width: 100%;
}
.backtotop td {
text-align: center;
}
.backtotop table:hover {
background-color: #2aaa1c;
text-decoration: none;
}
/* free trail and product links in sub headers */
.freetrial {
z-index: 9999;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
font-family: Arial, Helvetica, sans-serif;
FONT-SIZE: 16px;
box-sizing: border-box; /* ensure contents remain inside container*/
}
.freetrial ul {
Z-INDEX: 9999;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
FONT-SIZE: 16px;
padding: 0px;
}
.freetrial LI {
padding: 10px 0px 10px 0px;
margin: 0px;
z-index: 0;
list-style-type: none;
float: right;
color: #ffffff;
background-color: #456ce1;
border-radius: 5px;
}
.freetrial LI A {
padding: 10px;
color: #ffffff;
font-size: 15pt;
margin: 0px;
WHITE-SPACE: nowrap;
text-decoration:none;
}
.freetrial LI A:hover {
background-color: #4b74ef;
border-radius: 5px;
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}
/* PAGE TITLES */
.pagetitle {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 18pt;
}
.pagetitle div {
display: inline-block;
text-align: center;
vertical-align: middle;
}
/* page header image and main strapline */
.pagesubtitle {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #fff;
font-size: 16pt;
vertical-align: top;
}
/* page sub header with new h2 size */
.pagesubtitlenew {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #fff;
vertical-align: top;
width: 100%;
font-size: 16pt;
}
/* ICE colours for side menu */
.sidemenuitemICE {
background-color: #aaa;
border-bottom: #d2d2d2 1px solid;
padding-left: 10px;
WIDTH: 210px;
FONT-FAMILY: Verdana;
HEIGHT: 23px;
COLOR: #33334b;
FONT-SIZE: 8pt
}
.sidemenuitemICE A {
COLOR: #ffffff;
}
.buypc {
Z-INDEX: 9999;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
font-family: Arial, Helvetica, sans-serif;
FONT-SIZE: 16px;
}
.buypc ul {
z-index: 9999;
list-style-type: none;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 0px;
}
.buypc LI {
padding: 10px 0px 10px 0px;
margin: 0px;
z-index: 0;
list-style-type: none;
float: right;
color: #ffffff;
background-color: #ef8200;
border-radius: 5px;
}
.buypc LI A {
padding: 10px;
color: #ffffff;
font-size: 15pt;
margin: 0px;
WHITE-SPACE: nowrap;
}
.buypc LI A:hover {
background-color: #f88803;
border-radius: 5px;
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}
/* footers magic */
/* Footer stapline Outer container */
.footer-strapline-wrapper {
background-color: #ddd; /* Full-width footer background color */
border-top: 3px solid #85adfe; /* Adds a 5px mild blue border running the full width */
padding: 10px;
}
.footer-strapline-wrapper table {
color: #444;
}
.footer-strapline-wrapper a {
text-decoration:none;
color:#444;
}
/* Outer container for full-width background */
.footer-wrapper {
background-color: #666666; /* Full-width footer background color */
border-top: 5px solid royalblue; /* Adds a 5px mild blue border running the full width */
}
/* Inner container for content */
.footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 900px; /* Restricts the content width to 900px */
margin: 10px auto 0; /* Adds 10px margin at the top and centers the footer content */
padding: 10px; /* Adds spacing inside the footer */
box-sizing: border-box;
color: white; /* Ensures text is still visible */
}
.footer > div {
flex: 1 1 33%;
max-width: 33%;
box-sizing: border-box;
/*border: 1px dashed red;*/
min-width: 200px;
}
/* New footer-specific text styles */
.footer {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
font-size: 12pt;
color: white;
}
.footer a {
color: white;
text-decoration: none;
}
.footer a:hover {
color: #333333; /* Nearly black hover effect */
text-decoration: none;
}
.footer > div > div:first-child {
font-weight: bold; /* Makes the text bold for the first child div */
}
/*
-------------------------------------------
new foot socials
-------------------------------------------
*/
/* Wrapper for full-width background */
.footersocials-wrapper {
background-color: #444; /* Full-width background */
padding: 20px 0; /* Add padding above and below */
}
/* Container for the socials content */
.footersocials {
max-width: 900px; /* Center and limit width */
margin: 0 auto;
padding: 10px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
color: white;
text-align: center;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
font-size: 12pt;
}
/* Social section (Stay In Touch area) */
.social-section {
flex: 1 1 100%; /* Full width */
margin-bottom: 20px;
}
.social-header {
font-size: 18pt;
font-weight: bold;
margin-bottom: 10px;
}
/* Social icons (Facebook, Twitter, YouTube) */
.social-icons {
display: flex;
justify-content: center;
gap: 10px; /* Space between icons */
flex-wrap: wrap; /* Allow wrapping */
}
.social-icons img {
border: none;
}
/* Links section (Privacy Policy, Terms, Contact) */
.links-section {
flex: 1 1 100%; /* Full width */
display: flex;
justify-content: space-evenly;
gap: 10px; /* Adjust spacing between links */
margin-bottom: 20px;
}
.links-section a {
color: white;
text-decoration: none;
font-size: 14pt;
}
.links-section a:hover {
color: #ccc; /* Hover effect for links */
}
/* Copyright section */
.copyright-section {
flex: 1 1 100%; /* Full width */
font-size: 12pt;
margin-top: 10px;
}
/* Contact Us Form Container */
.contactus-page {
max-width: 900px; /* Restricts the page content to 900px */
margin: 0 auto; /* Centers the entire form on the page */
padding: 20px;
}
/* Form Fields */
.form-container {
display: flex;
flex-direction: column;
gap: 20px; /* Adds spacing between the fields */
}
.form-field label {
font-weight: bold;
margin-bottom: 5px;
color: #555;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%; /* Ensures inputs take up the full width of the container */
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* Keeps padding inside the box dimensions */
}
/* Ensure the text in fields is left-aligned */
.form-field input,
.form-field select,
.form-field textarea {
text-align: left;
}
/* Buttons */
.form-field.buttons {
display: flex;
gap: 15px; /* Adds spacing between buttons */
justify-content: flex-start; /* Aligns buttons to the left */
border:none ;
}
.form-field input[type="submit"],
.form-field input[type="reset"] {
padding: 10px 20px;
font-size: 14px;
color: #fff;
background-color: #0056b3;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-field input[type="reset"] {
background-color: #dc3545;
}
.form-field input[type="submit"]:hover {
background-color: #003d80;
}
.form-field input[type="reset"]:hover {
background-color: #b32a35;
}
/* Additional Info Section */
.additional-info {
margin-top: 30px;
}
.additional-info a {
color: #0056b3;
text-decoration: none;
}
.additional-info a:hover {
text-decoration: underline;
}
/* ReCAPTCHA */
.g-recaptcha {
margin: 15px 0;
}
/* FAQ Header Styling */
.faq-productpagefeatureheader {
box-sizing: border-box; /* Ensure contents remain inside container */
width: 100%; /* Makes the header span the full width */
text-align: center;
background-color: #bfd1f5; /* Light blue background */
color: #333; /* Dark text color for contrast */
padding: 5px; /* Add some spacing inside the header */
border-left: 6px solid #007acc; /* Add a bold left border */
font-family: Arial, sans-serif; /* Ensure a clean, readable font */
margin-top: 10px;
border-radius: 10px;
cursor: pointer; /* Indicates the header is clickable */
transition: background-color 0.3s ease; /* Smooth hover effect */
}
.faq-productpagefeatureheader:hover {
background-color: #e1e9f7; /* Slightly lighter blue on hover */
}
/* FAQ Answer Styling (Initially Hidden) */
.faq-productpagefullsegments {
box-sizing: border-box; /* Ensure contents remain inside container */
padding: 0 15px;
max-height: 0; /* Hidden by default */
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease; /* Smooth transition */
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
margin-top: 5px;
margin-bottom: 15px;
width: 100%;
text-align: left !important; /* Ensures all content remains left-justified */
}
.faq-productpagefullsegments.show {
padding: 5px 5px 80px 5px; /* Adds 45px of padding at the bottom for the gap inside the answer box */
background-color: #f9f9f9; /* Light background */
}
.statspagedivs {
box-sizing: border-box; /* Ensure contents remain inside container */
padding: 0px;
max-height: 0; /* Hidden by default */
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease; /* Smooth transition */
margin: 0px;
width: 100%;
text-align: center !important; /* Ensures all content remains left-justified */
justify-content: center !important;
}
.NewMessages {
font-family: 'Segoe UI light', Arial, Helvetica, sans-serif;
color: white;
background-color: #cc0000;
align-content: center;
border-radius: 15px;
}
/* Container for a row of user area divs */
/* When on same row, "userareadiv" divs will be same height */
.userarea-container {
display: flex;
flex-wrap: wrap; /* Allows wrapping when the window is too small */
gap: 10px; /* Adds some space between the divs H */
justify-content: center;/* Centers the divs within the container */
margin-bottom: 10px; /* Adds a gap below the container itself V */
}
/* User area panel divs */
.userareadiv {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
position: relative; /* Makes the parent a positioning reference */
flex: 1 1 300px; /* 300px min width before wrapping */
min-height: 150px; /* Ensures proper height for the div */
border: 1px solid lightgrey;/* Border for visibility */
border-radius: 10px; /* Rounded corners for the parent */
overflow: hidden; /* Prevents content spilling out of the border radius */
background-color: white; /* Default background color */
padding: 0; /* Removes unnecessary padding */
font-size: 14pt;
transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transitions */
transition: all 0.3s ease; /* Smooth hover effect */
}
.userareadiv:hover {
background-color: #cae3fa; /* Slightly lighter background color on hover */
border-color: #6699ff; /* Changes border to blue on hover */
transform: translateY(-2px); /* Slight lift effect on hover */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}
.userareadiv:active {
transform: translateY(0); /* Reset lift effect for "pressed" look */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for pressed state */
}
.userareadiv a {
text-decoration: none;
color: inherit;
}
.userareadiv img,
.userareadiv div {
margin: auto;
z-index: 2;
position: relative;
}
.UserDIVHeader {
position: absolute; /* Puts the header at the top of the parent */
top: 0; /* Aligns it to the top of the parent */
left: 0; /* Aligns it to the left side */
width: 100%; /* Makes the header span the full width */
height: 40px; /* Adjust height as needed */
background-color: #6699ff; /* Header background color */
color: white;
text-align: center; /* Centers text horizontally */
line-height: 40px; /* Centers text vertically */
border-top-left-radius: 10px; /* Curves the top-left corner */
border-top-right-radius: 10px; /* Curves the top-right corner */
font-size:16pt;
font-weight:bold;
}
.UserDIVHeaderDownloads {
background-color: #009a11;
}
.UserDIVHeaderSpecialOffers {
background-color: #94009a;
}
.UserDIVHeaderNEW {
background-color: #cc0000;
}
.account-options {
border: 1px solid #999999; /* Light grey border */
font-size: 18px;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
color: #454545; /* Medium grey font color */
margin-bottom: 10px;
background-color: #FFFFFF; /* White background */
border-radius: 10px; /* Rounded corners */
padding: 20px; /* Adds some inner spacing */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
.account-header {
display: flex;
justify-content: space-between; /* Places the title and button at opposite ends */
align-items: center; /* Vertically centers content */
margin-bottom: 15px; /* Adds spacing between the header and content */
}
.account-header h2 {
margin: 0;
font-size: 20px; /* Slightly larger title */
color: #333333; /* Dark grey for the title */
}
.back-to-account {
display: inline-block;
padding: 8px 16px; /* Button padding */
font-size: 14px;
font-family: Arial, sans-serif;
color: white; /* White text */
text-decoration: none; /* Removes underline */
background-color: #6699ff; /* Blue background */
border: 2px solid #6699ff; /* Matching blue border */
border-radius: 5px; /* Slightly rounded corners */
cursor: pointer; /* Pointer to indicate interactivity */
transition: all 0.3s ease; /* Smooth hover effect */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}
.back-to-account:hover {
background-color: #4a7bd9; /* Darker blue on hover */
border-color: #4a7bd9; /* Darker border on hover */
transform: translateY(-2px); /* Slight lift effect on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow for raised effect */
}
.back-to-account:active {
transform: translateY(0); /* Reset lift effect for "pressed" look */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for pressed state */
}
.account-content {
text-align: left; /* Left-aligns the content */
}
/* General link styling */
.account-content a {
color: #2575fc;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block; /* Needed for transform to work properly */
}
.account-content a:hover {
color: #0055cc;
text-decoration: underline;
text-shadow: 0 0 2px rgba(37, 117, 252, 0.3);
transform: translateY(-2px);
}
.accountoptions{
border-spacing:0px;
}
.standardbuttonwithani {
display: inline-block;
padding: 8px 16px; /* Button padding */
font-size: 18px;
font-family: Arial, sans-serif;
color: white; /* White text */
text-decoration: none; /* Removes underline */
background-color: #6699ff; /* Blue background */
border: 2px solid #6699ff; /* Matching blue border */
border-radius: 5px; /* Slightly rounded corners */
cursor: pointer; /* Pointer to indicate interactivity */
transition: all 0.3s ease; /* Smooth transition for hover effects */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle initial shadow */
}
.standardbuttonwithani:hover {
background-color: #4a7bd9; /* Darker blue on hover */
border-color: #4a7bd9; /* Darker border on hover */
transform: translateY(-2px); /* Slight lift effect on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Stronger shadow for raised effect */
}
.standardbuttonwithani:active {
transform: translateY(0); /* Reset lift effect when pressed */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for pressed state */
}
/* std 2 column form entry with wrap */
.stdtwocolumn-container {
max-width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 8px; /* Space between rows */
max-width:800px;
}
.stdtwocolumn-row {
display: flex;
flex-wrap: wrap; /* Ensures inputs can wrap under labels */
align-items: center; /* Vertically aligns content */
gap: 10px; /* Adds space between label and input */
}
.stdtwocolumn-row label {
flex: 0 0 30%; /* Labels will occupy up to 30% of the row */
min-width: 150px; /* Ensures labels have a reasonable minimum space */
font-weight: bold;
white-space: nowrap; /* Prevents labels from wrapping unnecessarily */
}
.stdtwocolumn-row input,
.stdtwocolumn-row textarea,
.stdtwocolumn-row select {
flex: 1; /* Inputs will take up the remaining space */
min-width: 100px; /* Ensures inputs don’t shrink below a usable size */
max-width: 100%; /* Prevents inputs from overflowing */
padding: 5px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
}
@media screen and (max-width: 768px) {
.stdtwocolumn-row label {
flex: 1 1 100%; /* Labels will take the full row on smaller screens */
text-align: left; /* Align text to the left for better readability */
white-space: normal; /* Allows wrapping when necessary */
}
.stdtwocolumn-row input,
.stdtwocolumn-row textarea,
.stdtwocolumn-row select {
flex: 1 1 100%; /* Inputs will also take the full row */
}
}
/* OLD START: Desktop MENU */
#navi {
z-index: 9999;
background-repeat: repeat-x;
vertical-align: middle;
}
#navi UL {
z-index: 9997;
padding-bottom: 0px;
list-style-type: none;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: "Segoe UI Light",sans-serif;
padding-top: 0px;
vertical-align: middle;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
opacity: 0; /* make things invisible upon start */
-webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: .2s;
-moz-animation-duration: .2s;
animation-duration: .2s;
}
#navi UL LI {
z-index: 9998;
position: relative;
display: block;
float: left;
background-color: #fafafa;
text-align: left;
vertical-align: middle;
}
#navi LI UL {
DISPLAY: none;
}
#navi UL LI A {
z-index: 9999;
padding-left: 10px;
padding-right: 10px;
display: block;
font-family: "Segoe UI Light",sans-serif;
white-space: nowrap;
height: 30px;
color: #888888;
margin-left: 0px;
font-size: 12pt;
text-decoration: none;
padding-top: 10px;
vertical-align: middle;
}
#navi UL LI A:hover {
background-color: #e6e6e6;
background-repeat: repeat-x;
color: #7896e7;
}
#navi LI:hover UL {
POSITION: absolute;
DISPLAY: block;
}
#navi LI:hover LI {
FLOAT: none;
font-size: 12pt;
}
#navi LI:hover A {
BACKGROUND-COLOR: #e6e6e6;
COLOR: #666666;
}
#navi LI:hover LI A:hover {
BACKGROUND-COLOR: #c9c9c9
}
ul li.separator {
padding: 0px;
cursor: default;
background: none;
border-width: 0;
}
ul li.separator div {
border-top: 1px solid #9E9E9E;
font-size: 0px;
}
/* END: OLD Desktop MENU */
/*********************************/
/* New menu system 2025 */
/*********************************/
.staticmenuback {
height: 58px;
background-color: #FAFAFA;
display: flex; /* Use Flexbox for alignment */
align-items: center; /* Vertically centers the content */
justify-content: center; /* Horizontally centers the content */
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
COLOR: #454545;
FONT-SIZE: 18px;
}
.staticmenu {
position: fixed;
top: 0;
width: 100%;
background-color: #FAFAFA;
z-index: 101; /* Dropdown menu appears on top of every other element on website */
border-bottom: 1px solid #cccccc;
transition: transform 0.3s ease; /* Smooth hide/show transition */
text-align: center; /* Ensures text is centered in case of inline elements */
}
/* menu bar container */
.main-menu {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
/* logic */
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
white-space: nowrap; /* Prevent wrapping */
}
.menu-item {
position: relative;
}
.menu-item > a {
height: 48px;
line-height: 48px;
display: block;
padding: 5px 10px;
text-decoration: none;
color: #333;
font-weight: bold;
}
.menu-item:hover > a {
background-color: #e5e5e5;
transition: transform 0.3s ease; /* Smooth hide/show transition */
}
/* Submenu container */
.submenu {
top: 52px;
position: absolute;
/*top: 100%;*/
/*display: none;*/
background-color: #ddd;
color: #fff; /* Light text for readability */
box-shadow: 0 6px 12px rgba(0,0,0,0.3); /* Stronger shadow for */
padding: 5px; /* around edges */
padding-bottom: 25px;
/*white-space: nowrap;*/
min-width: 100px; /* sub menu drop down needs to be min 100px wide */
z-index: 101;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
border: 1px solid #bbb;
}
/* Show submenu on hover */
.menu-item:hover .submenu {
display: flex;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Column layout */
.submenu.columns-1 .column {
width: 100%;
}
.submenu.columns-2 .column {
width: 50%;
}
.submenu.columns-3 .column {
width: 33.33%;
}
.column {
padding: 0px 9px;
}
/* column headers */
.column h4 {
margin-top: 0;
font-size: 18px;
font-weight: bold;
color: #222;
padding: 6px;
border-bottom: 1px solid #999;
border-radius:10px;
}
.column ul {
list-style: none;
padding: 0;
margin: 10px 0 0 0;
}
/* each sub menu element */
.column ul li a {
display: block;
color: #333;
padding: 3px 14px 3px 3px;
text-decoration: none;
/*border-radius: 5px;*/
transition: background-color 0.3s ease, color 0.3s ease;
/*border:1px solid #ccc;*/
}
.column ul li a:hover {
background-color: #7592eb;
color: #fff;
}
/* Alignment options */
.submenu.align-left {
left: 0;
text-align: left;
}
.submenu.align-right {
right: 0;
text-align: left;
}
.submenu.align-center {
left: 50%;
transform: translateX(-50%);
}
/*********************************/
/* End of new menu system */
/*********************************/
.hidden {
transform: translateY(-100%); /* Moves menu out of view */
}
header img {
display: block; /* Removes inline-block behavior that might add spacing */
margin: 0 auto; /* Horizontally centers the image */
max-width: 100%; /* Ensures the image scales properly for responsiveness */
}
/* default buttons */
.standardbutton {
display: inline-block;
padding: 6px 10px; /* Spacing inside the button */
font-size: 14px;
font-family: Arial, sans-serif; /* Simple, readable font */
color: white; /* Text color */
text-decoration: none; /* Removes underline for anchor-like buttons */
background-color: #538bfc; /* Initial background color */
border: 2px solid #6699ff; /* Border matching the background color */
border-radius: 5px; /* Rounded corners for a modern look */
cursor: pointer; /* Pointer to indicate interactivity */
transition: all 0.3s ease; /* Smooth transition for hover effects */
text-align: center; /* Centers the button text */
}
.standardbutton:hover {
background-color: #175ce0; /* Slightly darker blue on hover */
border-color: #4a7bd9; /* Match hover border color with background */
color: #ffffff; /* Keep text white on hover */
transform: translateY(-2px); /* Slight lift effect on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow on hover */
}
.standardbutton:active {
transform: translateY(0); /* Reset lift on active state (button pressed) */
box-shadow: none; /* Remove shadow for a "pressed" effect */
}
/* std product placement base class */
.ProductPlacement {
width: 290px;
height: 200px;
border-radius: 15px;
padding: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
transition: all 0.3s ease; /* Smooth hover effect */
cursor: pointer; /* Indicates interactivity */
}
.ProductPlacement:hover {
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}
.ProductPlacement:active {
transform: translateY(0); /* Reset lift effect */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Pressed-down shadow effect */
}
/* Specific background colors for each product */
.ICEProductPlacement {
background-color: #aaa;
border-left: 6px solid #777;
}
.EDSProductPlacement {
background-color: #a83ba8;
border-left: 6px solid #602260;
}
.CTProductPlacement {
background-color: #456ce1;
border-left: 6px solid #2b448d;
}
.VTProductPlacement {
background-color: #179848;
border-left: 6px solid #0d5b2b;
}
/* Buy now buttons */
.buynowbuttonsolo table {
background-color: #bb0000;
color: #fff;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: center;
border-radius: 10px;
padding: 7px 25px 10px 25px;
font-weight: 900;
text-align: center;
width: 100%;
text-shadow: 2px 2px 2px #333;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
transition: all 0.3s ease; /* Smooth hover effect */
cursor: pointer; /* Indicates interactivity */
}
.buynowbuttonsolo td {
text-align: center;
}
.buynowbuttonsolo table:hover {
background-color: #2aaa1c;
transform: translateY(-5px); /* Lift effect on hover */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
text-decoration:none !important;
}
.buynowbuttonsolo:active {
transform: translateY(0); /* Reset lift effect */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Pressed-down shadow effect */
}
.productcard {
display: inline-block; /* Ensures proper layout as a block element */
border: 4px solid #ccc; /* Border styling */
border-radius: 10px; /* Rounded corners for a polished look */
transition: all 0.3s ease; /* Smooth transitions on hover */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Initial subtle shadow */
cursor: pointer; /* Pointer to indicate interactivity */
}
.productcard:hover {
transform: translateY(-5px); /* Slight lift effect */
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
border-color: #aaa; /* Optional: Slightly darker border on hover */
}
.productcard:active {
transform: translateY(0); /* Reset lift effect for "pressed" look */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for pressed state */
}
.noborder {
border: 0px;
box-shadow: 0 0 0;
}
/* highlight element with thin border and shadow */
.shadowboard {
/*display: inline-block; /* Ensures proper layout as a block element */
border: 1px solid #ccc; /* Border styling */
border-radius: 5px; /* Rounded corners for a polished look */
transition: all 0.3s ease; /* Smooth transitions on hover */
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2); /* Initial subtle shadow */
text-align:center;
}
.shadowboard td {
text-align: center;
}
/* Base animation class */
.animated-div {
display: block; /* Makes it act like a block-level element */
cursor: pointer; /* Indicates interactivity */
border-radius: 6px; /* Slightly rounded corners */
text-decoration: none; /* Removes underline from links */
transition: all 0.3s ease; /* Smooth transitions for hover effects */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
padding: 5px; /* Adds spacing inside the div */
margin: 5px; /* Adds margin around the div */
text-align: center; /* Centers the text */
color: white; /* Ensures text stays white */
}
/* Hover and active effects for animation */
.animated-div:hover {
transform: translateY(-2px); /* Lift effect */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow for hover */
}
.animated-div:active {
transform: translateY(0); /* Reset lift effect */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for pressed state */
}
/* Default background colors */
.bg-green {
background-color: #009a11; /* Default green background */
border: 2px solid #009a11; /* Matches background */
}
.bg-blue {
background-color: #6699ff; /* Default blue background */
border: 2px solid #6699ff; /* Matches background */
}
/* Hover background colors */
.hover-green:hover {
background-color: #00800e; /* Darker green on hover */
border-color: #006b0c; /* Darker green border on hover */
}
.hover-blue:hover {
background-color: #4a7bd9; /* Darker blue on hover */
border-color: #4a7bd9; /* Darker blue border on hover */
}
/* Default background colors */
.bg-ice {
background-color: #aaa; /* Default green background */
border: 2px solid #444; /* Matches background */
}
/* Default background colors */
.bg-ct {
background-color: #6699ff; /* Default green background */
border: 2px solid #0958f6; /* Matches background */
}
/* Default background colors */
.bg-eds {
background-color: #cc99cc; /* Default green background */
border: 2px solid #d027d0; /* Matches background */
}
/* Default background colors */
.bg-vt {
background-color: #66cc99; /* Default green background */
border: 2px solid #0e9351; /* Matches background */
}
/* */
.text-container {
background: linear-gradient(to bottom, #3d66e2, #87CEEB); /* Gradient from light blue to sky blue */
border: 1px solid #1E4EA1; /* Darker blue border with a slight gray tint */
border-radius: 10px; /* Rounded corners */
padding: 10px; /* Space around the text */
display: inline-block; /* Ensures the container fits the text */
font-weight: bolder;
margin-bottom: 10px;
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Initial subtle shadow */
/* box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
.text-style {
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif; /* Elegant light font */
color: white; /* Black text */
font-size: 28px; /* Approximately 1 cm */
}
.text-style-shadow {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Subtle drop shadow */
}
.text-style-red {
color: yellow;
font-weight: 900;
}
/* Homepage specific stuff*/
.homepage-container {
max-width: 1000px;
margin: 20px auto;
}
.homepage-row {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 20px;
}
.homepage-icon {
flex: 1;
text-align: center;
}
.homepage-content {
flex: 2;
padding: 0 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; /* Smooth transitions */
}
.homepage-content h2 {
color: #000000;
transition: color 0.3s ease;
}
.homepage-content p {
line-height: 1.6;
font-size: larger;
color: #000000;
transition: color 0.3s ease;
}
/* Hover effect */
.homepage-content:hover {
color: #2536bb; /* Slightly more vibrant color */
transform: translateY(-5px); /* Lifts the content slightly */
/*box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); /* Adds a soft shadow */
cursor: pointer; /* Indicates clickability */
font-weight:bolder;
}
.homepage-content:hover h2,
.homepage-content:hover p {
color: #2c4bdc; /* Apply the hover effect to child elements */
}
.homepage-content-link {
text-decoration: none; /* Removes default underline */
color: inherit; /* Ensures the text retains its original color */
display: flex; /* Flex ensures it behaves as part of the row */
flex: 2; /* Take the same space as .homepage-content */
align-items: center; /* Centers the text vertically */
}
.homepage-screenshot {
flex: 1;
text-align: center;
box-sizing: border-box;
}
.homepage-screenshot img {
/*max-width: 100%;*/
max-width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.homepage-footer {
text-align: center;
margin-top: 30px;
font-style: italic;
color: #3c3c3c;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif;
font-size: 22pt;
font-weight: bolder;
}
/* Media query to handle wrapping below 900px on home page items */
@media (max-width: 800px) {
.homepage-row {
flex-direction: column;
}
.homepage-icon, .homepage-content, .homepage-screenshot {
flex: 1 1 100%; /* Make each div take full width */
text-align: center;
padding: 10px;
}
}
/* ua texarea boxes */
.ua-flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
*align-items: flex-start;
gap: 10px; /* Adds spacing between items */
}
.textarea {
border: 1px solid #ccc;
border-radius: 5px;
width: 95%;
resize: both;
overflow: auto;
}
/* Media query for small screens */
@media (max-width: 800px) {
.flex-item {
width: 95%;
margin-bottom: 10px; /* Adds spacing when wrapped */
}
}
.td-iceadd {
background-color: #FFD700; /* Vibrant yellow background */
color: #000000; /* Black text */
font-family: Arial, sans-serif;
box-sizing: border-box; /* ensure contents remain inside container*/
font-size: 22px;
font-family: "Segoe UI Light", Arial, Helvetica, sans-serif;
font-weight: bold;
border-radius: 10px;
padding: 10px;
border-left: 6px solid #a08806; /* Add a bold left border */
width: 100%;
}
.info-circle {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid #054b97;
background-color: #66affc; /* Blue color */
color: white;
text-align: center;
line-height: 25px;
font-size: 12px;
font-weight: bold;
font-family: Arial, sans-serif;
}
.spamfoldermessage {
text-align: center;
color: #ff4500;
font-weight: bold;
background-color: #fcf18c;
padding: 10px;
border: 1px solid #c68205;
border-radius: 10px;
background-color: darkorange;
font-family: 'Segoe UI Light', Arial, Helvetica, sans-serif; /* Elegant light font */
color: white; /* Black text */
font-size: 24px; /* Approximately 1 cm */
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Subtle drop shadow */
}
/* Container for login page divs */
.login-container {
display: flex;
flex-wrap: wrap; /* Allows wrapping when the window is too small */
gap: 10px; /* Adds some space between the divs */
justify-content: center; /* Centers the divs within the container */
margin-bottom: 10px; /* Adds a gap below the container itself */
}
/* User area divs */
.logindiv {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
position: relative; /* Makes the parent a positioning reference */
flex: 1 1 300px; /* 300px min width before wrapping */
min-height: 150px; /* Ensures proper height for the div */
border: 1px solid lightgrey; /* Border for visibility */
border-radius: 10px; /* Rounded corners for the parent */
overflow: hidden; /* Prevents content spilling out of the border radius */
background-color: white; /* Default background color */
padding: 0; /* Removes unnecessary padding */
font-size: 14pt;
transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transitions */
transition: all 0.3s ease; /* Smooth hover effect */
}
.uacontents {
border: 2px solid #4f73e3;
border-radius: 10px;
background-color: #87a1f3;
color: #fff;
font-size: 22px;
padding: 5px 10px 5px 10px;
width: 95%;
margin-top: 5px;
margin-bottom: 5px;
}
.uacontents th {
background-color: #7292f7;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
.CCs {
BACKGROUND-COLOR: #eb8282 ;
border: 2px solid #924141;
color: #fff;
}
.AccountStatus {
background-color: #b5b324;
border: 2px solid #7a7824;
color: #3b3a3a;
}
.AccountStatus div {
font-size: 22px;
display: inline-block;
border: 1px solid #a7a418;
border-radius: 5px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #e1de21;
}
/* Std yellow BG by default */
.highlightfield {
font-size: 22px;
display: inline-block;
border: 1px solid #a7a418;
border-radius: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: #e1de21;
color: #a44920 !important;
margin: 1px;
text-shadow:none;
}
.highlightfieldred {
background-color: #f63939;
border: 2px solid #9f0f0f;
color: #fff !important;
}
.highlightfieldgreen {
background-color: #1eb51e;
border: 2px solid #207420;
color: #fff !important;
}
.highlightname {
font-size: 26px !important;
display: inline-block;
border: 1px solid #a7a418;
border-radius: 10px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 5px;
background-color: #1eb51e;
border: 3px solid #207420;
color: #fff !important;
}
.uasubheader {
font-size: 22px;
box-sizing: border-box; /* ensure contents remain inside container*/
width: 100%;
text-align: center;
background-color: #1e9004;
color: #fff;
padding: 5px; /* Add some spacing inside the header */
border-left: 6px solid #43ee1c; /* Add a bold left border */
font-family: Arial, sans-serif; /* Ensure a clean, readable font */
margin-top: 10px;
border-radius: 10px;
}
.uasubheader div {
font-size: 22px;
}
/* apps comparison page styles */
.appsComparisonTable {
width: 100%;
border-collapse: collapse; /* Ensure single grid lines */
margin-top:15px;
}
/* highlight most common sold app */
.appsComparisonTable table th:nth-child(2) {
background-color: #c5f6c9;
border-top: 2px solid #39a542;
border-left: 2px solid #39a542;
border-right: 2px solid #39a542;
}
.appsComparisonTable table td:nth-child(2) {
background-color: #c5f6c9;
border-left: 2px solid #39a542;
border-right: 2px solid #39a542;
}
.appsComparisonTable table tr:last-child td:nth-child(2) {
border-bottom: 2px solid #39a542;
border-left: 2px solid #39a542;
border-right: 2px solid #39a542;
}
.appsComparisonTable img{
border:1px solid #ddd;
border-radius:10px;
}
.appsComparisonTable .mostPopularTag {
position: absolute;
top: -5px; /* Position it halfway through the border */
left: 50%; /* Center the tag horizontally */
transform: translateX(-50%); /* Adjust for proper centering */
background-color: red; /* Red background */
color: white; /* White text */
padding: 5px 10px; /* Padding for a neat look */
border-radius: 10px; /* Fully rounded corners */
font-weight: bold; /* Bold text for emphasis */
font-size: 14px; /* Adjust text size */
box-shadow: 0px 2px 5px rgba(0,0,0,0.2); /* Optional shadow for pop */
}
.appsComparisonTable th {
/*position: relative; /* Required to make the `mostPopularTag` positioned relative to `| ` */
}
.appsComparisonTable th {
background-color: #f0f0f0; /* Light grey background for the header */
font-weight: bold;
border-right: 1px solid #ddd;
vertical-align: top;
transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effects */
padding-top: 20px;
padding-bottom: 20px;
}
/* doesn't affect first column */
.appsComparisonTable th:not(:first-child):hover {
transform: scale(1.05); /* Enlarges slightly when hovered */
z-index: 1;
border: 1px solid #ccc;
}
.appsComparisonTable td {
text-align: center;
padding: 5px;
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
vertical-align:top;
}
/* Highlight Features Column */
.appsComparisonTable th:first-child,
.appsComparisonTable td:first-child {
/*background-color: #e0e0e0; /* Slightly darker grey for the Features column */
font-weight: bold; /* Optional: Bold text for Features column */
border-left: 1px solid #ddd;
}
/* Alternating Row Colors */
.appsComparisonTable tbody tr:nth-child(odd) {
background-color: #e6eaef; /* Light grey for odd rows */
}
.appsComparisonTable tbody tr:nth-child(even) {
background-color: #ffffff; /* White for even rows */
}
/* Ensure Features Column Highlight Overrides Alternating Colors */
.appsComparisonTable tbody tr td:first-child {
/*background-color: #e0e0e0; /* Re-apply the highlight for Features column */
}
.appsComparisonTable .buyNowButton {
background-color: #0078D7; /* Microsoft blue */
color: #fff; /* White text */
border: none; /* No border */
padding: 10px 20px; /* Button padding */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor */
font-weight: bold; /* Bold text */
text-transform: uppercase; /* Makes text uppercase */
transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effects */
margin-top: 5px;
white-space: nowrap;
}
.appsComparisonTable .moredetailsButton {
background-color: #009a11; /* Microsoft blue */
color: #fff; /* White text */
border: none; /* No border */
padding: 10px 10px; /* Button padding */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor */
font-weight: bold; /* Bold text */
text-transform: capitalize; /* Makes text uppercase */
transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effects */
margin-top: 5px;
}
.appsComparisonTable .moredetailsButton:hover {
background-color: #04690f; /* Darker blue for hover */
transform: scale(1.1); /* Pops out slightly */
}
.appsComparisonTable .buyNowButton:hover {
background-color: #005A9E; /* Darker blue for hover */
transform: scale(1.1); /* Pops out slightly */
}
.appsComparisonTable .buyNowButton:active {
background-color: #003E73; /* Even darker blue when clicked */
transform: scale(0.95); /* Shrinks slightly when clicked */
}
.appsComparisonTable .price {
color: #0078D7; /* Bold Microsoft blue to make it pop */
font-weight: bold; /* Emphasizes the price */
text-transform: uppercase; /* Makes the price stand out */
transition: transform 0.3s ease; /* Adds a subtle hover effect */
}
/* ------------------------------------ */
/* All sticky tables */
/* ------------------------------------ */
.fixedheaderstable table {
border-spacing: 1px; /* allows grid look */
border-radius: 10px;
font-size: 16px;
background-color: #bbb; /* grid colour */
}
/* hold header below menu */
.fixedheaderstable thead {
position: sticky;
top: 0px;
z-index: 50; /* Keeps headers above other elements */
text-shadow: 1px 1px 1px #fff;
font-size: larger;
background-color: #ccc;
}
/* default all header rows to #ccc */
.fixedheaderstable thead tr {
background-color: #ccc;
}
/* override first row slightly */
.fixedheaderstable thead tr:first-child {
font-size: x-large;
background-color:#aaa;
}
.fixedheaderstable th {
padding: 5px;
}
.fixedheaderstable tr {
background-color: #fff; /* override bg colour for grid else all cells will be grey*/
padding: 2px;
}
.fixedheaderstable tbody tr:hover {
background-color: #ddd ;
}
.fixedheaderstable td:hover {
background-color: #bbb;
}
.fixedheaderstable tfoot tr {
text-shadow: 1px 1px 1px #fff;
background-color: #ddd;
}
/* sub header font size*/
.fixedtableUAALicenses thead {
font-size: 16px;
}
/* prevent contents from wrapping */
.fixedtableUAALicenses td {
font-size: 16px;
white-space: nowrap;
}
/* auto overflow some fields */
.fixedtableUAALicenses td:nth-child(3) {
font-size: 16px;
white-space: nowrap;
overflow-x: auto;
max-width: 100px; /* or whatever width fits your layout */
}
/* curve table corners */
.fixedheaderstable tr:last-child td:first-child,
.fixedheaderstable tr:last-child th:first-child {
border-bottom-left-radius: 10px;
}
.fixedheaderstable tr:last-child td:last-child,
.fixedheaderstable tr:last-child th:last-child {
border-bottom-right-radius: 10px;
}
.fixedheaderstable tr:first-child td:first-child,
.fixedheaderstable tr:first-child th:first-child {
border-top-left-radius: 10px;
}
.fixedheaderstable tr:first-child td:last-child,
.fixedheaderstable tr:first-child th:last-child {
border-top-right-radius: 10px;
}
/* capitalise column contents for 'name' etc */
.fixedheaderstable #name, #surname, #firstname {
TEXT-TRANSFORM: capitalize;
}
/* All sticky tables BELOW menu */
.fixedheaderstableBELOWMenu table {
border-spacing: 1px; /* allows grid look */
border-radius: 10px;
font-size: 16px;
background-color: #bbb;
position:relative;
}
/* hold header below menu */
.fixedheaderstableBELOWMenu thead {
position: sticky;
top: 56px;
z-index: 50; /* Keeps headers above other elements except menu which is 101 */
text-shadow: 1px 1px 1px #fff;
font-size: larger;
/*border-radius: 10px;*/
background-color: #bbb;
}
.fixedheaderstableBELOWMenu thead tr:first-child {
font-size: x-large;
background-color: #aaa;
}
.fixedheaderstableBELOWMenu thead tr:nth-child(2) {
background-color: #ccc;
}
.fixedheaderstableBELOWMenu tbody {
/*border-spacing: 1px; /* allows grid look */
background-color: #ccc;
border-radius: 10px;
font-size: 16px;
}
.fixedheaderstableBELOWMenu tr {
background-color: #fff; /* override bg colour for grid else all cells will be grey*/
}
.fixedheaderstableBELOWMenu tr:hover {
background-color: #ddd;
}
.fixedheaderstableBELOWMenu td {
padding: 3px;
}
.fixedheaderstableBELOWMenu td:hover {
background-color: #bbb;
}
/* curve table corners */
.fixedheaderstableBELOWMenu tr:last-child td:first-child,
.fixedheaderstableBELOWMenu tr:last-child th:first-child {
border-bottom-left-radius: 10px;
}
.fixedheaderstableBELOWMenu tr:last-child td:last-child,
.fixedheaderstableBELOWMenu tr:last-child th:last-child {
border-bottom-right-radius: 10px;
}
.fixedheaderstableBELOWMenu tr:first-child td:first-child,
.fixedheaderstableBELOWMenu tr:first-child th:first-child {
border-top-left-radius: 10px;
}
.fixedheaderstableBELOWMenu tr:first-child td:last-child,
.fixedheaderstableBELOWMenu tr:first-child th:last-child {
border-top-right-radius: 10px;
}
/* capitalise column contents for 'name' etc */
.fixedheaderstableBELOWMenu #name, #surname, #firstname {
text-transform: capitalize;
}
/* userarea page - admin only table / grid */
.userareaadmin {
border-spacing: 2px;
background-color: #ccc;
width: 100%;
border-radius: 10px;
}
.userareaadmin tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
.userareaadmin tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
.userareaadmin td {
background-color: #fff;
padding: 2px;
}
.userareaadmin td:first-child {
text-align: left;
}
.userareaadmin td:not(first-child) {
text-align: center;
}
.userareaadmin th {
/*background-color: #ccc;*/
text-align: center;
}
/* standard A link class */
.standardbuttonA {
display: inline-block;
padding: 2px 10px; /* Spacing inside the button */
font-size: 14px;
font-family: Arial, Helvetica, sans-serif ;
color: white; /* Text color */
text-decoration: none; /* Removes underline for anchor-like buttons */
background-color: #538bfc; /* Initial background color */
border: 2px solid #6699ff; /* Border matching the background color */
border-radius: 5px; /* Rounded corners for a modern look */
cursor: pointer; /* Pointer to indicate interactivity */
transition: all 0.3s ease; /* Smooth transition for hover effects */
text-align: center; /* Centers the button text */
color: #fff !important; /* Keep text white on hover */
font-weight: bolder;
margin: 2px;
}
/* used to change bg colour of linked button */
.standardbuttonRed {
background-color: #cc0000;
border: 2px solid #990000;
}
/* used to change bg colour of linked button */
.standardbuttonGreen {
background-color: #00cc00;
border: 2px solid #02b402 ;
}
.standardbuttonA:hover {
background-color: #175ce0; /* Slightly darker blue on hover */
border-color: #4a7bd9; /* Match hover border color with background */
color: #fff; /* Keep text white on hover */
transform: translateY(-2px); /* Slight lift effect on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add subtle shadow on hover */
}
table.exrates td input[type="text"] {
width: auto; /* Keeps input size natural */
max-width: 90%; /* Prevents it from stretching too much */
box-sizing: border-box;
border: none; /* Removes the default border */
outline: none; /* Prevents an outline when clicked */
color: #777;
}
table.exrates td input[type="text"]:hover {
/*background-color: #bbb; /* Changes background when hovered */
}
.quote-mark {
font-size: 2.0em !important;
color: #f4c542;
margin:0px;
font-family: Georgia, serif !important;
text-align: left;
display: inline;
}
.MonthlyWinner {
display: flex;
align-items: center;
border: 2px solid #ffd700;
background: linear-gradient(to right, #fff8dc, #fff0b3);
padding: 16px 20px;
border-radius: 10px;
margin-bottom: 18px;
font-family: Arial, sans-serif;
font-size: 18px;
color: #7a5a00;
box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}
.ReviewPolicy {
display: flex;
align-items: center;
border: 1px solid #cce0f5;
background-color: #eef6ff;
padding: 14px 18px;
border-radius: 8px;
margin-bottom: 14px;
font-family: Arial, sans-serif;
font-size: 18px;
color: #2a4b7c;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* Footer LITE*/
.copyright {
background-color: #444;
color: #fff;
padding: 1rem 2rem;
font-size: 0.9rem;
font-family: Arial, sans-serif;
text-align: center;
align-content: center;
}
.footer-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
}
.footerleftsection {
flex: 1 1 auto;
text-align: left;
min-width: 200px;
}
.footerrightsection {
flex: 1 1 auto;
text-align: right;
min-width: 200px;
}
.footerrightsection a {
color: #fff;
text-decoration: none;
margin-left: 1rem;
font-weight: 500;
}
.footerrightsection a:hover {
text-decoration: underline;
color: #ddd;
}
/* General link styling */
.linkblue a {
color: #2575fc;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
/*display: inline-block;*/ /* Needed for transform to work properly */
}
.linkblue a:hover {
color: #0055cc;
/*text-decoration: underline; */
text-shadow: 0 0 2px rgba(37, 117, 252, 0.3);
transform: translateY(-2px);
}
/* Container for a table-like grid of user area divs */
.userarea-grid {
display: flex;
flex-wrap: wrap;
gap: 2px; /* Both row and column gaps */
justify-content: flex-start; /* Align items to the left */
align-items: stretch;
margin-bottom: 2px;
}
/* Responsive: stack and center links on narrow screens */
@media screen and (max-width: 800px) {
.footerleftsection, .footerrightsection {
flex: 1 1 100%;
text-align: center;
margin-top: 0.5rem;
}
.footerrightsection a {
margin: 0 0.5rem;
}
}
/* Default: hide extra columns (good for portrait phones) */
.data-table .col-extra {
display: none;
}
/* show extra columns if screen wide enough */
@media (min-width: 780px) {
.data-table .col-extra {
display: table-cell;
}
}
/* Button styling – pill-shaped */
.fancy-button {
background: linear-gradient(to right, #2575fc, #6a11cb);
background-size: 200% 100%;
background-position: left center;
color: #fff !important;
border: none;
border-radius: 50px;
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-position 0.4s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.userspurchasestable {
}
.userspurchasestable tr:nth-child(even) {
background: #c4c4c4;
}
.userspurchasestable tr:nth-child(odd) {
background: #FFF;
}
.userspurchasestable th {
position: sticky;
top: 0; /* Sticks the header at the top of the viewport */
/*z-index: 2; /* Ensures the header remains on top of other elements */
} |