@charset "utf-8"; /* CSS Document */ /*This is a browser width-responsive (i.e. "responsive" or "mobile") CSS.*/ /*This CSS is built beginning with mobile size and up*/ .clear { clear: both; } /*-------- FONT PROPERTIES --------*/ /* Also see element styles for some font properties such as font color.*/ p { margin-bottom: 30px; } form, form input { font-family: "Roboto", sans-serif; } p, a, ul, li, td { font-family: "Roboto", sans-serif; line-height: 1.4; font-size: 19px; /* Hey...I just noticed that this *ALMOST* spells PAULI (Paulli).*/ } h1, h2, h3, h4 { font-family: 'Raleway', sans-serif; line-height: 1.4; font-weight: bold; } h1 { font-size: 24px; } h2 { font-size: 20px; } /*-------- End of FONT PROPERTIES --------*/ .funkytable tr td { padding: 10px; font-size: 14px; } /*FOR TEST USE ONLY*/ /* header { border: red solid 3px; } main { border: orange solid 3px; } section { border: green solid 3px; } article { border: blue solid 3px; } footer { border: violet solid 3px; } div { border: black dotted 3px; } div.clear { border: #bebebe dotted 3px; } /*End of TEST BORDERS*/ body { /*background-color: #8F926C;*/ color: #404040; /*This is for font color for the entire page*/ } .wrapper { background-color: white; width: 100%; display: block; margin: 0px auto; /* This line together with display:block above is used to center an element */ } .boldtext { font-weight: bold; } header { padding: 15px; } nav { height: 0; overflow: hidden; /* This section hides the mobile menu until "menu" is clicked and class .show_menu is added to the tag */ } .show_menu nav { overflow: visible; height: auto; display: block; position: absolute; background-color: white; top: 60px; left: 0px; width: 100%; z-index: 9999; /* This section makes the menu visible when .show_menu class is added to by clicking "menu" */ } .inner-wrapper { position: relative; } .dynamic-content td { padding-right: 20px; } .show_menu nav ul li { list-style:none; border-bottom: 2px #404040 solid; margin: 0px 18px; } .show_menu nav ul li a { text-decoration: none; text-align: center; display: block; line-height: 48px; color: #404040; font-size: 16px; } a:hover, a:focus, a:active{ color: #97B1CC; } .mobile-menu-button { display: block; border: solid black 1px; border-radius: 7px; height: 30px; width: 60px; text-align: center; position: absolute; top: 13px; right: 12px; overflow: hidden; cursor: pointer; } .mobile-menu-button p { font-size: 12px; line-height: 30px; color: black; background-color: white; } h1.site-title { height: 0; overflow: hidden; /*Hides site title from view without hiding it from seach engines*/ } img.title-image { height:30px; } main { padding: 20px; display: block; } h1.main-title { height: 0px; overflow: hidden; /*Hides site title from view without hiding it from seach engines*/ } img.title-image-main { display: none; } .gender-result .genderimgwrapper { text-align: center; margin-bottom: 15px; } .gender-result h1 { font-size: 35px; font-weight: bold; text-align: center; margin: 15px auto; } .nowrap { white-space: nowrap; } ul.similar-sounding-list, ul.similar-statistics { } ul.similar-sounding-list li, ul.similar-statistics li { display: inline-block; width: calc(100%/4.03); } ul.similar-sounding-list li a, ul.similar-statistics li a { text-decoration: none; text-align: left; line-height: 21px; color: #404040; font-size: 14px; } ul.similar-sounding-list li a:hover, ul.similar-sounding-list li a:focus, ul.similar-sounding-list li a:active, ul.similar-statistics li a:hover, ul.similar-statistics li a:focus, ul.similar-statistics li a:active { color: #97B1CC; } footer { padding: 20px; } .topsearchform { margin-left: 10px; margin-top: 10px; } .genderimage { filter: invert(22%) sepia(0%) saturate(0%) hue-rotate(159deg) brightness(101%) contrast(90%); } html { overflow-y: scroll; } .title-image-side { display: none; } .desktopads { display: none; } @media screen and (min-width:445px) { img.title-image { height: auto; } header { } main { } footer { } } @media screen and (min-width:500px) { header { } main { padding: 25px; } footer { padding: 25px; } } @media screen and (min-width: 1001px){ .desktopads { display: block; } .leftads { margin-top: 15px; } .topads { width: 160px; height:820px; float:left; margin-right: 15px !important; padding-bottom: 15px !important; margin-top: 100px !important; } .similar-statistics, .similar-sounding-list, .similar-sounding-title { padding-left: 175px; } .welcome { margin-top: 10px; } .title-image { display: none; } .title-image-side.baby-title { display: block; } .gender-result { max-width: 620px; } .genderimgwrapper { float: right; margin-left: 25px; } header { position: fixed; height: 100%; width: 260px; padding: 20px 40px; overflow-y: scroll; } nav { margin-top: 15px; height: auto; overflow: visible; /* Codes above unhide the mobile menu, overriding mobile styles above */ display: block; background-color: white; position: static; width: 88%; } nav ul li { list-style:none; } ul li a { text-decoration: none; text-align: left; /*border: 2px #404040 solid;*/ display: block; line-height: 21px; color: #404040; font-size: 14px; } .topsearchform { margin-top: 25px; margin-left: 0px; } .mobile-menu-button { display: none; } main { margin: 0px 0px 0px 260px; padding: 10px 10% 50px ; } div.main-title { text-align: center; padding: 20px 50px; } img.title-image-main { display: inline; height: 70px; } footer { margin-left: 260px; padding: 50px 10%; } }