
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div.clear {
        clear: both;
    }

    body {
        background: url(<br />
<b>Warning</b>:  Undefined variable $backg in <b>/home2/aaalufa/public_html/css/slider/style.php</b> on line <b>40</b><br />
);
    }


    /*-[1]--------------------------------------SLIDER[start]---------------------------------------*/

    ul.tnslider {
        width: 1000px;
        margin: 0 auto;
    }

    ul.tnslider.responsive {
        width: 100%;
    }

    ul.tnslider li {
        display: block;
        float: right;
        vertical-align: top;
        cursor: pointer;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        margin-bottom: 1px;
        background-size: 100% auto;
        background-color: #ccc;
    }

    ul.tnslider li img {
        opacity: 0;
        width: 1px;
        height: 1px;
    }

    ul.tnslider li.main {
        cursor: auto;
        margin: 0;
        float: left;
        background-image: none !important;
        overflow: hidden;
    }

    ul.tnslider li.main img {
        opacity: 1;
        width: 100%;
        height: auto;
    }

    /*-[1.1]----Set Background Images-----*/
    

   <br />
<b>Warning</b>:  Undefined variable $indexImages in <b>/home2/aaalufa/public_html/css/slider/style.php</b> on line <b>92</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home2/aaalufa/public_html/css/slider/style.php</b> on line <b>92</b><br />

    /* ul.tnslider li.two,
    ul.tnslider li.two div.thumb {
        background-image: url();
    }

    ul.tnslider li.three,
    ul.tnslider li.three div.thumb {
        background-image: url("");
    }

    ul.tnslider li.four,
    ul.tnslider li.four div.thumb {
        background-image: url();
    }

    ul.tnslider li.five,
    ul.tnslider li.five div.thumb {
        background-image: url();
    }

    ul.tnslider li.six,
    ul.tnslider li.six div.thumb {
        background-image: url();
    }

    ul.tnslider li.seven,
    ul.tnslider li.seven div.thumb {
        background-image: url();
    }

    ul.tnslider li.eight,
    ul.tnslider li.eight div.thumb {
        background-image: url();
    }

    ul.tnslider li.nine,
    ul.tnslider li.nine div.thumb {
        background-image: url();
    }

    ul.tnslider li.ten,
    ul.tnslider li.ten div.thumb {
        background-image: url();
    }

    ul.tnslider li.elevan,
    ul.tnslider li.elevan div.thumb {
        background-image: url();
    } */

    /*-[1.2]----Process-----*/
    ul.tnslider li span.process {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 0%;
        height: 0.5%;
        background: #000;
        opacity: 0.5;
    }

    ul.tnslider li span.stopbtn {
        position: absolute;
        display: none;
        width: 32px;
        height: 32px;
        background-image: url(../../images/stop.png);
        cursor: pointer;
    }

    ul.tnslider li.main span.stopbtn {
        display: block;
    }

    ul.tnslider li span.stopbtn.active {
        opacity: 0.1;
    }

    /*-[1.3]----Title-----*/
    ul.tnslider li span.title {
        font-family: 'Montserrat Alternates', sans-serif;
        font-weight: 400;
        font-size: 1.4em;
        color: #fff;
        position: absolute;
        left: -100%;
        top: 0;
        background: #718191;
        line-height: 35px;
        opacity: 0;
        padding: 0 10px;
        display: none;
    }

    /*-[1.4]----Slogan-----*/
    ul.tnslider li span.slogan {
        font-family: 'Montserrat Alternates', sans-serif;
        font-weight: 400;
        font-size: 0.9em;
        color: #fff;
        position: absolute;
        left: 0;
        bottom: -20%;
        background: #718191;
        line-height: 25px;
        width: 100%;
        text-align: center;
        opacity: 0;
        display: none;
    }

    /*-[1.4]----Thumb Box-----*/
    ul.tnslider li div.thumb {
        position: absolute;
        width: 124px;
        height: 124px;
        z-index: 11;
        right: -125px;
        top: -40px;
        display: none;
        text-align: center;
        background-size: 100% auto;
    }

    ul.tnslider li div.thumb span.tle {
        font-family: 'Montserrat Alternates', sans-serif;
        font-weight: 400;
        font-size: 0.8em;
        color: #fff;
        background: #718191;
        padding: 3px 0;
        opacity: 0.7;
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
        opacity: 0;
    }

    ul.tnslider li:nth-child(2) div.thumb {
        top: 0;
    }

    ul.tnslider li:last-child div.thumb {
        top: auto;
        bottom: 0;
    }

    /*-[1.5]----Main Image Set on Right Side-----*/
    ul.tnslider.rig li {
        float: left;
    }

    ul.tnslider.rig li.main {
        float: right;
    }

    ul.tnslider.rig li div.thumb {
        left: -125px;
    }

    /*-[1.6]----Responsive-----*/
    ul.tnslider.responsive div.thumb {
        left: -125px;
    }

    ul.tnslider.responsive.rig div.thumb {
        left: auto;
        right: -125px;
    }

    /*-[1.7]----More Detail Button-----*/
    ul.tnslider li span.moredetail {
        position: absolute;
        right: 20px;
        top: -50%;
        opacity: 0;
        display: none;
        width: 52px;
        height: 52px;
        background: url(../../images/arrow.png) no-repeat center;
        cursor: pointer;
    }

    ul.tnslider li.main span.moredetail {
        display: block;
        opacity: 0.7;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    ul.tnslider li.main span.moredetail.active {
        opacity: 0.4;
        -webkit-transform: rotate(180deg) scale(0.8);
        -moz-transform: rotate(180deg) scale(0.9);
        -o-transform: rotate(180deg) scale(0.8);
        -ms-transform: rotate(180deg) scale(0.8);
        transform: rotate(180deg) scale(0.8);
    }

    /*-[1.8]----Accordian-----*/
    ul.tnslider li div.accordian {
        display: none;
        font-family: "Courier New", Courier, monospace;
        position: absolute;
        top: -50%;
        right: 0;
        color: lavender;
        width: 100%;
        padding: 10px 0;
    }

    ul.tnslider li.main div.accordian {
        display: block;
    }

    ul.tnslider li div.accordian div.accordian_links {
        padding: 3px 30px 3px 10px;
        margin-bottom: 1px;
        border-top: solid 1px #999;
        cursor: pointer;
        background: url(../../images/plus.png) no-repeat 99% center #718191;
        margin: 0 10px;
        opacity: 0.8;
        font-size: 0.9em;
    }

    ul.tnslider li div.accordian div.accordian_links:first-child {
        border-top: none;
    }

    ul.tnslider li div.accordian div.accordian_links.active {
        cursor: auto;
        opacity: 1;
        color: #fff;
        background-image: url(../../images/minus.png);
        opacity: 0.9;
    }

    ul.tnslider li div.accordian div.accordian_content {
        padding: 5px 10px;
        margin-bottom: 1px;
        border-top: solid 1px #999;
        background: #333;
        margin: 0 10px;
        font-size: 0.8em;
        display: none;
        max-height: 100px;
        overflow: auto;
        color: #fff;
        opacity: 0.9;
    }

    ul.tnslider li div.accordian span.accordian_close {
        display: block;
        position: absolute;
        top: -20px;
        left: 90%;
        width: 30px;
        height: 30px;
        background: url(../../images/close.png) no-repeat center #333;
        opacity: 0.8;
        cursor: pointer;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
    }

    ul.tnslider li div.accordian span.accordian_close:hover {
        -webkit-transform: rotate(30deg) scale(0.9);
        -moz-transform: rotate(30deg) scale(0.9);
        -o-transform: rotate(30deg) scale(0.9);
        -ms-transform: rotate(30deg) scale(0.9);
        transform: rotate(30deg) scale(0.9);
    }

    /*-[1.9]----Tab Content-----*/
    ul.tnslider li div.tabcontent {
        display: none;
        font-family: "Courier New", Courier, monospace;
        position: absolute;
        top: -50%;
        right: 0;
        color: lavender;
        width: 100%;
        padding: 10px 0;
    }

    ul.tnslider li.main div.tabcontent {
        display: block;
    }

    ul.tnslider li div.tabcontent div.tabcontent_links {
        padding: 0 10px;
    }

    ul.tnslider li div.tabcontent div.tabcontent_links span {
        display: inline-block;
        border-right: solid 1px #999;
        border-bottom: solid 1px #999;
        cursor: pointer;
        background: #718191;
        opacity: 0.8;
        font-size: 1em;
        padding: 3px 20px;
    }

    ul.tnslider li div.tabcontent div.tabcontent_links span.active {
        cursor: auto;
        opacity: 0.9;
        color: #fff;
        background: #333;
        border-bottom: solid 1px #333;
    }

    ul.tnslider li div.tabcontent div.tabcontent_content {
        padding: 10px;
        margin-bottom: 1px;
        background: #333;
        margin: 0 10px;
        font-size: 0.8em;
        display: none;
        max-height: 200px;
        overflow: auto;
        color: #fff;
        opacity: 0.9;
    }

    ul.tnslider li div.tabcontent span.tabcontent_close {
        display: block;
        position: absolute;
        top: 6px;
        left: 90%;
        width: 30px;
        height: 30px;
        background: url(../../images/close.png) no-repeat center #333;
        opacity: 0.8;
        cursor: pointer;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
    }

    ul.tnslider li div.tabcontent span.tabcontent_close:hover {
        -webkit-transform: rotate(30deg) scale(0.9);
        -moz-transform: rotate(30deg) scale(0.9);
        -o-transform: rotate(30deg) scale(0.9);
        -ms-transform: rotate(30deg) scale(0.9);
        transform: rotate(30deg) scale(0.9);
    }

    /*-[2.0]----V Tab Content-----*/
    ul.tnslider li div.vtabcontent {
        display: none;
        font-family: "Courier New", Courier, monospace;
        position: absolute;
        top: -50%;
        right: 0;
        color: lavender;
        width: 100%;
        padding: 10px 0;
    }

    ul.tnslider li.main div.vtabcontent {
        display: block;
    }

    ul.tnslider li div.vtabcontent div.vtabcontent_links {
        float: left;
        width: 10%;
        margin-left: 10px;
    }

    ul.tnslider li div.vtabcontent div.vtabcontent_links span {
        display: block;
        border-right: solid 1px #999;
        border-bottom: solid 1px #999;
        cursor: pointer;
        background: #718191;
        opacity: 0.8;
        font-size: 1em;
        padding: 3px 0 3px 10px;
    }

    ul.tnslider li div.vtabcontent div.vtabcontent_links span.active {
        cursor: auto;
        opacity: 0.9;
        color: #fff;
        background: #333;
        border-right: solid 1px #333;
    }

    ul.tnslider li div.vtabcontent div.vtabcontent_content {
        padding: 5px 10px;
        margin-bottom: 1px;
        background: #333;
        font-size: 0.8em;
        display: none;
        max-height: 200px;
        overflow: auto;
        color: #fff;
        opacity: 0.9;
        float: left;
        width: 85.6%;
    }

    ul.tnslider li div.vtabcontent span.vtabcontent_close {
        display: block;
        position: absolute;
        top: -20px;
        left: 90%;
        width: 30px;
        height: 30px;
        background: url(../../images/close.png) no-repeat center #333;
        opacity: 0.8;
        cursor: pointer;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
    }

    ul.tnslider li div.vtabcontent span.vtabcontent_close:hover {
        -webkit-transform: rotate(30deg) scale(0.9);
        -moz-transform: rotate(30deg) scale(0.9);
        -o-transform: rotate(30deg) scale(0.9);
        -ms-transform: rotate(30deg) scale(0.9);
        transform: rotate(30deg) scale(0.9);
    }

    /*-[2.0]----Tab Images-----*/
    ul.tnslider li div.tabimages {
        display: none;
        position: absolute;
        top: -50%;
        left: 1%;
        width: 98%;
        text-align: center;
        background: #333;
        opacity: 0.7;
        padding: 5px 0;
    }

    ul.tnslider li div.tabimages img {
        width: 50px;
        margin: 5px;
        cursor: pointer;
        border: solid 1px #fff;
    }

    ul.tnslider li.main div.tabimages {
        display: block;
    }

    ul.tnslider li div.tabimages span.tabimages_close {
        display: block;
        position: absolute;
        top: -30px;
        left: 90%;
        width: 30px;
        height: 30px;
        background: url(../../images/close.png) no-repeat center #333;
        opacity: 0.8;
        cursor: pointer;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
    }

    ul.tnslider li div.tabimages span.tabimages_close:hover {
        -webkit-transform: rotate(30deg) scale(0.9);
        -moz-transform: rotate(30deg) scale(0.9);
        -o-transform: rotate(30deg) scale(0.9);
        -ms-transform: rotate(30deg) scale(0.9);
        transform: rotate(30deg) scale(0.9);
    }

    /*-[2.1]----Tab Description-----*/
    ul.tnslider li div.tabdescri {
        display: none;
        position: absolute;
        top: -50%;
        left: 1%;
        width: 93.5%;
        background: #333;
        opacity: 0.7;
        padding: 5px 20px;
        font-family: "Courier New", Courier, monospace;
        font-size: 0.8em;
        color: #fff;
    }

    ul.tnslider li div.tabdescri div.detail {
        max-height: 135px;
        overflow: auto;
    }

    ul.tnslider li div.tabdescri h2 {
        font-family: 'Montserrat Alternates', sans-serif;
    }

    ul.tnslider li div.tabdescri p {
        margin: 5px 0;
    }

    ul.tnslider li.main div.tabdescri {
        display: block;
    }

    ul.tnslider li div.tabdescri span.tabdescri_close {
        display: block;
        position: absolute;
        top: -30px;
        left: 90%;
        width: 30px;
        height: 30px;
        background: url(../../images/close.png) no-repeat center #333;
        opacity: 0.8;
        cursor: pointer;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        border-radius: 3px 3px 0 0;
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
    }

    ul.tnslider li div.tabdescri span.tabdescri_close:hover {
        -webkit-transform: rotate(30deg) scale(0.9);
        -moz-transform: rotate(30deg) scale(0.9);
        -o-transform: rotate(30deg) scale(0.9);
        -ms-transform: rotate(30deg) scale(0.9);
        transform: rotate(30deg) scale(0.9);
    }

    /*---------------------------------------SLIDER[end]---------------------------------------*/



    /*-[2]--------------------------------------OTHER STYLE[start]---------------------------------------*/

    div.tab {
        width: 95%;
        margin: 75px auto 0 auto;
        max-width: 1000px;
        position: relative;
    }

    div.tab div.tab_detail {
        margin: 20px 0;
    }

    div.tab div.tab_links {
        text-align: center;
    }

    div.tab div.tab_links a {
        display: inline-block;
        height: 42px;
        line-height: 42px;
        width: 250px;
        font-family: 'Montserrat Alternates', sans-serif;
        font-weight: 400;
        font-size: 1.4em;
        text-decoration: none;
        background: #fff;
        border: solid 1px #eee;
        color: #666;
    }

    div.tab div.tab_links a.active {
        background: #718191;
        border: solid 1px #718191;
        color: #fff;
        cursor: wait;
    }

    div.tab div.bottom_links {
        text-align: center;
    }

    div.tab div.bottom_links a {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 100px;
        font-family: 'Montserrat Alternates', sans-serif;
        font-weight: 400;
        font-size: 1em;
        text-decoration: none;
        background: #fff;
        border: solid 1px #eee;
        color: #666;
    }

    div.tab div.bottom_links a.active {
        background: #718191;
        border: solid 1px #718191;
        color: #fff;
        cursor: wait;
    }

    /*-[2.1]----Small Device-----*/
    div.tab.device {
        max-width: 500px;
    }

    div.tab.device ul.tnslider li div.thumb {
        width: 100px;
        height: 100px;
        right: -101px;
    }

    div.tab.device ul.tnslider.rig li div.thumb {
        left: -101px;
    }

    div.tab.device ul.tnslider.responsive div.thumb {
        left: -101px;
    }

    div.tab.device ul.tnslider.responsive.rig div.thumb {
        left: auto;
        right: -101px;
    }

    div.tab.device div.tab_links a {
        width: 150px;
    }

    /*-[2.2]----Features-----*/
    div.feature_box {
        position: absolute;
        left: -175px;
        top: 25%;
    }

    div.feature_box ol {
        background: #718191;
        color: #fff;
        position: relative;
        list-style: none;
        font-family: 'Montserrat Alternates', sans-serif;
        font-size: 0.8em;
        font-weight: 400;
        width: 180px;
    }

    div.feature_box ol strong {
        font-weight: 400;
        background-color: #718191;
        padding: 4px 0 3px 0;
        width: 80px;
        display: inline-block;
        color: #fff;
        font-size: 1.2em;
        right: -80px;
        bottom: 0px;
        position: absolute;
        cursor: pointer;
        text-align: center;
    }

    div.feature_box ol strong.active {
        background-color: #b41616;
    }

    div.feature_box ol li {
        padding: 5px;
    }

    div.feature_box ol li:nth-child(even) {
        background: #8492a0;
    }

    /*-[2.3]----Main Title-----*/
    span.maintitle {
        font-family: 'Montserrat Alternates', sans-serif;
        font-weight: 400;
        color: #fff;
        display: inline-block;
        padding: 2px 10px;
        position: fixed;
        top: 0;
        opacity: 0;
        z-index: 15;
    }

    span.maintitle.first {
        background: #ce5d5d;
        font-size: 1em;
        left: 100%;
    }

    span.maintitle.second {
        background: #4068e0;
        font-size: 1.4em;
        left: -100%;
    }

    span.maintitle.third {
        background: #00bfff;
        font-size: 1em;
        left: 3%;
        top: 100%;
    }

    /*-[2.4]----Plaincode Box-----*/
    div.plaincode_box {
        position: fixed;
        right: 0;
        top: 0;
        width: 900px;
        right: -895px;
        font-family: 'Montserrat Alternates', sans-serif;
        font-weight: 400;
    }

    div.plaincode_box div.plaincode_title {
        position: absolute;
        top: 12%;
        left: -105px;
        width: 105px;
        background-color: #718191;
        padding: 4px 0;
        color: #fff;
        font-size: 0.9em;
        cursor: pointer;
        text-align: center;
    }

    div.plaincode_box div.plaincode_title.active {
        background-color: #b41616;
    }

    div.plaincode_box div.plaincode_detail {
        width: 100%;
        background: #8492a0;
    }

    div.plaincode_box div.plaincode_detail a {
        color: #fefee0;
        display: inline-block;
        font-size: 0.8em;
        margin-left: 40px;
        text-decoration: none;
        text-transform: uppercase;
    }

    div.plaincode_box div.plaincode_detail a.big {
        font-size: 1.2em;
        margin-left: 0;
    }

    div.plaincode_box div.plaincode_detail a:hover {
        color: #00BFFF;
    }

    div.plaincode_box div.plaincode_detail ul {
        background: #718191;
        color: #fff;
        position: relative;
        list-style: none;
        font-size: 0.8em;
    }

    div.plaincode_box div.plaincode_detail ul li {
        padding: 5px;
    }

    div.plaincode_box div.plaincode_detail ul li:nth-child(even) {
        background: #8492a0;
    }

    div.plaincode_box div.plaincode_detail textarea {
        border: none;
        font-family: trebuchet ms;
        font-size: 13px;
        background: #fff;
        width: 98%;
        height: 100px;
        padding: 5px;
    }

    div.plaincode_box div.plaincode_detail textarea.script {
        color: #CE5D5D;
    }

    div.plaincode_box div.plaincode_detail textarea.css {
        color: #4068E0;
    }

    div.plaincode_box div.plaincode_detail textarea.html {
        color: #00BFFF;
    }

    div.plaincode_box div.plaincode_detail ul li.close_btn,
    div.plaincode_box div.plaincode_detail ul li.documentation {
        text-align: center;
        padding: 0;
        cursor: pointer;
    }

    div.plaincode_box div.plaincode_detail ul li.close_btn a,
    div.plaincode_box div.plaincode_detail ul li.documentation a {
        display: block;
        padding: 15px 0;
        margin: 0;
    }

    div.plaincode_box div.plaincode_detail ul li.close_btn:hover,
    div.plaincode_box div.plaincode_detail ul li.documentation:hover {
        opacity: 0.7;
    }

    div.plaincode_box div.plaincode_detail ul li.close_btn a:hover,
    div.plaincode_box div.plaincode_detail ul li.documentation a:hover {
        color: #000;
    }

    div.plaincode_box div.plaincode_detail ul li.close_btn {
        background-color: #CE5D5D;
    }

    div.plaincode_box div.plaincode_detail ul li.documentation {
        background: #00BFFF;
    }

    div.plaincode_box div.plaincode_detail ul li.tlt a {
        margin-top: 3px;
    }

    /*-[2.5]----Support & Documentation-----*/
    a.support {
        position: fixed;
        left: 10px;
        bottom: 10px;
    }

    a.support span {
        display: inline-block;
        padding: 10px 20px;
        background: #ff7920;
        font-family: 'Montserrat Alternates', sans-serif;
        font-weight: 700;
        color: #fff;
        position: absolute;
        margin-left: 10px;
        margin-top: 20px;
        text-align: center;
        border-radius: 5px;
    }

    /*---------------------------------------OTHER STYLE[end]---------------------------------------*/
</style>