diff --git a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css index ffdd1469..9a94e285 100755 --- a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css +++ b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css @@ -29,28 +29,10 @@ input { font-size: 0.8em; } /** layout */ -#center, #sidebar-first, #sidebar-second, .footer-block .region, .header-block { +.footer-block .region, .header-block { display: inline-block; vertical-align: top; } -body.two-sidebars #center { - width: 54%; } - -body.sidebar-first #center { - width: 73%; } - -body.sidebar-second #center { - width: 80%; } - -body.no-sidebars #center { - width: 100%; } - -#sidebar-first { - width: 24%; } - -#sidebar-second { - width: 18%; } - #header, #main, #footer { padding: 0; } @@ -73,9 +55,6 @@ body.no-sidebars #center { text-align: center; color: #20c498; } -#node-63 { - color: #1f04a1; } - #thematique-anchor-links { padding: 1em 0; } #thematique-anchor-links ul { @@ -89,55 +68,221 @@ body.no-sidebars #center { margin: 0; } #thematique-anchor-links ul li { list-style: none; - padding: 0; + padding: 0 1em; margin: 0; } #thematique-anchor-links ul li a { - color: #1f04a1; text-decoration: none; font-weight: 600; } + #thematique-anchor-links ul li a span { + display: block; } + #thematique-anchor-links ul li a.en_attente { + color: #ddd; } + #thematique-anchor-links ul li a.node-32 { + color: #2f82ff; } + #thematique-anchor-links ul li a.node-14 { + color: #ff0000; } + #thematique-anchor-links ul li a.node-38 { + color: #88aa00; } + #thematique-anchor-links ul li a.node-3 { + color: #ff6600; } + #thematique-anchor-links ul li a.node-20 { + color: #ff2ad4; } + #thematique-anchor-links ul li a.node-26 { + color: #8800aa; } -.panel-thematique { +.node-thematique { background-position: center; background-size: contain; background-repeat: no-repeat; } - .panel-thematique .field-name-field-emvideo img { - width: 100%; } - .panel-thematique header.top h2 { - font-size: 2.5em; - font-weight: 300; - color: #fb3f08; } - .panel-thematique .left .field-name-body { - display: none; } - .panel-thematique .bottom .field-name-field-episodes > .field-items { - display: -ms-flexbox; - display: flex; - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -ms-flex-pack: justify; - justify-content: space-between; } - .panel-thematique .bottom .field-name-field-episodes > .field-items > .field-item { - display: block; - width: 19%; } - .panel-thematique .bottom .field-name-body { - display: none; } - -#mini-panel-th_matique { - background-image: url(../../images/fond-theme-0.png); } - -#mini-panel-th_matique-1 { - background-image: url(../../images/fond-theme-0.png); } - -#mini-panel-th_matique-2 { - background-image: url(../../images/fond-theme-0.png); } - -#mini-panel-th_matique-3 { - background-image: url(../../images/fond-theme-0.png); } - -#mini-panel-th_matique-4 { - background-image: url(../../images/fond-theme-0.png); } - -#mini-panel-th_matique-5 { - background-image: url(../../images/fond-theme-0.png); } + .node-thematique.node-32 { + background-image: url(../../images/fond-theme-0.png); } + .node-thematique.node-32 > h2, + .node-thematique.node-32 .group-video .field-name-field-description h3, + .node-thematique.node-32 .group-description .field-name-field-ecouter, + .node-thematique.node-32 .node-documentair .field-name-field-doc, + .node-thematique.node-32 .node-episode .field-name-title-field { + color: #2f82ff; } + .node-thematique.node-14 { + background-image: url(../../images/fond-theme-0.png); } + .node-thematique.node-14 > h2, + .node-thematique.node-14 .group-video .field-name-field-description h3, + .node-thematique.node-14 .group-description .field-name-field-ecouter, + .node-thematique.node-14 .node-documentair .field-name-field-doc, + .node-thematique.node-14 .node-episode .field-name-title-field { + color: #ff0000; } + .node-thematique.node-38 { + background-image: url(../../images/fond-theme-0.png); } + .node-thematique.node-38 > h2, + .node-thematique.node-38 .group-video .field-name-field-description h3, + .node-thematique.node-38 .group-description .field-name-field-ecouter, + .node-thematique.node-38 .node-documentair .field-name-field-doc, + .node-thematique.node-38 .node-episode .field-name-title-field { + color: #88aa00; } + .node-thematique.node-3 { + background-image: url(../../images/fond-theme-0.png); } + .node-thematique.node-3 > h2, + .node-thematique.node-3 .group-video .field-name-field-description h3, + .node-thematique.node-3 .group-description .field-name-field-ecouter, + .node-thematique.node-3 .node-documentair .field-name-field-doc, + .node-thematique.node-3 .node-episode .field-name-title-field { + color: #ff6600; } + .node-thematique.node-20 { + background-image: url(../../images/fond-theme-0.png); } + .node-thematique.node-20 > h2, + .node-thematique.node-20 .group-video .field-name-field-description h3, + .node-thematique.node-20 .group-description .field-name-field-ecouter, + .node-thematique.node-20 .node-documentair .field-name-field-doc, + .node-thematique.node-20 .node-episode .field-name-title-field { + color: #ff2ad4; } + .node-thematique.node-26 { + background-image: url(../../images/fond-theme-0.png); } + .node-thematique.node-26 > h2, + .node-thematique.node-26 .group-video .field-name-field-description h3, + .node-thematique.node-26 .group-description .field-name-field-ecouter, + .node-thematique.node-26 .node-documentair .field-name-field-doc, + .node-thematique.node-26 .node-episode .field-name-title-field { + color: #8800aa; } + .node-thematique > h2 { + font-size: 3em; + font-weight: 400; } + .node-thematique .content { + letter-spacing: -0.25em; } + .node-thematique .content .field-name-field-emvideo img { + width: 100%; } + .node-thematique .content > * { + letter-spacing: normal; } + .node-thematique .content article.main { + display: inline-block; + vertical-align: top; + width: 69.5%; } + .node-thematique .content article.main .field-name-body { + position: relative; + z-index: 3; } + .node-thematique .content article.main .field-name-body > * { + padding: 0 1em 0 0.2em; } + .node-thematique .content article.main .field-name-body .summary { + position: relative; } + .node-thematique .content article.main .field-name-body .summary p { + font-size: 1.3em; } + .node-thematique .content article.main .field-name-body .value { + position: absolute; + height: 0; + margin-bottom: 0; + transition: height,margin-bottom 0.5s ease-in-out; + background-color: #fff; + overflow: hidden; } + .node-thematique .content article.main .field-name-body:hover .summary { + background-color: #fff; } + .node-thematique .content article.main .field-name-body:hover .value { + height: 400px; + margin-bottom: 1em; } + .node-thematique .content article.main .field-name-body p { + padding: 0 0 1em; + margin: 0; } + .node-thematique .content article.main .group-video { + position: relative; } + .node-thematique .content article.main .group-video .group-description { + cursor: pointer; + box-sizing: border-box; + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 90%; + height: 80%; + margin: 5%; + padding: 5%; + background-color: rgba(255, 255, 255, 0); + transition: background-color 0.3s ease-in-out; } + .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter { + font-size: 1em; + font-weight: 500; + background-color: rgba(255, 255, 255, 0.9); + transition: background-color 0.3s ease-in-out; + display: inline-block; } + .node-thematique .content article.main .group-video .group-description .field-name-field-description { + opacity: 0; + transition: opacity 0.3s ease-in-out; } + .node-thematique .content article.main .group-video .group-description .field-name-field-description h3 { + font-weight: 500; + font-size: 2em; } + .node-thematique .content article.main .group-video:hover .group-description { + background-color: rgba(255, 255, 255, 0.9); } + .node-thematique .content article.main .group-video:hover .group-description .field-name-field-ecouter { + background-color: rgba(255, 255, 255, 0); } + .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description { + opacity: 1; } + .node-thematique .content aside.right { + display: inline-block; + vertical-align: top; + width: 30.5%; } + .node-thematique .content aside.right .field-name-field-eclairages { + padding-left: 1em; } + .node-thematique .content aside.right .node-documentair { + padding-bottom: 1em; } + .node-thematique .content aside.right .node-documentair .content { + position: relative; } + .node-thematique .content aside.right .node-documentair .content .group-txt { + cursor: pointer; + box-sizing: border-box; + position: absolute; + z-index: 2; + overflow: hidden; + top: 0; + left: 0; + width: 90%; + max-height: 80%; + margin: 5%; + padding: 5%; + background-color: rgba(255, 255, 255, 0.9); } + .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc { + font-size: 1em; + font-weight: 500; } + .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field { + font-size: 2em; + font-weight: 600; + height: 1px; + overflow: hidden; + transition: height 0.3s ease-in-out; } + .node-thematique .content aside.right .node-documentair .content:hover .group-txt .field-name-title-field { + height: 70%; } + .node-thematique .content aside.bottom { + padding-top: 1em; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: justify; + justify-content: space-between; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { + display: block; + width: 19%; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content { + position: relative; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt { + cursor: pointer; + box-sizing: border-box; + position: absolute; + z-index: 2; + overflow: hidden; + top: 0; + left: 0; + width: 90%; + height: 80%; + margin: 5%; + padding: 5%; + background-color: rgba(255, 255, 255, 0.3); + opacity: 0.8; + transition: opacity,background-color 0.3s ease-in-out; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field { + font-size: 4em; + font-weight: 700; + font-style: italic; + text-align: center; } + .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content:hover .group-txt { + opacity: 1; + background-color: rgba(255, 255, 255, 0.9); } #footer-bottom { text-align: center; } diff --git a/sites/all/themes/figureslibres/clameurs/css/styles.scss b/sites/all/themes/figureslibres/clameurs/css/styles.scss index 89a408e1..1edff659 100755 --- a/sites/all/themes/figureslibres/clameurs/css/styles.scss +++ b/sites/all/themes/figureslibres/clameurs/css/styles.scss @@ -28,19 +28,20 @@ input{font-family: Arial, "MS Trebuchet", sans-serif; font-size:0.8em;} // / /__/ /_/ / / /_/ / / (__ ) // \___/\____/_/\____/_/ /____/ $vert : #20c498; -$bleu : #1f04a1; -$rouge : #fb3f08; +// $bleu : #1f04a1; +// $rouge : #fb3f08; + +$coul0 : #2f82ff; +$coul1 : #ff0000; +$coul2 : #88aa00; +$coul3 : #ff6600; +$coul4 : #ff2ad4; +$coul5 : #8800aa; + + /** layout */ -#center, #sidebar-first, #sidebar-second, .footer-block .region, .header-block{ display:inline-block; vertical-align: top;} - -body.two-sidebars #center { width: 54%; } -body.sidebar-first #center { width: 73%; } -body.sidebar-second #center { width: 80%; } -body.no-sidebars #center { width: 100%; } - -#sidebar-first { width: 24%; } -#sidebar-second { width: 18%; } +.footer-block .region, .header-block{ display:inline-block; vertical-align: top;} #header, #main, #footer{ padding:0; } @@ -72,7 +73,7 @@ body{ // about #node-63{ - color:$bleu; + // color:$bleu; } #thematique-anchor-links{ @@ -84,11 +85,36 @@ body{ padding:0; margin:0; li{ list-style: none; - padding:0; margin: 0; + padding:0 1em; margin: 0; a{ - color: $bleu; + // color: $bleu; text-decoration: none; font-weight: 600; + span{ + display: block; + } + &.en_attente{ + // opacity: 0.4; + color:#ddd; + } + &.node-32{ + color:$coul0; + } + &.node-14{ + color:$coul1; + } + &.node-38{ + color:$coul2; + } + &.node-3{ + color:$coul3; + } + &.node-20{ + color:$coul4; + } + &.node-26{ + color:$coul5; + } } } } @@ -96,66 +122,241 @@ body{ } // thematique -.panel-thematique{ +.node-thematique{ background-position: center; background-size: contain; background-repeat: no-repeat; - .field-name-field-emvideo img{ - width: 100%; + + &.node-32{ + background-image: url(../../images/fond-theme-0.png); + >h2, + .group-video .field-name-field-description h3, + .group-description .field-name-field-ecouter, + .node-documentair .field-name-field-doc, + .node-episode .field-name-title-field{color: $coul0;} } - header.top h2{ - font-size: 2.5em; - font-weight: 300; - color: $rouge; + &.node-14{ + background-image: url(../../images/fond-theme-0.png); + >h2, + .group-video .field-name-field-description h3, + .group-description .field-name-field-ecouter, + .node-documentair .field-name-field-doc, + .node-episode .field-name-title-field{color: $coul1;} } - .right{ + &.node-38{ + background-image: url(../../images/fond-theme-0.png); + >h2, + .group-video .field-name-field-description h3, + .group-description .field-name-field-ecouter, + .node-documentair .field-name-field-doc, + .node-episode .field-name-title-field{color: $coul2;} } - .left{ - .field-name-body{ - display:none; - } + &.node-3{ + background-image: url(../../images/fond-theme-0.png); + >h2, + .group-video .field-name-field-description h3, + .group-description .field-name-field-ecouter, + .node-documentair .field-name-field-doc, + .node-episode .field-name-title-field{color: $coul3;} } - .bottom{ - .field-name-field-episodes{ - // letter-spacing: -0.25em; - &>.field-items{ - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - &>.field-item{ - display: block; - // letter-spacing: normal; - // display: inline-block; - width:19%; - // padding-right:1%; + &.node-20{ + background-image: url(../../images/fond-theme-0.png); + >h2, + .group-video .field-name-field-description h3, + .group-description .field-name-field-ecouter, + .node-documentair .field-name-field-doc, + .node-episode .field-name-title-field{color: $coul4;} + } + &.node-26{ + background-image: url(../../images/fond-theme-0.png); + >h2, + .group-video .field-name-field-description h3, + .group-description .field-name-field-ecouter, + .node-documentair .field-name-field-doc, + .node-episode .field-name-title-field{color: $coul5;} + } + + >h2{ + font-size: 3em; + font-weight: 400; + } + + .content{ + .field-name-field-emvideo img{width: 100%;} + + letter-spacing: -0.25em; + >*{letter-spacing: normal;} + + $main_w : 69.5%; + $right_w : 30.5%; + $gouttiere: 1em; + + // _ + // ____ ___ ____ _(_)___ + // / __ `__ \/ __ `/ / __ \ + // / / / / / / /_/ / / / / / + // /_/ /_/ /_/\__,_/_/_/ /_/ + article.main{ + display: inline-block; + vertical-align: top; + width:$main_w; + .field-name-body{ + position: relative; z-index: 3; + >*{padding:0 1em 0 0.2em;} + .summary{ + position: relative; + p{ + font-size: 1.3em; + } + } + .value{ + position:absolute; + height:0; margin-bottom: 0; + transition:height,margin-bottom 0.5s ease-in-out; + background-color: #fff; + overflow: hidden; + } + &:hover{ + .summary{background-color: #fff;} + .value{ + height:400px; margin-bottom: 1em; + } + } + p{padding:0 0 1em; margin: 0;} + } //field-name-body + .group-video{ + position: relative; + .group-description{ + cursor: pointer; + box-sizing: border-box; + position:absolute; z-index: 2; + top:0; left: 0; + width:90%; + height:80%; + margin:5%; + padding:5%; + background-color: rgba(255,255,255,0); + transition: background-color 0.3s ease-in-out; + .field-name-field-ecouter{ + font-size: 1em; + font-weight: 500; + background-color: rgba(255,255,255,0.9); + transition: background-color 0.3s ease-in-out; + display: inline-block; + } + .field-name-field-description{ + opacity: 0; + transition: opacity 0.3s ease-in-out; + h3{ + font-weight: 500; font-size: 2em + } + } + } + &:hover .group-description{ + background-color: rgba(255,255,255,0.9); + .field-name-field-ecouter{ + background-color: rgba(255,255,255,0); + } + .field-name-field-description{opacity:1;} } } } - .field-name-body{ - display:none; + + // __ + // ____/ /___ __________ + // / __ / __ \/ ___/ ___/ + // / /_/ / /_/ / /__(__ ) + // \__,_/\____/\___/____/ + aside.right{ + display: inline-block; + vertical-align: top; + width: $right_w; + .field-name-field-eclairages{ + padding-left:1em; + } + .node-documentair{ + padding-bottom: $gouttiere; + .content{ + position: relative; + .group-txt{ + cursor: pointer; + box-sizing: border-box; + position:absolute; z-index: 2; overflow: hidden; + top:0; left:0; width:90%; max-height:80%; + margin:5%; padding:5%; + background-color: rgba(255, 255, 255, 0.9); + // opacity: 0; + .field-name-field-doc{ + font-size: 1em; + font-weight: 500; + } + .field-name-title-field{ + font-size: 2em; + font-weight: 600; + height:1px; overflow: hidden; + transition:height 0.3s ease-in-out; + } + } + &:hover .group-txt .field-name-title-field{height:70%;} + } + } + } + + // _ __ + // ___ ____ (_)________ ____/ /__ _____ + // / _ \/ __ \/ / ___/ __ \/ __ / _ \/ ___/ + // / __/ /_/ / (__ ) /_/ / /_/ / __(__ ) + // \___/ .___/_/____/\____/\__,_/\___/____/ + // /_/ + aside.bottom{ + padding-top: $gouttiere; + .field-name-field-episodes{ + // letter-spacing: -0.25em; + &>.field-items{ + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + &>.field-item{ + display: block; + // letter-spacing: normal; + // display: inline-block; + width:19%; + // padding-right:1%; + + .node-episode .content{ + position: relative; + .group-txt{ + cursor: pointer; + box-sizing: border-box; + position:absolute; z-index: 2; overflow: hidden; + top:0; left:0; width:90%; height:80%; + margin:5%; padding:5%; + background-color: rgba(255, 255, 255, 0.3); + opacity: 0.8; + transition:opacity,background-color 0.3s ease-in-out; + .field-name-title-field{ + font-size: 4em; + font-weight: 700; + font-style: italic; + text-align: center; + } + } + &:hover .group-txt{ + opacity: 1; + background-color: rgba(255, 255, 255, 0.9); + } + } + } + } + } + .field-name-body{ + // display:none; + } } } } -#mini-panel-th_matique{ - background-image: url(../../images/fond-theme-0.png); -} -#mini-panel-th_matique-1{ - background-image: url(../../images/fond-theme-0.png); -} -#mini-panel-th_matique-2{ - background-image: url(../../images/fond-theme-0.png); -} -#mini-panel-th_matique-3{ - background-image: url(../../images/fond-theme-0.png); -} -#mini-panel-th_matique-4{ - background-image: url(../../images/fond-theme-0.png); -} -#mini-panel-th_matique-5{ - background-image: url(../../images/fond-theme-0.png); -} #footer{ diff --git a/sites/all/themes/figureslibres/clameurs/preprocess/field.pre.php b/sites/all/themes/figureslibres/clameurs/preprocess/field.pre.php index 8bf42ee6..818926cb 100755 --- a/sites/all/themes/figureslibres/clameurs/preprocess/field.pre.php +++ b/sites/all/themes/figureslibres/clameurs/preprocess/field.pre.php @@ -1,8 +1,33 @@ -array( + "#type"=>"markup", + "#markup"=>$element['#items'][0]['safe_summary'], + "#prefix"=>"
", + "#suffix"=>"
", + ), + 'value' =>array( + "#type"=>"markup", + "#markup"=>$element['#items'][0]['safe_value'], + "#prefix"=>"
", + "#suffix"=>"
", + ) + ); +} diff --git a/sites/all/themes/figureslibres/clameurs/preprocess/node.pre.php b/sites/all/themes/figureslibres/clameurs/preprocess/node.pre.php index 0124e3f6..37c105f7 100755 --- a/sites/all/themes/figureslibres/clameurs/preprocess/node.pre.php +++ b/sites/all/themes/figureslibres/clameurs/preprocess/node.pre.php @@ -1,7 +1,25 @@ -nid); + +if($node->type == "thematique"){ + $vars['id'] = $alias; +}else{ + $vars["classes_array"][] = $alias; + $vars['id'] = "node-".$node->nid; + + if($vars['view_mode'] == "accueil"){ + $vars['print_title'] = false; + } +} + +$vars["classes_array"][] = "node-".$node->nid; diff --git a/sites/all/themes/figureslibres/clameurs/preprocess/panels-clameur.pre.php b/sites/all/themes/figureslibres/clameurs/preprocess/panels-clameur.pre.php index 06530dcb..c752d426 100644 --- a/sites/all/themes/figureslibres/clameurs/preprocess/panels-clameur.pre.php +++ b/sites/all/themes/figureslibres/clameurs/preprocess/panels-clameur.pre.php @@ -2,10 +2,10 @@ // dsm($vars, 'vars'); - $display = $vars['display']; - $node_ctx = $display->context['requiredcontext_entity:node_1']; + // $display = $vars['display']; + // $node_ctx = $display->context['requiredcontext_entity:node_1']; // dsm($node_ctx, 'node_ctx'); // change css id with node alias to be able to link it with anchors on top menu - $vars['css_id'] = drupal_get_path_alias('node/'.$node_ctx->data->nid); + // $vars['css_id'] = drupal_get_path_alias('node/'.$node_ctx->data->nid); // dsm($vars['css_id'], 'css_id'); diff --git a/sites/all/themes/figureslibres/clameurs/templates/field--thematique--body--accueil.tpl.php b/sites/all/themes/figureslibres/clameurs/templates/field--thematique--body--accueil.tpl.php new file mode 100755 index 00000000..54604bb3 --- /dev/null +++ b/sites/all/themes/figureslibres/clameurs/templates/field--thematique--body--accueil.tpl.php @@ -0,0 +1,49 @@ + +
> + + + +
diff --git a/sites/all/themes/figureslibres/clameurs/templates/field.tpl.php b/sites/all/themes/figureslibres/clameurs/templates/field.tpl.php index 2a5e9664..f37b7a25 100755 --- a/sites/all/themes/figureslibres/clameurs/templates/field.tpl.php +++ b/sites/all/themes/figureslibres/clameurs/templates/field.tpl.php @@ -46,9 +46,13 @@
>
+ 1): ?>
> $item): ?>
>
+ + + diff --git a/sites/all/themes/figureslibres/clameurs/templates/node.tpl.php b/sites/all/themes/figureslibres/clameurs/templates/node.tpl.php new file mode 100644 index 00000000..8136f497 --- /dev/null +++ b/sites/all/themes/figureslibres/clameurs/templates/node.tpl.php @@ -0,0 +1,99 @@ +body becomes $body. When needing to + * access a field's raw values, developers/themers are strongly encouraged to + * use these variables. Otherwise they will have to explicitly specify the + * desired field language; for example, $node->body['en'], thus overriding any + * language negotiation rule that was previously applied. + * + * @see template_preprocess() + * @see template_preprocess_node() + * @see template_process() + * + * @ingroup themeable + */ +?> +
> + + + + + > + + +
> + +
+
diff --git a/sites/all/themes/figureslibres/clameurs/templates/page.tpl.php b/sites/all/themes/figureslibres/clameurs/templates/page.tpl.php index 61c468f5..d086d408 100755 --- a/sites/all/themes/figureslibres/clameurs/templates/page.tpl.php +++ b/sites/all/themes/figureslibres/clameurs/templates/page.tpl.php @@ -98,62 +98,31 @@
+ +
+ + + + + + + + + +
+ + + + + + + + +

+ - - - - - - - - - -
- - - -
- -
- - -
- - - - -
- - - - - - - - - -
-

- -
- - - - - -
- - - - - - - - - - - +