/*
css RESET
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.5;
font-family: "Arial, Helvetica, sans-serif";
/*
font-family: "Comic Sans MS", cursive, sans-serif;
commented removed on 30-03-2023 for better read on some devices
*/
}
ol, ul {
list-style: none;
list-style: square;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
Result Display
*/
table.displayResult {
}
table.displayResult th, table#expandedFraction th{
border: 1px solid #f0d080;
/* border-left:1px solid #fff;
border-right:1px solid #fff; */
padding-left:1px;
background-color:#333;
color:#f0d080;
/* border-bottom: 1px solid #fff; */
}
table.displayResult td, table#expandedFraction td{
border: 1px solid #333;
padding-left:1px;
background-color:#f0d080;
text-align:center;
}
table.contactForm td{
text-align:left;
padding-right: 2px;
}
table.detailsAnalysis td {
text-align:left;
}
table.detailsAnalysis th {
text-align:center;
}
table#raughAmalLCM {
text-align: center;
float:left;
}
table#raughAmalLCM td{
text-align: center;
}
td.InitialNum {
}
tr.bataSystemLCM{
border-top: 2px solid black;
text-align: center;
}
td.equal {
vertical-align:bottom;
}
table#raughAmalTotalShare{
text-align: center;
margin-top: 127px;
}
td.borderBottom{
border-bottom: 1px solid black;
text-align: center;
}
table#raughAmaltotalPlusRemaider{
text-align: center;
float:left;
}
table#raughAmalgetMainRemaider{
text-align: center;
margin-top: 48px;
}
tr.totalDisplay th{
text-align:center;
}
tr.totalDisplay th:first-child{
text-align: center;
}
/*
Muhammad Waqas,
Advoate High Court.
*/
h1{
font-size: 150%;
font-style: italic;
font-weight:bold;
margin: 5px 0px 5px 0px;
}
h2{
font-size: 125%;
font-style: italic;
font-weight:bold;
margin: 8px 0px 8px 0px;
}
div#wrap {
}
/*
*Header Starts here*
*******************
*/
/*
This block cover full back portion upto full width
*/
header#mainHeader {
width: 100%;
margin: 0 auto;
}
/*
This block just confines the header content area to 960px with
*/
div#headerWrap {
position:relative; /* this is for h1 tag absolute position*/
width: 960px; /* this is for fall back.*/
height: auto;
margin :0 auto;
}
/*
This block adjust Main Heading Islamic Inheritance Calculator to its propert place.
*/
div#headerWrap > h1 {
position:absolute;
top:30%;
left:25%;
z-index:1000;
font-size:36px;
color:#f0d080;
}
/*
links
*/
/*
Following classes make the header image responsive
*/
.header940 {
width: 100%;
height: auto;
}
.header397 {
display:none;
}
.header540 {
display:none;
}
.header766 {
display:none;
}
.header874 {
display:none;
}
.header1047 {
display:none;
}
.header1260 {
display:none;
}
/*
*Navigation Starts here*
*******************
*/
/*
This Block cover the whole navigation area upto full width.
*/
div#longBar {
margin : 0 auto;
background-color: #333;
}
/*
This Block confines the navigation area upto 960px width.
*/
div#longBar > nav {
width: 960px;
margin :0 auto;
background-color: #333;
}
/*
Following Blocks style the main top navigation
*/
nav#mainNavigation .topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav#mainNavigation ul.topnav li {float: left;}
nav#mainNavigation ul.topnav li a {
display: inline-block;
color: #f0d080;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
nav#mainNavigation ul.topnav li a:hover {background-color: #555;}
nav#mainNavigation ul.topnav li.icon {display: none;}
h2.navMenuHeading{
display:none;
}
/* this divides the aside and content into to columns */
div#divContentAndAside{
width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 0;
}
/*
*Main Content Starts here*
*******************
*/
#content{
width: 760px;
float:right;
margin: 0 auto;
padding: 0;
}
.post {
padding:25px;
padding-top:0px;
}
.post h1 {
padding:25px;
text-align: center;
}
#content .inputBoxes{
}
.column {
/* float:left; */
/*margin-right: 5px;*/
width:100%;
}
#content .inputBoxes {
border-radius: 0% 0% 10% 10%;
width: 100%;
background-color :#f0d080;
color: #333;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 30px;
padding-top: 10px;
/*
border: 4px solid #333;
*/
/*
padding: 20px 10px 50px 10px;
margin: 10px 10px 10xp 10px;
*/
/*border-bottom: 4px solid #333;*/
/*border-right: 4px solid #333;*/
}
div.myToggleBox{
color: ;
min-height:120px;
width: 100%;
padding-left: 5px;
padding-right: 5px;
/*margin-bottom: 0px;*/
background-color: #333;
border-radius: 10% 10% 0% 0%;
text-align: center;
background-image: url('../img/arrow1.png');
background-repeat: no-repeat;
background-position: bottom;
}
div.myToggleBox h2.myToggle{
color : #f0d080;
}
div.myToggleBox span.slideToggleArrow{
display:block;
min-height:50px;
color:pink;
}
.inputBoxes input[type="text"] {
padding: 0px 0px 0px 0px;
border-radius: 0px;
border: 1px solid #333;
width:98%;
padding-left: 5px;
}
.inputBoxes input[type="submit"] , .inputBoxes input[type="reset"]{
width:98%;
border-radius: 10px;
min-height: 30px;
background: grey;
color: #f2f2f2 ;
border-bottom: 4px solid #333;
border-right: 4px solid #333;
}
.schools input[type="radio"] ,.schools label {
margin-bottom: 23px;
}
.inputBoxes select {
border : 1px solid #333;
}
div.propertyUnits{
display:block;
width:98%;
background-color: #333;
color : #f0d080;
border-top: 1px solid black;
border-right: 0px solid black;
border-bottom: 1px solid black;
border-left: 0px solid black;
margin:10px 0px 10px 0px;
padding:0px 1px 0px 0px;
text-align:center;
}
div.propertyUnitsSteps{
display:inline-block;
background-color: #333;
color : #f0d080;
border-top: 1px solid black;
border-right: 0px solid black;
border-bottom: 1px solid black;
border-left: 0px solid black;
margin:10px 0px 10px 0px;
padding:0px 3px 0px 5px;
text-align:center;
}
span.answerCheckBox{
width:50%;
/* background-color:red; */
display:inline-block;
text-align:right;
}
div#otherCases input[type="checkbox"] , div#bequeathShare input[type="checkbox"]{
/*margin-bottom: 18px;*/
}
h2{
}
#columnOne {
}
#columnTwo {
}
#columnThree {
}
#columnFour {
}
#columnFive {
}
#columnSix {
}
#columnSeven {
}
#columnEight{
}
#columnNine{
}
#columnTen{
}
#columnEleven{
}
#columnTwelve{
}
#columnThirteen{
}
#columnFourteen{
}
#columnFifteen{
}
article#post {
/*width:95%;*/
margin: 0 auto;
}
.inputBoxes{
display:none;
}
#language,#schools ,#videoDemo ,#primaryHeirs , #amountBox, #LandImmoveableProperty, #bequeathShareBox, #jadasahiya, #residuaryHeirs,#otherResiduaryHeirs, #calculation{
display:block;
}
.displayNone{
display:none;
}
.displayBlock{
display:block;
}
/*
*Aside Starts here*
*******************
*/
aside#mainAside {
width:200px;
float:left;
}
aside#mainAside h2 {
}
.asideBox {
margin:5px;
border: 1px solid white;
border-radius: 10%;
background-color: #333;
}
nav.asideNavigation .asideNav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* background-color: #333;*/
}
nav.asideNavigation ul.asideNav li {float:none;}
nav.asideNavigation ul.asideNav li a {
width:100%;
display: inline-block;
color:#f0d080;
text-align: left;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
nav.asideNavigation ul.asideNav li a:hover {background-color: #555;}
nav.asideNavigation ul.asideNav li.icon {display: none;}
/*
*footer Starts here*
*******************
*/
footer#mainFooter {
margin: 0 auto;
}
div#footerContent { /* this is appling long bar*/
width: 100%;
background-color: #333;
}
nav#footerNavigation { /*this is confining the content of navigation*/
width: 960px;
background-color: #333;
margin: 0 auto;
}
nav#footerNavigation ul.footerNav {
margin: 0;
padding:0;
list-style-type: none;
overflow: hidden;
background-color: #333;
}
nav#footerNavigation ul.footerNav li {float:right;}
nav#footerNavigation ul.footerNav li a {
display: inline-block;
color:#f0d080;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
nav#footerNavigation ul.footerNav li a:hover {background-color: #555;}
nav#footerNavigation ul.footerNav li.icon {display: none;}
p#copyRight {
text-align:center;
clear:both;
}
td.profilePhoto > img {
margin: 0 auto;
margin-top: 6px;
width:90%;
border: 1px solid black;
}
th.photoTh{
text-align:center;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.displayReportForm th{
width:25%;
}
.displayReportForm td{
width:75%;
}
.displayReportForm input{
}
.displayReportForm textarea{
width:95%;
}
.active {
/* background-color:#f0d080; */
}
/*
a:hover{
color:red;
}
a:active{
color:green;
}
a:visited{
color:black;
}
a:link{
color:black;
text-decoration:underline;
}
*/
.propertyUnitsSteps{
font-size: 125%;
font-style: italic;
font-weight:bold;
margin: 8px 0px 8px 0px;
}
.goButton {
position:fixed;
top:25px;
right: 0;
}
.goButton input{
border: 4px solid #f0d080;
background-color: #333;
color:#f0d080;
height: 40px;
border-radius: 25px 25px 25px 25px;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a img.socialMediaIconNavBar{
width:32px;
height:32px;
margin: 10px 3px 0px 3px;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a {
display: inline-block;
text-align: center;
margin:0;
padding:0;
}
ul#asideNavThree li.socialMediaIcon{
float:left;
}
ul#asideNavThree li.socialMediaIcon img.socialMediaIcon{
width:50px;
height:50px;
margin: 0px 0px 0px 0px;
}
ul#asideNavThree li.socialMediaIcon a:hover {
width:50px;
}
/**************************************************************************************
@media qureis starts here.
********************************************************************************************/
/*
/////////////////// @media (max-width:400px) \\\\\\\\\\\\\\\\\\\\\\
*/
@media (max-width:400px) {
table.displayResult {
/* margin-left: -30px; */
}
div#headerWrap {
width: 100%;
height:auto;
}
div#headerWrap > h1 {
position:absolute;
top:30%;
left:25%;
z-index:1000;
font-size:18px;
}
.header940 {
display:none;
}
.header397 {
width: 100%;
height:auto;
display:block;
}
div#longBar > nav {
width: 100%;
}
nav#mainNavigation ul.topnav li:not(:first-child) {display: none;}
nav#mainNavigation ul.topnav li.icon {
float: right;
display: inline-block;
}
nav#mainNavigation ul.topnav.responsive {position: relative;}
nav#mainNavigation ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
nav#mainNavigation ul.topnav.responsive li {
float: none;
display: inline;
}
nav#mainNavigation ul.topnav.responsive li a {
display: block;
text-align: left;
}
/* this divides the aside and content into to columns */
div#divContentAndAside{
width: 100%;
margin: 0 auto;
}
#content{
/* background-color:red; */
width:100%;
margin: 0 auto;
}
article#post {
padding:0px;
}
.column{
width:100%;
margin: 0 auto;
}
div.myToggleBox{
width:100%;
}
#content .inputBoxes {
width:100%;
}
/*
*Aside Starts here*
*******************
*/
aside#mainAside {
width:100%;
/* float:left; */
}
div#asideContent {
width:100%;
/* margin: 0 auto; */
/* margin-right: 7px; */
}
.asideBox {
margin:0px;
width:100%;
/* float:left; */
border-radius: 10px;
}
/*
*footer Starts here*
*******************
*/
footer#mainFooter {
}
nav#footerNavigation {
width: 100%;
}
}
/*
content styles
*/
p{
margin: 26px;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a img.socialMediaIconNavBar{
width:40px;
height:40px;
margin: 10px 3px 0px 3px;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a {
display: inline-block;
text-align: center;
margin:0;
padding:0;
}
/*
/////////////////// @media (min-width:401px) and (max-width:599px) {} \\\\\\\\\\\\\\\\\\\\\\
*/
@media (min-width:401px) and (max-width:599px) {
table.displayResult {
/* margin-left: -30px; */
}
div#headerWrap {
width: 100%;
height:auto;
}
div#headerWrap > h1 {
position:absolute;
top:30%;
left:25%;
z-index:1000;
font-size:24px;
}
.header940 {
display:none;
}
.header540 {
width: 100%;
height:auto;
display:block;
}
div#longBar > nav {
width: 100%;
}
nav#mainNavigation ul.topnav li:not(:first-child) {display: none;}
nav#mainNavigation ul.topnav li.icon {
float: right;
display: inline-block;
}
nav#mainNavigation ul.topnav.responsive {position: relative;}
nav#mainNavigation ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
nav#mainNavigation ul.topnav.responsive li {
float: none;
display: inline;
}
nav#mainNavigation ul.topnav.responsive li a {
display: block;
text-align: left;
}
/* this divides the aside and content into to columns */
div#divContentAndAside{
width: 100%;
margin: 0 auto;
}
#content{
/* background-color:green; */
width:100%;
margin: 0 auto;
}
article#post {
padding:0px;
}
.column{
width: 100%;
margin: 0 auto;
}
div.myToggleBox{
width:100%;
}
#content .inputBoxes {
width:100%;
}
/*
*Aside Starts here*
*******************
*/
aside#mainAside {
width:100%;
float:left;
}
div#asideContent {
width:100%;
/* margin: 0 auto;
margin-right: 7px; */
}
.asideBox {
margin:0px;
width:100%;
float:left;
border-radius: 10px;
}
/*
*footer Starts here*
*******************
*/
footer#mainFooter {
}
nav#footerNavigation {
width: 100%;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a img.socialMediaIconNavBar{
width:40px;
height:40px;
margin: 10px 3px 0px 3px;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a {
display: inline-block;
text-align: center;
margin:0;
padding:0;
}
}
/*
/////////////////// @media (min-width:600px) and (max-width:767px) {} \\\\\\\\\\\\\\\\\\\\\\
*/
@media (min-width:600px) and (max-width:767px) {
table.displayResult {
/* margin-left: -30px; */
}
div#headerWrap {
width: 100%;
height:auto;
}
div#headerWrap > h1 {
position:absolute;
top:30%;
left:25%;
z-index:1000;
font-size:30px;
}
.header940 {
display:none;
}
.header766 {
width: 100%;
height:auto;
display:block;
}
div#longBar > nav {
width: 100%;
}
nav#mainNavigation ul.topnav li:not(:first-child) {display: none;}
nav#mainNavigation ul.topnav li.icon {
float: right;
display: inline-block;
}
nav#mainNavigation ul.topnav.responsive {position: relative;}
nav#mainNavigation ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
nav#mainNavigation ul.topnav.responsive li {
float: none;
display: inline;
}
nav#mainNavigation ul.topnav.responsive li a {
display: block;
text-align: left;
}
/* this divides the aside and content into to columns */
div#divContentAndAside{
width: 100%;
margin: 0 auto;
}
#content{
/* background-color:blue; */
width:100%;
}
article#post {
padding: 0px;
}
div.myToggleBox{
width: 100%;
}
#content .inputBoxes {
width: 100%;
}
/*
*Aside Starts here*
*******************
*/
aside#mainAside {
width:100%;
float:left;
}
div#asideContent {
width:100%;
/* margin: 0 auto;
margin-right: 7px; */
}
.asideBox {
margin:0px;
width:100%;
float:left;
}
/*
*footer Starts here*
*******************
*/
footer#mainFooter {
}
nav#footerNavigation {
width: 100%;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a img.socialMediaIconNavBar{
width:40px;
height:40px;
margin: 10px 3px 0px 3px;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a {
display: inline-block;
text-align: center;
margin:0;
padding:0;
}
}
/*
/////////////////// @media (min-width:768px) and (max-width:950px) {} \\\\\\\\\\\\\\\\\\\\\\
*/
@media (min-width:768px) and (max-width:950px) {
div#headerWrap {
width: 100%;
height:auto;
}
.header940 {
display:none;
}
.header874 {
width: 100%;
height:auto;
display:block;
}
div#longBar > nav {
width: 100%;
}
div#divContentAndAside{
width: 98%;
margin: 0 auto;
}
#content{
width:80%;
/* background-color:yellow; */
}
article#post {
padding:0px;
}
aside#mainAside {
width:20%;
}
div.myToggleBox{
width: 100%;
}
#content .inputBoxes {
width: 100%;
}
/*
*footer Starts here*
*******************
*/
footer#mainFooter {
}
nav#footerNavigation {
width: 100%;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a img.socialMediaIconNavBar{
width:32px;
height:32px;
margin: 10px 3px 0px 3px;
}
nav#mainNavigation ul.topnav li.socialMediaIconNavBar a {
display: inline-block;
text-align: center;
margin:0;
padding:0;
}
}
/*
/////////////////// @media (min-width:951px) and (max-width:1050px) {} \\\\\\\\\\\\\\\\\\\\\\
*/
@media (min-width:951px) and (max-width:1050px) {
.goButton {
display:none;
}
.header940 {
display:none;
}
.header1047 {
width: 100%;
height:auto;
display:block;
}
}
/*
/////////////////// @media (min-width:1051px) {} \\\\\\\\\\\\\\\\\\\\\\
*/
@media (min-width:1051px) {
.goButton {
display:none;
}
.header940 {
display:none;
}
.header1260 {
width: 100%;
height:auto;
display:block;
}
}