wordpress-starter 0.1

data/stylesheets/wordpress/_utils.scss

@@ -0,0 +1,64 @@
+// Non-semantic helper classes
+
+// Credit where credit is due
+// Much inspiration was taken from the HTML5 Boilerplate
+
+// For image replacement
+.ir {
+  display: block;
+  text-indent: -999em;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  text-align: left;
+  direction: ltr;
+}
+
+.image-replacement {
+  @extend .ir;
+}
+
+// Hide for both screenreaders and browsers:
+// css-discuss.incutio.com/wiki/Screenreader_Visibility
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+// Hide visually only but have it available for screenreaders by Jon Neal
+// webaim.org/techniques/css/invisiblecontent also j.mp/visuallyhidden
+
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  &.focusable {
+    &:active, &:focus {
+      clip: auto;
+      height: auto;
+      margin: 0;
+      overflow: visible;
+      position: static;
+      width: auto;
+    }
+  }
+}
+
+.visually-hidden, .vh {
+  @extend .visuallyhidden;
+}
+
+// Hide visually and from screenreaders but maintain layout
+
+.invisible {
+  visibility: hidden;
+}
+
+.clearfix {
+  @include pie-clearfix;
+}

data/templates/project/ie.scss

@@ -0,0 +1 @@
+

data/templates/project/manifest.rb

@@ -0,0 +1,21 @@
+# Description
+description "This is a blank WordPress theme configured to use Sass"
+
+file 'style.css'
+file 'readme.txt'
+
+# Stylesheet Import
+stylesheet 'screen.scss', :media => 'screen, projection'
+stylesheet 'print.scss', :media => 'screen, projection'
+stylesheet 'ie.scss', :media => 'screen, projection', :condition => "lt IE 9"
+
+# Compass Extension Help
+help %Q{
+    compass create -r wordpress-starter --using wordpress -s compressed default
+}
+
+# Compass Extension Welcome Message
+# Users will see this when they create a new project using this template.
+welcome_message %Q{
+    The default project layout.
+}

data/templates/project/print.css

@@ -0,0 +1,4 @@
+@media print {
+  /* All your print styles go here */
+  #header, #footer, #nav {
+    display: none !important; } }

data/templates/project/print.scss

@@ -0,0 +1,104 @@
+@media print {
+  /* All your print styles go here */
+  /* Smashing winery
+     Example site for article at Smashing Magazine
+     by Christian Krammer, ck@css3files.com
+
+     Print style */
+  /* Reset quotes */
+  q {
+    quotes: none;
+    &:before, &:after {
+      content: "";
+    }
+  }
+  /* Hide everything unneeded */
+  header {
+    h1, nav {
+      display: none;
+    }
+  }
+  footer, img {
+    display: none;
+  }
+  /* font sizes */
+  body {
+    font: 12pt Georgia, "Times New Roman", Times, serif;
+    line-height: 1.3;
+    color: #000;
+  }
+  h1 {
+    font-size: 24pt;
+  }
+  h2 {
+    font-size: 14pt;
+    margin-top: 25px;
+  }
+  aside h2 {
+    font-size: 18pt;
+  }
+  /* Show printer-frindly logo. */
+  header .print {
+    display: block;
+  }
+  /* If you like things a little bit easier and more semantic you can alternatively just leave the h1 of the header visible, switch off the margin and make it bigger than the rest of the headlines */
+  /*header nav, footer, img {display: none}
+
+  header h1 {
+  	margin: 0;
+  	font-size: 30pt;
+  }*/
+  /* Some browsers like to show a border around images. Switch it off */
+  img {
+    border: 0;
+  }
+  /* Mover the header a little bit awy from the content */
+  header {
+    margin-bottom: 40px;
+    &:after {
+      display: block;
+      content: "www.smashing-winery.com";
+    }
+  }
+  /* Display the URL of the site so that the user knows where the printout came from */
+  /* Additionally/optionally a little message could be displayed */
+  /*header:before {
+  	display: block;
+  	content: "Thank your for printing our content at www.smashing-winery.com. Please check back soon for new offers about delicious wine from our winery.";
+  	margin-bottom: 10px;
+  	border: 1px solid #bbb;
+  	padding: 3px 5px;
+  	font-style: italic;
+  }*/
+  /* Separate blockquotes a little bit from the rest */
+  blockquote {
+    font-size: 13pt;
+    font-style: italic;
+  }
+  /* By default links are blue. For optimal legibility change them to black */
+  p a {
+    color: #000;
+    &:after {
+      content: " (http://www.smashing-winery.com/" attr(href) ")";
+      font-size: 80%;
+      word-wrap: break-word;
+    }
+    &[href^="http://"]:after, &[href^="https://"]:after {
+      content: " (" attr(href) ")";
+    }
+  }
+  /* Show the URL after each link, whereby internal links are preceeded by the site's URL */
+  /* External links don't get this treatment */
+  /* Append the source of the citation */
+  q:after {
+    content: " (" attr(cite) ")";
+  }
+  /* The Sidebar is placed under the content automatically. To distinguish it from the rest a border and a gap is set before */
+  aside {
+    border-top: 1px solid #bbb;
+    margin-top: 30px;
+    display: block;
+    /*page-break-before: always; */
+    /* Moves the sidebar to new page */
+  }
+}

data/templates/project/readme.txt

@@ -0,0 +1 @@
+This is a blank WordPress theme configured to use Sass

data/templates/project/screen.scss

@@ -0,0 +1 @@
+@import "wordpress";

data/templates/project/style.css

@@ -0,0 +1,13 @@
+/*
+Theme Name: A WordPress Theme
+Theme URI: http://example.com/theme
+Description: Use this theme to start your Theme development.
+Author: Your Name
+Author URI: http://example.com/
+Version: 1.0
+Tags:
+*/
+
+@import url('stylesheets/screen.css') screen;
+@import url('stylesheets/print.css') print;
+

data/templates/starter/404.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * The 404 error file.
+ *
+ * @category  Theme
+ * @package   [starter]
+ * @author    [Your Name]
+ * @copyright 2012 [Your Name]
+ */
+
+get_header();
+?>
+		<article id="post-0" class="post error404 no-results not-found">
+			<header class="entry-header">
+				<h1 class="entry-title"><?php _e( 'This is somewhat embarrassing, isn&rsquo;t it?', 'starter' ); ?></h1>
+			</header>
+
+			<div class="entry-content">
+				<p><?php _e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'starter' ); ?></p>
+				<?php get_search_form(); ?>
+			</div>
+		</article>
+<?php
+	get_footer();

data/templates/starter/admin/README.txt

@@ -0,0 +1,25 @@
+All questions and setup instructions please go to http://aquagraphite.com/2011/09/29/slightly-modded-options-framework/
+
+@author - Syamil MJ
+@author - URI http://aquagraphite.com
+@title  - Slightly Modded Options Framework SMOF
+@description - Options frameworks for WordPress Themes
+@version - 1.4.0
+@license - WTFPL - http://sam.zoy.org/wtfpl/
+
+Changelog:
+
+V 1.4.0 - 16 APRIL 2012
+- add folding checkbox group option (credits to plovs - https://github.com/plovs)
+- add sample grouped options
+- add transfer option
+- fix css quirks on some options
+- single call to admin/admin.php from functions.php
+- unique database name for options & backup
+- replaced ereg_replace function (deprecated in PHP 5.3)
+- uses add_theme_page to replace add_submenu_page
+- reorganized files, paths etc
+- delete background option
+- delete child types
+- everything a bit faster now
+- change reset method

data/templates/starter/admin/assets/css/admin-style.css

@@ -0,0 +1,838 @@
+-----------------------------------------------------------------------------------
+/* Admin styles
+/*-----------------------------------------------------------------------------------*/
+
+.updated, .error {
+	display:none!important
+} /* disable the admin notices */
+#of_container {
+	margin: 15px;
+	width: 785px;
+	position:relative;
+	z-index: 0
+}
+#of_container #header {
+	height: 70px;
+	background:#f1f1f1;
+	border: 1px solid #ccc;
+	-webkit-border-radius: 6px 6px 0 0;
+	-moz-border-radius: 6px 6px 0 0;
+	border-radius: 6px 6px 0 0;
+	background-image: -ms-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: -moz-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: -o-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#ececec));
+	background-image: -webkit-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: linear-gradient(top,#f9f9f9,#ececec);
+	-moz-box-shadow: inset 0 1px 0 #fff;
+	-webkit-box-shadow: inset 0 1px 0 #fff;
+	box-shadow: inset 0 1px 0 #fff;
+}
+#of_container #header .logo {
+	float: left;
+	margin:10px 20px;
+}
+#of_container #js-warning {
+    color: red;
+    float: left;
+    margin: 20px 10px;
+    width: 330px;
+}
+#of_container ul,#of_container ol {margin: 0;}
+.js #of_container #js-warning {
+ display: none;
+ }
+
+#of_container #header .logo h2 {
+	display:inline-block;
+	font-style:normal;
+	padding-right:5px;
+}
+#of_container #header .logo span {
+	color:#888888;
+}
+#of_container #header .icon-option {
+	float: right;
+	height: 32px;
+	width: 32px;
+	background: url(../images/icon_option.png) no-repeat;
+	margin:20px 30px 0;
+}
+
+#of_container #info_bar {
+	background: #f3f3f3;
+	border:solid #d8d8d8;
+	border-bottom:1px solid #D8D8D8;
+	border-width:0px 1px 1px 1px;
+	padding: 6px 20px 0px 6px;
+	height: 31px;
+	text-align: right;
+	-moz-box-shadow: inset 0 1px 0 #fcfcfc;
+	-webkit-box-shadow: inset 0 1px 0 #fcfcfc;
+	box-shadow: inset 0 1px 0 #fcfcfc;
+}
+
+#of_container #expand_options{
+cursor: pointer;
+display: block;
+height: 22px;
+width: 21px;
+float: left;
+font-size:0px;
+text-indent: -9999px;
+margin: 0 0 0 10px;
+border: 1px solid #bbb;
+-webkit-border-radius: 2px;
+-moz-border-radius: 2px;
+border-radius: 2px;
+}
+#of_container  #info_bar .expand { background: url(../images/toggle_tabs.png) no-repeat -2px -1px; }
+#of_container #info_bar .close { background: url(../images/toggle_tabs.png) no-repeat -2px -26px; }
+#of_container #expand_options:hover {
+	cursor: pointer;
+	border-color: #888;
+}
+#of_container #main {
+	background-color: #f1f1f1;
+	border-left: 1px solid #d8d8d8;
+	border-right: 1px solid #d8d8d8;
+	border-bottom: 1px solid #d8d8d8;
+}
+#of_container #of-nav {
+	float: left;
+	position: relative;
+	z-index: 9999;
+	width: 160px;
+}
+#of_container #of-nav ul {
+	margin:0;
+}
+#of_container #of-nav li {
+	margin-bottom:0;
+	-moz-box-shadow: inset 0 1px 0 #f9f9f9;
+	-webkit-box-shadow: inset 0 1px 0 #f9f9f9;
+	box-shadow: inset 0 1px 0 #f9f9f9;
+	margin-right: 1px;
+	border-bottom: 1px solid #d8d8d8;
+}
+
+#of_container #of-nav li:last-child {
+	-moz-box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 #f9f9f9;
+	-webkit-box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 #f9f9f9;
+	box-shadow: inset 0 1px 0 #f9f9f9, 0 1px 0 #f9f9f9;
+}
+
+#of_container #of-nav li.current {
+	margin-right: 0;
+}
+
+#of_container #of-nav li a, #of_container #of-nav ul li a:link, #of-nav ul li a:visited {
+	display: block;
+	padding: 10px 10px 10px 40px;
+	background-repeat: no-repeat;
+	background-position: 13px 10px;
+	font-weight:bold;
+	font-size: 12px;
+	text-decoration: none;
+	color: #555;
+	opacity: 0.5;
+}
+#of_container #of-nav ul li.current a {
+	background-color: #fcfcfc;
+	color: #797979;
+	opacity: 1;
+}
+
+#of_container #of-nav ul li a:hover {
+	color: #d54e21;
+	opacity: 1;
+}
+
+/*menu icons - customize to your liking*/
+#of_container #of-nav li.slideroptions a{ background-image:url(../images/icon-slider.png);}
+#of_container #of-nav li.generalsettings a{ background-image:url(../images/icon-settings.png);}
+#of_container #of-nav li.stylingoptions a{ background-image:url(../images/icon-paint.png);}
+#of_container #of-nav li.exampleoptions a{ background-image:url(../images/icon-docs.png);}
+#of_container #of-nav li.homesettings a{ background-image:url(../images/icon-home.png);}
+#of_container #of-nav li.backupoptions a {background: url(../images/icon-backup.png) no-repeat;}
+#of_container #of-nav li.advancedsettings a {background: url(../images/wrench16.png) no-repeat;}
+
+#of_container #content {
+	float: left;
+	min-height: 500px;
+	width: 595px;
+	margin-left: -1px;
+	padding: 0 14px;
+	font-family: "Lucida Grande", Sans-serif;
+	background-color: #FCFCFC;
+	border-left: 1px solid #d8d8d8;
+	-moz-box-shadow: inset 0 1px 0 #fff;
+	-webkit-box-shadow: inset 0 1px 0 #fff;
+	box-shadow: inset 0 1px 0 #fff;
+}
+#of_container #content .section {
+	margin-bottom: 10px;
+	overflow-x : hidden;
+}
+#of_container #content .section h3.heading {
+	font-family:;
+	margin: 10px 0 10px 0;
+	padding: 7px 0px;
+	border-bottom: 1px solid #e7e7e7;
+}
+#of_container #content .section .controls {
+	float: left;
+	width: 345px;
+	margin: 0 15px 0 0;
+}
+#of_container #content .section .explain {
+	float: left;
+	width: 225px;
+	padding: 0 10px 0 0;
+	font-size: 11px;
+	color: #999999;
+}
+#of_container #content .section-checkbox .controls {
+	width:25px
+}
+
+#of_container #content .section-multicheck .controls input.checkbox {
+	margin-top:9px;
+}
+
+#of_container #content .section-checkbox .explain {
+	max-width:93%;
+}
+#of_container #content .section-color .controls {
+	width:105px
+}
+#of_container #content .section-color .explain {
+	width:440px
+}
+#of_container #content .section-info h3.heading {
+	display:none;
+}
+#of_container #content .section-info .controls {
+	margin: 20px 0 0;
+	float:none;
+	width: auto;
+}
+#of_container #content .section-info .controls .of-info{
+	padding: 15px 10px;
+	line-height: 1.5em;
+	font-size: 12px;
+	background-color: #EFF9FF;
+	border: 1px solid #D6F0FF;
+	color:#777;
+}
+
+#of_container #content .section-info .controls .of-info ._icon {
+	height:16px; width:16px;
+	margin: 0 10px 0 0;
+	float: left;
+}
+#of_container #content .section-info .controls small {
+	font-size: 12px
+}
+#of_container #content .section-info h3.heading {
+	-webkit-border-radius: 3px 3px 0 0;
+	-moz-border-radius: 3px 3px 0 0;
+	border-radius: 3px 3px 0 0;
+}
+#of_container #content .section-info .controls {
+	-webkit-border-radius: 0 0 3px 3px;
+	-moz-border-radius: 0 0 3px 3px;
+	border-radius: 0 0 3px 3px;
+}
+#of_container .sorter {margin-right: -20px;}
+#of_container .sorter ul {
+	background: #F9F9F9;
+	border: 1px dashed #E3E3E3;
+	min-height: 40px;
+	padding: 10px 10px 0;
+	width: 145px;
+	float: left;
+	margin: 0 15px 0 0;
+}
+#of_container  .sorter ul h3 {
+	margin: 0 0 10px;
+	text-align: center;
+	color: #777;
+	text-transform: capitalize;
+}
+#of_container  .sorter ul li {
+	border: 1px solid #DFDFDF;
+	cursor: move;
+	font-weight: bold;
+	margin-bottom:10px;
+	padding:0 10px;
+	height: 40px;
+	line-height: 40px;
+	background-color: #F1F1F1;
+	background-image: -ms-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: -moz-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: -o-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#ececec));
+	background-image: -webkit-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: linear-gradient(top,#f9f9f9,#ececec);
+	overflow: hidden;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	-moz-box-shadow: inset 0 1px 0 #fff;
+	-webkit-box-shadow: inset 0 1px 0 #fff;
+	box-shadow: inset 0 1px 0 #fff;
+	text-align:center;
+}
+
+
+#of_container #content .section-sorter li.placeholder {
+	background:#f9f9f9;
+	border-width:1px;
+	border-style:dashed;
+	height:40px;}
+
+#of_container #content .section-slider li.placeholder {
+	background:#f9f9f9;
+	border-width:1px;
+	border-style:dashed;
+	height:33px;}
+
+
+#of_container textarea, #of_container input, #of_container select, #of_container button{
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	border-style:solid;
+	border-width:1px;
+}
+#of_container .controls input, #of_container .controls select, #of_container .controls textarea {
+	margin-bottom: 9px !important;
+	background-color: #f1f1f1;
+	border: 1px solid;
+	border-color: #ccc #e6e6e6 #e6e6e6 #ccc;
+	width: 340px;
+	padding: 4px;
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
+	font-size: 12px;
+}
+#of_container .controls input:hover, #of_container .controls textarea:hover {
+	background-color: #f9f9f9;
+}
+
+#of_container .controls input:focus, #of_container .controls textarea:focus {
+	background-color: #fff;
+	border-color: #ccc #e6e6e6 #e6e6e6 #ccc;
+	outline:0;
+}
+
+#of_container .controls .upload {
+	width: 340px;
+}
+
+
+#of_container .controls select {
+	height: 28px;
+	padding: 4px 5px;
+	width: 340px
+}
+#of_container .controls textarea {
+	width: 345px;
+}
+#of_container input[type=text] {
+	width: 340px;
+}
+#of_container input.checkbox {
+	width: 30px;
+	margin-top:3px;
+}
+#of_container input.of-radio {
+	width: 30px;
+}
+label.radio, label.multicheck {
+  position: relative;
+  bottom: 9px;
+}
+#of_container .controls .input-text-small {
+	width: 60px;
+	margin-right:10px
+}
+#of_container .meta-two {
+	margin-right:10px
+}
+#of_container .controls .of-color {
+	float:left;
+	width: 70px;
+	margin-left:5px; /* font-size:20px; height:34px;*/
+}
+#of_container #content .section-typography .controls {
+	width:440px
+}
+#of_container #content .section-typography .explain {
+	width:130px
+}
+#of_container .controls .of-typography-size {
+	width:70px;
+	float:left
+}
+#of_container .controls .of-typography-unit {
+	width:60px;
+	float:left
+}
+#of_container .controls .of-typography-face {
+	width:145px;
+	float:left
+}
+#of_container .controls .of-typography-style {
+	width:95px;
+	float:left
+}
+#of_container .controls .of-radio-img-img {
+	border:3px solid #fff;
+	margin:0 5px 10px 0;
+	display:none;
+	cursor:pointer;
+	float:left;
+}
+#of_container .controls .of-radio-img-selected {
+	border:3px solid #ccc
+}
+#of_container .controls .of-radio-img-img:hover {
+	opacity:.8;
+}
+
+#of_container .controls .of-radio-tile-img {
+	width:50px;
+	height:50px;
+	border:3px solid #f9f9f9;
+	margin:0 5px 10px 0;
+	display:none;
+	cursor:pointer;
+	float:left;
+}
+#of_container .controls .of-radio-tile-selected {
+	border:3px solid #ccc
+}
+#of_container .controls .of-radio-tile-img:hover {
+	opacity:.8;
+}
+
+#of_container .controls .of-border-width {
+	width:70px;
+	float:left
+}
+#of_container .controls .of-border-style {
+	width:95px;
+	float:left
+}
+#of_container .group {
+	display:none;
+	padding-bottom:20px;
+}
+#of_container .group h2 {
+	display:none;
+	border-bottom:3px solid #e7e7e7
+}
+#of_container .controls input:focus, #of_container select:focus, #of_container textarea:focus {
+	background:#fff;
+}
+
+#of_container .accept {
+	background: #DBF6BE no-repeat 10px center;
+	border: solid #9BBF65;
+	border-width: 0px 1px 1px 1px;
+	color: #060;
+	font-weight: bold;
+	padding: 10px;
+	text-align: center;
+}
+#of_container .warning {
+	background: #ffeeee no-repeat 10px center;
+	;
+	border: solid #dfbfbf;
+	border-width: 0px 1px 1px 1px;
+	color: #333;
+	font-weight: bold;
+	padding: 10px;
+	text-align: center;
+}
+#of_container .update_available {
+	background: #FFFEEB no-repeat 10px center;
+	border: solid #CCCCCC;
+	border-width: 0px 1px 1px 1px;
+	color: #333;
+	font-weight: bold;
+	padding: 10px;
+	text-align: center;
+}
+#of_container .of-save-popup {
+	position:absolute;
+	background:rgba(0, 0, 0, 0.5);
+	color:#fff;
+	font-size:24px;
+	text-align:center;
+	display:none;
+	-webkit-border-radius: 12px;
+	-moz-border-radius: 12px;
+	border-radius: 12px;
+}
+
+#of_container .of-save-popup div{
+	background-repeat: no-repeat;
+	background-position: 20px 50%;
+	padding:30px 30px 30px 60px;
+}
+#of_container .of-save-save {
+	background-image: url(../images/button_check.png);
+}
+#of_container .of-save-reset {
+	background-image: url(../images/sign_warning.png);
+}
+#of_container .of-save-fail {
+	background-image:url(../images/stop.png);
+}
+
+#of_container .accept,
+#of_container .warning,
+#of_container .update_available,
+#of_container .of-save-popup {
+	z-index: 9999;
+}
+
+#of_container .upload_button_div {
+	margin-top:7px;
+	margin-bottom: 15px;
+}
+
+#of_container .button {
+border-width: 1px;
+border-style: solid;
+-moz-border-radius: 3px;
+-khtml-border-radius: 3px;
+-webkit-border-radius: 3px;
+border-radius: 3px;
+border-color: #dfdfdf;
+background-color: #fff;
+margin:4px 0 4px;
+}
+
+
+#of_container .button:hover,#of_container .button_hover {
+border-color: #bbb;
+color: #464646;
+}
+
+#of_container .button_active {
+    background:#eee url(../../images/white-grad-active.png) repeat-x scroll left top;
+}
+
+#of_container .image_reset_button, #of_container .mlu_remove_button {
+	margin-left:10px;
+	color:#ef521d;
+}
+
+#of_container .image_reset_button:hover, #of_container .mlu_remove_button:hover {
+	color:red;
+}
+
+#of_container .upload-error {
+	float:left;
+	color:#666;
+	font-size:10px;
+	font-weight:bold;
+	text-decoration:none;
+	text-shadow:1px 1px 0 #FFFFFF;
+	margin: 0 10px 0 0;
+	padding:3px 10px;
+	background:#FFDFEC;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+}
+#of_container .reset-button {
+	font-family:Arial,Verdana,sans-serif;
+	float:left;
+	padding: 0 7px;
+	height: 23px;
+	line-height: 23px;
+	margin:0 ;
+	color: #ef521d;
+	border-color: #bbb;
+}
+
+#of_container .reset-button:hover { color: #ef521d; border-color: #888}
+
+#of_container .slide_add_button { float:right; margin-top:10px; }
+
+
+#of_container .save_bar {
+	background: #f3f3f3;
+	border:solid #ccc;
+	border-width:0px 1px 1px 1px;
+	padding: 10px 20px 0px 20px;
+	height: 35px;
+	text-align: right;
+	-webkit-border-radius: 0 0 3px 3px;
+	-moz-border-radius: 0 0 3px 3px;
+	border-radius: 0 0 3px 3px;
+	-moz-box-shadow: inset 0 1px 0 #fff;
+	-webkit-box-shadow: inset 0 1px 0 #fff;
+	box-shadow: inset 0 1px 0 #fff;
+}
+
+#of_save {
+	font-family: Arial,Verdana,sans-serif;
+	padding: 0 7px;
+	height: 23px;
+	line-height: 23px;
+	border:1px solid #0a6d9b !important;
+	float:right;
+}
+
+#of_save:hover {
+	border:1px solid #111 !important;
+}
+
+#of_container .hide {
+	display:none
+}
+#of_container .ajax-loading-img-top {
+	margin: 5px 4px 0;
+	float:left
+}
+#of_container .ajax-loading-img-bottom {
+	margin: 5px 4px 0;
+}
+#of_container .ajax-reset-loading-img {
+	display: block;
+	margin-left: 100px;
+}
+
+#of_container .screenshot {
+	max-width:340px;
+	margin-bottom:9px;
+}
+
+#of_container .of-uploaded-image {
+
+}
+
+#of_container .of-option-image {
+	max-width:340px;
+	padding: 5px;
+	border:1px solid #e3e3e3;
+	background:#f7f7f7;
+	-moz-border-radius: 3px;
+	-khtml-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+#of_container .select_wrapper {
+-moz-border-radius: 4px;
+-webkit-border-radius: 4px;
+border-radius: 4px;
+font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
+font-size: 12px;
+background: #F1F1F1 url(../images/select.png) no-repeat right center;
+border-color: #CCC #E6E6E6 #E6E6E6 #CCC;;
+border-style: solid;
+border-width: 1px;
+float: left;
+height: 26px;
+width: 344px;
+margin: 0;
+margin-bottom: 9px !important;
+width: 340px;
+display: block;
+color: #888;
+position:relative;
+}
+
+#of_container .select_wrapper:hover {background-color:#f9f9f9;}
+
+#of_container .mini .controls select, #of_container #content .section .mini .controls, #of_container  .controls .typography-size, #of_container  .controls .border-width,#of_container  .controls .mini,#of_container .mini .controls input, #of_container #content .mini .controls {width: 70px;}
+#of_container  .controls .typography-face {width: 145px;}
+#of_container  .controls .typography-style, #of_container  .controls .border-style {width: 95px;}
+#of_container  .controls .typography-size,#of_container  .controls .typography-face,#of_container  .controls .typography-style, #of_container  .controls .border-width, #of_container  .controls .border-style {margin-right:5px;}
+
+#of_container #content .mini .explain {
+	width:500px;
+}
+#of_container .of-notice {
+	background: #ffd1d1;
+	border:1px solid #DFDFDF;
+	-moz-border-radius:8px;
+	text-align: center;
+	margin-bottom: 15px
+}
+
+#of_container .slider li {
+	width: 345px;
+	border: 1px solid #dfdfdf;
+	background:#f9f9f9;
+	overflow:hidden;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	-moz-box-shadow: inset 0 1px 0 #fff;
+	-webkit-box-shadow: inset 0 1px 0 #fff;
+	box-shadow: inset 0 1px 0 #fff;
+}
+
+#of_container .slide_header {
+	cursor:move;
+	height:32px;
+	padding-left:10px;
+	padding-right:20px;
+	line-height:32px;
+	background-color: #F1F1F1;
+	margin: 1px 0 -1px 0;
+	border-bottom: 1px solid #dfdfdf;
+	background-image: -ms-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: -moz-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: -o-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#ececec));
+	background-image: -webkit-linear-gradient(top,#f9f9f9,#ececec);
+	background-image: linear-gradient(top,#f9f9f9,#ececec);
+	overflow:hidden;
+	position: relative;
+}
+
+#of_container .slide_body {
+	display:none;
+	padding:10px 10px 10px 11px;
+}
+
+
+#of_container .slider li input,#of_container .slider li textarea,#of_container .slider li .screenshot,#of_container .slider li .of-option-image {
+	width:311px;
+}
+
+#of_container a.slide_edit_button, #of_container a.slide_delete_button {
+	text-indent:-9999px;
+	font-size:0;
+}
+#of_container a.slide_edit_button {
+	position: absolute;
+	right: 0;
+	top: 0;
+	width:32px;
+	height:32px;
+	background: url(../images/dropdown-arrow.png) no-repeat 9px -28px;
+}
+	#of_container a:hover.slide_edit_button {
+	background: url(../images/dropdown-arrow.png) no-repeat 9px 11px;}
+
+#of_container a.slide_delete_button {
+	float: right;
+	margin: 0 0 0 7px;
+	width:16px;
+	height:16px;
+	background: url(../images/icon-delete.png) no-repeat
+}
+
+#of_container .select_wrapper span {
+height: 26px;
+line-height: 26px;
+z-index: 2;
+padding-left: 6px;
+position:absolute;
+left:0;
+}
+
+#of_container .select_wrapper .select {
+cursor: pointer;
+height: 28px;
+margin: 0;
+-moz-opacity: 0;
+filter: alpha(opacity: 0);
+opacity: 0;
+padding: 0;
+position: relative;
+width: inherit;
+z-index: 4;
+}
+
+#of_backup {
+	margin: 40px 20px;
+	width: 600px;
+}
+#of_backup textarea {
+	margin-bottom: 9px !important;
+	background-color: #F1F1F1;
+	border: 1px solid;
+	width: 100%;
+	padding: 4px;
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
+	font-size: 12px;
+	border-color: #CCC #E6E6E6 #E6E6E6 #CCC;
+}
+
+#of_container #content .section-backup .controls { width: 80%}
+#of_container #content .section-backup .explain {
+    display:none
+}
+#of_container #content .section-backup .backup-box {
+    margin: 0 0 20px;
+}
+
+#of_container #content .section-backup .instructions {
+    margin: 0 0 10px;
+    color: #777;
+}
+#of_container #content .section-backup .button, #of_container #content .section-transfer .button {
+    margin: 0 25px 0 0;
+}
+
+.temphide {display:none;}
+/*-------------------------------------------------------------------------------------------*/
+/* GENERAL STYLES */
+/*-------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {
+	background: none;
+	border: 0;
+	clear: both;
+	display: block;
+	float: none;
+	font-size: 0;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+
+/*-------------------------------------------------------------------------------------------*/
+/* Tipsy
+/*-------------------------------------------------------------------------------------------*/
+.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
+  .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
+
+  /* Rounded corners */
+  .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
+
+  /* Uncomment for shadow */
+  /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
+
+  .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
+
+  /* Rules to colour arrows */
+  .tipsy-arrow-n { border-bottom-color: #000; }
+  .tipsy-arrow-s { border-top-color: #000; }
+  .tipsy-arrow-e { border-left-color: #000; }
+  .tipsy-arrow-w { border-right-color: #000; }
+
+	.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
+    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
+    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
+  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
+    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
+    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
+  .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
+  .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }