* {
	mar 0 pad 0
	outline: 0;
}

a {
	color: white;
	underoff
}

a:hover {
	color: #4D7EB7;
	underon
}

a img{border: none}

img {
	/* margin: 5px 2px */
	vertical-align: middle
}

body {
	background: url("/img/back7.jpg");
	background-color: #279dff;
	color: #4D7EB7;
	font-family: verdana, "DejaVu Sans";
}

body, .normal{fs 12}

.topbar1 img{mar 0}

/* TODO: Translate */
#banniere {
	display: table-caption;
	height: 127px;
	margin: 0 auto 5px;
	background: url("/img/banniere.png") center no-repeat transparent
}

#banniere a {
	disbl
	height: 127px;
	width: 397px;
	margin: 0 auto
}

#galleryThumbnail {
	txtc mart -3 marb -2
	min-height: 68px
}

.voteButton {
    vertical-align: middle
}

.gallery_img_small .voteButton {
    opacity: .3
}

.gallery_img_small:hover .voteButton {
    opacity: 1
}

.main{width: 100%}

h1, h2, h3{mar 5}

h1{marb 15} /* Removed marl 10 */

h2{marb 10}

hr {
	border-color: #9F9F9F -moz-use-text-color #CCC;
	border-style: solid none;
	border-width: 1.5px 0 1px; /* Changed from 2px 0 1px */
	marb 10 mart 10
}

label, input, select{marb 1 mart 1}

label{curhand txtb}

select > option {
	-moz-padding-end: 5px;
	-moz-padding-start: 3px
}

optgroup > option{-moz-padding-start: 20px}

p{marb 15 mart 10}

.with_optgroup option{padl 20}

.border{border: 1px solid #696969}

a[hreflang]:after{content: "("attr(hreflang) ") "}

.flooz{mar 0 marb -3 pad 0}

table {
	border-collapse: collapse;
	empty-cells: show
}

li.airy, ul.airy li, ol.airy li{marb 8}

table.airy td, table.airy th{pad 5}

table.airyLR td, table.airy th{padl 3 padr 3}

table.over_airy, table.over_airy{mar -5}

table.border td, table.border th{border: 1px solid black}

.gallery .border { border-color: #828282 }
.gallery .rank { font-weight: bold }
.gallery .rank.positive { color: green}
.gallery .rank.negative { color: red}

table.noborder td, table.noborder th{border: none}

table.separate{border-collapse: separate}

table.top > tbody > tr > td, table.top > tbody > tr > th, table.top > tr > td, table.top > tr > th, tr.top > td, tr.top > th, td.top, th.top, tr.rtop td, tr.rtop th, td.rtop, th.rtop{vertical-align: top}

textarea{mar 5}

th{underon}

ol, ul{marl 10}

ul > ul, ul > ol, ol > ol, ol > ul {
	border-left: 1px solid black;
	padl 10
}

ol.airy, ul.airy{marb 15 mart 10}

li{marl 10}

.menu {
	background-color: #68d1fd;
	color: #343453;
	padding: 10px 5px;
	width: 143px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	marb 10
}

.topMenu {
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	padt 0
}

.menu a:not(.not_menu_a) {
	color: #2a4769;
	underoff
}

.menu a:not(.not_menu_a):visited{color: #2a4769}
.menu a:not(.not_menu_a):hover{color: white}

.not_menu_a{color: inherit}
.not_menu_a:visited{color: inherit}
.not_menu_a:hover{color: white}

.menu h4{txtb marb 5}

.topMenu{mart -90}
#menu2 .topMenu {
	/* Argh, !important was required :( that's bad */
	background: -webkit-linear-gradient(top, transparent 87px, #68d1fd 0, #68d1fd) !important;
	background: -moz-linear-gradient(top, transparent 87px, #68d1fd 0, #68d1fd);
	background: linear-gradient(top, transparent 87px, #68d1fd 0, #68d1fd) !important;
}

#browseMenu{mart -60}

#browseMenu a {
	color: #343453;
	underoff
}
#browseMenu a:visited{color: #343453}
#browseMenu a:hover {
	color: white;
	underon
}

#browseMenu h4 {
	underoff fs 13 marb 5 marl 5 mart 2
	color: #343453;
}

#browseMenu ul, .menu ul {
	color: #343453;
	font-weight: normal;
	list-style: none;
	marb 5 marl -5 padb 2 padl 20 underoff
}

#menu:before{content: url("/img/design2/menuTopL-design2.png")}

#menu2:before {
	content: url("/img/design2/menuTopL-design2.png");
	display: inline-block;
	transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	z-index: -1;
	position: relative; /* Needed for chrome */
}

.tab, .tab2 {
	marb 15 mart 5 pad 20
	color: #343453;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #F3F2F4;
	border: none
}

.tab a{color: blue}
.tab a.red, .tab a.red:hover{color: red}
.tab a:hover{color: #4D7EB7}

.tab2{mart 0 padt 10}

legend {
	txtb pad 5
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #66a3e7;
}

.subTab {
	background-color: #fdf6c1;
	border: 1px solid red;
	color: red;
	txtb marb 10 pad 10
}

#foot {
	color: black;
	/* color: #343453; */
	height: 123px;
	txtc
}

#topbar {
	fs 12
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 3
}

#topbar:active{opacity 30}

.topbar1, .topbar2 {
	background-color: #ebe9ed;
	background-image: url("/img/topbar.png");
	background-repeat: repeat-x;
	border: 1px solid #BAB9BD;
	padding: 5px 10px
}

.topbar1 {
	border-radius: 0 0 18px;
	display: inline;
	padl 0
}

.topbar2{border-radius: 0 0 0 18px}

#topbar a {
	color: #4D7EB7;
	underoff
}
#topbar a:hover{color: #39B6EF}
#topbar a:visited{color: #4D7EB7}

.tableInMain{marb 15}

.hs {
	background-color: silver;
	border: 1px solid gray;
	mar 3 pad 5
}

.quote {
	background-color: lightblue;
	border: 1px solid steelblue;
	mar 3 pad 5
}

.browserMenuSeparator {
	width: 122px;
	height: 15px;
	background: url("/img/design2/barre-design2.png") no-repeat scroll center center
}

.blue{color: blue}
.green{color: green}
.orange{color: #DA5E0F}
.red{color: red}

.small{fs 10}

.left{txtl}
.center{txtc}
.right{txtr}

.largest{width: 100%}

input[type="radio"], input[type="checkbox"]{vertical-align: middle}

/* input[type="button"], input[type="submit"]{padt 1 padr 6} */ /* BUG :( */
/* input[type="button"]{padt 1 padb 1 padr 6 padl 6}
input[type="submit"]{padt 1 padb 1 padr 6 padl 6} */ /* Ça rend moche sous Firefox x) */

a.red:visited, .red a{color: red}

.tableInMain{color:  #343453}

.avatar img{border: 3px solid black}

.blackSpoiler {
	background-color: black;
	color: black
}

.blackSpoiler:hover{color:white}

.smiley{vertical-align: middle} /* Already defined for all img but, that's ok 'cause BBS style should be considered as a module/an extra. Shouldn't it? And explicit is better than implicit */
.smileyBox{mart .3em}
.smileyBox img{mar 2}

.spoilerBox, .langBox, .avaibleLangs {
	border: 1px solid black;
	border-radius: 5px;
	background-color: #fdfcfd;
	pad 10
}

.commentThis {
	white-space: nowrap
}

.langBox{border-top-left-radius: 0;}
.avaibleLangs {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: none;
	display: inline;
	pad 5
	padding-bottom: 1px;
}
.langIndicator {
	display:none; /* By default */
	font-weight: bold;
}
.fullLangBox {
	mart 1em
}

/* TODO: Rename "hiddenlink" into something more appropriate (like linkmetainfopopup) */
a.hiddenLink:hover:before {
	background-color: white;
	content: "\a0" attr(href) "\a0"; /* Nonbreaking space */
	white-space: nowrap;
	fs .8em marl .5em mart -1.2em
	position: absolute;
	z-index: 4;
}

a.hiddenLink[href*="youtube"]:hover:before {
	content: "\a0" url(/img/yt-icon.png) " " attr(href) "\a0"; /* Nonbreaking space */
	z-index: 4;
}

a.hiddenLink[href^="/"]:hover:before {
	content: "\a0" url(/img/bubble-smaller.png) " " attr(href) "\a0"; /* Nonbreaking space */ 
	z-index: 4;
}

.selectedLang {
	border-bottom: 2px solid;
	padb 2
}

/* Trouver une solution, style "style2after", car changer la couleur des liens dans un design, efface l'effet de ce genre de règles :/ */
a.newTopicButton {
	display: block;
	width: 100px;
	height: 41px;
	background-image: url(/img/newTopic.png);
	color: transparent;
	margin: 3px
}

#msgForm {
	-moz-box-sizing: border-box;
	width: 100%
}

#quickAnswer{color: #212121}