/*
Coded By Ahmed Badawy - www.blackhorseweb.com
This is a Property of UpgradeYourBrowser.org
*/

/* =============================================================================
   miscellaneous styles
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block}
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1}
audio:not([controls]) {display: none}
[hidden] {display: none}
html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}
html, button, input, select, textarea {font-family: arial; color: #222}
body {margin: 0; font-size: 1em; line-height: 1.4}
::-moz-selection{background:#6F6F6F;color:#fff;text-shadow: none}
::selection{background:#6F6F6F;color:#fff;text-shadow: none}
ul, ol {margin: 1em 0; padding: 0 0 0 40px}svg:not(:root){overflow: hidden}
dd {margin: 0 0 0 40px}nav ul, nav ol {list-style: none; list-style-image: none; margin: 0; padding: 0}
button, input[type=button], input[type=reset], input[type=submit] {cursor: pointer; -webkit-appearance: button; *overflow: visible}
input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px}
input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box}
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none}
textarea:focus, input:focus{outline: none}textarea{resize: none}input:valid, textarea:valid {  }
input:invalid, textarea:invalid {background-color: #f0dddd}h1,h2,h3,h4,h5,h6,li,ul{margin:0;padding:0}
#oldBrowser{width:100%;background:#ff0;text-align:center;direction:rtl;color:#000;height:50px;line-height:50px;font-size:20px;z-index:9999;position:relative}
#oldBrowser a{color:#000}#oldBrowser a:hover{color:#6A6A6A}
.hidden { display: none !important; visibility: hidden}
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }.cf { *zoom: 1; }
a {color: #000}a:visited {color: #373737}
a:hover {color: #fff}a:focus {outline: thin dotted}a:hover, a:active {outline: 0}
* { margin:0; padding:0; }

/* =============================================================================
   Main CSS
   ========================================================================== */

/* Header */
header{
	width:100%;height:314px;
	background:#282828 url('images/headerbg.jpg') repeat-x
}

header h1{
	display:block;text-indent:-9999999px;
	width:744px;height:114px;
	background:url('images/logo.png') no-repeat left top;
	margin:52px auto 0 auto
}

header h2{
	display:block;text-indent:-9999999px;
	width:753px;height:45px;
	background:url('images/logo.png') no-repeat left bottom;
	margin:auto
}

/* nav */
nav{
	padding-top:81px;
	margin:auto;width:936px
}

nav li{
	display:block;float:right;
	margin:0 15px;position:relative;
	cursor:pointer
}

nav li span{
	font-family:Tahoma;
	font-size:22px;
	color:#252525;
	font-weight:bold;
	width:100%;
	position:absolute;
	top:-40px;padding-bottom:10px;
	text-align:center;
	text-shadow:0px 0px 1px #6D6F53;
	cursor:pointer
}


nav li:hover,.current{
	display:block;float:right;
	background:url('images/pagehoverbg.jpg');
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}


nav li a{
	text-indent:-999999px;display:block;
	background:url('images/browsers.png') no-repeat;
	height:161px
}

#chooseChrome a{width:154px;background-position:-590px -2px;margin:0 4px}
#chooseFirefox a{width:143px;background-position:-443px -8px;margin:0 8px}
#chooseOpera a{width:130px;background-position:-302px -5px;margin:0 13px}
#chooseSafari a{width:161px;background-position:-139px 0px}
#chooseIE a{width:148px;background-position:0px -7px}




/* Page */
#mainPage{
	width:100%;
	background:#b5be4b url('images/pagebg.jpg')
}

.blocks{
	width:975px;height:150px;
	background:url('images/pagehoverbg.jpg');
	border-radius: 10px;
	margin-bottom:37px;
	padding:6px 7px;
}

.browserInfo h3{
	font-family:Tahoma;
	font-size:35px;
	font-weight:bold;
	color:#252525;
	text-align:right;
	margin-right:10px;
	text-shadow:0px 1px 1px black;
}

.browserInfo h3 span{
	font-size:12px;
	font-weight:lighter;
	text-shadow:0 0 0;

}

.browserInfo p{
	display:block;
	width:260px;
	direction:rtl;
	font-family:Tahoma;
	font-size:12px
}

.osInfo ul{
	width:475px;height:137px;
	display:block;
	position:relative
}

.osInfo li{
	list-style: none;list-style-image: none;
	display:block;text-indent:-9999999px;
	background:url('images/os.jpg') no-repeat;
	height:68px;position:absolute;
	-webkit-user-select:none;
}

li.osInfoTitle{
	font-family:Tahoma;
	font-size:12px;font-weight:bold;
	display:inline;text-indent:0;
	height:auto;background-position:9999px;
	color:#252525;right:0;top:0;z-index:2;
	-webkit-user-select:text
}

li.win7{background-position:-407px top;width:72px;right:28px;top:30px}
li.win7off{background-position:-407px bottom}

li.winVista{background-position:-486px top;width:70px;right:99px;bottom:0}
li.winVistaoff{background-position:-486px bottom}

li.winXP{background-position:-325px top;width:75px;right:154px;top:10px}
li.winXPoff{background-position:-325px bottom}

li.luSUSE{background-position:-241px top;width:76px;right:231px;bottom:0}
li.luSUSEoff{background-position:-241px bottom}

li.luFedora{background-position:-170px top;width:63px;right:271px;top:0}
li.luFedoraoff{background-position:-170px bottom}

li.luDebian{background-position:-115px top;width:45px;right:339px;top:41px}
li.luDebianoff{background-position:-115px bottom}

li.luUbuntu{background-position:-51px top;width:57px;left:0;bottom:0}
li.luUbuntuoff{background-position:-51px bottom}

li.macOs{background-position:0px top;width:47px;left:16px;top:0}
li.macOsoff{background-position:0px bottom}


.html5css3{
	width:210px;height:93px;
	position:relative;
}
.html5css3 h3{
	font-family:Tahoma;
	font-size:12px;
	font-weight:bold;
	color:#252525;
	position:absolute;right:0;top:0;
}

.smallHtml5css3{
	width:22px;height:31px;
	text-indent:-9999999px;
	background:url('images/small_pics.jpg') no-repeat -65px 0;
	position:absolute;top:20px;right:3px
}
.smallCss3{background-position:-87px 0;top:56px}

.html5prog{position:absolute;top:30px;left:0px}
.css3prog{position:absolute;top:47px;left:0px}

/* html5 and css3 progress meter */
.html5prog,.css3prog{position: relative}
.html5prog,.html5prog .meter,.html5prog p,.html5prog .meterBack,
.css3prog,.css3prog .meter,.css3prog p,.css3prog .meterBack{width:180px;height:18px;font-size:5px}
.html5prog p,.css3prog p{
text-indent:-999999px;
display:block;
background:url('images/progresshtml5.jpg') repeat-x center;
position:absolute;z-index:2;left:0}
.html5prog .meter,.css3prog .meter{background:url('images/progress.png') no-repeat left top;position:absolute;z-index:3;top:0;left:0}
.html5prog .meterBack,.css3prog .meterBack{background:#e44d26;position:absolute;z-index:1;top:0;left:0}
.css3prog p{background:url('images/progresscss3.jpg') repeat-x center;}
.css3prog .meterBack{background:#006fba}
.css3prog .meter{background-position:right top}


.download{width:210px}
.download a{
	display:block;height:31px;margin:auto;text-align:center;
	background:black url('images/download.jpg') repeat-x top;
	font-family:Arial;font-weight:bold;font-size:15px;color:#d1d1d1;
	line-height:31px;text-decoration:none;
	border-radius: 5px;
}

.download a:hover{
	background-position:bottom;
	color:#fff
}

.html5css3{
	border-bottom:1px #a6ae46 dotted;
	margin-bottom:6px;padding-bottom:2px;
}

.browserInfo,.osInfo{
	float:right;
	border-left:1px #a6ae46 dotted;
	margin-left:6px;padding-left:6px;
	height:100%
}


.percent{
	font-size:11px;
	position:absolute;
	left:7px;
	top:2px;
	font-weight:bold;
}



/* Why section */
#about{
	width:100%;
	background:#E78D1D url('images/articlebg.jpg');
	height:125px;
	padding:15px 0 10px 0
}

#whyArticle{
	width:710px;
	float:right
}

#whyArticle h2{
	display:block;text-indent:-999999px;
	width:158px;height:107px;float:right;
	background:url('images/small_pics.jpg') no-repeat -314px 0;
	margin:8px 0 0 11px
}

#whyArticle p{
	display:block;background:url('images/articlecontentbg.jpg');
	direction:rtl;font-family:Tahoma;font-size:13px;color:#0f0b06;
	float:right;width:525px;padding:8px 9px 8px 5px;
	border-radius: 10px;
	margin: 8px 0 0 0;
}


#whyWraper{
	position:relative;
}

#help{
	width:268px;
	position:absolute;
	left:0px;
	top:18px;
}

#help h2{
	display:block;text-indent:-999999px;
	width:249px;height:24px;
	background:url('images/small_pics.jpg') no-repeat -65px -43px;
}

#help li{
	list-style: none;
	list-style-image: none;
	margin:10px 0 0 40px
}
#help a{
	display:block;width:43px;height:43px;
	text-indent:-999999px;float:left;margin-right:20px;
	background:url('images/small_pics.jpg')
}
a#twitter{background-position:-109px 0}
a#facebook{background-position:-152px 0}
#mySite a{background-position:-195px 0;width:42px}


/* Footer */
footer{
	width:100%;
	background:#b56212 url('images/footerbg.jpg');
	padding:9px 0
}

#footerRight{float:right}
#footerRight p{
	font-family:Tahoma;
	font-size:13px;
	color:#000;
	direction:rtl
}


#footerLeft{float:left}
#footerLeft #html5Footer{
	display:block;
	width:33px;height:47px;
	text-indent:-9999999px;
	float:left;margin-right:4px;
	background:url('images/small_pics.jpg') no-repeat 0 -47px;
}
#footerLeft #html5Footer:hover{background-position:0 0}

#footerLeft #css3Footer{
	display:block;float:left;
	width:32px;height:47px;
	text-indent:-9999999px;
	background:url('images/small_pics.jpg') no-repeat -33px -47px;
}
#footerLeft #css3Footer:hover{background-position:-33px 0}

time{background:#d7861a}

/* info page */
#close{width:28px;height:28px;position:relative;top:-20px;right:-20px;cursor:pointer}
#info{
	position:absolute;
	top:-700px;left:30%;
	background:#fff;
	width:830px;
	border-radius:10px;
	padding:10px;
	display:none;
	border:1px #B0B0B0 dashed;
	z-index:9;
	direction:rtl
}
#info li{
	list-style:disc;
	margin-right:20px;
	margin-top:4px
}

#info p{
	margin:3px 0 0 0
}

#info article{
	margin-bottom:30px
}

#info h3{
	font-size:23px;
	font-family:Arial;
	font-weight:bold;
	color:#fe940b
}

#info h4{
	font-size:19px;
	font-family:Arial;
	font-weight:bold;
	color:#6f770c
}

#info p,#info ul{
	font-size:17px;
	font-family:Arial;
	color:#454545
}

#lastArticle{
	position:relative
}

#lastArticle textarea{
	width:190px;
	height:80px;
	position:absolute;
	top:0;right:630px;
	overflow:hidden;
	z-index:10
}

#lastArticle textarea:focus{
	border:1px red dashed
}


/* other things */
.pageWraper{width:989px;margin:auto}
#zigzag{width:100%;height:14px;background:#EC9222 url('images/zigzag.jpg') repeat-x}