/**
 * @title       GUI Styles
 * @tree        #popin
 */

#popin {
    margin:30px auto 0 auto; padding:20px; border:1px solid #bebebe;
    width:420px;
    background:#fff url(/templates/ifop/images/common/bg/bg-popin.jpg) repeat-x;
    z-index:1001;
}

#popinVideo {
    margin:30px auto 0 auto; padding:20px; border:1px solid #bebebe;
    width:610px;
    background:#fff url(/templates/ifop/images/common/bg/bg-popin.jpg) repeat-x;
    z-index:1001;
}

#popin a.closePopin {
    position:absolute; top:5px; right:10px;
}
a.closePopin {
    padding-left:15px;
    color:#333;
    background:url(/templates/ifop/images/common/pictos/picto-close.png) no-repeat 0 .3em;
    font-size:10px;
}

#popin h1 {
    margin-bottom:.8em; padding-bottom:.4em; border-bottom:1px solid #bebebe;
    color:#903;
    font:bold 14px Garamond, "Hoefler Text", "Times New Roman", Times, serif;    
    text-transform:uppercase;
}
#popin h2 {
    padding-bottom:.4em;
    color:#903;
    font:bold 12px Arial, "Helvetica Neue", Helvetica, sans-serif;    
    text-transform:uppercase;
}
#popin p {
    padding-bottom:1em;
}
#js .popinFlash {
	width:388px;
}
#js .popinFlash #id_flash {
	position:relative;
	left:-14px;
	margin-bottom:-15px;
}
#js #popin {
	position:absolute;
	margin:0;
}

/**
 * @section        Send friend
 * @tree           #sendFriend < #popin
 */
#sendFriend .text {
    height:30px;
}
#sendFriend .text label {
    float:left;
    width:170px;
}
#sendFriend .text input {
    float:left;
    width:243px;
}
#sendFriend .textarea label {
    margin:0; padding:.4em 0; border:0;
    color:#333;
    font:normal 11px Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform:none;
}
#sendFriend .textarea textarea {
    width:414px; height:120px;
}
#sendFriend .actions input {
    float:right;
    margin:0; padding:0;
    width:72px; height:17px;
}

/**
 * @section        Mentions Legales
 * @tree           #legal < #popin
 */
#legal h1 {
    padding-bottom:.8em;
    color:#903;
    font:bold 18px Garamond, "Hoefler Text", "Times New Roman", Times, serif;    
    text-transform:uppercase;
}
/* l'élément de base est stylé différemment si JS dispo
   overflow:hidden et dimensions sont obligatoires */
#js #legal .popinScrollable {
  position:relative;
  overflow:hidden;
  border:none;
  width:430px; height:500px;
}

/* styles de l'élément inséré en JS, avec scroll actif ou non */
#js #legal .popinScrollable .scrolled, #js #legal .popinScrollable .notScrolled {
  padding:5px 0 1px 5px;
  width:400px;
}
/* quand le scroll est actif, l'élément doit être positionné en absolu */
#js #legal .popinScrollable .scrolled {
  position:absolute; top:0; left:0;
}


/* styles du conteneur de la scrollbar */
#js #legal .popinScrollable .scrollbar {
  position:absolute; top:1px; left:415px;
  width:15px; height:500px;
}

/* styles de la gouttière de l'ascenceur : la hauteur est primordiale ! */
#js #legal .popinScrollable .gutter {
  position:absolute; top:17px; left:0;
  width:15px; height:465px;
}

/* styles de l'ascenceur, positionnée obligatoirement en absolu 
   il est recommendé d'utiliser un overflow:hidden pour IE */
#js #legal .popinScrollable .bar {
  position:absolute; top:0; left:0;
  overflow:hidden;
  width:15px;
  background:url(/templates/ifop/images/common/scrollbar.png) repeat-y;
}
#js #legal .popinScrollable .bar .start, #js #legal .contentScrollable .bar .end {
  position:absolute; left:0;
  overflow:hidden;
  width:15px; height:1px;
  background:url(/templates/ifop/images/common/scrollbar.png) repeat-y;
}
#js #legal .popinScrollable .bar .start {
  top:0;
  background-position:-15px 0;
}
#js #legal .popinScrollable .bar .end {
  bottom:0;
  background-position:-15px -15px;
}

/* styles des boutons */
#js #legal .popinScrollable .prev, #js #legal .popinScrollable .next {
  position:absolute; left:0;
  overflow:hidden;
  width:15px; height:15px;
  background:url(/templates/ifop/images/common/scrollbar.png) no-repeat;
}
#js #legal .popinScrollable .prev {
  top:0;
  background-position:-30px 0;
}
#js #legal .popinScrollable .next {
  top:485px;
  background-position:-45px 0;
}


/**
 * @section        Simple
 * @tree           #simplePopin < #popin
 */
#simplePopin h1 {
    padding-bottom:.8em;
    color:#903;
    font:bold 18px Garamond, "Hoefler Text", "Times New Roman", Times, serif;    
    text-transform:uppercase;
}
/* l'élément de base est stylé différemment si JS dispo
   overflow:hidden et dimensions sont obligatoires */
#js #simplePopin .popinScrollable {
  position:relative;
  overflow:hidden;
  border:none;
  width:430px; height:500px;
}

/* styles de l'élément inséré en JS, avec scroll actif ou non */
#js #simplePopin .popinScrollable .scrolled, #js #simplePopin .popinScrollable .notScrolled {
  padding:5px 0 1px 5px;
  width:400px;
}
/* quand le scroll est actif, l'élément doit être positionné en absolu */
#js #simplePopin .popinScrollable .scrolled {
  position:absolute; top:0; left:0;
}


/* styles du conteneur de la scrollbar */
#js #simplePopin .popinScrollable .scrollbar {
  position:absolute; top:1px; left:415px;
  width:15px; height:500px;
}

/* styles de la gouttière de l'ascenceur : la hauteur est primordiale ! */
#js #simplePopin .popinScrollable .gutter {
  position:absolute; top:17px; left:0;
  width:15px; height:465px;
}

/* styles de l'ascenceur, positionnée obligatoirement en absolu 
   il est recommendé d'utiliser un overflow:hidden pour IE */
#js #simplePopin .popinScrollable .bar {
  position:absolute; top:0; left:0;
  overflow:hidden;
  width:15px;
  background:url(/templates/ifop/images/common/scrollbar.png) repeat-y;
}
#js #simplePopin .popinScrollable .bar .start, #js #simplePopin .contentScrollable .bar .end {
  position:absolute; left:0;
  overflow:hidden;
  width:15px; height:1px;
  background:url(/templates/ifop/images/common/scrollbar.png) repeat-y;
}
#js #simplePopin .popinScrollable .bar .start {
  top:0;
  background-position:-15px 0;
}
#js #simplePopin .popinScrollable .bar .end {
  bottom:0;
  background-position:-15px -15px;
}

/* styles des boutons */
#js #simplePopin .popinScrollable .prev, #js #simplePopin .popinScrollable .next {
  position:absolute; left:0;
  overflow:hidden;
  width:15px; height:15px;
  background:url(/templates/ifop/images/common/scrollbar.png) no-repeat;
}
#js #simplePopin .popinScrollable .prev {
  top:0;
  background-position:-30px 0;
}
#js #simplePopin .popinScrollable .next {
  top:485px;
  background-position:-45px 0;
}
#popin.popinVideo {
	width: 647px;
	height: 402px;
	padding: 0;
}