init magic-slider

css/app.css

@@ -0,0 +1,4 @@
+#main-content { width: 960px; margin: 10px auto;}
+
+
+h1.site_title { font-family: 'Righteous', cursive; font-weight: normal; font-size: 42px; color: #666; text-shadow: 1px 1px 1px #000;}

css/boiler_first.css

@@ -0,0 +1,73 @@
+article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
+audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
+audio:not([controls]){display:none}[hidden]{display:none}
+/* ============================   Base   =====================================*/
+/* 	* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units 
+	* 2. Force vertical scrollbar in non-IE 
+	* 3. Prevent iOS text size adjust on device orientation change,without disabling user zoom:h5bp.com/g*/
+html{ font-size:100%; overflow-y:scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100% }
+body{ margin:0; font-size:13px; line-height: 20px}
+body,button,input,select,textarea{ font-family:sans-serif; color:#444}
+/*  * Remove text-shadow in selection highlight:h5bp.com/i 
+	* These selection declarations have to be separate 
+	* Also:hot pink! (or customize the background color to match your design) */
+::-moz-selection{background:#ff6a04;color:#fff;text-shadow:none}
+::selection{background:#ff6a04;color:#fff;text-shadow:none}
+/* ============================  Links   ======================================*/
+/* j.mp/webkit-tap-highlight-color */
+a:link { -webkit-tap-highlight-color: #ff6a04; }
+
+a{color:#000}
+a:visited{ color:#666 }
+a:hover{ color:#369;  }
+a:focus{outline:none}
+
+/* Improve readability when focused and hovered in all browsers:h5bp.com/h */
+a:hover,a:active{outline:0}
+/* ============================   Typography   =================================*/
+abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:bold}
+/* Redeclare monospace font family:h5bp.com/j */
+pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em}
+/* Improve readability of pre-formatted text in all browsers */
+pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:85%}
+/* Position subscript and superscript content without affecting line-height:h5bp.com/k */
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}
+/* =============================   Lists   =======================================*/
+ul,ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0}
+/* =============================   Embedded content   ============================*/
+/* 	* 1. Improve image quality when scaled in IE7:h5bp.com/d 
+	* 2. Remove the gap between images and borders on image containers:h5bp.com/e  */
+img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}
+/* * Correct overflow not hidden in IE9  */
+svg:not(:root){overflow:hidden}
+/* =============================   Figures   ======================================*/
+figure{margin:0}
+/* =============================   Forms   ========================================*/
+form{margin:0}fieldset{border:0;margin:0;padding:0}
+/* Indicate that 'label' will shift focus to the associated form element */
+label{cursor:pointer}
+/*  	* 1. Correct color not inheriting in IE6/7/8/9  
+		* 2. Correct alignment displayed oddly in IE6/7  */
+legend{border:0;*margin-left:-7px;padding:0}
+/* 		* 1. Correct font-size not inheriting in all browsers 
+		* 2. Remove margins in FF3/4 S5 Chrome 
+		* 3. Define consistent vertical alignment display in all browsers */
+button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
+/* 		* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) 
+		* 2. Correct inner spacing displayed oddly in IE6/7 */
+button,input{line-height:normal;*overflow:visible}
+/* * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */
+table button,table input{*overflow:auto}
+/* 		* 1. Display hand cursor for clickable form elements 
+		* 2. Allow styling of clickable form elements in iOS */
+button,input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button}
+/* * Consistent box sizing and appearance */
+input[type='checkbox'],input[type='radio']{box-sizing:border-box}input[type='search']{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type='search']::-webkit-search-decoration{-webkit-appearance:none}
+/*  * Remove inner padding and border in FF3/4:h5bp.com/l  */
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
+/*  * 1. Remove default vertical scrollbar in IE6/7/8/9  * 2. Allow only vertical resizing */
+textarea{overflow:auto;vertical-align:top;resize:vertical}
+/* Colors for form validity */
+input:valid,textarea:valid{}input:invalid,textarea:invalid{background-color:#f0dddd}
+/* ============================   Tables   ==========================================*/
+table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}

css/boiler_last.css

@@ -0,0 +1,77 @@
+/* `Clear Floated Elements
+----------------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+.clear {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
+.clearfix:before,
+.clearfix:after {
+  content: '\0020';
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+/*
+  The following zoom:1 rule is specifically for IE6 + IE7.
+  Move to separate stylesheet if invalid CSS is a problem.
+*/
+
+.clearfix {
+  zoom: 1;
+}
+
+
+/* Grid >> Children (Alpha ~ First, Omega ~ Last)
+----------------------------------------------------------------------------------------------------*/
+.alpha, .apollo, .erster {margin-left:0}
+.omega, .zeus, .letzter {margin-right:0}
+
+/* ======================================================================================================================================== */
+/* =====================================      BoilerPlate - second-part      ============================================================== */
+/* ======================================================================================================================================== */
+/* ==|== non-semantic helper classes =========   Please define your styles before this section.   ================================*/
+/* For image replacement */
+.ir{display:block;border:0;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr}.ir br{display:none}
+/* Hide from both screenreaders and browsers:h5bp.com/u */
+.hidden{display:none !important;visibility:hidden}
+/* Hide only visually,but have it available for screenreaders:h5bp.com/v */
+.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard:h5bp.com/p */
+.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}
+/* Hide visually and from screenreaders,but maintain layout */
+.invisible{visibility:hidden}
+/* Contain floats:h5bp.com/q */
+.clearfix:before,.clearfix:after{content:'';display:table}.clearfix:after{clear:both}.clearfix{zoom:1}
+/* ==|== media queries ==================   PLACEHOLDER Media Queries for Responsive Design.   
+		These override the primary ('mobile first') styles   Modify as content requires.   ===================================*/
+@media only screen and (min-width:480px){ /* Style adjustments for viewports 480px and over go here */ }
+@media only screen and (min-width:768px){ /* Style adjustments for viewports 768px and over go here */ }
+/* ==|== print styles ===================  Print styles.   Inlined to avoid required HTTP connection:h5bp.com/r   ===========================*/
+@media print{ 
+		*{background:transparent !important;color:black !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important}
+		/* Black prints faster:h5bp.com/s */ 
+		a,a:visited{text-decoration:underline} a[href]:after{content:'('attr(href) ')'} abbr[title]:after{content:'('attr(title) ')'} 
+		.ir a:after,a[href^='javascript:']:after,a[href^='#']:after{content:''} 
+		/* Don't show links for images,or javascript/internal links */ 
+		pre,blockquote{border:1px solid #999;page-break-inside:avoid} thead{display:table-header-group}
+		/* h5bp.com/t */ 
+		tr,img{page-break-inside:avoid}
+		img{max-width:100% !important}
+		@page{margin:0.5cm}
+		p,h2,h3{orphans:3;widows:3}
+		h2,h3{page-break-after:avoid} 	}

css/magic-slider.css

@@ -0,0 +1,135 @@
+/*
+  jQuery magicSlider 
+  (based on jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider)
+  MIT license.
+*/
+
+.magic-slider-wrapper { 
+  padding: 0;
+}
+
+.magic-slider {
+  background: #f3f2f2;
+}
+
+/* Use this to keep the slider content contained in a box 
+   even when JavaScript is disabled */
+.magic-slider-no-js .magic-slider { 
+  height: 560px; 
+  overflow: auto 
+  !important; padding-right: 
+  0px
+}
+
+/* Change the width of the entire slider (without dynamic arrows) */
+.magic-slider, 
+.magic-slider .panel {
+  width: 880px
+} 
+
+/* Change margin and width of the slider (with dynamic arrows) */
+.magic-slider-wrapper.arrows .magic-slider,
+.magic-slider-wrapper.arrows .magic-slider .panel {
+  width: 880px
+}
+
+.magic-slider-wrapper.arrows .magic-slider { 
+  margin: 0 10px 
+}
+
+/* Arrow styling */
+.magic-nav-left a, 
+.magic-nav-right a {
+	margin-top: 50px; 
+	background: #000; 
+	color: #fff; 
+	padding: 5px; 
+	width: 20px;
+	height: 20px;
+	font-size: 20px; line-height: 20px;
+	-webkit-border-radius:    20px; 
+    -moz-border-radius:       20px; 
+    -o-border-radius:         20px; 
+    -ms-border-radius:        20px;
+    border-radius:            20px;
+}
+
+/* Tab nav */
+.magic-nav ul li a.current { 
+  background: #000000; 
+}
+
+/* Panel padding */
+.magic-slider .panel-wrapper {
+  padding: 20px 
+}
+
+/* Preloader */
+.magic-slider p.loading {
+  padding: 20px; text-align: center 
+}
+
+/* Tabbed nav */
+.magic-nav { margin: 0; padding: 0; }
+.magic-nav ul {
+  	clear: both;
+  	display: block;
+  	margin: 0 auto;
+  	overflow: hidden;
+	padding: 0;
+}
+
+.magic-nav ul li { 
+	vertical-align: bottom;
+	display: inline-block;
+	margin: 0 1px;
+	padding: 0;
+}
+
+.magic-nav ul li a { 
+	-webkit-border-radius:    5px 5px 0 0; 
+    -moz-border-radius:       5px 5px 0 0; 
+    -o-border-radius:         5px 5px 0 0; 
+    -ms-border-radius:        5px 5px 0 0;
+    border-radius:            5px 5px 0 0;
+  background: #999999;
+  color: #fff;
+  display: block;
+  float: left;
+  margin: 0;
+  padding: 5px 10px;
+  text-decoration: none
+}
+
+/* Miscellaneous */
+.magic-slider-wrapper {
+  clear: both; 
+  overflow: auto
+}
+
+.magic-slider { 
+  float: left;
+  overflow: hidden;
+  position: relative
+}
+
+.magic-slider .panel {
+  display: block;
+  float: left;
+  padding: 0;
+}
+
+.magic-slider .panel-container { 
+  position: relative
+}
+.magic-nav-left,
+.magic-nav-right {
+  float: left
+}
+
+.magic-nav-left a,
+.magic-nav-right a {
+  display: block;
+  text-align: center;
+  text-decoration: none
+}