aboutsummaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
authorfriendica <info@friendica.com>2013-12-15 15:37:51 -0800
committerfriendica <info@friendica.com>2013-12-15 15:37:51 -0800
commit731ab80ac2ea78f595730ecb8f4d62d7b468d084 (patch)
tree052ec99a0905cede221b6155f568e4bcfaf25636 /assets
parent0272ab4cd9a6428396489d88c7a1a89be76e5810 (diff)
downloadvolse-hubzilla-731ab80ac2ea78f595730ecb8f4d62d7b468d084.tar.gz
volse-hubzilla-731ab80ac2ea78f595730ecb8f4d62d7b468d084.tar.bz2
volse-hubzilla-731ab80ac2ea78f595730ecb8f4d62d7b468d084.zip
set system.projecthome to 1 if you want the project page for a home page. There was a bit of re-org of mod/home, which might alter the behaviour for some existing sites. Basically we're not showing a login box at all if you've got home.html - there should be a login link in th nav bar. If you haven't defined anything at all we'll fall back to the old behaviour but still allow the home contents to be set via plugin.
Diffstat (limited to 'assets')
-rw-r--r--assets/.htaccess4
-rw-r--r--assets/diamondlattice.pngbin0 -> 534585 bytes
-rw-r--r--assets/home.html204
-rw-r--r--assets/logo_antiprism.pngbin0 -> 62321 bytes
-rw-r--r--assets/narrow.css218
-rw-r--r--assets/redmatrixlogo.pngbin0 -> 105403 bytes
-rw-r--r--assets/wide.css395
7 files changed, 821 insertions, 0 deletions
diff --git a/assets/.htaccess b/assets/.htaccess
new file mode 100644
index 000000000..ebba3d779
--- /dev/null
+++ b/assets/.htaccess
@@ -0,0 +1,4 @@
+Options -Indexes
+Deny from all
+
+
diff --git a/assets/diamondlattice.png b/assets/diamondlattice.png
new file mode 100644
index 000000000..f1ed7dbd0
--- /dev/null
+++ b/assets/diamondlattice.png
Binary files differ
diff --git a/assets/home.html b/assets/home.html
new file mode 100644
index 000000000..978139893
--- /dev/null
+++ b/assets/home.html
@@ -0,0 +1,204 @@
+<style>section { position: relative; } nav { z-index: 9999; position: fixed; width: 100%; top: 0; left: 0; } header { z-index: 10000; }</style>
+<script>
+// Scroll backgrounds at different rates to achieve the parallax effect
+$(window).scroll(function(e){
+ parallax();
+ });
+ function parallax(){
+ var scrolled = $(window).scrollTop();
+ $('.bg').css('top',-(scrolled*0.4)+'px');
+ $('.bg2').css('top',-(scrolled*0.5)+'px');
+
+}
+</script>
+<link rel='stylesheet' media='screen and (max-width: 830px)' href='assets/narrow.css' />
+<link rel='stylesheet' media='screen and (min-width: 831px)' href='assets/wide.css' />
+
+
+ <div id="header" align="center"><h1>Red Matrix</h1>
+ <div id="menubutton1"><p style="margin-top:2px;"><a href="#decentralise" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">decentralised</a></p></div>
+ <div id="menubutton2"><p style="margin-top:2px;"><a href="#identity" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">identity</a></p></div>
+ <div id="menubutton3"><p style="margin-top:2px;"><a href="#control" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">control</a></p></div>
+ <div id="menubutton4"><p style="margin-top:2px;"><a href="#freedom" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">freedom</a></p></div>
+ <div id="menubutton6"><p style="margin-top:2px;"><a href="#privacy" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">privacy</a></p></div>
+ </div>
+
+<body>
+<div class="bg"></div>
+<div class="bg2"></div>
+<div class="bg-mask"></div>
+<div id="bg-narrow"></div>
+
+
+<div class="section-heading">
+The internet is broken. We're fixing it.</div>
+
+<div>
+<div id="tagline">
+<img style="float:center;width:175px;padding:5px;" src="assets/logo_antiprism.png"><br>
+<span style="color:#808080;font-weight:bold;font-size:1.5em;">ma&middot;trix:</span><span style="color:#808080;font-weight:light;font-size:1.2em;"><i> something within or from which something else originates, develops, or takes form </i></span>
+</div>
+</div>
+
+<div id="intro-text">
+<p>Imagine an internet slightly different than what we have today. Imagine if you had an internet where the people using it could <b>create new services</b> and <b>communicate freely and privately</b> - and where you didn't need a different account on every website in the network in order to use each website. Where you had your own space and could <b>share anything you wanted</b> with anybody you wanted, any time you wanted. Where the <b>things you share in private stay private</b> instead of being under constant surveillance from advertising corporations and government intelligence agencies.
+</p>
+</div>
+
+<div class="summary-menu-container">
+<a class="summary-menu-item" href="#decentralise" >Decentralise</a>
+<a class="summary-menu-item" href="#identity" >Identity</a>
+<a class="summary-menu-item" href="#freedom" >Freedom</a>
+<a class="summary-menu-item" href="#control" >Access Control</a>
+<a class="summary-menu-item" href="#privacy" >Privacy</a>
+<a class="summary-menu-item" href="#identity" >Got Zot?</a>
+</div>
+
+<div class="summary-nodes-container">
+<div class="summary-node-1">
+<div class="summary-node-1-text">
+<div class="summary-node-header"><a href="#decentralise" style="color:#FFFFFF;text-decoration:none;margin-top:0px;font-size: 1.2em;">Decentralised</a></div>
+<div class="summary-node-text">
+<p id=menutrigger1><a href="#decentralise" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">No centralised servers means no one can censor your content or disable the network.</a></p>
+</div>
+</div>
+</div>
+<div class="summary-node-2">
+<div class="summary-node-2-text">
+<div class="summary-node-header"><a href="#identity" style="color:#FFFFFF;text-decoration:none;margin-top:0px;font-size: 1.2em;">Nomadic Identity</a></div>
+<div class="summary-node-text">
+<p id=menutrigger2><a href="#identity" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">You own and control your identity, and it can move freely inside the matrix.</a></p>
+</div>
+</div>
+</div>
+
+<div class="summary-node-3">
+<div class="summary-node-3-text">
+<div class="summary-node-header"><a href="#freedom" style="color:#FFFFFF;text-decoration:none;margin-top:0px;font-size: 1.2em;">Freedom</a></div>
+<div class="summary-node-text">
+<p id=menutrigger3><a href="#freedom" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">Use a trusted hub, or run your own server. Move where you want and take your data and connections with you. The choices are yours.</p>
+</div>
+</div>
+</div>
+<div class="summary-node-4">
+<div class="summary-node-4-text">
+<div class="summary-node-header"><a href="#control" style="color:#FFFFFF;text-decoration:none;margin-top:0px;font-size: 1.2em;">Access Control</a></div>
+<div class="summary-node-text">
+<p id=menutrigger4><a href="#control" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">Share what you want with whom you want. Permissions extend to the entire matrix.</a></p>
+</div>
+</div>
+</div>
+<div class="summary-node-5">
+<div class="summary-node-5-text">
+<div class="summary-node-header"></div>
+<div class="summary-node-text">
+<p><a href="#identity" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">Got Zot?</a></p>
+</div>
+</div>
+</div>
+<div class="summary-node-6">
+<div class="summary-node-6-text">
+<div class="summary-node-header"><a href="#privacy" style="color:#FFFFFF;text-decoration:none;margin-top:0px;font-size: 1.2em;">Privacy</a></div>
+<p class="summary-node-text"><a href="#privacy" style="color:#FFFFFF;text-decoration:none;margin-top:0px;">Privacy and encryption to suit your needs.</a></p>
+</div>
+</div>
+</div>
+
+
+<div id="menutrigger"></div>
+<section id="decentralise">
+
+<div class="section-heading">Decentralise. Build a more robust network.</div>
+<div class="section-text">
+<p>
+Now open your eyes. We've done some amazing things with decentralisation technology over the last few years and have created a different kind of network. We call it the Red Matrix. Forget the old internet - it's hopelessly broken and increasingly being choked off in order to take your money and spy on you.
+</p>
+<p>
+The Red Matrix is a decentralised network where <strong>people</strong> are in charge and the size of your server farm and wealth do not offer any comparable advantage. Anybody may participate on a level playing field. Cloud storage, file sharing, communications, content creation and management belong to <strong>everybody</strong> and can be shared with <strong>anybody</strong> (or <strong>somebody</strong>, or <strong>nobody</strong>). This is only a representative sample of the services we plan to offer. In an internet where creativity is allowed to flourish and corporate overlords have no power, the door is open to entirely new forms of expression and applications. The Red Matrix software is free and open source; created by volunteers and distributed under the MIT license.
+</p>
+<p>
+And the Red Matrix has <strong>Got Zot.</strong>
+</p>
+<p>
+So what the heck is <strong>Zot</strong>? I'm glad you asked...
+</div>
+</section>
+
+<br />
+<section id="identity">
+
+<div class="section-heading">Your identity is your own. One identity across the network.</div>
+<div class="section-text">
+
+<p>
+Zot is a revolutionary protocol which provides <strong>decentralised communications and identity</strong> management across the matrix. The resulting platform can provide web services comparable to those offered by large corporate providers, but without the large corporate provider and their associated privacy issues. Communications and social networking are an integral part of the matrix. Any channel (and any services provided by that channel) can make full use of feature-rich social communications on a global scale.
+</p>
+<p>
+We use the full power of the matrix to offer friend suggestions and directory services. You can also perform other things which would typically only be possibly on a centralised provider - such as "wall to wall" posts and private/multiple profiles and web content which can be tailored to the viewer. You won't find these features at all on other decentralised communication services. The difference is that Zot also provides decentralised <strong>identity services</strong>. This is what separates the men from the boys, and what makes life in the matrix so awesome.
+</p>
+</div>
+
+<div class="section-text">
+<p>
+Zot's identity layer is unique. It's like OpenID on steroids. It provides invisible single sign-on across all sites in the matrix; as well as nomadic identity so that your communications with friends, family, and business partners won't be affected by the loss of your primary communication node - either temporarily or permanently. The important bits of your identity and relationships can be backed up to a thumb drive and may appear at any node in the matrix at any time - with all your friends and preferences intact. These nomadic instances are kept in sync so any instance can take over if another one is compromised or damaged. This protects you against not only major system failure, but also temporary site overloads and governmental manipulation. You cannot be silenced. You cannot be removed from the matrix.
+</p>
+<p>
+As you browse the matrix viewing channels and their unique content, you are seamlessly authenticated as you go, even across completely different server hubs. No password dialogues. Nothing to type. You're just greeted by name on every new site you visit. How does Zot do that? We call it "magic-auth" because it really is technology that is so advanced as to be indistinguishable from magic. You login only once on your home hub (or any nomadic backup hub you have chosen). This allows you to access any authenticated services provided anywhere in the matrix - such as shopping and access to private information. This is just like the services offered by large corporate providers with huge user databases; however you can be a member of this community and a server on this network using a "plug computer" like a Rasberry Pi. Your password isn't stored on a thousand different sites where it can be stolen and used to clean out your bank accounts.
+</p>
+</div>
+</section>
+<section id="control">
+
+<div class="section-heading">You control your data. Red Matrix enforces your permissions.</div>
+<div class="section-text">
+
+<p>
+Zot's identity layer allows you to provide fine-grained permissions to any content you wish to publish - and these permissions extend across the Red Matrix. This is like having one super huge website made up of an army of small individual websites - and where each channel in the matrix can completely control their privacy and sharing preferences for any web resources they create.
+</p>
+<p>
+Example: you want a photo to be visible to your family and three select friends, but not your work colleagues. In the matrix this is easy. <strong>Even if your family members, work colleagues, and friends have accounts on different hubs.</strong>
+</p>
+<p>
+Currently the matrix supports communications, photo albums, events, and files. This will be extended in the future to provide content management services (web pages) and cloud storage facilities such as WebDAV and multi-media libraries. Every object and how it is shared and with whom is completely <strong>under your control</strong>.
+</p>
+<p>
+Again, this type of control is available on large corporate providers, because they own the user database. Within the matrix, there is no need for a huge user database on your machine - because <strong>the matrix is your user database</strong> and for all intents and purposes has infinite capacity and is spread amongst hundreds, and potentially millions of computers. Access can be granted or denied for any resource, to any channel or any group of channels; anywhere within the matrix. They do not need to have an account on your hub.
+</p>
+</div>
+</section>
+<div class="clear"></div>
+
+<section id="privacy">
+
+<div class="section-heading">Reclaim your privacy. Red Matrix is built for <i>you</i>, not governments and corporations.</div>
+<div class="section-text">
+<p>
+Your communications may be public or private - and we allow your private communications to be as private as you wish them to be. Private communications comprise not only fully encrypted transport, but also encrypted storage to help protect against accidental snooping and disclosure by rogue system administrators and internet service providers.
+</p>
+<p>
+Want more? You can fully encrypt your messages "end to end" using your choice of encryption ciphers and using a passphrase that only you and the recipient(s) know - <strong>in addition to</strong> our standard multi-layer encryption.
+</p>
+<p>
+Want more? Our end to end encryption is pluggable. You can define your own chain of multiple encryption steps with multiple keys, and include algorithms known only to you and the recipient. At some point even the US National Security Agency will have to throw up their hands. There won't be enough computational power available in the universe to decode your private message.
+</p>
+<p>
+We also provide optional message expiration as a standard feature. When the expiration date/time passes, your message is removed from the network.
+</p>
+</div>
+</section>
+<div class="clear"></div>
+
+
+
+<section id="freedom">
+<a href="https://github.com/friendica/red"><img style="float:center;width:125px;" src="assets/logo_antiprism.png"></a>
+</section>
+
+<br>
+<br>
+</div>
+
+
+ <div id="footer" align="center"> <a href="http://redmatrix.me">redmatrix.me</a> &#149; <a href="https://github.com/friendica/red"><b>Get Zot now!</b></a> &#149; <a href="https://github.com/friendica/red/wiki">Wiki</a> &#149; <a href="http://zothub.com/pubsites">Public Server Directory</a> </div>
+
+
diff --git a/assets/logo_antiprism.png b/assets/logo_antiprism.png
new file mode 100644
index 000000000..b72e2a211
--- /dev/null
+++ b/assets/logo_antiprism.png
Binary files differ
diff --git a/assets/narrow.css b/assets/narrow.css
new file mode 100644
index 000000000..a1c12dcc4
--- /dev/null
+++ b/assets/narrow.css
@@ -0,0 +1,218 @@
+body {
+ font-family: 'Ubuntu',Tahoma,Helvetica,Arial,sans-serif;
+ color: #111111;
+ text-align: center;
+ padding:0 0 22px 0;
+}
+
+ div#header{
+ position:absolute;
+ z-index: 100;
+ top:0;
+ left:0;
+ width:100%;
+ height: 55px;
+ background: rgba(100, 0, 0, 0.8);
+ background-size:3000px 55px;
+ color: #fff;
+ display:none;
+ }
+
+ @media screen{
+ body>div#header{
+ position: fixed;
+ }
+ body>div#footer{
+ position:fixed;
+ }
+
+ }
+
+
+ div#footer{
+ position:absolute;
+ bottom:0;
+ left:0;
+ width:100%;
+ height:22px;
+ background: #AD002C;
+ color: #fff;
+}
+
+#intro-text {
+color:#c60032;font-size:1.2em;width:70%;margin-right:auto;margin-left:auto;text-align:justify;
+}
+div.section-text {
+color:#c60032;font-size:1em;width:80%;margin-right:auto;margin-left:auto;text-align:justify;
+}
+
+#tagline {
+ color: #c60032;
+ width:80%;
+ margin-top:0px;
+ margin-bottom:20px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+div.red-button {
+ width:150px;
+ margin-left: auto;
+ margin-right: auto;
+ font-weight: 500;
+ font-size: larger;
+ background-color: #c60032;
+ border: 2px solid lightgray;
+ border-radius: 5px;
+ padding: 12px;
+}
+div.red-button a {
+ text-decoration: none;
+ color:#FFFFFF;
+}
+div.red-button a:hover {
+ text-decoration: none;
+ font-weight:600;
+
+}
+
+#footer {
+ font-size: 12px;
+ color:#fff;
+ padding-top: 4px;
+}
+
+#footer a {
+ text-decoration: none;
+ color:#fff;
+}
+.bg {
+ display:none;
+}
+.bg2 {
+ display:none;
+}
+.bg-mask {
+ display:none;
+}
+
+#bg-narrow {
+ background: url('diamondlattice.png') center center no-repeat ;
+ opacity: 0.05;
+ position:absolute;
+ top:0;
+ left:0;
+ z-index: -1;
+ width:100%;
+ height:300%;
+ display:none;
+}
+
+div.summary-nodes-container {
+ display:none;
+}
+div.summary-menu-container {
+ display:block;
+}
+a.summary-menu-item {
+ display: block;
+ width:70%;
+ margin-left:auto;margin-right:auto;
+ border-radius:10px;
+ color:#FFFFFF;
+ font-size:1.2em;
+ text-align:center;
+ background:#c60032;
+ margin-bottom:5px;
+}
+a.summary-menu-item:hover{
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+
+
+div#menubutton1 {
+ position: fixed;
+ top:10px;
+ left:200px;
+ width:150px;
+ height:30px;
+ border-radius:10px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#c60032;
+ display: none;
+ z-index:200;
+}
+div#menubutton1:hover {
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div#menubutton2 {
+ position: fixed;
+ top:10px;
+ left:350px;
+ width:150px;
+ height:30px;
+ border-radius:10px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#c60032;
+ display: none;
+ z-index:200;
+}
+div#menubutton2:hover {
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div#menubutton3 {
+ position: fixed;
+ top:10px;
+ right:350px;
+ width:150px;
+ height:30px;
+ border-radius:10px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#c60032;
+ display: none;
+ z-index:200;
+}
+div#menubutton3:hover {
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div#menubutton4 {
+ position: fixed;
+ top:10px;
+ right:200px;
+ width:150px;
+ height:30px;
+ border-radius:10px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#c60032;
+ display: none;
+ z-index:200;
+}
+div#menubutton4:hover {
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div.section-heading {
+ font-size:2.0em;
+ color:#c60032;
+}
+div.section-subtitle {
+ font-size:1.5em;
+ color:#c60032;
+} \ No newline at end of file
diff --git a/assets/redmatrixlogo.png b/assets/redmatrixlogo.png
new file mode 100644
index 000000000..6929ae14f
--- /dev/null
+++ b/assets/redmatrixlogo.png
Binary files differ
diff --git a/assets/wide.css b/assets/wide.css
new file mode 100644
index 000000000..4574526b4
--- /dev/null
+++ b/assets/wide.css
@@ -0,0 +1,395 @@
+body {
+ font-family: 'Ubuntu',Tahoma,Helvetica,Arial,sans-serif;
+ color: #111111;
+ /*color: rgba(0,0,0,0.0); */
+ text-align: center;
+ /* background-image: url("redmatrixbkgd.jpg"); */
+ /*background: #ececec;*/
+ padding:0 0 22px 0;
+ /* background: url(redmatrixbkgd.jpg) no-repeat center center scroll; */
+ /*
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ */
+}
+
+#intro-text {
+color:#C60032;font-size:1.2em;width:700px;margin-right:auto;margin-left:auto;text-align:justify;
+}
+div.section-text {
+color:#C60032;font-size:1em;width:700px;margin-right:auto;margin-left:auto;text-align:justify;
+}
+
+
+ div#header{
+ display:none;
+ position:absolute;
+ z-index: 100;
+ top:0;
+ left:0;
+ width:100%;
+ height: 55px;
+ /* background-image: url("redmatrixbkgd.jpg"); */
+ background: rgba(198, 0, 50, 0.8);
+ background-size:3000px 55px;
+ /* background: #afafaf;*/
+ color: #fff;
+ }
+ @media screen{
+ body>div#header{
+ position: fixed;
+ }
+ body>div#footer{
+ position:fixed;
+ }
+
+ }
+
+ div#footer{
+ position:absolute;
+ bottom:0;
+ left:0;
+ width:100%;
+ height:22px;
+ background: #AD002C;
+ color: #fff;
+ }
+
+
+
+#tagline {
+ color: #880000;
+ width:600px;
+ margin-top:0px;
+ margin-bottom:20px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+
+.clear {
+ clear: both;
+}
+
+div.red-button {
+ width:150px;
+ margin-left: auto;
+ margin-right: auto;
+ font-weight: 500;
+ font-size: larger;
+ background-color: #C60032;
+ border: 2px solid lightgray;
+ border-radius: 5px;
+ padding: 12px;
+}
+div.red-button a {
+ text-decoration: none;
+ color:#FFFFFF;
+}
+div.red-button a:hover {
+ text-decoration: none;
+ font-weight:600;
+}
+
+#footer {
+ font-size: 12px;
+ color:#fff;
+ padding-top: 4px;
+}
+
+#footer a {
+ text-decoration: none;
+ color:#fff;
+}
+
+.bg {
+ background: url('diamondlattice.png') center center no-repeat ;
+ position: fixed;
+ width: 100%;
+ height: 1350px;
+
+ top:0px;
+ left:0px;
+ opacity: 1.0;
+ z-index: -1;
+}
+.bg2 {
+ background: url('diamondlattice.png') center center no-repeat;
+ position: fixed;
+
+ width: 100%;
+ height: 1350px;
+ top:0px;
+ left:0px;
+ opacity: 1.0;
+ z-index: -1;
+}
+.bg-mask {
+ background: rgba(255, 255, 255, 0.95) center center no-repeat;
+ position: fixed;
+ width: 100%;
+ height: 1350px;
+ top:0;
+ left:0px;
+ z-index: -1;
+
+}
+.bg-narrow {
+ display:none;
+}
+div.summary-menu-container {
+ display:none;
+}
+div.summary-node {
+ position: fixed;
+ width: 50px;
+ text-align: center ;
+ font-size:1em;
+
+
+}
+div.summary-node-header {
+ font-size: 1.2em;
+ color:#FFFFFF;
+ font-weight:bold;
+}
+div.summary-node-1 {
+ position: absolute;
+ top:0px;
+ left:0px;
+ width:200px;
+ height:200px;
+ border-radius:100px;
+ color:#CCCCCC;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+}
+div.summary-node-1:hover{
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div.summary-node-1-text {
+ margin-top:25%;
+ width: 150px;
+ margin-left:auto;
+ margin-right:auto;
+}
+div.summary-node-2 {
+ position: absolute;
+ top:50px;
+ left:170px;
+ width:220px;
+ height:220px;
+ border-radius:200px;
+ color:#CCCCCC;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+}
+div.summary-node-2:hover{
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div.summary-node-2-text {
+ margin-top:30%;
+ width: 150px;
+ margin-left:auto;
+ margin-right:auto;
+}
+div.summary-node-3 {
+ position: absolute;
+ top:0px;
+ right:20px;
+ width:250px;
+ height:250px;
+ border-radius:200px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+}
+div.summary-node-3:hover{
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div.summary-node-3-text {
+ margin-top:25%;
+ width: 200px;
+ margin-left:auto;
+ margin-right:auto;
+}
+
+div.summary-node-4 {
+ position: absolute;
+ top:200px;
+ right:180px;
+ width:200px;
+ height:200px;
+ border-radius:200px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+}
+div.summary-node-4:hover{
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div.summary-node-4-text {
+ margin-top:25%;
+ width: 150px;
+ margin-left:auto;
+ margin-right:auto;
+}
+div.summary-node-5 {
+ position: absolute;
+ top:250px;
+ left:120px;
+ width:150px;
+ height:150px;
+ border-radius:150px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+}
+div.summary-node-5:hover{
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div.summary-node-5-text {
+ margin-top:55px;
+ width: 150px;
+ margin-left:auto;
+ margin-right:auto;
+ font-size:2.0em;
+
+}
+div.summary-node-6 {
+ position: absolute;
+ top:20px;
+ right:270px;
+ width:150px;
+ height:150px;
+ border-radius:150px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+}
+div.summary-node-6:hover{
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div.summary-node-6-text {
+ margin-top:30px;
+ width: 100px;
+ margin-left:auto;
+ margin-right:auto;
+}
+div.summary-nodes-container {
+ position: relative;
+ margin-left: auto ;
+ margin-right: auto ;
+ margin-top:30px;
+ margin-bottom:30px;
+ width: 800px;
+ height: 400px;
+ text-align: center ;
+}
+div#menubutton1 {
+ position: fixed;
+ top:10px;
+ left:200px;
+ width:150px;
+ height:30px;
+ border-radius:10px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+ display: none;
+ z-index:200;
+}
+div#menubutton1:hover {
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div#menubutton2 {
+ position: fixed;
+ top:10px;
+ left:350px;
+ width:150px;
+ height:30px;
+ border-radius:10px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+ display: none;
+ z-index:200;
+}
+div#menubutton2:hover {
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div#menubutton3 {
+ position: fixed;
+ top:10px;
+ right:350px;
+ width:150px;
+ height:30px;
+ border-radius:10px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+ display: none;
+ z-index:200;
+}
+div#menubutton3:hover {
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div#menubutton4 {
+ position: fixed;
+ top:10px;
+ right:200px;
+ width:150px;
+ height:30px;
+ border-radius:10px;
+ color:#FFFFFF;
+ /* line-height:100px; */
+ text-align:center;
+ background:#C60032;
+ display: none;
+ z-index:200;
+}
+div#menubutton4:hover {
+ color:#FFFFFF;
+ text-decoration:none;
+ background:#550000
+}
+div.section-heading {
+ font-size:2.0em;
+ color:#C60032;
+ width:700px;
+ margin-left:auto;
+ margin-right:auto;
+}
+div.section-subtitle {
+ font-size:1.5em;
+ color:#BB0000;
+} \ No newline at end of file