Created basic joomla template

slt1/css/main.css

@@ -0,0 +1,277 @@
+
+body {
+    margin: 0px;
+    height: 100vh
+}
+
+#page {
+    box-shadow: 30vw 0px 5vw -10vw green inset;
+}
+
+/*
+ * Menu configuration
+ */
+
+.nav {
+    padding: 0px;
+}
+
+.nav > li {
+    display: block;
+}
+
+.nav > li > .nav {
+    padding-left: 5px;
+    margin-left: 5px;
+    border-left: solid gray 1px;
+    font-size: smaller;
+}
+
+.nav > li > .nav > li > .nav {
+    font-size: x-small;
+}
+
+/*
+ * Topmenu positioning and styling
+ */
+
+#topmenu {
+	display: none;
+}
+@media only screen and ( min-width: 1000px){
+
+	#topmenu {
+		background-color: black;
+		color: white;
+		font-weight: bold;
+		text-align: center;
+		position: fixed;
+		width: 100vw;
+		display: block;
+	}
+
+
+	#topmenu > .nav {
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: space-around;
+		padding: 0px;
+		margin: 0px;
+		position: relative;
+		align-items: center;
+		height: 40px;
+	}
+
+	#topmenu > .nav > li {
+		padding: 10px;
+		display: inline-block;
+		text-align: left;
+	}
+
+	#topmenu > .nav > li:hover {
+		background-color: white;
+		color: black;
+	}
+	
+	#topmenu > .nav > li > .nav {
+		position: absolute;
+		display: none;
+		z-index: 10;
+		background-color: white;
+		margin: 10px 20px 10px 0px;
+		border: none;
+		padding: 0px;
+	}
+
+	#topmenu > .nav > li:hover > .nav {
+		display: block;
+		box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5);
+	}
+
+	#topmenu > .nav > li > .nav > li {
+		display: block;
+		padding: 10px;
+	}
+
+	#topmenu > .nav > li > .nav > li:hover {
+		background-color: gray;
+	}
+
+	
+	#page {
+		padding-top: 35px;
+		
+	}
+}
+
+/*
+ * Header line positioning
+ */
+
+#header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+}
+
+#header > div {
+    margin: 20px;
+    align-items: center;
+}
+
+#logo, #slideshow {
+    flex: 0;
+}
+
+#logo {
+	display: inline-block;
+}
+
+#slideshow {
+	display: none;
+}
+
+#logo > img {
+    height: 150px;
+}
+
+#slideshow > img {
+    height: 150px;
+}
+
+@media only screen and (min-width: 1000px) {
+	#slideshow {
+		display: inline-block;
+	}
+}
+
+
+/*
+ * Content positioning
+ */
+
+
+#left_menu {
+	display: none;
+}
+
+#main_column {
+	margin: 15px;
+}
+
+#right_column {
+	display: none;
+}
+
+#footline {
+	margin-top: 10px;
+}
+
+@media only screen and (min-width: 1000px) {
+
+	#content {
+		display: flex;
+	}
+
+	#left_menu {
+		flex: 1 1 20%;
+		margin: 15px 0px 15px 5px;
+		display: block;
+	}
+
+	#main_column {
+		flex: 1 1 60%;
+		display: flex;
+		flex-flow: column nowrap;
+	}
+	
+	#main_content{
+		flex: 1 1 100%;
+	}
+	
+	#footline {
+		flex: none;
+	}
+	
+	#right_column {
+		flex: 1 1 15%;
+		margin: 15px 5px 15px 0px;
+		display: block;
+	}
+
+}
+
+/*
+ * Footer positioning
+ */
+
+#footer {
+    background-color: black;
+    color: white;
+    text-align: center;
+    margin-top: 30px;
+    padding: 5px;
+}
+
+
+/*
+ * Mobile menu positioning
+ */
+
+#mobile_menu li > a {
+	margin: 5px 0px 5px 0px;
+	background-color: rgb(200,255,200);
+	padding: 0px;
+	display: block;
+}
+
+#mobile_menu li > a.selected {
+	background-color: rgb(150,255,150);
+}
+
+#mobile_menu .nav {
+	padding: 0px;
+	border: none;
+	margin-left: 0px;
+}
+
+#mobile_menu li {
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+#mobile_menu li > ul.nav {
+	margin-left: -5px;
+	margin-right: -5px;
+}
+
+#mobile_menu > .level-1 > li > ul {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+#mobile_menu > .level-1 > li > ul > li {
+	display: inline-block;
+	flex: 1 1 40%;
+}
+
+#mobile_menu > .level-1 > li > ul > li > a {
+	display: block;
+}
+
+@media only screen and (min-width: 1000px)
+{
+	#mobile_menu {
+		display: none;
+	}
+}
+
+/*
+ * Debug
+ */
+
+/*#right_column,#left_menu,#main_content,#footline {
+    background-color: rgba(0,0,0,0.1);
+}*/
+
+