Workshops page

style/_page_workshops.scss

@@ -0,0 +1,96 @@
+#workshops {
+	max-width: 800px;
+	margin: auto;
+	text-align: center;
+
+	.ws_title {
+		border-bottom: 2px solid $col_main_1;
+		margin-bottom: 1em;
+	}
+	
+	#ws_data .ws_list {
+		.ws_item {
+			color: $col_main_1;
+			background: $gray-400;
+			border-radius: 3px;
+			margin-bottom: 1em;
+			margin-right: 1em;
+			width: 100px;
+			height: 100px;
+			display: inline-block;
+			overflow: hidden;
+			position: relative;
+			
+			&:not(.opened):hover {
+				background: $col_main_2;
+				color: $gray-300;
+			}
+		
+			span {
+				display: inline-block;
+				text-align: center;
+				width: 100%;
+				
+				&.title {
+					border-bottom: 1px solid $gray-300;
+					font-weight: bold;
+				}
+			
+				&.previous {
+					display: none;
+				}
+			}
+		
+			.courses {
+				display: none;
+				width: 100%;
+				text-align: left;
+			}
+		
+			&.opened {
+				width: auto;
+				height: auto;
+				
+				span.title {
+					color: $gray-300;
+					background: $col_main_1;
+				}
+			
+				span.previous {
+					display: block;
+					position: absolute;
+					top: 0;
+					left: 5px;
+					width: auto;
+					color: $gray-300;
+					
+					&:hover {
+						color: $col_main_2;
+					}
+				}
+				
+				span.dates {
+					display: none;
+				}
+				
+				.courses {
+					display: inline-block;
+					
+					.course {
+						border-bottom: 1px solid $gray-300;
+						padding: 1em;
+
+						&:last-child {
+							border-bottom: none;
+						}
+					
+						&:hover {
+							background: $col_main_2;
+							color: $gray-300;
+						}
+					}
+				}
+			}
+		}
+	} 
+}