/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
:root {
	color-scheme: light dark;
	--OK-color: #dfd;
	--ERROR-color: #fdd;
	--link-color: #246;
	--link-hover-color: #468;
	--link-exergue-color: #8F8;
	--button-background-color: #dde;
	--main-text-color: #222;
	--main-border-color: #ccc;
	--titre-text-color:#444;
	--note-text-color:#444;
	--note-background-color:#bbb;
	--selected-background-color:#aaa;
	--second-background-color:#f8fbf8;
	--second-border-color: #C0C0C0;
	--second-text-color: #000000;
	--important-text-color: #224488;
  	--quoted-text-color: #448;
	--main-link-color: #448;
}

@media (prefers-color-scheme:dark) {
	:root {
	--OK-color: #6A6;
	--ERROR-color: #A66;
	--link-color: #ace;
	--link-hover-color: #bdf;
	--link-exergue-color: #282;
	--button-background-color: #226;
	--main-text-color: #eee;
	--main-border-color: #444;
	--titre-text-color:#c0c0c0;
	--note-text-color:#ccc;
	--note-background-color:#333;
	--selected-background-color:#666;
	--second-background-color:#111;
	--second-border-color: #444;
	--second-text-color: #eee;
	--important-text-color: #DC8;
  	--quoted-text-color: #FEC;
	--main-link-color: #CCD;
	}
}

html,
button,
input,
select,
textarea {
    color: var(--main-text-color);
}

q { quotes: "“" "”" "‘" "’"; font-weight:700;}
q::before { content: open-quote; }
q::after { content: close-quote; }

body {
	font-size: 1em;
	font-family:sans-serif;
	font-weight:lighter;
	line-height: 1.4;
	font: -apple-system-body;
}

html.lang-fr *:lang(en) { display: none; }
html.lang-en *:lang(fr) { display: none; }

#body.index #main #content { background:var(--main-background-color);}
#body.index #main { padding-top:200px; background: url(/images/planlarge.png) top no-repeat; }


body #main p { text-align:left; margin:0.5em 2em; }
body #main p.center { text-align:center; }
body #main p.important { font-size:110%; }
body #main p.important a { color:var(--important-text-color); text-decoration:underline;  }
body #main ul li { text-align:left; margin:0.5em 1em; }

body.admin #main { border: 1px solid var(--main-border-color); margin:1em; background:#eef; }
body.admin #main a { color:var(--main-link-color); }
body.admin #main form.valide { background:var(--OK-color); }
body.admin #main form.valide fieldset { display:none; }
body.admin #main form.invalide { background:var(--ERROR-color); }
body.admin #main form a.submit,
body.admin #main form input.submit { padding:1em; margin:1em; border: 1px solid black; background:var(--main-background-color); border-radius:8px; font-weight:normal; color:#000; }

body.admin #main div.message { background:var(--main-background-color); text-align:left; border:1px solid black; padding:20px; width:620px; margin-left:-26px;}

body.index #main p { width:auto; }

#main #content .astuce   { 
	padding:1em;
	margin:1em;
	padding-left:32px;
	background: url(/images/astuce-abeille.svg) top left no-repeat;
	color:orange;
	margin:1em;
	text-align:left;
	}

#main #content .warning   { 
	padding:1em;
	background:var(--main-background-color);
	font-size:150%;
	border:2px solid red;
	margin:1em;
	text-align:center;
	}
#main #content .warning a { color:red; display:block; }

#ressources ul, #ressources ol {
	text-align:left;
	margin:1em 2em;
	background:var(--second-background-color);
	border-radius:8px;
	padding:1em 2em 1em 3em;
	}
#ressources h1 { margin-bottom:2em; }
#ressources blockquote {
	margin:1em 0;
	color:var(--quoted-text-color);
	font-size:110%;
	font-family:sans-serif;
	}

#main #commentaires { margin:1em; border:1px solid gray; border-radius:1em; }
#main #commentaires > ul { margin:0; padding:0 }
#main #commentaires > ul > li { list-style:none; background:#eee; margin:1px 20px 1px 30px; }
#main #commentaires > ul > li > p { padding:4px 2em; }
#main #commentaires > ul > li > h5 { margin:0; padding:4px 2em; }

#main #add_comment { margin:1em 2em; }
#main #add_comment fieldset { margin:4px 1em; }
#main #add_comment fieldset textarea,
#main #add_comment fieldset input.auteur { width:100%;  }

#main article { max-width:800px; margin:1em auto; }
article.pub {
	margin:1em auto;
	border:1px solid gray;
	background:var(--second-background-color);
	width:75%;
	border-radius:8px;
}

article div.infos { 
	margin:2em 2em;
	padding:2em;
	border:1px solid gray;
	border-radius:8px;
}
article div.infos ul { margin:1em; } 

article div.encart { 
	float:left;
	margin:1em;
	}


article ul, article ol { text-align:left; margin:1em; }
article q::before { content:" ”"; }
article q::after  { content:"” "; }
article q {
  font-weight:100;
  font-style: italic;
  color:var(--quoted-text-color);
  }

article p img  { margin:1em 0; box-shadow: 0px 1px 8px #888; border-radius:8px; }  
article p img.no-shadow  { box-shadow: 0 0 0; border-radius:0px; }  

article p a.ok img  { box-shadow: 0px 1px 8px #6c6; }  
article p span { white-space:nowrap; }

article ol,
article ul { margin:0.5em 4em; }

article dl { margin:1em 3em; }
article dl dt { text-align:left; font-weight:bold; border-top:1px solid black; }
article dl dd ul { margin: 0; }
article dl dd { margin:0 0 2em 0; }

#main cite {
	display:block;
	color:var(--quoted-text-color);
	background:var(--second-background-color);
	padding:1em;
	margin:1em 3em;
	border:1px solid var(--second-border-color);
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: var(--selected-background-color);
    text-shadow: none;
}

::selection {
    background: var(--selected-background-color);
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--second-border-color);
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Cookies
   ========================================================================== */

#cookieChoiceInfo { 
	background: rgba(80,80,80,0.5);
	padding: 1em;
}
#cookieChoiceInfo .cookie-choices-buttons { 
	display:block;
	float:right;
	margin:1em;
}
#cookieChoiceInfo .cookie-choices-buttons a {
	margin:1em;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

h1,h2,h3,h4 { font-weight:normal; }

strong { white-space:nowrap; }
a {
	text-decoration: none;
	font-weight:normal;
	color:var(--link-color);
	white-space:nowrap;
	font-family:monospace;
	font-size:120%;
	}
#ulmenubar a { font-size:75%; }
a:hover { color:var(--link-hover-color); text-decoration:underline; }
a.exergue {
	display:inline-block;
	padding:2px 10px;
	border-radius:8px;
	font-weight:bold;
	border:1px solid var(--main-text-color);
	color:var(--main-text-color);
	background:var(--link-exergue-color);
	}


a.button {
	display:inline-block;
	padding:10px 30px;
	border:1px solid black;
	border-radius:8px;
	background:var(--button-background-color);
	}


#header img { vertical-align: text-bottom; }
#header a.app { display:block; }

#header #social { position:absolute; margin-top:-30px; margin-left:20px; }

#main .center    { text-align:center; }
#main .right     { text-align:right; }
#main .left      { text-align:left; }
#main img.rounded { border-radius:10px; }

#main div.app p { width:90%; }
#main div.app p img { float:left; margin:10px; }

#main a.app img { border-radius:8px; border:2px solid lightgray; }
#main a.app span { display:none; }
#main a.app:hover img { border-color:#405870; }

table.hr { width:100%; height:8px; }
table.hr tr td { border:2px solid var(--second-border-color); }

#main table.bordered {
	margin:0 5%;
	display:inline;
	width:80%;
	border-spacing: 10px;
}
#main table.bordered tr {
}
#main table.bordered th,
#main table.bordered td {
	border:1px solid var(--second-border-color);
	padding:0.25em 1em;
}

/*************** #header START ****************/

#header { display:block; }
#header h1 { display:inline-block; }
#header ul { text-align:right; width:auto; margin:0 auto; }
#header ul li {
	text-align:center;
	display:inline-block;
	padding:6px 8px;
	margin:4px 8px;
	border-radius:8px;
	}

#header ul li a img { width:48px; height:48px;  }

#header ul li.selected { border-bottom:1px solid lightgray; }

@media only screen and (max-width:900px) {
	#header ul li { margin:2px; padding:2px; }
}
@media only screen and (max-width:800px) {
	#header ul li a img { width:40px; height:40px;  }
}
@media only screen and (max-width:568px) {
	#header ul li a img { width:32px; height:32px;  }
}


@media only screen and (max-width:480px) {
	#header ul { text-align:center; width:100%; margin:1em 0; padding:0; }
	#header ul li.selected { border-bottom:0; background:#eee; }
	#header ul li { margin:0px; padding:0px; }
	#header ul li a img { width:32px; height:32px;  }
}

@media only screen and (min-width:1024px) {
	#header ul { text-align:center; width:auto; margin:0; auto padding:0; }
}

/*************** #header END ******************/

div.extern {text-align:center; margin:2em; }
div.extern legend { font-size:75%; color:gray; display:inline-block; margin:0 auto; }

#submenu { display:block; position:absolute; right:10px; }
#submenu ul { margin:10px; }
#submenu li { display:inline-block; margin-right:2em; }
#submenu li a {
	background:var(--second-background-color);
	padding:4px 8px;
	border-radius:8px;
	border-bottom:1px solid var(--second-border-color);
	letter-spacing:1px;
	}

#ok, #ok2, #error, #showtime, #emailsec, #listicons, #listapps, #apps, #video, #media, #app, form {
	margin:2em 0;
	padding:10px;
	color:var(--second-text-color);
	background:var(--second-background-color);
	border-top:1px solid var(--second-border-color);
	border-bottom:1px solid var(--second-border-color);
	text-align:center;
	box-shadow:2px 2px 8px black;
}

div.apps a { 
	display:inline-block;
}

@media only screen and (min-width:480px) {
  #ulmenubar .bouton-menu-iphone { display:none; }
}
@media only screen and (max-width:480px) {
  #ulmenubar .bouton-menu-ipad { display:none; }
}

#menutop { background:DarkOrange; color:black; position:absolute; left:0; right:0; z-index:1000; display:none; }
#menutop ul li { display:block; background:orange; font-size:200%; }
#menutop ul li:hover { background:DarkOrange; }
#menutop ul li a { color:black; }
#menutop ul li:hover a { color:white; }

body #main section.bigicons { text-align:center; display:block; text-align:center; }
body #main section.bigicons ul li  { display:inline-block; text-align:center; }
body #main section.bigicons ul li a { display:inline-block; text-align:center; font-size:small; width:100px;margin:0.5em; }
body #main section.bigicons ul li a img { border-radius:50%; border:2px solid var(--second-border-color); width:128px; }


#content h2,
#content #tags,
#content #listicons {
	break-inside:none;
	column-span:all;
}
#content > div { break-inside: avoid-column; }
#content > div#apps { margin:2em auto;  }

#content #bundles ul li { display:inline-block; margin:auto; }
#content #bundles ul li a {
	padding:4px 10px;
	margin:6px 12px;
	border:1px solid var(--second-border-color);
	}

#listicons a { display:inline-block; width:64px; height:64px; text-align:center; background:transparent; }
#listicons a img { border:1px solid var(--link-color); border-radius:50%; width:50px; margin:5px; }
#listicons a:hover img { width:60px; margin:0; }

#listicons.mac a img { margin:4px; border:0px solid #ccc; border-radius:9px; }

#listapps b.auteur {
	display:block;
	color:var(--note-text-color);
	background:var(--note-background-color);
	padding: 4px 20px;
	float:right;
	border-radius:0 0 0 10px;
	border:1px solid var(--second-border-color);
}
#listapps p.tags {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#listapps p.tags i {
	padding:0 1em;
	color:#aaa;
}
#references {
	margin:2em 0;
	padding:10px;
	background:#F0F0F0;
	border-top:1px solid #C0C0C0;
	border-bottom:1px solid #C0C0C0;
	font-size:75%;
}


#references h2 { width:95%; margin:0px auto; border-bottom:3px solid LightGray; color: DarkSlateGray; }
#references ul { width:95%; margin:1em auto; }
#references ul li a  { color:blue; }
#main form { width:95%; margin:1em auto; }
#main form fieldset { padding:1em; border-bottom:2px solid var(--second-border-color); }
#main form fieldset legend { padding:0.5em 1em; }
#main form fieldset input.text,
#main form fieldset textarea { display:block;  width: 90%; };

#reference ul li { text-align:left; }

#ok,#ok2 { background: var(--OK-color); }
#error { background: #fdd; }

#listapps div {
	background:var(--second-background-color);
	width:95%;
	border: 1px solid var(--second-border-color);
	border-radius:8px;
	margin-bottom: 2rem;
}

#main #listapps > div { overflow: hidden; }
#main #listapps div a.icon { float:left; margin:5%; width:100px; }
#main #listapps div em.device { display:block; float:left; margin:8px; }
#main #listapps div a.icon img { width:100%; height:auto; border-radius:8px; box-shadow:0px 0px 4px; }
body.mac #main #listapps div a.icon img { box-shadow:0 0 0; }
#main #listapps div h3 { margin-left: 30%; text-align:left; }
#main #listapps div pre { font-family:sans-serif; font-size:0.85em; margin-left: 30%; text-align:left; width:60%; }
#main #listapps div p { margin-left: 30%; text-align:left; width:60%; }
#main #listapps div div.video { margin-left: 30%; text-align:center; width:60%; border:0; }
#main #listapps div p.liens { text-align:center; line-height:220%; margin-bottom:2em; }
#main #listapps div p.liens a { display:inline-block; height:30px; margin:1em; }
#main #listapps div p.liens a span { padding-top:6px; }
#main #listapps div div.release { border:0; box-shadow:none; font-size:70%; color:gray; clear:both; margin-left: 30%; width:60%;}
#main #listapps div div.release h4 { float:left; width:100px; padding:10px; margin:0; }
#main #listapps div div.release p { padding:10px; margin-left: 120px; width:auto; }
#main #listapps div p.tags { text-align:center; }
#main #listapps div.app p.ios { text-align:center; }
#main #listapps div.app p.ios b { border:2px solid var(--main-text-color); border-radius:0.2em; padding:2px 0.25em; }

@media (max-width:320px) {
	#listapps div { margin:0; padding:0; border:0; border-bottom: 1px solid gray; border-radius:0; }
	#main #listapps div a.icon img { width:50px; height:50px; }
	#main #listapps div h3 { margin-left: 70px; }
	#main #listapps div p { margin-left: 70px; }
}

/* #app pour toutes les apps du répertoire /apps/ */

#app {
	border:1px solid var(--second-border-color);
	border-radius: 8px;
	background:var(--second-background-color);
	margin:10px auto;
	width:95%;
}
#app div { text-align:left; }
#app div { clear:both; border-top:1px solid #eee; padding:1px;}
#app div.foot { border-top:0; }
#app p img { float:left; clear:both; margin:0 20px 20px 0; }

/* #content utilisé dans index.html, news.html, ipad.html et iphone.html */

#content {
	text-align:center; 
	}
#content p { text-align:justify; }
#content > div,
#content > section { width:95%; max-width:1024px;  margin:1em auto; }
#content div.sep { clear:both; }



#content #twitter { margin-top:1em; }
#content #twitter div.twtr-tweet { font-size:1em ; border-top:1px solid #AAA; }
#content #twitter div.twtr-tweet a { font-size:0.75em; font-weight:400;  }
#content #twitter div.twtr-tweet em { margin:10px; }
#content #twitter div.twtr-tweet em a { font-size: 10px; font-weight: bold; }

body.ibook #main #content article {
	clear:both;
	margin-bottom:3em;
}

body.ibook #main #content article a.book {
	float:left;
	margin:2em;
	width:20%;
}
body.ibook #main #content article a.book img {
	width:100%;
}

body.ibook #main #content article.mini { display: inline-block; width:180px; margin:1em; }
body.ibook #main #content article.mini div { text-align:right; margin:0; padding:0; line-height:3em; }
body.ibook #main #content article.mini div a { width:180px;  margin:1em 0; padding:0; font-size:90%; }


/* #emailsec utilisé dans contact.html */

#emailsec form { margin: 1em; }
#emailsec input,
#emailsec select,
#emailsec textarea { width:90%; margin-bottom:1em; }
#emailsec input.submit { padding:10px; border-radius:8px; background:gray; color:white; font-weight:normal; letter-spacing:1px; text-decoration:none; }

/* #lastnews utilisé dans news.html */ 

#lastnews div.media img{ width:80%; margin:10px; background: white; border:1px solid gray;}
#lastnews div.message { text-align:justify; }
div.message ul li { text-align:left; }
div.message p a { color:#49B; text-decoration:none;  }

#lastnews div.message a { color:darkblue; font-weight:normal; text-decoration:underline; }
#lastnews div.media {
	display:block;
	text-align:center;
	width:95%;
	margin:auto;
	}

/* #content ul.tags utilisé dans ipad.html et iphone.html */

#content ul.tags {
	display:block;
	text-align:center;
	width:95%;
	margin:0 auto;
	padding:0;
	}
#content ul.tags li {
	margin:4px 0;
	display:inline-block;
	padding:4px 8px;
	font-size:12px;
	background:var(--main-background-color);
	border-radius:4px;
	border:1px solid #eee;
	/* box-shadow:0px 0px 4px; */
	}
#content ul.tags li:hover {
	background:#f8f8f8;
	border:1px solid #ddd;
}
#tags ul.tags li a.selected {
	text-decoration:underline;
	}
#content ul.tags li.date {
	float:left;
	font-weight:bold;
	}

#menu ul li {
	display:inline-block;
	padding:4px 2em;
	}

#content div.download { 
	margin-top:1em;
	text-align:right;
	}

#main span.groupe { display:inline-block; text-align:center; background:rgba(128,128,128,0.1); border-radius:16px; margin:2em; padding:1em; }
#main span.groupe a { color:var(--main-text-color); }

#main span.download-IOS { display:inline-block; width:126px; height:40px; background:url(/images/download-IOS-black.svg) no-repeat; }
#main span.download-Mac { display:inline-block; width:156px; height:40px; background:url(/images/download-Mac-black.svg) no-repeat; }
#main span.download-TV  { display:inline-block; width:113px; height:40px; background:url(/images/download-TV-black.svg) no-repeat; }
#main span.link-pdf     { display:inline-block; width:135px; height:40px; background:url(/images/link-pdf-black.svg) no-repeat; }
#main span.link-video   { display:inline-block; width:135px; height:40px; background:url(/images/link-video-black.svg) no-repeat; }
#main span.link-elevedb { display:inline-block; width:135px; height:40px; background:url(/images/link-elevedb-black.svg) no-repeat; }
@media (prefers-color-scheme:dark) {
	#main span.download-IOS { background-image:url(/images/download-IOS-white.svg) ; }
	#main span.download-Mac { background-image:url(/images/download-Mac-white.svg) ; }
	#main span.download-TV  { background-image:url(/images/download-TV-white.svg) ; }
	#main span.link-pdf     { background-image:url(/images/link-pdf-white.svg); }
	#main span.link-video   { background-image:url(/images/link-video-white.svg); }
	#main span.link-elevedb { background-image:url(/images/link-elevedb-white.svg); }
}

#video video {
	border:1px solid #C0C0C0;
	background:var(--main-background-color);
	padding:10px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
}

#apps iframe { width:95%; height:280px; }
#apps ul li { text-align:left; list-style:none; display:inline-block; padding:4px 0; width:49%;  }

.CP  { background: #41DB6C; }
.CE1 { background: #5DC9F8; }
.CE2 { background: #2679FC; }
.CM1 { background: #FF3237; }
.CM2 { background: #FF9426; }

#main h2 {
	margin-top: 2em;
	border-bottom: 1px solid var(--second-border-color);
	color:var(--titre-text-color);
	text-align: center;
}

#main h1,
#main h2,
#main p, #main pre {
	width:90%;
	padding:4px 1em;
	margin:10px auto;
}
#main h3 {
	width:80%;
	padding:4px 4px;
	margin:4px auto 1em auto;
}
#main h4 {
	text-align:left;
}

#main pre {
	width:80%;
	text-align:justify;
	}

#main h2{
	margin:40px auto;
}






#copyright, 
#footer {
	clear:both;
	bottom:0;
	right:0;
	left: 0;
	color:gray;
	border-top:1px solid lightgray;
	margin-top:100px;
	padding-left:2em;
	padding-top:5px;
	font-size:50%;
	text-align:center;
}

#footer p {
	padding:10px;
	font-weight:300;
	line-height:150%;
	width:90%;
	margin:0 auto;
}

#footer h2 {
	padding:10px;
	border-top:1px solid #ccc;
	font-weight:300;
	line-height:150%;
}

#footer a { white-space:nowrap; }
#footer h2 a { color:#456; }

#footer div.right {
	float:right;
	margin-right:2em;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
	#header, #menu, #submenu, #footer { display:none; }

    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited { text-decoration: underline; } 
    a[href]:after { content: " (" attr(href) ")"; } 
    abbr[title]:after { content: " (" attr(title) ")"; } 
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 
    thead { display: table-header-group; /* h5bp.com/t */ } 
    tr, img { page-break-inside: avoid; } 
    img { max-width: 100% !important; } 
    p, h2, h3 { orphans: 3; widows: 3; } 
    h2, h3 { page-break-after: avoid; }

    @page { margin: 0.5cm; } 
}


/* ================================================================================ */

.gg-trash {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 10px;
    height: 12px;
    border: 2px solid transparent;
    box-shadow:
        0 0 0 2px,
        inset -2px 0 0,
        inset 2px 0 0;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    margin-top: 4px
}

.gg-trash::after,
.gg-trash::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}

.gg-trash::after {
    background: currentColor;
    border-radius: 3px;
    width: 16px;
    height: 2px;
    top: -4px;
    left: -5px
}

.gg-trash::before {
    width: 10px;
    height: 4px;
    border: 2px solid;
    border-bottom: transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    top: -7px;
    left: -2px
}