/* this is a comment */
/* this is the osca/ osca ironing webpage stylesheet v3.02 @ 14/07/2015 */
/* the two stylesheets are now identical */
/* NEVER BEGIN A CLASS NAME OR ID NAME WITH A NUMBER !!!!!! */
/* default body - including fixed background.*/
body {
background-color:#FFFFFF;
color:#000000;
background-attachment: fixed;
background-image: url(http://www.osca.com.au/bg.gif); /* this needs to be changed according to the website */
background-repeat: no-repeat;
background-position: center;
}
/* BEGIN MODAL POPUP SETTINGS */
/*
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
*/
.white_content {
display: none;
position: relative;
width: 400px;
padding: 20px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
border: 1px solid black;
background-color: lightgreen;
z-index:1002;
overflow: auto;
}
/* here is the source link http://stackoverflow.com/questions/19064987/html-css-popup-div-on-text-click */
/* END MODAL POPUP SETTINGS */
div.index_specialoffer_textbox {position: relative; width:600px; text-align:center; border-style:solid; border-width:1px; padding: 10px; margin-left:auto; margin-right:auto;}
div.franchise1_textbox {position: relative; width:600px; text-align:center; border-style:solid; border-width:1px; padding: 10px; margin-left:auto; margin-right:auto;}
/* color palette
#C0C0C0 light grey (50%)
#808080 "GRAY"
*/
/* NEVER BEGIN A CLASS NAME OR ID NAME WITH A NUMBER !!!!!! */
/* p's */
p {font: 10pt Arial; color: black;} /* 10pt,black */
p.s6 {font: 6pt Arial; color: black;} /* 6pt,black */
p.s8 {font: 8pt Arial; color: black;} /* 8pt,black */
p.s8b {font: 8pt Arial; color: black;} /* 8pt,black */
p.s8br {font: 8pt Arial; color: red; font-weight:bold;} /* 8pt,red, bold */
p.s8g {font: 8pt Arial; color: #C0C0C0;} /* 8pt,grey */
p.s8r {font: 8pt Arial; color: red;} /* 8pt,red */
p.s8w {font: 8pt Arial; color: white;} /* 8pt,white */
p.s9 {font: 9pt Arial; color: black;} /* 9pt,black */
p.s10 {font: 10pt Arial; color: black;} /* 10pt,black */
p.s10bluei {font: 10pt Arial; font-style: italic; color: blue;} /* 10pt,blue, Italic */
p.s10bc {font: 10pt Arial; font-weight: bold; color: black; text-align:center;} /* 10pt,black and BOLD centered alignment - new to osca ironing */
p.s10j {font: 10pt Arial; color: black; text-align:justify;} /* 10pt,black justified alignment - new to osca ironing */
p.s10b {font: 10pt Arial; font-weight: bold; color: black;} /* 10pt,black, bold - new to osca ironing*/
p.s10bold {font: 10pt Arial; font-weight: bold; color: black;} /* 10pt,black, bold - new to osca ironing*/
p.s10r {font: 10pt Arial; color: red;} /* 10pt,red */
p.s10g {font: 10pt Arial; color: #808080;} /* 10pt,gray */
p.s10lightblue {font: 10pt Arial; color: #0070C0;} /* 10pt,blue same as shirtbox colors*/
p.s10purple {font: 10pt Arial; color: #5F497A;} /* 10pt,black same as shirtbox colors*/
p.s12rb {font: 12pt Arial; color: red; font-weight: bold;} /* 12pt,red, bold, - new to osca iroing*/
p.s12 {font: 12pt Arial; color: black;} /* 12pt,red */
p.s12r {font: 12pt Arial; color: red;} /* 12pt,red */
p.s12b {font: 12pt Arial; color: blue;} /* 12pt,blue */
p.s12g {font: 12pt Arial; color: green;} /* 12pt,green */
p.s16 {font: 16pt Arial; color: black;} /* 16pt,black, - new to osca ironing*/
p.s16b {font: 16pt Arial; font-weight: bold; color: black;} /* 16pt,black, bold - new to osca ironing*/
p.fine {font: 8pt Arial;} /* ?pt,size1,black aka fine print */
p.g {font: 10pt Arial; color: #C0C0C0;} /* 10pt,grey */
/* styles for Osca Ironing Franchise advertisement October 2014 */
div.advert {font: 10pt Arial; color: black; width:50%; height:*%; text-align:center; border-style:solid; border-width:1px; padding: 10px;}
p.s11blueital {font: 11pt Arial; color: #0070C0; font-style: italic;}
p.s14redbold {font: 14pt Arial; color: #C00000; font-weight: bold;}
p.s18bold {font: 18pt Arial; color: black; font-weight: bold;}
/* styles for Osca Ironing contact us form june 2015 */
textarea.s10 {font: 10pt Arial; color: black;} /* 10pt,black */
/* inheritable settings. use with class="s6" for .s6 etc */
.m {font: 10pt Arial; color: black; text-indent: 0.5cm;} /* "margin" 10pt,black with .5cm indent*/
.redbold {font: 10pt Arial; color: #800000; text-decoration: bold;}
.redbold12 {font: 12pt Arial; color: #800000; text-decoration: bold;}
.grn {font: 10pt Arial; color: green;} /* 10pt,green */
.grnb {font: 10pt Arial; color: green; font-weight: bold;} /* 10pt,green bold*/
/* spans DONT affect the spacing (vertically) like headings or p's... (inline vs block element?) */
span {font: 10pt Arial; color: black;} /* 10pt,black */
span.bold {font: 10pt Arial; font-weight: bold; color: black;}
span.bluebold {font: 10pt Arial; font-weight: bold; color: blue;}
span.redbold {font: 10pt Arial; font-weight: bold; color: red;}
span.s8 {font: 8pt Arial; color: black;}
span.s8g {font: 8pt Arial; color: gray;}
span.gray8 {font: 8pt Arial; color: gray;}
span.s10g {font: 10pt Arial; color: gray;} /* 10pt,gray */
span.s10 {font: 10pt Arial; color: black;} /* 10pt,black */
span.s10r {font: 10pt Arial; color: red;} /* 10pt,red */
span.s10bc {font: 10pt Arial; font-weight: bold; color: black; text-align:center;} /* 10pt,black and BOLD centered alignment - new to osca ironing */
span.s10j {font: 10pt Arial; color: black; text-align:justify;} /* 10pt,black justified alignment - new to osca ironing */
span.s10b {font: 10pt Arial; font-weight: bold; color: black;} /* 10pt,black, bold - new to osca ironing*/
span.s10bluei {font: 10pt Arial; font-style: italic; color: blue;} /* 10pt,blue, Italic */
span.s12 {font: 12pt Arial; color: black;} /* 12pt,red */
span.s12r {font: 12pt Arial; color: red;} /* 12pt,red */
span.s12b {font: 12pt Arial; color: blue;} /* 12pt,blue */
span.s12g {font: 12pt Arial; color: green;} /* 12pt,green */
span.gray14 {font: 14pt Arial; color: #808080; text-decoration: bold;}
span.h2black16 {font: 16pt Arial; color: black;}
/* anchors */
a:hover {font: 10pt Arial; color: #008000; text-decoration: underline;}
a {font: 10pt Arial; color: #0000FF; text-decoration: none;}
a.s8 {font: 8pt Arial; color: #0000FF; text-decoration: none;}
a.s8:hover {font: 8pt Arial; color: #008000; text-decoration: underline;}
a.s10 {font: 10pt Arial; color: #0000FF; text-decoration: none;}
a.s10:hover {font: 10pt Arial; color: #008000; text-decoration: underline;}
a.s12 {font: 12pt Arial; color: #0000FF; text-decoration: none;}
a.s12:hover {font: 12pt Arial; color: #008000; text-decoration: underline;}
a.s14 {font: 14pt Arial; color: #0000FF; text-decoration: none;}
a.s14:hover {font: 14pt Arial; color: #008000; text-decoration: underline;}
a.s16 {font: 16pt Arial; color: #0000FF; text-decoration: none;}
a.s16:hover {font: 16pt Arial; color: #008000; text-decoration: underline;}
a.s10r {font: 10pt Arial; color: red; text-decoration: none;}
a.s10r:hover {font: 10pt Arial; color: red; text-decoration: underline;}
/* class "no" does a white hover, or no hover (invisible on white background instead of a lit up outline) (for pictures/non-text links/tables) */
a.no {font: 10pt Arial; color: #0000FF; text-decoration: none;}
a.no:hover {font: 10pt Arial; color: #0000FF; background: #FFFFFF; text-decoration: underline;}
/* class "black" does just that (invisible on black background instead of a lit up outline) (for pictures/non-text links/tables) */
a.black {font: 10pt Arial; color: black; text-decoration: none;}
a.black:hover {font: 10pt Arial; color: black; background: #FFFFFF; text-decoration: none;}
/* headings */
h1 {font: 18pt Arial; color: black; text-decoration: bold;}
h1.red {font: 18pt Arial; color: red; text-decoration: bold;}
h1.blue {font: 18pt Arial; color: blue; text-decoration: bold;}
h1.green {font: 18pt Arial; color: green; text-decoration: bold;}
h1.big {font: 22pt Arial; color: black; text-decoration: bold;}
h2 {font: 16pt Arial; color: black; text-decoration: bold;}
h2.g {font: 16pt Arial; color: #808080; text-decoration: bold;}
h2.r {font: 16pt Arial; color: red; text-decoration: bold;}
h3 {font: 14pt Arial; color: black; text-decoration: bold;}
h3.gray {font: 14pt Arial; color: #808080; text-decoration: bold;}
h3.g {font: 12pt Arial; color: #808080; text-decoration: none;}
h4.gray {font: 10pt Arial; color: #808080; text-decoration: none;}
h4 {font: 12pt Arial; color: black; text-decoration: bold;}
/*
#C0C0C0 light grey
#808080 "GRAY"
*/
/* unordered list */
ul {font: 10pt Arial; color: black;}
/* br's */
br.halfline {line-height:50%; } /* half line break */
/* img's */
img.l {float: left; margin:1em;}
img.r {float: right; margin:1em;}
.imgfloatleft {float: left; text-align:center; padding:10px;}
.txtwrap {text-align:justify; width:80%; padding:10px;}
/* tables */
table.center {margin-left:auto; margin-right:auto;}
/* divs */
div.textc60 {font: 10pt Arial; color: black; width:80%; height:*%; text-align:center;} /* div 80% wide center align */
div.textc80 {font: 10pt Arial; color: black; width:80%; height:*%; text-align:center;} /* div 80% wide center align */
div.textj80 {width:80%; height:*%; text-align:justify;} /* div 80% wide justify align - new to osca ironing */
div.textj {text-align:justify;} /* ejustify align - */
div.text {position:static; left:0; top:0; width:80%; height:*%; text-align:left;} /* div 80% wide left align */
div.textbox {position:static; left:0; top:0; width:*%; height:*%; text-align:left; padding:1em;} /* div 80% wide left align */
div.textc {width:100%; height:*%; text-align:center;} /* div 100% wide center align */
div.lef {position:absolute; left:10; top:10;} /* this is a layer in the top left corner */
div.w {font: 8pt Arial; color: white;} /* 8pt,white */
div.popup {position:absolute; background-color:#FFD2FF; filter:alpha(Opacity=90); z-index:1; visibility:hidden;
width:80%; height:*%; text-align:center; border-style:solid; border-color:gray; border-width:thin;
margin:10px; padding:1em;}
.training_textbox_white {font: 10pt Arial; font-weight: bold; color: #4F6228; text-align:center;}
.training_textbox_green {font: 10pt Arial; font-weight: bold; color: #4F6228; text-align:center; background-color:#C2D69B;}
.shirt_textbox_white {padding: 10px; font: 10pt Arial; text-align:justify; }
.shirt_textbox_red {font: 10pt Arial; font-weight: bold; height:18px; color: #943634; text-align:center; background-color:#F2DBDB;}
.shirt_textbox_green {font: 10pt Arial; font-weight: bold; height:18px; color: #4F6228; text-align:center; background-color:#EAF1DD;}
.shirt_textbox_blue {font: 10pt Arial; font-weight: bold; height:18px; color: #0070C0; text-align:center; background-color:#DBE5F1; }
.shirt_textbox_purple {font: 10pt Arial; font-weight: bold; height:18px; color: #5F497A; text-align:center; background-color:#E5DFEC; }
.shirt_textbox_orange {font: 10pt Arial; font-weight: bold; height:18px; color: #E36C0A; text-align:center; background-color:#FBD4B4; }
.items_textbox_green {font: 10pt Arial; color: black; text-align:justify; background-color:#C2D69B;}
.items_textbox_white {font: 10pt Arial; color: black; text-align:justify;}
.categories_imgfloatleft {float: left; text-align:center; padding:10px;}
.categories_txtfloat {text-align:justify; width:auto; padding:10px;}
.categories_box {position:relative; text-align:justify; width:80%; height:150px; padding:10px;}
.categories_box_left {position:relative; text-align:center; float:left; width:129px; height:150px;}
.categories_box_right {position:relative; left:0; right:0; height:150px; width:auto;}
/* div spacing for two logos on splash pages */
div.maincolumn {position:relative; height:200px; width:600px; text-align:center;} /* div main column - new in osca ironing */
div.mainleft {float:left; width:300px; text-align:center;} /* div main left column - new in osca ironing */
div.mainright {float:left; width:300px; text-align:center;} /* div main right column - new in osca ironing */
/* div spacing for THREE panels for choose your option page */
/* This page uses the
Three Equal Height Columns Layout by Matthew James Taylor.
View more website layouts */
#header h1,
#header h2,
#header p {
margin-left:2%;
padding-right:2%;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
/* Start of Column CSS */
#container3 {
clear:left;
float:left;
width:100%;
overflow:hidden;
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:33.333%;
}
#container1 {
float:left;
width:100%;
position:relative;
right:33.33%;
/* background: #ffffff; column 1 background colour */
}
#col1 {
float:left;
width:29.33%;
position:relative;
left:68.67%;
overflow:hidden;
}
#col2 {
float:left;
width:29.33%;
position:relative;
left:72.67%;
overflow:hidden;
}
#col3 {
float:left;
width:29.33%;
position:relative;
left:76.67%;
overflow:hidden;
}
/* original code for info3.htm in 2014 osca ironing archive
#col1 {
float:left;
width:29.33%;
position:relative;
left:68.67%;
overflow:hidden;
border-style:solid; border-width:1px;
}
#col2 {
float:left;
width:29.33%;
position:relative;
left:72.67%;
overflow:hidden;
border-style:solid; border-width:1px;
}
#col3 {
float:left;
width:29.33%;
position:relative;
left:76.67%;
overflow:hidden;
border-style:solid; border-width:1px;
}
*/
/* experimental div spacing */
/* div spacing for THREE panels for floating IRONS */
div.panel_5_col {position:relative; width:500px; height:250px; text-align:center;}
div.panel_heading_irons {text-align:center;}
div.panel_1_irons {position:relative; float:left; width:150px; height:250px; text-align:center;}
div.panel_2_irons {position:absolute; left:175; width:150px; height:250px; text-align:center;}
div.panel_3_irons {position:absolute; left:350; width:150px; height:250px; text-align:center; }
div.panelgap_1_irons {position:absolute; left:250; width:25px; height:250px; text-align:center;}
div.panelgap_2_irons {position:absolute; left:525; width:25px; height:250px; text-align:center;}
.training_box {text-align:center; width:auto; height:250px; padding:10px;}
.training_box_left {float:left; text-align:center; width:129px; height:250px; margin:0;}
.training_box_right {float:right; text-align:center; width:129px; height:250px; margin:0;}
.training_box_center {text-align:center; min-width:129px; width:auto; height:250px; margin-left:25px; margin-right:25px;}
/* OLD div spacing for THREE panels for floating IRONS
div.panel_1_irons {position:relative; top:0; left:0; width:150px; height:250px; text-align:center;}
div.panel_2_irons {position:relative; top:0; left:175; width:150px; height:250px; text-align:center;}
div.panel_3_irons {position:relative; top:0; left:350; width:150px; height:250px; text-align:center; }
div.panelgap_1_irons {position:relative; top:0; left:250; width:25px; height:250px; text-align:justify;}
div.panelgap_2_irons {position:relative; top:0; left:525; width:25px; height:250px; text-align:justify;}
.categories_box {position:relative; text-align:justify; width:80%; height:150px; padding:10px;}
.categories_box_left {position:relative; text-align:center; float:left; width:129px; height:150px;}
.categories_box_right {position:relative; left:0; right:0; height:150px; width:auto;}
*/
/* experimental div spacing */
div.butterfly1 {position:absolute; top:200; left:50; z-index:0;} /* butterfly! - new in osca ironing */
div.butterfly2 {position:fixed; bottom:50; right:50; z-index:0;} /* butterfly!222 - new in osca ironing */
div.infobox (position:relative; width:880px; text-align:center;} /* div infobox main column - new in osca ironing */
div.infoboxleft {float:left; width:140px;} /* div infobox left - new in osca ironing */
div.textbox {float:left; width:600px; text-align:center;} /* div infobox textbox - new in osca ironing */
div.infoboxright {float:left; width:140px;} /* div infobox right - new in osca ironing */
div.clr {clear:both;} /* div clears the float? - new in osca ironing */
/* div 'table'.... still in progress
#textdiv {position:static; left:0; top:0; width:80%; height:*%; text-align:left;}
div table ... unique identifier */