/* -------------------------------------------------------------------------------------- + + AUTHOR: LibyanSpider.com + -------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------- + + BASIC STYLES + -------------------------------------------------------------------------------------- */ 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; } body { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } /* -------------------------------------------------------------------------------------- + + FONTS + -------------------------------------------------------------------------------------- */ @font-face { font-family: 'Rockwell'; src: url("fonts/rockwell.eot"); src: url("fonts/rockwell.eot?#iefix") format("embedded-opentype"), url("fonts/rockwell.woff") format("woff"), url("fonts/rockwell.ttf") format("truetype"), url("fonts/rockwell.svg#Museo300") format("svg"); font-weight: normal; font-style: normal; } /* -------------------------------------------------------------------------------------- + + MIXINS + -------------------------------------------------------------------------------------- */ html { background: #f0f0f0; } body { background: url('images/bgr.png'); color: #8a8a8a; font-family: arial, "helvetica neue", helvetica, sans-serif; font-size: 12px; line-height: 1.5; width: 920px; margin: 0 auto; /* mobile Safari fix */ } a { color: #2e6492; outline: none; /* removing outline in Mozilla */ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; text-decoration: none; } a:hover { color: #2d7dc0; text-decoration: underline; } a:active { position: relative; top: 1px; } p { text-align: justify; margin-bottom: 20px; } img { vertical-align: top; } .float-clear { overflow: hidden; } .clear { clear: both; line-height: 0; } /* -------------------------------------------------------------------------------------- + + LAYOUT + -------------------------------------------------------------------------------------- */ /* HEADER */ body > header { padding: 30px 10px; overflow: hidden; position: relative; } header .logo:hover { opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=7); } header .arabic { color: #808080; font-size: 13px; /*position: absolute; bottom: 30px; right: 10px;*/ text-shadow: 1px 1px 1px #ffffff; } .message { font-family: "Rockwell", "helvetica neue", helvetica, sans-serif; font-size: 25px; color: white; padding: 10px 0; text-align: center; background: #2e6492; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; line-height: 28px; } .message span { font-size: 35px; } /* CONTENT */ .content { padding-top: 30px; margin-bottom: 30px; overflow: hidden; *margin-bottom: 0; } .content > p { text-shadow: 1px 1px 1px #ffffff; margin-bottom: 30px; padding: 0 20px; } .content div { width: 412px; height: 455px; padding: 30px 20px 35px 20px; background: url('images/content-bgr.png') no-repeat transparent; } .content .knowledge-base { float: left; } .content .contact { float: right; } .rtl { text-align: right; direction: rtl; } .content p.last { margin: 20px 0 35px 0; } .content .knowledge-base ul li { padding-right: 20px; background: url('images/bullet.png') no-repeat right; } .content h1 { font-family: "Rockwell", "helvetica neue", helvetica, sans-serif; color: #3a3a3a; font-size: 22px; border-bottom: 1px solid #dedede; margin-bottom: 30px; } .content h2 { font-family: "Rockwell", "helvetica neue", helvetica, sans-serif; color: #3a3a3a; font-size: 15px; margin-bottom: 10px; } h2.support-title { margin-top: 30px; } .button { color: white; overflow: hidden; font-size: 11px; background: #2e6492; padding: 5px 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } .button:hover { background: #24557e; color: white; text-decoration: none; } .content dl { margin-bottom: 5px; } .content dl dt { color: #3a3a3a; float: left; margin-right: 5px; } .contact dl.support dt { width: 75px; } .content .follow-us { margin-top: 50px; } .content .follow-us li { float: left; margin-right: 12px; } .content .follow-us span { display: block; width: 90px; height: 28px; background: url('images/follow-us.png') no-repeat; text-indent: -9999px; } .content .follow-us li a { text-indent: -9999px; display: block; width: 28px; height: 28px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url('images/icon-follow-us.png'); } .content .follow-us li a.facebook { background-position: 0 0; } .content .follow-us li a.facebook:hover { background-position: 0 -28px; } .content .follow-us li a.twitter { background-position: -30px 0; } .content .follow-us li a.twitter:hover { background-position: -30px -28px; } .content .follow-us li a.rss { background-position: -60px 0; } .content .follow-us li a.rss:hover { background-position: -60px -28px; } /* FOOTER */ footer { background: url('images/footer-bgr.png') no-repeat top center; padding: 50px 0 20px 0; text-align: center; } footer ul { display: inline-block; zoom: 1; *display: inline; } footer ul li { float: left; } footer a:hover { opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=7); } footer .job { margin: 0 30px 0 45px; } a.sw-lang { padding-top: 13px; float: right; } .ar-content { direction: rtl; } .ar-content.content dl dt { float: right; margin-right: 0; margin-left: 5px; } .ar-content.contact dl dd { direction: ltr; unicode-bidi: embed; text-align: right; } .content .knowledge-base.en-content ul li { background-position: left center; padding-right: 0; padding-left: 20px; } dl.support img { height: 15px; }