minor edits, added a pure html5 settings icon...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

gear.css

@@ -0,0 +1,92 @@
+
+
+.gear {
+	position: relative;
+	width: 35px;
+	height: 35px;
+
+	overflow: hidden;
+
+	border: solid black 1px;
+	border-radius: 50%;
+
+	cursor: hand;
+}
+
+.gear > div {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	
+
+	-webkit-transform-origin: 50% 50%;
+	-moz-transform-origin: 50% 50%;
+	-o-transform-origin: 50% 50%;
+	-ms-transform-origin: 50% 50%;
+	transform-origin: 50% 50%;
+
+	-webkit-transform: rotate(15deg);
+	-moz-transform: rotate(15deg);
+	-o-transform: rotate(15deg);
+	-ms-transform: rotate(15deg);
+	transform: rotate(15deg);
+}
+
+.gear .spoke {
+	position: absolute;
+	width: 20%;
+	height: 15%;
+	right: 5%;
+	top: 42.5%;
+	background: blue;
+}
+
+.gear .spoke div {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	right: 0;
+	top: 0;
+	background: red;
+
+	-webkit-transform-origin: -125% 50%;
+	-moz-transform-origin: -125% 50%;
+	-o-transform-origin: -125% 50%;
+	-ms-transform-origin: -125% 50%;
+	transform-origin: -125% 50%;
+
+	-webkit-transform: rotate(40deg);
+	-moz-transform: rotate(40deg);
+	-o-transform: rotate(40deg);
+	-ms-transform: rotate(40deg);
+	transform: rotate(40deg);
+}
+.gear .spoke div:after {
+	display: block;
+	content: "";
+	position: absolute;
+	width: 75%;
+	height: 120%;
+	right: 25%;
+	top: 0;
+	background: red;
+
+	-webkit-transform-origin: -125% 50%;
+	-moz-transform-origin: -125% 50%;
+	-o-transform-origin: -125% 50%;
+	-ms-transform-origin: -125% 50%;
+	transform-origin: -125% 50%;
+
+	-webkit-transform: rotate(20deg);
+	-moz-transform: rotate(20deg);
+	-o-transform: rotate(20deg);
+	-ms-transform: rotate(20deg);
+	transform: rotate(20deg);
+}
+
+.gear .spoke,
+.gear .spoke div,
+.gear .spoke div:after {
+	background: black;
+}
+

index.html

@@ -7,6 +7,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 
 <link rel="stylesheet" href="magazine.css">
+<link rel="stylesheet" href="gear.css">
 <link rel="stylesheet" href="magazine-themes.css">
 <link rel="stylesheet" href="magazine-custom.css">
 <link rel="stylesheet" href="magazine-editor.css">
@@ -61,6 +62,22 @@
 }
 */
 
+.gear {
+	display: none;
+	border-color: silver;
+}
+
+.editor .gear {
+	display: inline-block;
+	opacity: 0.4;
+}
+
+.editor .gear .spoke,
+.editor .gear .spoke div,
+.editor .gear .spoke div:after {
+	background: silver;
+}
+
 </style>
 
 <script src="ext-lib/jquery.js"></script>
@@ -230,6 +247,11 @@ $(document).ready(function(){
 		.on('pageChanged', updatePageNumberIndicator)
 		.on('magazineDataLoaded', loadMagazineChrome)
 
+	$('.settings.button')
+		.click(function(){
+			showInOverlay('<h1>Not Yey Implemented...</h1>')
+		})
+
 
 
 	//loadState()
@@ -357,6 +379,16 @@ $(document).ready(function(){
 				</svg>
 			</a>
 		</div>
+
+		<div class="gear button settings">
+			<div>
+				<div class="spoke">
+					<div><div><div><div><div><div><div><div><div>
+					</div></div></div></div></div></div></div></div></div>
+				</div>
+			</div>
+		</div>
+
 	</div>
 </div>
 <!-- Top Toolbar (end) -->
@@ -391,6 +423,8 @@ $(document).ready(function(){
 <!-- Magazine Viewer -------------------------------------------------->
 <div id="viewer" class="viewer">
 
+	
+
 	<div class="magazine" name="PortableMag">
 		<div class="cover page">
 			<div class="content">