/*
    Math is cool, CSS is cool, use for whatever you like!
    Made by Mathew Pregasen, under Open Source MIT License. 
*/
/*
body{
    margin: 0px;
    padding:0px;   
}
*/
* {
  /* border: 1px #ddd solid; */
}

div[equation]{
    width:80%;
    margin-left:10%;
    margin-right:10%;
    height:auto;
    margin-top:50px;
    min-height: 100px;
    margin-left:auto;
    margin-right:auto;
   /* border: 1px #ddd solid;*/
    box-sizing: border-box;
}

div[equation]:after{
  content: "";
  clear: both;
  display: table;
}

div[equation] *{
    float:left;
    box-sizing: border-box;
}

div[equation] sup{
    float:none;
    font-size:.4em;
}


div[integral], div[doubleintegral], div[contourintegral], div[surfaceintegral], div[volumeintegral], div[tripleintegral], div[summation], div[fraction], div[contourintegral], div[limit] {
    width:auto;
    display:inline-block;
    margin-right:0px;
    padding-right:9px;
    margin-left:0px;
    padding-left:9px;
    box-sizing: border-box;
    height: 100px;
    position:relative;
}

div[integral]::before{
    content: "\222b";
    font-size:5em;
    float:left;
}




div[integral] > div[upperbound]{
    height:25%;
    width:auto;
    position:absolute;
    top:8px;
    padding-left:40px;
    font-size:1em;
    font-style: italic;
}

div[integral] > div[lowerbound]{
    height:auto;
    width:auto;
    position:absolute;
    top:75px;
    padding-left:30px;
    font-style: italic;
    font-size:1em;
}


div[integral] > div[of]{
    width:auto;
    display:inline-block;
    height:25px;
    margin-top:1.5em;
    padding-left:18px;
    
    box-sizing: border-box;
    font-style: italic;
    font-size:1.5em;
}


div[contourintegral]::before{
    content: "\222E";
    font-size:5em;
    margin-top:-8px;
    float:left;
}




div[contourintegral] > div[upperbound]{
    height:25%;
    width:auto;
    position:absolute;
    top:8px;
    padding-left:47px;
    font-size:1em;
    font-style: italic;
}

div[contourintegral] > div[lowerbound]{
    height:auto;
    width:auto;
    position:absolute;
    top:65px;
    padding-left:30px;
    font-style: italic;
    font-size:1em;
}



div[contourintegral] > div[of]{
    width:auto;
    display:inline-block;
    height:25px;
    margin-top:1.5em;
    padding-left:0px;
    box-sizing: border-box;
    font-style: italic;
    font-size:1.5em;
}

div[equation] > div[term]{
    width:auto;
    display:inline-block;
    height:30%;
    top:35%;
    margin-bottom:0%;
    padding-left:3px;
    float:left;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
}



div[doubleintegral]::before{
    content: "\222b \222b";
    font-size:5em;
    float:left;
}

div[doubleintegral] > div[upperbound]{
    height:25%;
    width:auto;
    position:absolute;
    top:8px;
    padding-left:62px;
    font-size:1em;
    font-style: italic;
}

div[doubleintegral] > div[lowerbound]{
    height:auto;
    width:auto;
    position:absolute;
    top:75px;
    padding-left:50px;
    font-style: italic;
    font-size:1em;
}


div[doubleintegral] > div[of]{
    width:auto;
    display:inline-block;
    height:25%;
    margin-top:1.5em;
    padding-left:18px;
    box-sizing: border-box;
    font-style: italic;
    font-size:1.5em;
}


div[surfaceintegral]::before{
    content: "\222F";
    font-size:5em;
    float:left;
    margin-top:-8px;

}

div[surfaceintegral] > div[upperbound]{
    height:25%;
    width:auto;
    position:absolute;
    top:3px;
    padding-left:72px;
    font-size:1em;
    font-style: italic;
}

div[surfaceintegral] > div[lowerbound]{
    height:auto;
    width:auto;
    position:absolute;
    top:65px;
    padding-left:50px;
    font-style: italic;
    font-size:1em;
}


div[surfaceintegral] > div[of]{
    width:auto;
    display:inline-block;
    height:25%;
    margin-top:1.5em;
    padding-left:0px;
    box-sizing: border-box;
    font-style: italic;
    font-size:1.5em;
}

div[volumeintegral]::before{
    content: "\2230";
    font-size:5em;
    float:left;
    margin-top:-8px;

}

div[volumeintegral] > div[upperbound]{
    height:25%;
    width:auto;
    position:absolute;
    top:3px;
    padding-left:92px;
    font-size:1em;
    font-style: italic;
}

div[volumeintegral] > div[lowerbound]{
    height:auto;
    width:auto;
    position:absolute;
    top:65px;
    padding-left:75px;
    font-style: italic;
    font-size:1em;
}


div[volumeintegral] > div[of]{
    width:auto;
    display:inline-block;
    height:25%;
    margin-top:1.5em;
    padding-left:0px;
    box-sizing: border-box;
    font-style: italic;
    font-size:1.5em;
}



div[tripleintegral]::before{
    content: "\222b \222b \222b";
    font-size:5em;
    float:left;
}

div[tripleintegral] > div[upperbound]{
    height:25%;
    width:auto;
    position:absolute;
    top:8px;
    padding-left:86px;
    font-size:1em;
    font-style: italic;
}

div[tripleintegral] > div[lowerbound]{
    height:auto;
    width:auto;
    position:absolute;
    top:75px;
    padding-left:70px;
    font-style: italic;
    font-size:1em;
}


div[tripleintegral] > div[of]{
    width:auto;
    display:inline-block;
    height:25%;
    margin-top:1.5em;
    padding-left:18px;
    box-sizing: border-box;
    font-style: italic;
    font-size:1.5em;
}



div[limit]::before{
    content: "lim";
    font-size:2em;
    float:left;
    margin-top:25px;

}

div[limit] > div[variable]{
    height:25%;
    width:auto;
    position:absolute;
    top:53px;
    padding-left:2px;
    font-size:1em;
    font-style: italic;
}

div[limit] > div[variable]::after{
    content: "\2192";
    margin-left: -4px;
    
    
}

div[limit] > div[goingto]{
    height:25%;
    text-align:right;
    width:40px;
    position:absolute;
    top:53px;
    padding-left:22px;
    font-size:1em;
    font-style: italic;
}


div[limit] > div[of]{
    width:auto;
    display:inline-block;
    height:25%;
    margin-top:1.5em;
    padding-left:0px;
    box-sizing: border-box;
    font-style: italic;
    font-size:1.5em;
    margin-left:5px;
}



div[summation]::before{
    content: "\2211";
    font-size:5em;
    float:left;
}


div[summation] > div[upperbound]{
    height:25%;
    width:auto;
    position:absolute;
    top:2px;
    font-size:1em;
    font-style: italic;
    width:50px;
    text-align:center;

}

div[summation] > div[lowerbound]{
    height:auto;
    width:45px;
    position:absolute;
    top:82px;
    font-style: italic;
    font-size:1em;
    text-align:center;
    text-align:center;

}



div[summation] > div[of]{
    width:auto;
    display:inline-block;
    height:25%;
    margin-top:1.5em;
    padding-left:3px;
    box-sizing: border-box;
    font-style: italic;
    font-size:1.5em;
}


div[product]{
    width:auto;
    display:inline-block;
    padding-right:9px;
    margin-left:0px;
    padding-left:9px;
    box-sizing: border-box;
    height: 100px;
    position:relative;
    float:left;
}


div[product]::before{
    content: "\03A0 ";
    font-size:5em;
    padding-top:5px;
    float:left;
}


div[product] > div[upperbound]{
    height:25%;
    width:auto;
    position:absolute;
    top:4px;
    font-size:1em;
    font-style: italic;
    width:65px;
    text-align:center;

}

div[product] > div[lowerbound]{
    height:auto;
    width:65px;
    position:absolute;
    top:80px;
    font-style: italic;
    font-size:1em;
    text-align:center;
    
}



div[product] > div[of]{
    width:auto;
    display:inline-block;
    height:25%;
    margin-top:1.5em;
    padding-left:3px;
    box-sizing: border-box;
    font-style: italic;
    font-size:1.5em;
}



div[fraction]{
    width:auto;
    display:inline-block;
    padding-right:9px;
    margin-left:0px;
    padding-left:9px;
    box-sizing: border-box;
    height: 100px;
    position:relative;
    float:left;
}


div[fraction] > div[top]{
    height:24px;
    min-width:100%;
    position:relative;
    top:28px;
    border-bottom:2px #444 solid;
    font-size:1.3em;
    font-style: italic;
    width:65px;
    padding-bottom:3px;
    text-align:center;

}

div[fraction] > div[bottom]{
    height:relative;
    min-width:100%;
    position:relative;
    top:26px;
    border-top:2px #444 solid;
    font-style: italic;
    font-size:1.3em;
    text-align:center;
    
}

div[derivative]{
    width:50px;
    display:inline-block;
    padding-right:9px;
    margin-left:0px;
    padding-left:9px;
    box-sizing: border-box;
    height: 100px;
    position:relative;
    float:left;
}


div[derivative] > div[top]{
    height:24px;
    min-width:100%;
    position:relative;
    top:28px;
    border-bottom:2px #444 solid;
    font-size:1.3em;
    font-style: italic;
    padding-bottom:3px;
    text-align:center;

}



div[derivative] > div[bottom]{
    height:relative;
    min-width:100%;
    position:relative;
    top:26px;
    border-top:2px #444 solid;
    font-style: italic;
    font-size:1.3em;
    text-align:center;
    
}



div[partial] > div[top]::before{
    content: "\2202";
    margin-right:-5px;
}

div[partial] > div[bottom]::before{
    content: "\2202";
    margin-right:-5px;
}


div[add]{
    display:inline-block;
}

div[subtract]{
    display:inline-block;
}

div[multiply]{
    display:inline-block;
}

div[divide]{
    display:inline-block;
}


div[equation] > hr[multiply]{
    width:auto;
    display:inline-block;
    height:100px;
    padding-left:3px;
    margin-top:0px;
    padding-top:35px;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
    clear:none;
    border-style:none;
    border-width:0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0;
    -webkit-margin-end:0;
    
    
}


hr[divide]{
    display:inline-block;
}

hr[divide]::before{
    font-style: normal;
    content: '\00F7';
    float:left;
}

div[equation] > hr[divide]{
    width:auto;
    display:inline-block;
    height:100px;
    padding-left:3px;
    margin-top:0px;
    padding-top:35px;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
    clear:none;
    border-style:none;
    border-width:0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0;
    -webkit-margin-end:0;
    
    
}




div[add]::before{
    font-style: normal;
    content: '+';
    float:left;
}

div[subtract]::before{
    font-style: normal;
    content: '-';
    float:left;
}

div[multiply]::before{
    font-style: normal;
    content: '\00D7';
    float:left;
}


div[divide]::before{
    font-style: normal;
    content: '\00F7';
    float:left;
}


div[equation] > div[add]{
    width:auto;
    display:inline-block;
    height:100px;
    padding-left:3px;
    margin-top:0px;
    padding-top:35px;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
}

div[equation] > div[subtract]{
    width:auto;
    display:inline-block;
    height:100px;
    padding-left:3px;
    margin-top:0px;
    padding-top:35px;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
}

div[equation] > div[multiply]{
    width:auto;
    display:inline-block;
    height:100px;
    padding-left:3px;
    margin-top:0px;
    padding-top:35px;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
}

div[equation] > div[divide]{
    width:auto;
    display:inline-block;
    height:100px;
    padding-left:3px;
    margin-top:0px;
    padding-top:35px;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
}

div[equation] > div[term]{
    width:auto;
    display:inline-block;
    height:100px;
    padding-left:3px;
    padding-top:35px;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
}


/* HR DECLARATIVES */
div[equation] hr {
    clear:none;
    border-style:none;
    border-width:0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0;
    -webkit-margin-end:0;
}

/* remove usual <hr> attributes */

div[equation] hr[partial]::before{
    font-style: normal;
    content: '\2202';
}

div[equation] hr[pm]::before{
    font-style: normal;
    content: '\2213';
}

div[equation] hr[infty] {
    float: none !important;
    display: inline-block !important;
    -webkit-margin-after: -6px !important;
    -webkit-margin-before: 2px !important;
}

div[equation] hr[infty]::before{
    font-style: normal;
    content: '\221e';
}

div[equation] hr[approx]::before{
    font-style: normal;
    content: '\2248';
}

div[equation] hr[neq]::before{
    font-style: normal;
    content: '\2260';
}

div[equation] hr[leq]::before{
    font-style: normal;
    content: '\2264';
}

div[equation] hr[geq]::before{
    font-style: normal;
    content: '\2265';
}



div[equation] hr[forall]::before{
    font-style: normal;
    content: '\2200';
}

div[equation] hr[exists]::before{
    font-style: normal;
    content: '\2203';
}

div[equation] hr[nexists]::before{
    font-style: normal;
    content: '\2204';
}



div[equation] hr[in]::before{
    font-style: normal;
    content: '\2208';
}

div[equation] hr[notin]::before{
    font-style: normal;
    content: '\2209';
}



div[equation] hr[and]::before{
    font-style: normal;
    content: '\2227';
}

div[equation] hr[or]::before{
    font-style: normal;
    content: '\2228';
}

div[equation] hr[cap]::before{
    font-style: normal;
    content: '\2229';
}

div[equation] hr[cup]::before{
    font-style: normal;
    content: '\222A';
}




/*Discrete Functionality Below */

div[equation] hr[congruent]::before{
    font-style: normal;
    content: '\2261';
}



div[equation] hr[subsetleft]::before{
    font-style: normal;
    content: '\2282';
}

div[equation] hr[subsetright]::before{
    font-style: normal;
    content: '\2283';
}

div[equation] hr[notsubsetleft]::before{
    font-style: normal;
    content: '\2284';
}

div[equation] hr[notsubsetright]::before{
    font-style: normal;
    content: '\2285';
}

div[equation] hr[subsetorequaltoleft]::before{
    font-style: normal;
    content: '\2286';
}

div[equation] hr[subsetorequaltoright]::before{
    font-style: normal;
    content: '\2287';
}

div[equation] hr[notsubsetorequaltoleft]::before{
    font-style: normal;
    content: '\2288';
}

div[equation] hr[notsubsetorequaltoright]::before{
    font-style: normal;
    content: '\2289';
}


/* Greek Functionality Below*/

div[equation] hr[pi] {
    float: none !important;
    display: inline-block !important;
    -webkit-margin-after: -4px !important;
}

div[equation] hr[pi]::before{
    font-style: normal;
    content: '\03C0';

}

div[equation] hr[alpha]::before{
    font-style: normal;
    content: '\03B1';
}

div[equation] hr[beta]::before{
    font-style: normal;
    content: '\03B2';
}

div[equation] hr[lambda]::before{
    font-style: normal;
    content: '\03BB';
}

div[equation] hr[delta]::before{
    font-style: normal;
    content: '\2206';
}





hr[add]{
    display:inline-block;
}

hr[add]::before{
    font-style: normal;
    content: '+';
    float:left;
}

div[equation] > hr[add]{
    width:auto;
    display:inline-block;
    height:100px;
    padding-left:3px;
    margin-top:0px;
    padding-top:35px;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
    clear:none;
    border-style:none;
    border-width:0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0;
    -webkit-margin-end:0;
    
    
}


hr[subtract]{
    display:inline-block;
}

hr[subtract]::before{
    font-style: normal;
    content: '-';
    float:left;
}

div[equation] > hr[subtract]{
    width:auto;
    display:inline-block;
    height:100px;
    padding-left:3px;
    margin-top:0px;
    padding-top:35px;
    box-sizing: border-box;
    position:relative;
    font-style: italic;
    font-size:1.5em;
    clear:none;
    border-style:none;
    border-width:0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0;
    -webkit-margin-end:0;
    
    
}


hr[multiply]{
    display:inline-block;
}

hr[multiply]::before{
    font-style: normal;
    content: '\00D7';
    float:left;
}


/* Leibniz Lives */