Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88

/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}

a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}

h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}

.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}

.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}

.tabSelected{color:[[ColorPalette::PrimaryDark]];
	background:[[ColorPalette::TertiaryPale]];
	border-left:1px solid [[ColorPalette::TertiaryLight]];
	border-top:1px solid [[ColorPalette::TertiaryLight]];
	border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}

.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
	border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
	border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
	border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}
	
.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}

#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}

.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}

.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}

.tiddler .defaultCommand {font-weight:bold;}

.shadow .title {color:[[ColorPalette::TertiaryDark]];}

.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}

.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}

.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}

.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}

.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}

.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}

.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}

.imageLink, #displayArea .imageLink {background:transparent;}

.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}

.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}

.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}

.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}

.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}

.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}

#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:'alpha(opacity:60)';}
/*}}}*/

/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 1em 1em; left:0px; top:0px;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0em 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0em 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0em 0em 0em; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0em;}
.wizardFooter .status {padding:0em 0.4em 0em 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em 0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0em; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em 0.2em 0.2em 0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0em;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0em 0em 0.5em;}
.tab {margin:0em 0em 0em 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0em 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0em 1em;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0em 0.25em; padding:0em 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0em; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}

.fieldsetFix {border:0; padding:0; margin:1px 0px 1px 0px;}

.sparkline {line-height:1em;}
.sparktick {outline:0;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.1em 0.4em 0.1em 0.4em; margin:0.1em 0.1em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/

/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/

/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none ! important;}
#displayArea {margin: 1em 1em 0em 1em;}
/* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
noscript {display:none;}
}
/*}}}*/

<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->

<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->

<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<!--}}}-->

To get started with this blank TiddlyWiki, you'll need to modify the following tiddlers:
* SiteTitle & SiteSubtitle: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* MainMenu: The menu (usually on the left)
* DefaultTiddlers: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>

These InterfaceOptions for customising TiddlyWiki are saved in your browser

Your username for signing your edits. Write it as a WikiWord (eg JoeBloggs)

<<option txtUserName>>
<<option chkSaveBackups>> SaveBackups
<<option chkAutoSave>> AutoSave
<<option chkRegExpSearch>> RegExpSearch
<<option chkCaseSensitiveSearch>> CaseSensitiveSearch
<<option chkAnimate>> EnableAnimations

----
Also see AdvancedOptions

<<importTiddlers>>

<<tiddler {{spgiPresenteAbAct()}}>>
!Formule d'abonnement : <script>return window.spgi.formulesAb[window.spgi.formuleAct].nom</script>

!!A savoir sur les abonnements :
<<tiddler InfosGeneralesAb>>

Si vous n'êtes pas concerné par cette formule d'abonnement, cliquez sur [[Accueil|PageAccueil]], ou cliquez sur [[Abonnements|ListeFormulesAb]] pour choisir une autre formule d'abonnement.

//Quand vous aurez correctement renseigné tous vos choix pour votre abonnement, cliquez sur ce// <<spgiInputButton 'bouton pour valider votre abonnement' 'Ajoute cet abonnement au panier' 'spgiOnClickValideAb()'>>

<<spgiLignesFormuleAbSaisie>>

<<tiddler {{spgiPresenteAbAct()}}>>
!Formule d'abonnement : <script>return window.spgi.formulesAb[window.spgi.formuleAct].nom</script>

!!A savoir sur les abonnements :
<<tiddler InfosGeneralesAb>>

Si vous n'êtes pas concerné par cette formule d'abonnement, cliquez sur [[Accueil|PageAccueil]], ou cliquez sur [[Abonnements|ListeFormulesAb]] pour choisir une autre formule d'abonnement.

<<spgiInputButton "Vous abonner avec cette formule" "Ajouter cette formule d'abonnement au panier" "spgiSetTiddler('AbEnVente', 'formuleAct', window.spgi.formuleAct)">>

!Choix du mode de paiement

Vous allez maintenant effectuer le paiement de votre panier.
Cette opération sera prise en charge par notre partenaire de paiement sécurisé, vous allez donc être rerouté vers une page sécurisée pour effectuer votre paiement par carte bancaire ou autre moyen de paiement électronique.

N'oubliez pas que, faute de paiement, vos places ne vous seront réservées que __''une heure''__, passé ce délai elles seront libérées et remises à la vente.

<script>
var g = window.spgi;
var somme = spgiCentimesAPayer();
return '<html><form  name="SPayBoxForm" action="' + g.serveurAppURL + 'AnnuleUnPanier" method="get"><input type="hidden" name="op" value="xpaybox"/><input type="hidden" name="montant" value="' + somme + '"/><input type="hidden" name="ref" value="' + g.idSociete + '-' + g.key + '"/><input type="submit" value="Effectuer le paiement de ' + toMoneyChar(g.aPayer) + ' sur PayBox" label="Paiement sécurisé PayBox" onClick="hadConfirmExit=true;"/></form></html>';
</script>

Background: #ffffff
Foreground: #ffffff

/% PALETTE 1 %/
Primary1: #ffffff
Primary2: #eeeeee
Primary3: #c5c5c5
Primary4: #aaaaaa
Primary5: #777777
Primary6: #000000

/% PALETTE 2 %/
Secondary1: #d70067
Secondary2: #009e9c
Secondary3: #ffeb00
Secondary4: #841

/% PALETTE 3 %/
Tertiary1: #eee
Tertiary2: #ccc
Tertiary3: #999
Tertiary4: #666

Error: #f88

PageAccueil

<html>
<style>
.rolodex table {
border: 0px solid;
}

.rolodex tr, .rolodex td {
border: 0px solid;
}
</style>
</html><<tabs addressBookTabs
Client "Renseignements sur la personne (Email Adresse, etc.)" tabFicheClient
Paniers "Historique des paniers" tabPaniersClient
Paiements "Liste des paiements effectués" tabPaiementsClient
Factures "Listes des factures émises" tabFacturesClient
>>

<html>
	<form id="IdClientForm" name="IdClientForm" action='return false;' class="rolodex">
		<p>Pour que nous puissions retrouver votre dossier, vous devez vous identifier clairement. Pour cela vous pouvez saisir, soit votre nom <u>et</u> votre adresse email (tels que vous nous les avez préalablement donnés), soit votre numéro de client (que nous vous aurions fourni précédemment).<br/>
		<br/>
		Dans les deux cas, vous devez aussi saisir votre mot de passe secret pour éviter que n'importe qui puisse se faire passer pour vous.<br/>
		<div>
			<div style="float: left">
				<table class="IdClientFormTable">
					<th colspan="2">Je n'ai pas mon numéro de client</th>
					<tr>
						<td >Nom : </td>
						<td><input name="nomClient" type="text" size="30" maxlength="23" tabindex="1"/></td>
					</tr>
					<tr>
						<td>Mail : </td><td><input name="emailClient" type="text" size="30" maxlength="123" tabindex="2"/></td>
					</tr>
					<tr>
						<td>Mot de passe : </td>
						<td><input name="mdpClient2" type="password" size="30" maxlength="15" tabindex="3"/></td>
					</tr>
					<tr align="center">
						<td colspan="2"><input type="button" href="javascript:;" onClick="spgiRequestClient()" name="valider2" value="Valider" tabindex="4"/></td>
					</tr>
				</table>
			</div>
			<div>
				<table class="IdClientFormTable">
					<th colspan="2">J'ai un numéro de client</th>
					<tr>
						<td>Numéro de client </td>
						<td><input name="numeroClient" type="text" size="15" maxlength="10" tabindex="5"/></td>
					</tr>
					<tr>
						<td>Mot de passe : </td>
						<td><input name="mdpClient" type="password" size="15" maxlength="15" tabindex="6"/></td>
					</tr>
					<tr align="center">
						<td colspan="2"><input type="button" href="javascript:;" onClick="spgiRequestClient()" name="valider" value="Valider" tabindex="7"/></td>
					</tr>
				</table>
			</div>
		</div>	
		<br>
		<h2>Si vous avez oublié votre mot de passe :</h2>
		<p>
			Si vous avez oublié votre mot de passe, cliquez sur ce bouton pour <input type="button" href="javascript:;" onClick="spgiRequestMdpClient()" name="reqMdp" value="Demander l'envoi de votre mot de passe" tabindex="8">, après vous être identifié par l'une des deux méthodes.<br/>
			Votre mot de passe vous sera envoyé par email. Il sera envoyé à l'adresse mail <u>qui doit déjà être connue de nous</u>, déjà présente dans votre dossier client.<br/>
			<br/>
			Si votre dossier client ne comporte pas encore votre adresse email, il ne servirait à rien de la saisir ci-dessus pour que votre mot de passe vous soit envoyé.<br/>
			Il vous faudrait, dans ce cas, vous déplacer pour nous fournir votre adresse email au guichet.
		<p>
	</form>
</html><script>document.IdClientForm.nomClient.focus()</script>

* Dans un même abonnement, tous les spectacles doivent être différents.

!!Exportation en ISO-8859-15
[[Export avec scripts sur le serveur d'origine du document|http://localhost:3080/SenousritPGI/GetTiddlyWiki?model=Illiade.html&codage=ISO-8859-15&pied=foot\tw-Illkirch.txt&societe=2]]

!!Exportation en UTF-8
[[Export avec scripts sur le serveur d'origine du document|http://localhost:3080/SenousritPGI/GetTiddlyWiki?model=Illiade.html&pied=foot\tw-Illkirch.txt&societe=2]]

!!Ouvrir la billetterie sur localhost
[[Plugin|http://localhost:3080/SenousritPGI/GetTiddlyWiki?model=Illiade.html&tiddlerslist=TiddlersListPlugin&societe=2]]
[[Travail|http://localhost:3080/SenousritPGI/GetTiddlyWiki?model=Illiade.html&tiddlerslist=TiddlersListTravail&societe=2]]

[[Lien vers cette page|http://www.guichetnet.fr/oberhausbergen/index.html]]

[[TiddlyWiki|http://www.tiddlywiki.com]]

<script>if(!window.spgi.seances)spgiRequestSaison()</script><<spgiBarreOutilsListeSeances>>
<<spgiListeDeSeances>>

<script>
    var g = window.spgi;
		var t = ['<html><table class="listeDeFormulesAb"><tr><th align="center">Formule d\'abonnement</th><th align="center">Forfait</th></th><th align="center">Thème</th><th colspan="2" align="center">Période de validité</th><th align="center">Nombre de séances</th><th align="center">Minimum de séances</th></tr>'];
		var x = [1, 3, 2, 0, 6, 4, 5];
		var l = ["abonnement libre (de 5 à 55 spectacles)", "abonnement enfant - 15 ans", "abonnement jeune avec carte à tout voir", "abonnement étudiant avec carte culture", "abonnement Printemps des bretelles debout", "abonnement Printemps des bretelles 4 spectacles debout", "abonnement Printemps des bretelles 4 spectacles, dont un assis"];
/*		var x = [1, 3, 2, 0];
		var l = ["abonnement libre (de 5 à 55 spectacles)", "abonnement enfant - 15 ans", "abonnement jeune avec carte à tout voir", "abonnement étudiant avec carte culture"];*/
		var i, j, a;
		for(j = 0; j < x.length; j++) {
			i = x[j];
			a = g.formulesAb[i];
			t.push('<tr><td align="center"><a href="javascript:;" onClick="spgiSetTiddler(\'' + g.TNFormuleAbVisu + '\', \'formuleAct\', \'' + i + '\');">' + l[j] + '</a></td><td align="right">' + toMoneyChar(a.forfait) + '</td><td>' + a.theme + '</td><td>' + spgiDateSeuleToString(a.debutPeriode) + '</td><td>' + spgiDateSeuleToString(a.finPeriode) + '</td><td align="right">' + a.lignes.length + '</td><td align="right">' + a.lignesMin + '</td></tr>');
		}
		t.push("</table></html>");
		return t.join("\n");
</script>

<script>if(!window.spgi.seances)spgiRequestSaison();</script><html><a href="javascript:spgiSetTiddler('PageAccueil')" class="lienImage"><img src="/img/AccueilPetit1.png" onMouseOut="this.src='/img/AccueilPetit1.png'" onMouseOver="this.src='/img/AccueilPetit2.png'"/></a><a href="javascript:spgiSetTiddler('DossierClient')" class="lienImage"><img src="/img/VotreDossierPetit1.png" onMouseOut="this.src='/img/VotreDossierPetit1.png'" onMouseOver="this.src='/img/VotreDossierPetit2.png'"/></a><a href="javascript:spgiSetTiddler('ListeFormulesAb')" class="lienImage"><img src="/img/AbonnementsPetit1.png" onMouseOut="this.src='/img/AbonnementsPetit1.png'" onMouseOver="this.src='/img/AbonnementsPetit2.png'"/></a><a href="javascript:spgiSetTiddler('Liste générale des séances')" class="lienImage"><img src="/img/SpectaclesPetit1.png" onMouseOut="this.src='/img/SpectaclesPetit1.png'" onMouseOver="this.src='/img/SpectaclesPetit2.png'"/></a><a href="javascript:spgiSetTiddler('Panier')" class="lienImage"><img src="/img/VotrePanierPetit1.png" onMouseOut="this.src='/img/VotrePanierPetit1.png'" onMouseOver="this.src='/img/VotrePanierPetit2.png'"/></a><a href="javascript:spgiSetTiddler('PageContacts')" class="lienImage"><img src="/img/ContactsPetit1.png" onMouseOut="this.src='/img/ContactsPetit1.png'" onMouseOver="this.src='/img/ContactsPetit2.png'"/></a></html>

<html><br/><a href="javascript:spgiSetTiddler('DossierClient')" class="lienImage"><img src="/img/VotreDossierCarre.jpg"/><br/>
<a href="javascript:spgiSetTiddler('ListeFormulesAb')" class="lienImage"><img src="/img/CarteAbonnementCarre.jpg"/><br/>
<a href="javascript:spgiSetTiddler('Liste générale des séances')" class="lienImage"><img src="/img/SpectaclesCarre.jpg"/><br/>
<a href="javascript:spgiSetTiddler('Panier')" class="lienImage"><img src="/img/VotrePanierCarre.jpg"/></html>

<<spgiMiniPanier>>

!Comment utiliser ce panier.

Ce guichet comporte une page unique, celle que vous avez sous les yeux, vous ne devez donc pas utiliser les boutons « Précédent » « Suivant » ou même « Actualiser » de votre navigateur, celà quitterait ce guichet en abandonnant toutes les commandes non encore validées de votre panier.

*Le petit bouton [img[/img/miniAnnule.png]] (en début de chaque commande du panier) vous permet d'annuler une commande erronée.
*Le petit bouton [img[/img/miniModif.png]] vous permet de modifier/corriger une ligne de « __Votre panier__ ».
*Le petit bouton [img[/img/miniDeroule.png]] vous permet de voir (dérouler) le détail de la commande.
*Le petit bouton [img[/img/miniEnroule.png]] vous permet de masquer (enrouler) le détail de la commande.

Les boutons « Dossier », « Abonnements », « Spectacles » et « Votre panier » (en haut ou à droite) vous permettent de __compléter__ ou __contrôler__ votre commande.
Vous pouvez compléter « __Votre panier__ » en ajoutant des commandes, pour cela il vous suffit d'utiliser le bouton approprié, « __Abonnements__ » ou « __Spectacles__ ».

!Comment utiliser ~GuichetNet.
 
Ce guichet comporte une page unique, celle que vous avez sous les yeux, vous ne devez donc pas utiliser les boutons « Précédent » « Suivant » ou même « Actualiser » de votre navigateur, celà quitterait ce guichet ''en abandonnant toutes les commandes non encore validées'' de votre panier.
 
Vous accédez aux fonctions du guichet à l'aide des boutons « __Dossier__ », « __Abonnements__ », « __Spectacles__ » et « __Votre panier__ » (en haut ou à droite), qui vous permettent à tout moment de naviguer dans tous les recoins de ~GuichetNet sans quitter cette page.

Chaque commande (pour une séance ou un abonnement) que vous validez, vient s'ajouter à « __Votre panier__ », que vous pouvez consulter ou modifier à tout moment en utilisant le bouton « __Votre panier__ » pendant toute la durée de cette session de shopping.
Vous pouvez compléter « __Votre panier__ » en ajoutant des commandes, pour celà il vous suffit d'utiliser le bouton approprié, « __Abonnements__ » ou « __Spectacles__ ».
 
Vous pourrez plus tard revenir sur ce guichet et retrouver « __Votre Dossier__ », avec « __Votre panier__ », ou « __Vos paniers__ » si vous avez effectué plusieurs achats distincts, plusieurs « sessions de shopping ».
Tous « __Vos paniers__ » sont listés dans l'onglet « __''Paniers''__ » de « __Votre Dossier__ », vous pourrez ainsi revenir consulter « __Votre Dossier__ » quand vous le désirez, et même revenir payer « __Votre panier__ » plus tard (dans un délai raisonnable tout de même ! ) si vous n'avez pas pu le payer sur le moment.
 
Nous vous souhaitons un excellent shopping.

!Bienvenue sur le site de billetterie en ligne de l'Illiade !

Ici vous pouvez réserver vos places de spectacles, vos abonnements et accéder à votre dossier client. Faites votre choix :
<html>
	<p style="width: 33%; float: left; text-align: center"><a href="javascript:spgiSetTiddler('Liste générale des séances')" class="lienImage"><img src="/img/Reservation.jpg"/></a></p>
	<p style="width: 33%; float: left; text-align: center"><a href="javascript:spgiSetTiddler('ListeFormulesAb')" class="lienImage"><img src="/img/Abonnement.jpg"/></a></p>
	<p style="width: 33%; float: left; text-align: center"><a href="javascript:spgiSetTiddler('DossierClient')" class="lienImage"><img src="/img/Dossier.jpg"/></a></p>
</html>
<<tiddler ModeEmploiSite>>
----
!Nous contacter
<<tiddler PageContacts>>

!!Billetterie : ~Marie-Christine Schmitt
[[illiade.billetterie@mairie-illkirch-graffenstaden.fr|mailto:illiade.billetterie@mairie-illkirch-graffenstaden.fr?CC=baudry.julien@free.fr&SUBJECT=Message billetterie en ligne Illiade]]

[<img[/img/Annule.jpg][Panier]]
<script>spgiReadDataOfCli();restaurePanier()</script>Vous avez annulé l'opération de règlement de <script>return(toMoneyChar(window.spgi.refP.m))</script> en paiement de [[votre panier|Panier]].
''Votre commande n'est donc pas soldée et nous ne pourrons pas la conserver au delà d'un délai raisonnable.''

Nous vous invitons à solder votre [[panier|Panier]] par l'un des moyens de paiement qui vous sont proposés.

[<img[/img/OK.jpg][Panier]]
<script>spgiReadDataOfCli();restaurePanier()</script>Nous avons bien reçu la confirmation du règlement de <script>return(toMoneyChar(window.spgi.refP.m))</script> paiement de [[votre panier|Panier]].

Vos billet vous seront remis le soir du spectacle
(merci de présenter le titre de réduction s'il y a lieu).

[<img[/img/Refuse.jpg][Panier]]
<script>spgiReadDataOfCli();restaurePanier()</script>Nous avons été informés du refus de votre banque d'honorer le règlement de <script>return(toMoneyChar(window.spgi.refP.m))</script> en paiement de [[votre panier|Panier]].
''Votre commande n'est donc pas soldée et nous ne pourrons pas la conserver au delà d'un délai raisonnable.''

Nous vous invitons à solder votre [[panier|Panier]] par l'un des moyens de paiement qui vous sont proposés.

<!--{{{-->
<div class='header'>
	<div class='headerShadow'>
		<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
		<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
	</div>
	<div class='headerForeground'>
		<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
		<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
	</div>
</div>
<!-- horizontal MainMenu -->
<div id='topMenu' refresh='content' tiddler='MainMenu'></div>
<!-- original MainMenu menu -->
<!-- <div id='mainMenu' refresh='content' tiddler='MainMenu'></div> -->
<div id='sidebar'>
	<div id='miniPanier' refresh='content' tiddler='MiniPanier'></div>
	<div id='imgMenu' refresh='content' tiddler='MenuLateral'></div>
</div>
<div id='displayArea'>
	<div id='messageArea'></div>
	<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->

!Attention, les réservations effectuées ''et payées sur internet'' sont fermes et définitives !

<<spgiShowPanier>>
<<tiddler ModeEmploiPanier>>

''09/10 ABO CC :''
Cet abonnement est réservé aux possesseurs de la carte culture.
Le tarif est toujours de 5,5 Euros par spectacle mais vous bénéficiez de nombreux autres avantages : invitations, envoi de plaquettes à domicile, réductions dans d'autres structures culturelles .... et surtout de prendre un billet pour vos spectacles coup de coeur dès à présent. Choisissez un minimum de cinq spectacles dans l'ensemble de la saison et vous devenez abonné de l'Illiade.
Un justificatif vous sera demandé lors de la remise de vos billets à l'Illiade - soit sur rendez-vous - soit lors de votre premier spectacle.

''ABONNEMENT 09/10 ABO LIBRE:''
Pour s'abonner à l'Illiade il vous suffit de sélectionner cinq spectacles dans l'ensemble de la programmation
Les billets seront à retirer à l'Illiade - soit sur rendez-vous - soit lors de votre premier spectacle.

''09/10 CATV :''
Cet abonnement est réservé aux possesseurs de la carte à tout voir.
Le tarif est toujours de 5,5 Euros par spectacle mais vous bénéficiez de nombreux autres avantages :
invitations, envoi de plaquettes à domicile, réductions dans d'autres structures culturelles .... et surtout de prendre un billet pour vos spectacles coup de cSur dès à présent. Choisissez un minimum de cinq spectacles dans l'ensemble de la saison et vous devenez abonné de l'Illiade. Un justificatif vous sera demandé lors de la remise de vos billets à l'Illiade - soit sur rendez-vous - soit lors de votre premier spectacle.

''abo 09/10 EFT :''
Cet abonnement est réservé aux moins de quinze ans.
Le tarif est toujours de 5,5 Euros par spectacle mais vous bénéficiez de nombreux autres avantages :
invitations, envoi de plaquettes à domicile, réductions dans d'autres structures culturelles .... et surtout de prendre un billet pour vos spectacles coup de cSur dès à présent. Choisissez un minimum de cinq spectacles dans l'ensemble de la saison et vous devenez abonné de l'Illiade. Un justificatif vous sera demandé lors de la remise de vos billets à l'Illiade - soit sur rendez-vous - soit lors de votre premier spectacle.

''ABONNEMENT 09/10 PRI 04:''

''Le pass classique à 25 euros'', au lieu de 76 euros, qui vous permet d'assister à 5 spectacles. vous en choisissez 4, quels que soient leurs tarifs, dans tous ceux proposés pendant le festival et le bal d'ouverture vous est offert ! Si vous souhaitez rajouter un ou plusieurs spectacle(s) supplémentaire(s), le Pass'Bretelles classique vous permet d'accèder au ''tarif abonné''.


Si vous préférez une place assise pour les concerts de l'Orchestre National de Barbès et de Thomas Fersen, vous pouvez optez plutôt pour le ''Pass'Bretelles ASSIS au tarif de 35 euros'' (uniquement en vente à l'Illiade dans la limite des places disponibles).

''ABONNEMENT 09/10 PRI TOT:''

''Le pass intégral à 50 euros'', qui vous donne accès à tous les concerts du festival que ce soit dans la Grande Salle, au Magic Mirror, à Eschau et à Geispolsheim. Attention le nombre de pass intégral est limité !

<<spgiPresentationSeance>><<spgiMakeFormTarifsSeance>>

<<search>><<closeAll>><<permaview>><<saveChanges>><<slider chkSliderOptionsPanel OptionsPanel "options »" "Changer les options avancées de TiddlyWiki">>

centre culturel - Allée François Mitterrand 67400 ~Illkirch-Graffenstaden 03.88.65.31.06

[[L'Illiade|http://www.illiade.com]]

/*{{{*/
/* a contrasting background so I can see where one tiddler ends and the other begins */
body {
	background-image: url(/oberhausbergen/img/fond.png);
	color: black;
}

#contentWrapper{
	background: [[ColorPalette::Background]];
	margin: auto;
	width: 990px;
}

/*********************** HEADER ***********************/
.header {
	background: [[ColorPalette::Background]] url("/illiade/img/minilogo_illiade_nuit.jpg") no-repeat 890px 0px;
	height: 60px;
}

.header a{text-decoration: none;}

.headerForeground{
	left: 1px;
	top: 1px;
	position: static;
}
.headerForeground, .headerForeground a{color: [[ColorPalette::Primary3]];}
.headerShadow, .headerShadow a{
	color: black;
	text-decoration: none;
}
.headerForeground, .headerShadow{
	padding: 1em 1em 0;
	font-family: 'Trebuchet MS' sans-serif;
	font-weight:bold;
}
.headerForeground .siteSubtitle{color: [[ColorPalette::Primary2]];}
.headerShadow .siteSubtitle{color: [[ColorPalette::Primary3]];}

/******************************************** SHADOW ********************************************/
.headerShadow{position: absolute;}

/* prefer monospace for editing */
.editor textarea{font-family: 'Consolas' monospace;}

/******************************************** SEANCE ********************************************/

.lblComplet {
	background-color: #ffa0a0;
	color: black;
}

.datesSpectacle{clear: left;}

.datesSpectacle table{
	background-color: transparent;
	border-style: none;
	margin: 0;
	width: 100%;
}

.datesSpectacle tr{
	border-top: 2px solid [[ColorPalette::Primary4]];
	border-bottom: 0px;
	border-right: 0px;
	text-align: left;
}

.datesSpectacle th{
	border-style: none;
	color: [[ColorPalette::Primary2]];
	width: auto;
}

.datesSpectacle td{
	background-color: [[ColorPalette::Primary3]];
	border-style: none;
}

.imgSeance{
	color: white;
	border-style: solid;
	border-width: 1px;
	float: left;
	margin: 0px 10px 2px 10px;
}

.seanceEnCommande{
/*	background-color: [[ColorPalette::Primary2]];*/
	border: 1px solid black;
	padding: 10px;
	margin-bottom: 10px;
	text-align: left;
}

/*.infosSeance{text-align: left;}*/

.presentationSeance{
	margin-top: 15px;
	text-align: justify;
}

.imgSpectacle{
	background-color: [[ColorPalette::Primary1]];
	border: 1px solid [[ColorPalette::Primary5]];
	margin: 0px;
	height: 80px;
}

.listePresentationSpectacle{}

.presentationSpectacle{
	background-color: [[ColorPalette::Primary2]];
	border: 1px solid [[ColorPalette::Primary3]];
	clear: left;
	margin-top: 10px;
	min-height: 85px;
	padding: 5px;
}

.infosSpectacle hr{
	border: 1px dashed [[ColorPalette::Primary3]];
	color: [[ColorPalette::Primary3]];
	height: 1px;
}

.textePresentationSpectacle{
	clear: left;
	padding-top: 5px;
	text-align: justify;
}

.actionsSpectacle{
	float: right;
	text-align: right;
}

.zoneImageSpectacle{
	float: left;
	margin-right:10px;
	text-align: right;
	min-width: 110px;
}

/******************************************** TIDDLERS ********************************************/

a{color: [[ColorPalette::Secondary2]];}

a:hover{
	color: [[ColorPalette::Secondary2]];
	background-color: [[ColorPalette::Secondary3]];
}

table{
	color: [[ColorPalette::Primary6]];
	background-color: [[ColorPalette::Primary2]];
	border: 1px solid [[ColorPalette::Primary4]];
}

tr, td{border: 1px solid [[ColorPalette::Primary3]];}

th{border: 1px solid [[ColorPalette::Primary4]];}

.littleTitle{
	font-size: 150%;
	color: [[ColorPalette::Secondary1]];
}

.title{
	color: [[ColorPalette::Secondary1]];
	font-size: 250%;
	line-height: 100%;
}

/* more subtle tiddler subtitle */
.subtitle{
	padding:0px;
	margin:0px;
	padding-left:0.5em;
	font-size: 90%;
	color: [[ColorPalette::Primary1]];
}
.subtitle .tiddlyLink{color: [[ColorPalette::Primary1]];}

/* a little bit of extra whitespace */
.viewer{padding: 2px 3px 0px;}

/* don't want any background color for headings */
h1,h2,h3,h4,h5,h6{
	background: [[ColorPalette::Background]];
	color: [[ColorPalette::Primary5]];
}

h1{
	font-size: 200%;
	line-height: 100%;
	font-family: 'Trebuchet MS' sans-serif;
}

/* give tiddlers 3d style border and explicit background */
.tiddler{
	background: [[ColorPalette::Background]];
	padding: 0;
}

.classicLink{
	color: [[ColorPalette::Primary1]];
	background: transparent;
}

.classicLink:hover{
	background: [[ColorPalette::Primary3]];
	color: [[ColorPalette::Primary2]];
}

/******************************************** MINI PANIER ********************************************/
.miniPanier table{
	border-collapse:collapse;
	border-color: [[ColorPalette::Primary3]];
	border-style: solid;
	border-width: 2px;
	color: [[ColorPalette::Primary4]];
	margin-top: 10px;
}

.miniPanier tr, .miniPanier td{
	border-collapse:collapse;
	border-color: [[ColorPalette::Primary3]];
	border-style: solid;
	border-width: 1px;
}

.miniPanier{
	color: [[ColorPalette::Primary2]];
	margin-top: 1em;
	width: 160px;	
}

/******************************************** TABLEAU **********************************************/

table{border: 1px solid [[ColorPalette::Primary3]];}

/******************************************** CLASS SPGI ********************************************/

.button{
	background: [[ColorPalette::Primary1]];
	border-color :[[ColorPalette::Secondary2]];
	cursor: pointer;
}

.button:hover{
	border-color: [[ColorPalette::Secondary1]];
	color: [[ColorPalette::Secondary1]];
}

.colorLigneSpectacle{background-color: [[ColorPalette::Primary1]];}

.lienImage{
	background: transparent;
	border-style: none;
	line-height: 0;
}

.listeDeFormulesAb th, .listeDeSeances th, .panier th, .tarifsSeanceForm th, .miniPanier th , .saisieDeFormuleAb th, .IdClientFormTable th{
	background: transparent;
	background-image: url(/img/fondTopMenuOver.png);
	color: [[ColorPalette::Primary2]];
	padding-bottom: 0;
}

.tarifsSeanceForm table{
	margin:0px;
	padding: 0px;
	text-align:center;
}

.tarifsEtPlan{width: 100%;}

.imgPlan{
	vertical-align: top;
	width: 100%;
}

.finDeTable th{
	background-image: none;
	background-color: [[ColorPalette::Primary3]];
	padding: 3px;
}

.listeDeSeances , .listeDeFormulesAb, .panier{
	background-color: [[ColorPalette::Primary2]];
	text-align: center;
	margin: auto;
}

/***************************************** SELECT ****************************************/

.barreOutilsListeSeances{
	margin-bottom: 20px;
	text-align: center;
	vertical-align: middle;
}

.menuSelectTitle{
	color: [[ColorPalette::Primary2]];
	font-weight: bold;
	margin-left: 2px;
	margin-top: 4px;
}

.menuSelectTitle:hover{cursor: pointer;}

.menuSelectTitleSelected{
	color: #00fff0;
	font-weight: bold;
	margin-left: 2px;
	margin-top: 4px;
}

.subMenu{
	background-color: [[ColorPalette::Primary1]];
	-moz-opacity:0.95;
	opacity: 0.95;
	filter:alpha(opacity=5);
}

.subMenuHiden{display: none;}

.subMenuLink{
	color: [[ColorPalette::Primary4]];
	font-weight: normal;
}

.subMenuOver{
	background-color: [[ColorPalette::Primary3]];
	color: [[ColorPalette::Primary2]];
}

.subMenuSelected{
	background-color: [[ColorPalette::Primary1]];
	color: [[ColorPalette::Primary5]];
	font-weight: bold;
	-moz-opacity:0.95;
	opacity: 0.95;
	filter:alpha(opacity=5);
}

.subMenuOpen{
	background-color: transparent;
	border: 1px solid [[ColorPalette::Primary3]];
	border-top: 1px dotted [[ColorPalette::Primary4]];
	color: [[ColorPalette::Primary4]];
	display: block;
	font-weight: normal;
	margin-left: -1px;
	margin-top: 5px;
	position: absolute;
	min-width: 180px;
}

.subMenuOpen ul{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.spgiSelect{
	background-image: url(/img/Select_180x28_gris.png);
	color: [[ColorPalette::Primary2]];
	font-weight: bold;
	float: left;
	height: 28px;
	margin-right: 5px;
	margin-bottom: 5px;
	text-align: left;
	width: 180px;
}

.spgiSelectOver{
	background-image: url(/img/Select_180x28_gris_over.png);
	color: [[ColorPalette::Primary2]];
	float: left;
	font-weight: bold;
	height: 28px;
	margin-right: 5px;
	margin-bottom: 5px;
	text-align: left;
	width: 180px;
}

.spgiSelect a:hover{
	background: transparent;
	color: [[ColorPalette::Primary2]];
}

.spgiButton{
	border-style: none;
	background-image: url(/img/Bouton_180x28_gris.png);
	cursor: pointer;
	float: left;
	font-weight: bold;
	height: 28px;
	margin-right: 5px;
	margin-bottom: 5px;
	text-align: center;
	width: 180px;
}

.spgiButtonOver{
	border-style: none;
	background-image: url(/img/Bouton_180x28_Bleu.png);
	color: [[ColorPalette::Primary2]];
	cursor: pointer;
	float: left;
	font-weight: bold;
	height: 28px;
	margin-right: 5px;
	margin-bottom: 5px;
	text-align: center;
	width: 180px;
}

/******************************************** SIDEBAR ********************************************/

#sidebar{
	float: right;
	margin: 0px 3px 0px;
	position: relative;
	width: auto;
}

/* make options slider look nicer */
#sidebarOptions .sliderPanel{border:solid 1px [[ColorPalette::Primary2]];}

/* the borders look wrong with the body background */
#sidebar .button{border-style: none;}

/* displays the list of a tiddler's tags horizontally. used in ViewTemplate */
.tagglyTagged li.listTitle{display:none}
.tagglyTagged li{display: inline; font-size:90%;}
.tagglyTagged ul{margin:0px; padding:0px;}

/* this means you can put line breaks in SidebarOptions for readability */
#sidebarOptions br{display:none;}
/* undo the above in OptionsPanel */
#sidebarOptions .sliderPanel br{display:inline;}

/* horizontal main menu stuff */
#displayArea{
	margin: 0 14em 0 0;
	min-height: 600px;
	width: auto;
}

/******************************************** TOP MENU  ********************************************/
#topMenu br{display: none;}
#topMenu{
    background-image:url(/img/fondTopMenuOver.png);
    color: white;
}
#topMenu{padding:2px;}
#topMenu .button, #topMenu .tiddlyLink, #topMenu a{
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding-left: 3px;
    padding-right: 3px;
    color: white;
    font-size: 115%;
}
#topMenu .button:hover, #topMenu .tiddlyLink:hover{background: [[ColorPalette::Primary4]];}

/******************************************** FICHE CLIENT ********************************************/
#FicheClientFormTable{border: 1px solid [[ColorPalette::Primary4]];}

#FicheClientFormTable tr, #FicheClientFormTable td{border-width: 0px;}

.lienImage:hover{background-color: transparent;}

.iBtn{text-align:center;}

.tabSelected{
	background-color: [[ColorPalette::Primary1]];
	border: 1px solid [[ColorPalette::Primary3]];
	border-bottom: 0px;
}

.tabUnselected{
	background-color: [[ColorPalette::Primary2]];
	border: 1px solid [[ColorPalette::Primary3]];
	border-bottom: 0px;
	color: [[ColorPalette::Primary3]];
	padding-bottom: 0px;
}

.tabContents{border: 1px solid [[ColorPalette::Primary3]];}

.twtable th{color: [[ColorPalette::Primary4]]}

/* make it print a little cleaner */
@media print{
	#topMenu{display: none ! important;}
	/* not sure if we need all the importants */
	.tiddler{
		border-style: none ! important;
		margin:0px ! important;
		padding:0px ! important;
		padding-bottom:2em ! important;
	}
	.tagglyTagging .button, .tagglyTagging .hidebutton{display: none ! important;}
	.headerShadow{visibility: hidden ! important;}
	.tagglyTagged .quickopentag, .tagged .quickopentag{border-style: none ! important;}
	.quickopentag a.button, .miniTag{display: none ! important;}
}
/*}}}*/

//{{{
if(!story.coreDisplayTiddler) story.coreDisplayTiddler = story.displayTiddler;
if(!story.coreDisplayTiddlers) story.coreDisplayTiddlers = story.displayTiddlers;

story.displayTiddlers = function(srcElement,titles,template,animate,unused,customFields,toggle) {
	for(var t = titles.length-1;t>=0;t--)
		this.coreDisplayTiddler(srcElement,titles[t],template,animate,unused,customFields);
};

story.displayTiddler = function(srcElement,tiddler,template,animate,unused,customFields,toggle) {
	this.closeAllTiddlers(tiddler);
	this.coreDisplayTiddler(srcElement,tiddler,template,animate,unused,customFields,toggle);
};
//}}}

<!--{{{-->
<div class='viewer' macro='view text wikified'></div>
<!--}}}-->

<<spgiHistoFacturesClient>>

<html><form name="FicheClientForm" action='return false;'>
<table id="FicheClientFormTable">
 <tr style="border-bottom: 2px inset blue">
	<td colspan="2" align="center"><input type="button" onClick="spgiSetTiddler(window.spgi.TNIdClient);" name="lire" value="Retrouver mon dossier" title="Si vous avez déjà commandé sur ce site, vous pouvez retrouver votre dossier client complet en cliquant sur ce bouton" tabindex="1"/></td>
	<td colspan="2" align="right"><b>Numéro client : </b><input name="nCli" readonly type="text" size="8" style="text-align: center; color: red"/></td>
 </tr>
 <tr><td colspan="4"></td></tr>
 <tr>
	<td align="right""><b>Civilité *</b></td>
	<td><select name="civilite" tabindex="2"/>
		<option value="">- - -</option>
		<option value="Mme">Madame</option>
		<option value="Mle">Mademoiselle</option>
		<option value="Mr">Monsieur</option>
		<option value="Société">Société</option>
		<option value="Association">Association</option>
		<option value="CE">Comité d'entreprise</option>
	</select></td>
	<td align="right"><b>Tél.</b></td>
	<td><input name="tel" type="text" maxlength="15" size="23" tabindex="10"/></td>
 </tr>
 <tr>
	<td align="right"><b>Nom *</b></td>
	<td><input name="nom" type="text" maxlength="23" size="23" tabindex="3" ob="1"></td>
	<td align="right"><b>Portable</b></td>
	<td><input name="portable" type="text" maxlength="15" size="23" tabindex="11"/></td>
 </tr>
 <tr>
	<td align="right"><b>Prénom *</b></td>
	<td><input name="prenom" type="text" maxlength="23" size="23" tabindex="4" ob="1"/></td>
	<td align="right"><b>Fax</b></td>
    <td ><input name="fax" type="text" maxlength="15" size="23" tabindex="12"/></td>
 </tr>
 <tr>
	<td align="right"><b>Adresse *</b></td>
	<td colspan="3"><input name="adr11" type="text" maxlength="59" size="67" tabindex="5" ob="1"/></td>
 </tr>
 <tr>
	<td align="right"><b>Adr. suite</b></td>
	<td colspan="3"><input name="adr12" type="text" maxlength="59" size="67" tabindex="6"/></td>
 </tr>
 <tr>
	<td align="right"><b>Code postal *</b></td>
	<td><input name="cdp" type="text" maxlength="5" size="23" tabindex="7" ob="1"/></td>
	<td align="right"><b>Email *</b></td>
	<td><input name="eMail" type="text" maxlength="125" size="23" tabindex="13" ob="1"/></td>
 </tr>
 <tr>
	<td align="right"><b>Ville *</b></td>
	<td><input name="ville" type="text" maxlength="23" size="23" tabindex="8" ob="1"/></td>
	<td align="right"><b>Mot de passe *</b></td>
	<td><input name="mdp" type="password" maxlength="15" size="23" tabindex="14" ob="1"/></td>
</tr>
<tr>
	<td align="right"><b>Pays</b></td>
	<td><input name="pays" type="text" maxlength="3" size="23" tabindex="9"/></td>
	<td align="right"><b>Confirmation *</b></td>
	<td><input name="cmdp" type="password" maxlength="15" size="23" tabindex="15" ob="1"/></td>	
 </tr>
 <tr><td colspan="4"></td></tr>
 <tr style="border-top: 2px inset blue"><td colspan="4" align="center"><input type="button" onClick="spgiValideFicheClient();" name="valider" value="Valider ces informations" title="Envoie vos informations pour créer ou modifier votre dossier client" tabindex="16"/></td></tr>
</table></form></html><script>spgiFillForm("FicheClientForm", window.spgi.client);if(window.spgi.client.idx >= 0) {document.FicheClientForm.nCli.value=window.spgi.client.idx} else document.FicheClientForm.lire.focus()</script>

<<spgiHistoTransClient>>
Dans la colonne Flg, un @@color(#ff0000):E@@ indique que les billets sont édités, un @@color(#ff0000):F@@ indique que la facture a été émise, et un @@color(#ff0000):B@@ indique que la transaction comprend des produits boutique.

<<spgiHistoPayeClient>>

<<spgiHistoPaniersClient>>
Dans la colonne Flg, un @@color(#ff0000):E@@ indique que les billets sont édités, un @@color(#ff0000):F@@ indique que la facture a été émise, et un @@color(#ff0000):B@@ indique que la transaction comprend des produits boutique.