HOMECurrently selected

عربي

F.A.Qs

Qataraization

Vacancies

Investor Relations

Awareness Campaigns

Call Center

40217777

Toll Free Number

800-3835 800-FUEL

English reference

sample legend

* Required Information

Sample Text (1) *

invalid input 2

Sample Password

Sample file input

Select Tag

Sample Radio Buttons *

option 1

option 2

Sample Number

Sample TextArea Sample label to descripe the for label, Sample label to descripe the for label

Sample Inner Legend

Sample Radio Buttons *

option 1

option 2

Other inputs *

previous submit

sample grid

header-1	header-2	header-3	header-4	header-5
sapmle-data	sapmle-data	sapmle-data	sapmle-data	sapmle-data
sapmle-data	sapmle-data	sapmle-data	sapmle-data	sapmle-data
sapmle-data	sapmle-data	sapmle-data	sapmle-data	sapmle-data



<table width="100%" cellspacing="0" cellpadding="0" border="0" class="default-table table">
    <thead>
        <tr class="default-table-row">
            <th>header-1</th>
            <th>header-2</th>
            <th>header-3</th>
            <th>header-4</th>
            <th>header-5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
        </tr>
        <tr>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
        </tr>
        <tr>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
            <td class="text-center">sapmle-data</td>
        </tr>
    </tbody>
</table>

helper classes

                
/*colors*/
.colorBlack{color:#323a45}
.colorGreen{color:#009d59}
.colorWhite{color:#323a45}
.colorBlue{color:#274b90}
.colorLightGray{color:#B7B7B7}
.colorGray{color:#8E8E8E}

/*buttons*/
.grayButton{border:none; min-width:110px; min-height:50px; height:50px; line-height:50px; text-align:center; color:#fff; box-shadow:none; background:#8c939b; font-size:1em; font-weight:bold; cursor:pointer; padding:0}
.blueButton{border:none; min-width:110px; min-height:50px; height:50px; line-height:50px; text-align:center; color:#fff; box-shadow:none; background:#009edb; font-size:1em; font-weight:bold; cursor:pointer; padding:0}

/*displaying*/
.inlineBlock{display:inline-block}
.inline{display:inline}
.block{display:block}
.noDisplay {display: none; }

/*positioning*/
.relative {position: relative; }
.absolute {position: absolute; }

/*text alignment*/
.text-center{text-align: center; }
.text-left{text-align: left; }
.text-right{text-align: right; }

/*text decoration*/
.uppercase{text-transform: uppercase;}
.underLine {text-decoration: underline; }
.noneUnderLine{text-decoration: none; }
.fontBold{font-weight:bold}
.fontNormal{font-weight:normal}

/*others*/
.boxShadow{box-shadow:0px 0px 5px #CECECE;}
.overflowHidden {overflow: hidden; }
.noBackground {background: none; }
.noBorderBottom {border-bottom: none; }
.noBorderTop {border-top: none; }
.noBorder {border: none; }
.noShadow {box-shadow: none !important; }
.fullWidth {width: 100%; }
.clear {clear: both; }
.pointer {cursor: pointer; }


/*font sizes*/
.font11{font-size:0.788em}
.font12{font-size:0.8571428571428571em}
.font13{font-size:0.9285714285714286em}
.font14{font-size:1em}
.font15{font-size:1.0714285714285714em}
.font16{font-size:1.1428571428571428em}
.font17{font-size:1.2142857142857142em}
.font18{font-size:1.2857142857142858em}
.font19{font-size:1.3571428571428572em}
.font20{font-size:1.4285714285714286em}
.font21{font-size:1.5em}
.font22{font-size:1.5714285714285714em}
.font23{font-size:1.6428571428571428em}
.font24{font-size:1.7142857142857142em}
.font25{font-size:1.7857142857142858em}
.font30{font-size:2.14411em}

/*padding and margin*/
.noPad{padding:0}
.noMrg{margin:0}

.mrgB1 {margin-bottom: 1px; }
.mrgB2 {margin-bottom: 2px; }
.mrgB3 {margin-bottom: 3px; }
.mrgB4 {margin-bottom: 4px; }
.mrgB5 {margin-bottom: 5px; }
.mrgB6 {margin-bottom: 6px; }
.mrgB7 {margin-bottom: 7px; }
.mrgB8 {margin-bottom: 8px; }
.mrgB9 {margin-bottom: 9px; }
.mrgB10 {margin-bottom: 10px; }
.mrgB15 {margin-bottom: 15px; }
.mrgB20 {margin-bottom: 20px; }
.mrgB25 {margin-bottom: 25px; }
.mrgB30 {margin-bottom: 30px; }
.mrgB40 {margin-bottom: 40px; }

.mrgT1 {margin-top: 1px; }
.mrgT2 {margin-top: 2px; }
.mrgT3 {margin-top: 3px; }
.mrgT4 {margin-top: 4px; }
.mrgT5 {margin-top: 5px; }
.mrgT6 {margin-top: 6px; }
.mrgT7 {margin-top: 7px; }
.mrgT8 {margin-top: 8px; }
.mrgT9 {margin-top: 9px; }
.mrgT10 {margin-top: 10px; }
.mrgT15 {margin-top: 15px; }
.mrgT20 {margin-top: 20px; }
.mrgT25 {margin-top: 25px; }
.mrgT30 {margin-top: 30px; }
.mrgT50 {margin-top: 50px; }
.mrgT60 {margin-top: 60px; }

.padB1 {padding-bottom: 1px; }
.padB2 {padding-bottom: 2px; }
.padB3 {padding-bottom: 3px; }
.padB4 {padding-bottom: 4px; }
.padB5 {padding-bottom: 5px; }
.padB6 {padding-bottom: 6px; }
.padB7 {padding-bottom: 7px; }
.padB8 {padding-bottom: 8px; }
.padB9 {padding-bottom: 9px; }
.padB10 {padding-bottom: 10px; }
.padB15 {padding-bottom: 15px; }
.padB20 {padding-bottom: 20px; }
.padB25 {padding-bottom: 25px; }
.padB30 {padding-bottom: 30px; }

.padT1 {padding-top: 1px; }
.padT2 {padding-top: 2px; }
.padT3 {padding-top: 3px; }
.padT4 {padding-top: 4px; }
.padT5 {padding-top: 5px; }
.padT6 {padding-top: 6px; }
.padT7 {padding-top: 7px; }
.padT8 {padding-top: 8px; }
.padT9 {padding-top: 9px; }
.padT10 {padding-top: 10px; }
.padT15 {padding-top: 15px; }
.padT20 {padding-top: 20px; }
.padT20 {padding-top: 25px; }
.padT30 {padding-top: 30px; }

.pad1 {padding: 1px; }
.pad5 {padding: 5px; }
.pad10 {padding: 10px; }
.pad15 {padding: 15px; }

.mrg5 {margin: 5px; }
.mrg10 {margin: 10px; }
.mrg15 {margin: 15px; }

.padL1{padding-left:1px} 
.padL2{padding-left:2px}
.padL3{padding-left:3px} 
.padL4{padding-left:4px}  
.padL5{padding-left:5px}   
.padL10{padding-left:10px}
 
.padR1{padding-right:1px}
.padR2{padding-right:2px}
.padR3{padding-right:3px}
.padR4{padding-right:4px}
.padR5{padding-right:5px}
.padR10{padding-right:10px}

.mrgL1{margin-left:1px}
.mrgL2{margin-left:2px}
.mrgL3{margin-left:3px}
.mrgL4{margin-left:4px}
.mrgL5{margin-left:5px}
.mrgL10{margin-left:10px}

.mrgR1{margin-right:1px}
.mrgR2{margin-right:2px}
.mrgR3{margin-right:3px}
.mrgR4{margin-right:4px}
.mrgR5{margin-right:5px}
.mrgR10{margin-right:10px}

sample Horizontal Tabs

Sample tab 1

Sample tab 2

Sample tab 3



<div class="row">

    <div class="col-xs-12">
        <div class="tabs">
            <nav>
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" data-content="tab-1" href="#tab-1">
                            tab-1
                        </a>
                    </li>
                    <li>
                        <a data-toggle="tab" data-content="tab-2" href="#tab-2">
                            tab-2
                        </a>
                    </li>
                    <li>
                        <a data-toggle="tab" data-content="tab-3" href="#tab-3">
                            tab-3
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <div class="tab-content">
        <div id="tab-1" class="tab-pane active">
            <div class="colorGray uppercase font20 text-center"> Sample tab 1</div>
        </div>
        <div id="tab-2" class="tab-pane">
            <div class="colorGray uppercase font20 text-center"> Sample tab 2</div>
        </div>
        <div id="tab-3" class="tab-pane">
            <div class="colorGray uppercase font20 text-center"> Sample tab 3</div>
        </div>
    </div>

</div>

separetor



<div class="divider-solid"></div>

messages

info message

success message

error message

notice message

no data message

success message with image

Filters

CSR

Fuel Prices

Tenders