/* * STRUCTURE CSS * Centurion UI - CSS-JS Framework * Copyright (c) 2009 * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. */ /* --------------------------------------------------------------------------------------------------------------------- IMPORTS */ @import url(../../../cui/themes/default/css/reset.css); @import url(../../../cui/themes/default/css/components.css); /* --------------------------------------------------------------------------------------------------------------------- BASICS */ html, body { color:#555; font:normal 12px/15px "Trebuchet MS", sans-serif; background:#edebe5; } html { overflow-y: scroll; } body { text-align:center; padding-bottom:100px; } h1 { font:400 29px/29px "Alwyn", "Trebuchet MS", sans-serif; color:#555; margin-bottom:8px; text-transform: uppercase; } h2 { font:700 15px/20px "Alwyn", "Trebuchet MS", sans-serif; color:#555; margin-bottom:10px; } h3 { font:700 14px/18px "Alwyn", "Trebuchet MS", sans-serif; color:#555; margin-bottom:10px; } h4 { font:700 13px/18px "Trebuchet MS", sans-serif; color:#555; margin-bottom:10px; } h5 { font:700 12px/16px Arial, sans-serif; color:#222; margin-bottom:2px; } h1 strong, .conduit strong { font-weight:700; } h1 em, h3 em { color:#f36f21; font-style:normal; } h2 em { color:#bfbfbe; font-style:normal; } h5 a { color:#222; } a img { border:none; margin:0; padding:0;} a { text-decoration:none; color:#555; } a:hover { text-decoration:none; color:#555; } a.block { display:block; } p { margin:0; padding:0; } p.size-10 { font-size:10px; } p.size-11 { font-size:11px; } p.size-12 { font-size:12px; } /*.alwyn { background-image: url(../images/px.png); }*/ ul.puce { margin:20px 0 20px 0px; padding:0; list-style:none; } ul.puce li { padding:0 0 0 10px; margin:0; color:#fff; display:block; float:none; position:relative; } ul.puce li a { margin-bottom:0 !important; margin-bottom:-10px; color:#fff; display:block; float:none; } ul.puce li a:hover { color:#fff; text-decoration:underline; } ul.puce li a span { height:16px; width:16px; display:block; opacity:.7; filter:Alpha(Opacity=70); background:url('../images/sprite-icons.png') 0 -32px no-repeat; position:absolute; left:-5px !important; left:-15px; top:1px !important; top:-1px; } /* --------------------------------------------------------------------------------------------------------------------- TOOLS */ .line { height:1px; border-bottom:solid 1px #e9e6de; margin:15px 0; line-height:1px; font-size:1px; } .line-10 { height:1px; border-bottom:solid 1px #e9e6de; margin:10px 0; line-height:1px; font-size:1px; } .black { color:#555; } .white { color:#fff; } .grey { color:#bfbfbe; } .orange { color:#f36f21; } .orange-light { color:#feaf09; } .box-gray { margin-bottom:15px; padding:15px; background:#efede8; } .box-beige { margin-bottom:15px; padding:15px; background:#e9e6de; } .box-gradient { margin-bottom:15px; padding:10px 15px 15px 15px; border:solid 1px #e3e3e3; background:url('../images/picker/gradient.png') repeat-x #edeae4; } .align-left { text-align:left; } .align-center { text-align:center; } .align-right { text-align:right; } .float-left { float:left; } .float-right { float:right; } img.picture { background:url('../images/picture.png') center center no-repeat #edebe5; display:block; } span.icon, a.icon { display:block; width:16px; height:16px; background:url('../images/sprite.png') no-repeat; } img.icon { background:url('../images/sprite.png') no-repeat; vertical-align:middle; } .rounded-r5 { -moz-border-radius: 5px; -webkit-border-radius: 5px; } .rounded-r3 { -moz-border-radius: 3px; -webkit-border-radius: 3px; } .rounded-r3-top { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; } .rounded-r3-left { -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; } .rounded-r3-right { -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; } .rounded-r5-top { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; } .rounded-r5-bottom { -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } .mb15 { margin-bottom:15px; } .mb25 { margin-bottom:25px; } .mt28 { padding-top:28px; } .mt38 { margin-top:38px; } .clear { clear:both; display:block; } /* --------------------------------------------------------------------------------------------------------------------- STRUCTURE */ #wrap { margin:0 auto; width:980px; text-align:left; position:relative; } #header { position:relative; height:72px; /height:80px; z-index:3; } #content { position:relative; padding:15px; min-height:500px; _height:500px; background:#fff; z-index:2; } #footer { position:relative; margin:10px 0; background:#dfdbd2; } #main { overflow:hidden; position:relative; } #sidebar { position:relative; } /* --------------------------------------------------------------------------------------------------------------------- #HEADER */ #header .logo { margin:8px 12px; width:64px; height:64px; background-position:0 0; text-indent:-9999px;} #header .title { font:400 13px Alwyn, sans-serif; position:absolute; top:15px; left:140px; } /*-*/ #header .primary-menu { zoom:1; position:absolute; bottom:2px; left:130px; display:block; } #header .primary-menu li { float:left; } #header .primary-menu a { margin:2px 2px 0 0; _margin-right:1px; padding:0 10px; display:block; float:left; font:700 13px/28px Alwyn, sans-serif; text-decoration:none; color:#555; background:#fff; height:28px; position:relative; } #header .primary-menu a:hover { color:#555; background:#e5e3de; text-decoration:none; } #header .primary-menu a .arrow { margin:0; background-position:-176px -64px; width:16px; position:absolute; top:8px; right:2px; } #header .primary-menu a:hover .arrow { background-position:-160px -64px; } #header .active-game .link-game a, #header .active-media .link-media a, #header .active-news .link-news a, #header .active-community .link-community a, #header .active-download .link-download a { color:#fff; background:#feaf09; } #header .active-game .link-game .arrow, #header .active-media .link-media .arrow, #header .active-news .link-news .arrow, #header .active-community .link-community .arrow, #header .active-download .link-download .arrow { background-position:-160px -64px; } #header .primary-menu .picker { position:absolute; z-index:5; clear:both; top:30px; } #header .primary-menu li .picker li a:hover, #header .primary-menu li.active .picker li a:hover { color:#fff; background:#feaf09; } #header .primary-menu li .picker li { float:none; } #header .primary-menu li .picker li a, #header .primary-menu li.active .picker li a { margin:0; padding:3px 10px; float:none; height: auto; background:none; font:normal 12px/16px "Trebuchet MS", sans-serif; color:#555; display:block; position:relative; } #header .primary-menu li .picker .content { padding:20px; border-bottom:2px solid #feaf09; } /*-*/ .picker { position:absolute; margin-left:-4px; display:none; } .picker li { float:none; zoom:1; } .picker li a { margin:0 0 2px 0; padding:1px 10px; float:none; height: auto; background:none; font:normal 11px/16px "Trebuchet MS", sans-serif; color:#555; display:block; position:relative; } .picker li a .bullet { background-position:-212px -64px; width:10px; position:absolute; top:2px; left:0; } .picker li a:hover { color:#fff; background:#feaf09; } .picker li a:hover .bullet { background-position:0 10px; } .picker .tl { width:5px; height:5px; background:url('../images/picker/tl.png'); font-size:1px; line-height:1px; } .picker .t { width:auto; height:5px; background:#fff; font-size:1px; line-height:1px; } .picker .tr { width:5px; height:5px; background:url('../images/picker/tr.png'); font-size:1px; line-height:1px; } .picker .l { width:5px; height:auto; background:url('../images/picker/l.png') repeat-y; font-size:1px; line-height:1px; } .picker .r { width:5px; height:auto; background:url('../images/picker/r.png') repeat-y; font-size:1px; line-height:1px; } .picker .bl { width:5px; height:5px; background:url('../images/picker/bl.png'); font-size:1px; line-height:1px; } .picker .b { width:auto; height:5px; background:url('../images/picker/b.png') repeat-x; font-size:1px; line-height:1px; } .picker .br { width:5px; height:5px; background:url('../images/picker/br.png'); font-size:1px; line-height:1px; } .picker .content { padding:10px 10px 10px 10px; border-bottom:none; background:url('../images/picker/gradient.png') repeat-x #edeae4; } .picker .suite { margin-top:28px; } /*-*/ #header .country { position:absolute; right:15px; top:15px; z-index:5; } #header .country .active { display:block; } #header .country .active .arrow-bottom { background-position:-32px -64px; float:left; } #header .country .picker { right:-19px; } #header .country .active img { position:relative; top:1px; } #header .country .picker img { position:relative; top:2px; } .country .flag-uk { background-position:0 -96px; } .country .flag-fr { background-position:-16px -96px; } .country .flag-de { background-position:-32px -96px; } .country .flag-es { background-position:-48px -96px; } .country .flag-it { background-position:-64px -96px; } .country .flag-nl { background-position:-80px -96px; } .country .flag-se { background-position:-96px -96px; } .country .flag-fi { background-position:-112px -96px; } .country .flag-pt { background-position:-128px -96px; } .country .flag-no { background-position:-144px -96px; } .country .flag-dk { background-position:-160px -96px; } .country .flag-be { background-position:-176px -96px; } .country .flag-gr { background-position:-192px -96px; } .country .flag-au { background-position:-208px -96px; } .country .flag-il { background-position:-224px -96px; } .country .flag-us { background-position:-128px -176px; } /*-*/ #header .search { position:absolute; bottom:-34px; right:10px; width:155px; height:24px; background:url('../images/sprite.png') -64px 0 no-repeat; } #header .search .search-input { position:absolute; top:4px; left:8px; width:121px; border:none; background:transparent; font-size:11px; color:#404040; } #header .search .search-ok { position:absolute; top:0px; right:0px; width:24px; height:24px; } /* Autocomplete */ .ui-autocomplete { position: absolute; cursor: default; padding:10px; width:153px; text-align:left; background:#fff; } .ui-autocomplete-loading { background: white url('/cui/themes/default/images/ui-anim_basic_16x16.gif') right center no-repeat; } * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ .ui-menu { } .ui-menu .ui-menu { margin-top: 0; } .ui-menu .ui-menu-item { margin:0 0 2px 0; padding: 0; width: 100%; } .ui-menu .ui-menu-item a { margin:0; padding:1px 10px; float:none; height: auto; background:none; zoom:1; font:normal 11px/16px "Trebuchet MS", sans-serif; color:#555; display:block; position:relative; } .ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active { margin: 0 -1px; color:#fff; background:#feaf09; cursor:pointer; } ul.breadcrumb { margin:0 0 30px 0; } ul.breadcrumb li { display:inline; position:relative; float:left; color:#aaa } ul.breadcrumb li .icon { margin:0 3px; background-position:-48px -176px; float:left;} ul.breadcrumb li a { color:#666 } ul.breadcrumb li a:hover { color:#f36f21; } /* --------------------------------------------------------------------------------------------------------------------- #FOOTER */ #footer .back-to-top { padding:7px 15px 5px 10px; float:right; border-left:solid 1px #d2cec6; } #footer .back-to-top .arrow-top { float:left; background-position:-112px -64px; position:relative; left:-2px; opacity:0.3; filter:Alpha(Opacity=30); } #footer h3 { margin-bottom:3px; font-size:13px; font-weight:700;} #footer ul.sitemap { padding:15px 15px 20px 15px; background:#d2cec6; text-transform:uppercase; height:115px; } #footer ul.sitemap li { width:115px; float:left; } #footer ul.sitemap ul li { font-size:10px; float:none; } #footer ul.sitemap li.list-suite { width:85px; padding-top:21px; position:relative; left:-30px; _margin-right:-30px; } #footer ul.sitemap li.clear { both:clear; } #footer .copyright { padding:6px 15px; font-size:10px; text-transform:uppercase; color:#b2b2b2; } #footer .copyright span { color:#555; } #footer .credits { float:right; margin:5px 10px } #footer a:hover { color:#9d9a93; } /* --------------------------------------------------------------------------------------------------------------------- #GRIDS */ /* 178px-column with 15px gutter */ .grid-w178-g15 .cell, .grid-w178-g15 .cell-1, .grid-w178-g15 .cell-2, .grid-w178-g15 .cell-3, .grid-w178-g15 .cell-4 { display:inline; float: left; position: relative; margin-right:15px; width:178px; } .grid-w178-g15 .cell-2 { width:371px; } .grid-w178-g15 .cell-3 { width:564px; } .grid-w178-g15 .cell-4 { width:757px; } .grid-w178-g15 .cell-last { margin-right: 0; } /* 90px-column with 10px gutter */ .grid-w110-g10 .cell, .grid-w110-g10 .cell-2 , .grid-w110-g10 .cell-3 { display:inline; float: left; position: relative; margin-right:10px; width:110px; } .grid-w110-g10 .cell-last { margin-right: 0; } .grid-w110-g10 .cell-2 { width:230px; } .grid-w110-g10 .cell-3 { width:250px; } /* 110px-column with 15px gutter */ .grid-w110-g15 .cell { display:inline; float: left; position: relative; margin-right:15px; width:110px; } .grid-w110-g15 .cell-last { margin-right: 0; } /* 300px-column with 15px gutter */ .grid-w295-g15 .cell { display:inline; float: left; position: relative; margin-right:15px; width:295px; } .grid-w295-g15 .cell-last { margin-right: 0; } /* 203px-column with 15px gutter */ .grid-w203-g15 .cell, .grid-w203-g15 .cell-2 { display:inline; float: left; position: relative; margin-right:15px; width:203px; } .grid-w203-g15 .cell-2 { width:421px; } .grid-w203-g15 .cell-last { margin-right: 0; } /* 242px-column with 15px gutter */ .grid-w242-g15 .cell, .grid-w242-g15 .cell-2, .grid-w242-g15 .cell-3 { display:inline; float: left; position: relative; margin-right:15px; width:242px; } .grid-w242-g15 .cell-2 { width:499px; } .grid-w242-g15 .cell-3 { width:756px; } .grid-w242-g15 .cell-last { margin-right: 0; } /* 306px-column with 16px gutter */ .grid-w306-g16 .cell, .grid-w306-g16 .cell-2 { display:inline; float: left; position: relative; margin-right:16px; width:306px; } .grid-w306-g16 .cell-2 { width:628px; } .grid-w306-g16 .cell-last { margin-right: 0; } /* 145px-column with 16px gutter */ .grid-w145-g16 .cell, .grid-w145-g16 .cell-2 { display:inline; float: left; position: relative; margin-right:16px; width:145px; } .grid-w145-g16 .cell-2 { width:306px; } .grid-w145-g16 .cell-last { margin-right: 0; } /* 140px-column with 15px gutter */ .grid-w140-g15 .cell { display:inline; float: left; position: relative; margin-right:15px; width:140px; } .grid-w140-g15 .cell-last { margin-right: 0; } /* 200px-column with 14px gutter */ .grid-w200-g14 .cell { display:inline; float: left; position: relative; margin-right:14px; width:200px; } .grid-w200-g14 .cell-last { margin-right: 0; } /* 202px-column with 10px gutter */ .grid-w202-g10 .cell { display:inline; float: left; position: relative; margin-right:10px; width:202px; } .grid-w202-g10 .cell-last { margin-right: 0; } /* --------------------------------------------------------------------------------------------------------------------- #HOME */ #home h1 { font-weight:400; font-size:23px; } #home h2, #home .title-more .alwyn { font-size:18px; } #home .box-gradient .title-more .alwyn { font-size:14px; } #home .slideshow { margin-bottom:10px; position:relative; top:-5px; height:300px } .games-home .game .top { height:9px; font-size:1px; line-height:1px; background:#f7f6f6; border:solid 1px #e3e3e3; border-bottom:none; } .games-home .game a.cover { display:block; position:relative; width:202px; height:113px;} .games-home .game a.cover .hover { display:none; position:absolute; top:0; left:0; z-index:5; background:url('../images/game-hover-w202-h113.png') no-repeat; width:202px; height:113px; } .games-home .game a.cover:hover .hover{ display:block; } .games-home .game h3 { margin-bottom:3px; font-size:16px; } .games-home .game .infos { padding:10px 10px 15px 10px; font-size:11px; height:70px; background:url('../images/bg-game-home.png') bottom repeat-x #f4f3f0; border:solid 1px #e3e3e3; border-top:none; } .games-home .game .platform { margin:2px 0 -2px 0; color:#bfbfbe; font-size:10px; } .games-home .game .platform a { color:#555; text-decoration:none; } .games-home .game .platform a:hover { color:#999; text-decoration:none; } ul.news { margin-bottom:5px; } ul.news li { border-bottom:dotted 1px #ccc; padding:10px 0; } ul.news li.first { padding-top:0; } ul.news .picture { width:55px; float:left; margin-right:10px; } ul.news .text { width:200px; float:left; } ul.news p.title { font-size:11px;} ul.news p.details { font-size:11px; color:#979797; } a.rss { margin-bottom:-5px; padding-right:18px; color:#ff7e00; position:relative; zoom:1; font-size:11px; } a.rss .icon { position:absolute; right:0; top:2px; _top:0; background-position:-98px -48px; font-size:1px; width:12px; height:12px; } .carousel-home { padding:10px 50px; position:relative; } .carousel-home .carousel-view { width:530px; height:215px; overflow:hidden; position:relative; } .carousel-home .carousel-view ul { width:9999px; height:215px; position:relative; } .carousel-home .carousel-view ul li { margin-right:30px; float:left; display:block; width:110px; height:215px; text-align:center; font-weight:bold; } .carousel-home .carousel-view ul li a .cover { margin-bottom:5px; display:block; width:110px; height:160px; position:relative; } .carousel-home .carousel-view ul li a .cover img { position:absolute; left:0; bottom:0; border:solid 2px #efede8; } .carousel-home .carousel-view ul li a:hover .cover img { border-color:#ff7e00 } .carousel-home .carousel-view ul li a:hover { color:#ff7e00 } .carousel-home .prev .icon { background-position:-176px -32px; height:32px; width:32px; text-indent:-9999px; position:absolute; top:90px; left:10px; } .carousel-home .next .icon { background-position:-208px -32px; height:32px; width:32px; text-indent:-9999px; position:absolute; top:90px; right:10px; } .carousel-home .platform { margin:2px 0 -2px 0; color:#bfbfbe; font-size:10px; } .carousel-home .platform a { color:#555; text-decoration:none; } #home .carousel-home .platform a:hover { color:#999; text-decoration:none; } .brand-list .brand { padding:7px; width:184px; display:block; } .download { position:relative; } .download .arrow-bottom { background-position:0 -176px; width:48px; height:48px; position:absolute; right:15px; top:20px; } .download .alwyn { display:block; float:left; padding:7px 10px 9px 0; #margin-bottom:-10px; font-weight:bold; } .download .title-more .alwyn { padding:0; display:inline; float:static; } .hot-news { margin:0 0 20px 0; padding:7px 10px; border:solid 1px #d2cec6; background:#efede8; } .hot-news h3 { display:inline; font-size:13px; text-transform:uppercase; margin-right:5px; } .hot-news ul { display:inline; } .hot-news ul li { display:inline; } .hot-news .date { font-size:9px; } .hot-news .date .icon { background-position:-65px -146px; } .hot-news .float-right { position:relative; top:2px; } #home .big-medias { margin: 0 0 20px; } #tabs-home { margin:5px 0; } #tabs-home ul.ui-tabs-nav { margin:0; padding:0; font-weight:700; } #tabs-home ul.ui-tabs-nav a { padding:4px 10px 2px 10px; background-color:#d2cec6; color:#444; } #tabs-home ul.ui-tabs-nav a:hover { background-color:#efede8; } #tabs-home ul.ui-tabs-nav .ui-state-active a { background-color:#efede8; color:#444; } #tabs-home .tab { padding:5px; background-color:#efede8; } #tabs-home .tab10 { padding:10px; } #tabs-home h4 { margin-bottom:5px; } #tabs-home p { font-size:10px; } #tabs-home .item { margin-bottom:10px; padding-bottom:10px; border-bottom:#ddd 1px solid; } #tabs-home img { width:70px; float:left; margin-right:10px; } #tabs-home .text { width:200px; float:left; } #tabs-home .text p { margin-bottom:5px; } #tabs-home a:hover { color:#ff7e00; } /* --------------------------------------------------------------------------------------------------------------------- #GAMES-LIST */ #games-list #main { position:relative; float:right; width:757px; } #games-list #sidebar { position:relative; float:left; width:178px; } #games-list #sidebar h3 { margin:0 0 13px 8px; } .switch-view { position:absolute; right:15px; top:60px; font-size:11px; text-transform:uppercase; display:block; width:175px; text-align:right; } .switch-view .icon { margin-left:8px; _margin-left:6px; position:relative; _top:-1px; float:right; } .mozaic .icon { background-position:0 -64px; } .detail .icon { background-position:-16px -64px; } .games-grid .game .picture { margin-bottom:10px; } .games-grid .game .platform { margin:2px 0 -2px 0; color:#bfbfbe; font-size:10px; } .games-grid .game .platform a { color:#555; text-decoration:none; } .games-grid .game .platform a:hover { color:#999; text-decoration:none; } .games-grid .game h5 { text-transform:uppercase; } .games-detail .pager { height:20px; } .games-detail h2 { font-size:19px; color:#222; margin:-2px 0 0 0; text-transform:uppercase;} .games-detail h3 { margin-bottom:0; } .games-detail .game { position:relative; } .games-detail .game .platform { margin:2px 0 15px; color:#bfbfbe; font-size:12px; } .games-detail .game .platform a { color:#555; text-decoration:none; } .games-detail .game .platform a:hover { color:#999; text-decoration:none; } .games-detail .game .details { font-size:11px; } .games-detail .game .cell-last { height:100px; } .games-detail .game ul.links { position:absolute; bottom:-2px; right:0; width:178px;} ul.links li { display:block; } ul.links li a { margin-top:7px; padding:7px 20px 0 20px; display:block; position:relative; border-top:solid 1px #e9e6de; font-size:10px; color:#555; } ul.links li a:hover { color:#f36f21; } ul.links li a .arrow { position:absolute; right:0; top:7px; _top:10px; opacity:0.4; filter:Alpha(Opacity=40); background-position:-80px -64px; } ul.links li a:hover .arrow { background-position:-80px -80px; opacity:1; filter:Alpha(Opacity=100); } ul.links li a .website { position:absolute; left:0; _left:-20px; top:7px; _top:10px; background-position:-16px -80px; } ul.links li a .info { position:absolute; left:0; _left:-20px; top:7px; _top:10px; background-position:0 -80px; } ul.links li a .forum { position:absolute; left:0; _left:-20px; top:7px; _top:10px; background-position:-224px -80px; } .game a .hover { display:none; position:absolute; top:0; left:0; z-index:5; background:url('../images/game-hover-w178-h100.png') no-repeat; width:178px; height:100px; } .game a:hover .hover{ display:block; } .pager { text-align:right; } .pager .pager-info { margin:0 5px; color:#f36f21; } .pager a { color:#999; } .pager a:hover { color:#f36f21; } .pager a .icon { opacity:0.4; filter:Alpha(Opacity=40); vertical-align:middle; } .pager .prev .icon { background-position:-128px -64px; width:14px; } .pager .next .icon { background-position:-144px -64px; } .pager a.prev:hover .icon { background-position:-96px -80px; opacity:1; filter:Alpha(Opacity=100); } .pager a.next:hover .icon { background-position:-112px -80px; opacity:1; filter:Alpha(Opacity=100); } .sort-legend { text-align:right; font-size:11px; } .sorter { z-index:5; position:relative; } .sorter .active { position:relative; #top:-1px; color:#aaa; display:inline; font-size:11px; } .sorter .arrow-bottom { background-position:-32px -64px; height:16px; } .sorter .picker { top:15px; left:0; } ul.filter { } ul.filter li { zoom:1; } ul.filter li a { margin-bottom:10px; padding:4px 8px; background:#e9e6de; display:block; font-size:11px; text-transform: uppercase; } ul.filter li a:hover { background:#d4cfc0; } ul.filter li a .arrow { float:right; background-position:-80px -64px; } ul.filter li a.expand .arrow { background-position:-32px -64px; } ul.filter ul { margin-bottom:10px; } ul.filter ul li { } ul.filter ul li a { margin:0; padding:1px 10px; _padding:0px 10px; background:none; font-size:10px; } ul.filter ul li a:hover { color:#f36f21; background:#fff; } ul.filter ul li.active a { color:#f36f21; background:#fff; } a span.remove { margin-left:5px; padding:0 5px 0 16px; font-size:10px; line-height:14px; background:#e9e6de; color:#666; text-transform:lowercase; position:relative; } a span.remove .icon { background-position:-208px -80px; position:absolute; left:0; top:0; } /* --------------------------------------------------------------------------------------------------------------------- #MEDIAS LIST */ .title-more { margin-bottom:10px; display:block; } .title-more .alwyn { font:700 14px/18px "Alwyn", "Trebuchet MS", sans-serif; color:#555; float:left; } .title-more .link { position:relative; top:4px; left:8px; float:left; padding-right:18px; } .title-more .clear { font-size:1px; line-height:1px; } .title-more .link .icon { top:1px; _top:0; } .medias { } .medias .infos { min-height: 18px;} .medias .video, .medias .screenshot { height:150px; width:242px; display:block; position:relative; } .medias .video .infos { width:222px; padding:7px 10px; color:#fff; display:block; font-size:9px; background:url('../images/px-black.png'); _background:#000; text-transform:uppercase; position:absolute; bottom:0; } .medias .video .infos strong { font-size:12px; display:block; } .medias .video .play { background-position:-64px -32px; width:34px; height:32px; position:absolute; top:40px; left:104px; display:block; opacity:0.5; } .medias .video .arrow { background-position:-98px -35px; width:13px; height:10px; line-height:1px; position:absolute; top:51px; left:114px; display:block; font-size:1px; } .medias .screenshot .infos { width:194px; padding:11px 10px 11px 38px; color:#fff; display:block; background:url('../images/px-gray.png'); _background:#000; text-transform:uppercase; position:absolute; bottom:0; font-size:12px; font-weight:700; } .medias .screenshot .icon { background-position:-151px -39px; width:18px; height:18px; position:absolute; bottom:10px; left:10px; } .medias .video:hover .picture, .medias .screenshot:hover .picture {opacity:0.80; filter:Alpha(Opacity=80); } .medias .video .hover, .medias .screenshot span.hover { display:none; position:absolute; top:0; left:0; z-index:5; background:url('../images/game-hover-w242-h150.png') no-repeat; width:242px; height:150px; } .medias .video:hover .hover, .medias .screenshot:hover .hover, .medias .active span.hover { display:block; } .medias .pager { float:right; width:360px; } /*-*/ .related-medias { margin:10px 0 20px 0; } .related-medias .video, .related-medias .screenshot { height:125px; width:203px; } .related-medias .video .infos { width:183px; } .related-medias .video .play { top:25px; left:85px; } .related-medias .video .arrow { top:36px; left:95px; } .related-medias .screenshot .infos{ width:155px; } .related-medias .video .hover, .related-medias .screenshot span.hover { background:url('../images/game-hover-w203-h125.png') no-repeat; width:203px; height:125px; } /*-*/ .huge-medias { margin:0; } .huge-medias .video { width:628px; height:395px; } .huge-medias .video .infos { padding:27px 25px 22px 25px; width:578px; font-size:14px; } .huge-medias .video .infos strong { margin-right:6px; display:inline; font-size:23px; } .huge-medias .video .play { background-position:0 -112px; width:64px; height:64px; top:150px; left:280px; } .huge-medias .video .arrow { background-position:-67px -118px; width:24px; height:20px; top:170px; left:300px; } /*-*/ .big-medias { margin:0; } .big-medias .video { width:306px; height:190px; } .big-medias .video .infos { width:286px; font-size:10px; } .big-medias .video .infos strong { margin-right:10px; font-size:18px; text-transform:none; } .big-medias .video .play { background-position:0 -112px; width:64px; height:64px; top:45px; left:120px; } .big-medias .video .arrow { background-position:-67px -118px; width:24px; height:20px; top:65px; left:140px; } .big-medias .video .hover { background:url('../images/game-hover-w306-h190.png') no-repeat; width:306px; height:190px; } .big-medias .video .views { position:absolute; bottom:7px; right:10px; text-transform:none; } /*-*/ .tiny-medias { margin:0; } .tiny-medias .video, .tiny-medias .screenshot { width:145px; height:90px; } .tiny-medias .video .infos { padding:8px 10px 5px 10px; width:125px; font-size:10px; font-weight:700; } .tiny-medias .video .play { top:15px; left:55px; } .tiny-medias .video .arrow { top:26px; left:65px; } .tiny-medias .screenshot .infos { padding:8px 10px 5px 38px; width:97px; font-size:10px; } .tiny-medias .screenshot .infos .icon { bottom:5px; } .tiny-medias .screenshot span.hover, .tiny-medias .video span.hover { background:url('../images/game-hover-w145-h90.png') no-repeat; width:145px; height:90px; } /*-*/ .tiny-related-medias { margin:0; } .tiny-related-medias .video, .tiny-related-medias .screenshot { width:140px; height:87px; } .tiny-related-medias .video .infos{ padding:8px 10px 5px 10px; width:120px; font-size:10px; font-weight:700; } .tiny-related-medias .video .play { top:15px; left:53px; } .tiny-related-medias .video .arrow{ top:26px; left:63px; } .tiny-related-medias .screenshot .infos { padding:8px 10px 5px 38px; width:92px; font-size:10px; } .tiny-related-medias .screenshot .infos .icon { bottom:5px; } .tiny-related-medias .screenshot span.hover, .tiny-related-medias .video span.hover { background:url('../images/game-hover-w140-h87.png') no-repeat; width:140px; height:87px; } ul.tabs li { position:relative; display:block; float:left; } ul.tabs a { margin-right:2px; padding:4px 10px; text-transform:uppercase; font-weight:bold; float:left; } ul.tabs a:hover { background-color:#e9e6de; } ul.tabs li.active a { background-color:#ff7e00; color:#fff; } .container-screenshot { text-align: center; width:640px; min-height: 360px; position:relative; z-index:3; background: #efede8; } .container-screenshot img { max-width: 640px; max-height: 360px; margin:auto; position:relative; } .container-screenshot .nav { position:absolute; top:0; left:0; z-index:3; height:360px; width:640px; } .container-screenshot .nav a { display:block; width:320px; height:360px; position:absolute; top:0; text-indent:-9999px; } .container-screenshot .nav .prev { left:0; background:url(../images/px.png); } .container-screenshot .nav .next { right:0; background:url(../images/px.png); } .container-screenshot .nav .prev:hover { background:url(../images/carousel-medias-prev.png) 0 140px no-repeat; } .container-screenshot .nav .next:hover { background:url(../images/carousel-medias-next.png) right 140px no-repeat; } /* --------------------------------------------------------------------------------------------------------------------- #GAMES-VIEW */ #games-view #main { margin-right:15px; position:relative; float:left; width:640px; } #games-view #sidebar { position:relative; float:left; width:295px; } #games-view h1 { margin:5px 160px 15px 5px; } .game-infos h5 { color:#555; } .game-infos .platform { margin:8px 0; } .game-infos .platform a { margin-right:5px; font:700 20px/20px Alwyn, "Trebuchet MS", sans-serif; } .game-infos .platform a.active { padding:0 5px 2px 5px; _padding:1px 5px 1px 5px; background:#fff; color:#f36f21; position:relative; _top:1px; } .game-infos .genre { margin-bottom:20px; } .game-infos .cover { float:left; margin-right:15px; } .game-infos .infos { float:left; width:95px; } .game-infos .infos dl { margin-bottom:15px; } .game-infos .infos dt { font-size:9px; line-height:13px; color:#8a8780; } .game-infos .infos dd { margin-bottom:7px; font-size:10px; line-height:13px; color:#333; } .game-infos .infos img { display:inline; } .game-infos-tiny .infos { width:190px; } .game-infos .platform { margin:4px 0; } .game-infos-tiny .platform a { font:700 14px/20px Alwyn, "Trebuchet MS", sans-serif; } .game-infos-tiny .infos dl { margin:0; } .game-infos-tiny .infos dt { float:left; margin-right:5px; } .game-infos-large { margin-top:5px; padding-bottom:10px; } .game-infos-large a.cover img{ display:block; border:solid 2px #e9e6de; } .game-infos-large a.cover:hover img{border-color:#ff5a00; opacity:0.8; } .game-infos-large .infos { width:230px; } .game-infos-large .ratings img { float:left; margin-right:10px; } .related-action { margin-bottom:15px; padding:5px 15px; border:solid 1px #dad9d8; background:url('../images/gradient-h30.png') repeat-x #f3f1ef; } .related-action h3 { margin-bottom:0; line-height:20px; } .related-action h3 cufon { position:relative; z-index:1 } .related-action h3 a { position:relative; z-index:3; } .related-action img { display:inline; vertical-align:middle; } .related-action .title-more { margin:2px 0 5px 0; } .share-news { background:none; border:none; padding:0; } #tabs { padding:0; } #tabs ul.ui-tabs-nav { margin:0 0 10px 0; padding:0; } #tabs ul.ui-tabs-nav a { padding:4px 10px; text-transform:uppercase; font-weight:bold; } #tabs ul.ui-tabs-nav a:hover { background-color:#e9e6de; } #tabs ul.ui-tabs-nav .ui-state-active a { background-color:#ff7e00; color:#fff; } #tabs .tab { margin-bottom:15px; padding:10px 15px 15px 15px; border:solid 1px #e3e3e3; background:url('../images/picker/gradient.png') repeat-x #edeae4; } #tabs .tab h2 { color:#222; } a.more { padding-right:18px; color:#ff7e00; position:relative; zoom:1; } a.more .arrow { position:absolute; right:0; top:2px; _top:0; background-position:-48px -80px; font-size:1px;} a.more:hover { color:#ff7e00; cursor:pointer; } a.more:hover .arrow { background-position:-144px -80px; } #tabs .tab .line { border-color:#ccc; } #tabs .tab .line-10 { border-bottom:dotted 1px #ccc; } #tabs .tab .details { margin:2px 0; color:#999; } #tabs .post .text { width:480px; } #tab-description ul, .post ul { margin:0 0 15px 0; clear:both; } #tab-description ul li, .post ul li { padding:0 0 0 16px; background:url('../images/sprite.png') -224px -112px no-repeat; } .news-sticky .picture { float:left; width:135px; margin-right:15px; } .news-sticky .text { float:left; width:145px; } .news-tiny .picture { float:left; width:55px; margin-right:15px; } .news-tiny .text { float:left; width:225px; } .news-tiny .text .details { margin:2px 0; color:#999; } .characters { } .characters .carousel-list { width:150px; float:left; } .characters .carousel-list ul { margin-bottom:10px; } .characters .carousel-list ul li { display:block; zoom:1;} .characters .carousel-list ul li a{ padding:0 0 5px 16px; display:block; position:relative; font-size:11px; font-weight:bold; } .characters .carousel-list ul li a:hover, .characters .carousel-list ul li a.active { color:#ff7e00; } .characters .carousel-list ul li a .arrow { background-position:-64px -80px; position:absolute; left:0; _left:-16px; top:0; display:none; } .characters .carousel-list ul li a:hover .arrow, .characters .carousel-list ul li a.active .arrow { display:block; } .characters .carousel-list .more { margin-left:16px; } .characters .carousel-view { float:left; width:420px; height:178px; overflow:hidden; position:relative; } .characters .carousel-view ul { width:9999px; height:178px; position:relative; } .characters .carousel-view ul li { margin-right:15px; float:left; display:block; width:125px; height:175px; } ul.games { margin-bottom:-10px; } ul.games li { border-top:dotted 1px #ccc; padding:10px 0; } ul.games li.first { border:none; padding-top:0; } ul.games .picture { width:65px; float:left; margin-right:10px; border:solid 2px #EFEDE8; } ul.games a:hover .picture { border-color:#ff5a00; opacity:0.8; } ul.games .text { width:186px; float:left; } ul.games h4 { margin-bottom:5px } ul.games h4 a:hover { color:#ff7e00; } ul.games .platform { font-size:10px; } a.button { margin:10px 0 0 0; padding:2px 26px 2px 10px; color:#ff7e00; border:solid 1px #d5d4d2; background:url("../images/gradient-button.png") repeat-x #eae7e0; height:17px; font:bold 11px/32px "Trebuchet MS", sans-serif; #line-height:16px; position:relative; zoom:1; text-shadow: 1px 1px 0px #fff; } a.button .plus { position:absolute; right:3px; top:3px; #top:4px; background-position:-128px -80px; font-size:1px; } a.button .dl { position:absolute; right:3px; top:3px; #top:4px; background-position:-224px -64px; font-size:1px; } .media-infos { padding:10px 0; } #video-view { padding-right:310px; position:relative; } #video-player object { position:relative; z-index:5; } .rating { float:right; width:230px; text-align:right; color:#f36f21; margin-top:13px; } #video-player { width:640px; height:360px; background:#000; position:relative; z-index:3; } .stars .star img { background-position:-160px -80px; margin-left:-7px; } .stars .star-active img { background-position:-192px -80px; } .stars .star-hover img { background-position:-176px -80px; } #games-view .video-list { margin-top:-413px; } .post .thumb { width:110px; float:left; margin-right:15px; } .post .float-left { margin:0 15px 10px 0; } .post .text { margin-top:-5px; width:515px; float:left; } .post .details { color:#999; } .post .teaser { color:#999; } .post .text .more { top:2px; } a.btn-all { padding:8px; text-align:center; background:#dfdbd2; display:block; font:700 16px/16px Alwyn, Arial, sans-serif; } img.share-digg { background-position:-160px -112px; } img.share-facebook { background-position:-96px -112px; } img.share-twitter { background-position:-128px -112px; } img.share-myspace { background-position:-192px -112px; } img.buy-fnac { background-position:-128px -144px; } img.buy-amazon { background-position:-96px -144px; } img.buy-game { background-position:-160px -144px; } a.tiny-facebook, a.tiny-twitter, a.tiny-myspace, a.tiny-digg { text-indent:-9999px; display:inline-block; margin:4px 0 0 0; } a.tiny-facebook { background-position:-64px -176px; } a.tiny-twitter { background-position:-80px -176px; } a.tiny-myspace { background-position:-96px -176px; } a.tiny-digg { background-position:-112px -176px; } a.tiny-facebook:hover { background-position:-64px -192px; } a.tiny-twitter:hover { background-position:-80px -192px; } a.tiny-myspace:hover { background-position:-96px -192px; } a.tiny-digg:hover { background-position:-112px -192px; } .pager-medias { position:relative; overflow:hidden; } .pager-medias-view { position:relative; } .pager-medias .pager { position:relative; top:2px; } .carousel-medias-on { position:relative; overflow:hidden; width:295px;} .carousel-medias-on .carousel-view{ position:relative; } .carousel-medias-on .set { float:left; } .carousel-medias-on .pager { position:relative; top:-10px; width:295px; } .loading { display:block; width:160px; height:32px; text-align:center; font:700 18px/32px "Alwyn", "Trebuchet MS", sans-serif; color:#fff; background:url("../images/carousel-medias-loading.png") no-repeat; position:absolute; top:150px; left:240px; } #video-player .loading { z-index:3; } .container-screenshot .loading { z-index:5; } .forums .links { width:180px; float:right; position:relative; top:-5px; } .forums .links a, .forums .line { border-color:#dfdfdf; } .forums .text { width:410px; }