/*
* CSS for Garena Clans Website
* Last Update 07/05/13
*/

/* Basics */
*{outline:0;border:0;margin:0;padding:0}
body{font-family:'Arial';font-size:1em;color:#000}
body:lang(en) {font-family:'Open Sans','Arial';}
a{color:#333;text-decoration:none}
a:hover{text-decoration:underline}
li{list-style:none}

/* float clearing for IE6 */
* html .clear {
  height: 1%;
  overflow: visible; }

/* float clearing for IE7 */
*+html .clear {
  min-height: 1%; }

/* float clearing for everyone else */
.clear:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden; }

/* Header */
#globalHeader{ width:980px; margin:0 auto; height:85px;}
#globalHeader h1{ float:left; margin:5px 0 0 0;}

/* Navigation */
.nav {
	display:block; float:right; *width:700px; margin:22px 0 0; border:1px solid #ccc; 
	font:13px Arial; white-space:nowrap; 
	background:#eee;
	background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); /* Safari 4+, Chrome */
	background:-webkit-linear-gradient(top, #ffffff, #cccccc); /* Chrome 10+, Safari 5.1+, iOS 5+ */
	background:  -moz-linear-gradient(top, #ffffff, #cccccc); /* Firefox 3.6-15 */
	background:    -o-linear-gradient(top, #ffffff, #cccccc); /* Opera 11.10-12.00 */
	background:       linear-gradient(to bottom, #ffffff, #cccccc); /* Firefox 16+, IE10, Opera 12.50+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 );
	-webkit-border-radius:3px;  border-radius:3px;
}
.nav li{display:inline}
.navLeft {float:left;}
.navLeft li a{display:block;float:left;height:35px;border-right:1px solid #ccc;text-transform:uppercase;color:#444;line-height:35px;text-shadow:1px 1px 0 #eee;padding:0 20px}
.navLeft li a:hover {
	color:#c00; text-shadow:1px 1px 0 #fff; text-decoration:none;
	background:#eee;
	background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dddddd)); /* Safari 4+, Chrome */
	background:-webkit-linear-gradient(top, #fff, #ddd); /* Chrome 10+, Safari 5.1+, iOS 5+ */
	background:  -moz-linear-gradient(top, #fff, #ddd); /* Firefox 3.6-15 */
	background:    -o-linear-gradient(top, #fff, #ddd); /* Opera 11.10-12.00 */
	background:       linear-gradient(to bottom, #fff, #ddd); /* Firefox 16+, IE10, Opera 12.50+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
}
.navLeft li.current a{color:#06A;cursor:default}
/*logout*/
.navUsr {padding:10px 5px 0 0; float:right; margin:0 15px 0 20px;}
.navUsr li {padding:3px 5px;}
.navUsr li:first-child {background:url(../images/ico_01.png) no-repeat 0 3px; padding-left:22px;}
.navUsr li.sep {color:#aaa; padding:0;}
.navUsr a{color:#c00;}

/* Banner */
.homeBanner {width:986px; height:350px; background:url(../images/homebanner.jpg) no-repeat bottom center; margin:20px auto 60px; font-size:20px;}
.bannerTxt {padding:55px 0 0 555px; width:430px;}
.homeBanner p.subtitle {margin:15px 0 0;}
.btns {margin:45px 115px 0 0;}
.btns a {display:block; width:170px; height:56px; padding:0 0 0 60px; background:url(../images/homebtn.png) no-repeat; font:700 21px/55px Arial; color:#fff; text-shadow:1px 1px 0 #000; position:relative; margin:0 0 15px 85px;}
.btns a:hover {background-position:0 -56px; text-decoration:none;}
.btns i {display:block; width:24px; height:24px; position:absolute; top:16px; left:21px; background:url(../images/homebtn.png) no-repeat;}
.btnCreate i {background-position:0 -120px;}
.btnBrowse i {background-position:-24px -120px;}

/* After Login */
.myClans {margin:40px 0 0;}
.myClans p {margin:0 0 5px;}
.myClans ul {display:block; height:135px; overflow:hidden;}
.clanList li {display:inline; }
.clanList li a {display:block; width:128px; height:128px; float:left; margin:0 0 0 15px; border:1px solid #ccc; position:relative;}
.clanList li:first-child a {margin:0;}
.clanList li a img {display:block; width:128px; height:128px; z-index:1; position:relative;}
.clanList li a:hover {-webkit-box-shadow:2px 2px 5px 0px #999; box-shadow:2px 2px 5px 0px #999;}
.tooltip {
	display:none; z-index:999;
	position:absolute;
	-webkit-border-radius:2px; border-radius:2px;
	padding:6px 12px; border:1px solid #aaa;
	color:#333; font:700 13px Arial; text-shadow:1px 1px 0 #fff;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); /* Safari 4+, Chrome */
	background: -webkit-linear-gradient(top, #fff, #ccc); /* Chrome 10+, Safari 5.1+, iOS 5+ */
	background:    -moz-linear-gradient(top, #fff, #ccc); /* Firefox 3.6-15 */
	background:      -o-linear-gradient(top, #fff, #ccc); /* Opera 11.10-12.00 */
	background:         linear-gradient(to bottom, #fff, #ccc); /* Firefox 16+, IE10, Opera 12.50+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 );
	-webkit-box-shadow:2px 2px 5px 0px rgba(0,0,0,.3); box-shadow:2px 2px 5px 0px rgba(0,0,0,.3);
}
.bannerLink {text-align:right;}
.bannerLink li {display:inline; color:#ccc; font-size:14px; line-height:14px;}
.bannerLink a {color:#c00; font-size:14px; padding:0 5px;}

/* Features */
.clanFeatures{width:980px; margin:0 auto 30px; overflow:hidden;}
.clanFeatures h1{font-size:19px;font-weight:600; margin:10px 0 5px;}
.clanFeatures p{font-size:14px;font-weight:300;padding:1px 30px}
.imgContainer{height:200px;}
.imgContainer img{vertical-align:bottom}
.f1,.f2,.f3{width:33%;float:left;text-align:center}

/* Footer */
#footer{width:986px;font-size:12px;margin:auto;padding:0 0 40px; clear:both}
#footer div{width:986px;overflow:hidden;border-top:1px solid #c7c7c7;color:#6c6c6c;padding:10px 0}
#footer div p{float:left}
#footer div ul{float:right}
#footer div ul li{display:inline;color:#6c6c6c;padding:0 5px 0 0}
#footer div ul li a{color:#6c6c6c;padding:0 5px 0 0}
#footer #localeSwitch{float:right;width:auto;border-color:#aaa;border-style:solid;border-width:1px;padding:0}
#footer p{margin-bottom:0;font-size:12px;line-height:14px}