/* CSS Document */





/* ~~ Bitter font addition ~~ */

@font-face {
    font-family: 'BitterRegular';
    src: url('Fonts/Bitter-Regular-webfont.eot');
    src: url('Fonts/Bitter-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/Bitter-Regular-webfont.woff') format('woff'),
         url('Fonts/Bitter-Regular-webfont.ttf') format('truetype'),
         url('Fonts/Bitter-Regular-webfont.svg#BitterRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*
@font-face {
    font-family: 'BitterItalic';
    src: url('https://www.sailrite.com/Fabric-Calculator/Bitter-Italic-webfont.eot');
    src: url('https://www.sailrite.com/Fabric-Calculator/Bitter-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.sailrite.com/Fabric-Calculator/Bitter-Italic-webfont.woff') format('woff'),
         url('https://www.sailrite.com/Fabric-Calculator/Bitter-Italic-webfont.ttf') format('truetype'),
         url('https://www.sailrite.com/Fabric-Calculator/Bitter-Italic-webfont.svg#BitterItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BitterBold';
    src: url('https://www.sailrite.com/Fabric-Calculator/Bitter-Bold-webfont.eot');
    src: url('https://www.sailrite.com/Fabric-Calculator/Bitter-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.sailrite.com/Fabric-Calculator/Bitter-Bold-webfont.woff') format('woff'),
         url('https://www.sailrite.com/Fabric-Calculator/Bitter-Bold-webfont.ttf') format('truetype'),
         url('https://www.sailrite.com/Fabric-Calculator/Bitter-Bold-webfont.svg#BitterBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
*/





/* ~~ General Styles ~~ */

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px; /* font-size baseline */
	margin:0;
	padding:0;
}

h1, h2, h3, h4, h5, h6 {
	font-family:'BitterRegular', 'Bitter', Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align:left;
	color:#646464;
	}
	
p {
	font-family:Arial, Helvetica, sans-serif;
	color:#646464;
	font-size:1em;
	line-height:1.5em;
	
}

a img {
	border:none;
}

a:link {
	color:#008ecf;
	text-decoration:none;
}

a:visited {
	color:#008ecf;
	text-decoration:underline;
}

a:hover, a:active, a:focus { /* This group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color:#e87c1e;
	text-decoration:none;
}





/* ~~ This fixed width container surrounds all other elements. ~~ */

.container {
	width:100%;
	min-height:100%;
	height:auto;
	background-color:#f7f7f7;
	background:url('Links/linedPaper1.jpg');
	position:absolute;
}





/* ~~ */

.wrapper {
	min-width:320px;
	max-width:640px;
	height:auto;
	margin:0 auto;
	background-color:#FFFFFF;
	display:block;
}





/* ~~ This is the layout information. ~~ */

.content {
	background-color:#FFF;
	height:100%;
	float:left;
	padding:0 15px 25px 15px;
	-moz-box-shadow:0px 0px 5px #cdcdcd;
	-webkit-box-shadow:0px 0px 5px #cdcdcd;
	box-shadow:0px 0px 5px #cdcdcd;
}





/* ~~ Header ~~ */

.header {
	width:100%;
	float:left;
	margin:0 0 10px 0;
}

.header .logo {
	float:left;
	width:300px;
}

.header .home {
	float:left;
	width:150px;
	margin:40px 0 0 20px;
}

.header .title {
	float:left;
	width:100%;
	margin:15px 0 0 0;
}

.header h1 {
	font-size:2em;
	margin:10px 0;
}

.header h2 {
	font-size:1.25em;
	margin:0;
}





/* ~~ Navigation ~~ */

.navWrapper {
	width:100%;
	float:left;
}

.nav {
	max-width:587px;
	min-width:320px;
	margin:0 auto;
}

.nav ul.navCategories {
	margin:0;
	padding:0;
}

.nav ul.navCategories li {
	list-style-type:none;
	margin:3px;
	float:left;
}

.nav ul.navCategories li a {
	display:block;
	padding:12px 20px;
	background:url('Links/canvasTexture3.jpg') repeat-x left bottom;
}

.nav ul.navCategories li a:hover {
	background:url('Links/canvasTexture3.jpg') repeat-x left top;
}





/* ~~ Sub Navigation ~~ */

.subNav {
	float:left;
	padding:20px 0;
	max-width:587px;
	min-width:320px;
	margin:0 auto;
}

.subNav ul.subNavCategories {
	margin:0;
	padding:0;
}

.subNav ul.subNavCategories li {
	list-style-type:none;
	margin:2px;
	float:left;
}

.subNav ul.subNavCategories li a {
	display:block;
	padding:10px;
	background:url('Links/canvasTexture3.jpg') repeat-x left bottom;
}

.subNav ul.subNavCategories li a:hover {
	background:url('Links/canvasTexture3.jpg') repeat-x left top;
}





/* ~~ Main ~~ */

.main {
	width:100%;
	float:left;
	margin:25px 0;
	background:url('Links/graphPaper1.jpg');
}

.main h1 {
	font-size:1.35em;
	padding:0 10px;
}

.main h2 {
	font-size:1.5em;
	padding:0 10px;
	text-align:left;
}

.main h3 {
	font-size:1.25em;
	padding:0 10px;
	text-align:left;
	font-weight:normal;
}

.main p {
	color:#646464;
	padding:0 10px;
}

.main a {
	color:#008ecf;
	text-decoration:none;
}

.main a:hover {
	color:#e87c1e;
}

.main img {
	display:block;
	margin:0 auto;
	padding:0;
    height: 240px;
    width: 268px;
}

.main ul#mainMenu {
	margin:0;
	padding:0;
}

.main ul#mainMenu li {
	text-align:center;
	list-style-type:none;
	margin:0 0 10px 0;
	padding:0 0 15px 0;
	float:left;
	width:295px;
	color:#646464;
	font-size:0.875em;
}

.main ul#mainMenu li:hover {
	background:url('Links/stroke.png')no-repeat bottom;
	}
	
.main ul#mainMenu li:hover a {
	color:#e87c1e;
}

.main ul#mainMenu li.noBorder {
	border-bottom:none;
}

.main ul#mainMenu li a {
	font-size:1.3em;
	font-family:'BitterRegular', 'Bitter';
}

.main ul.upholsteryListing {
	margin:0;
	padding:0;
}

.main ul.upholsteryListing li {
	text-align:center;
	list-style-type:none;
	margin:0 0 10px 0;
	padding:0 0 15px 0;
	float:left;
	width:122px;
	height:171px;
	color:#646464;
	font-size:1em;
}

.centerSubmit{
    text-align:center;
}

.noBackground {
	background-image:none;
}

.main a#getStartedButton {
	padding:12px 15px;
	background:url('Links/canvasTexture3.jpg') repeat-x left bottom;
	font-family:'BitterRegular', 'Bitter';
}

.main a:hover#getStartedButton {
	background:url('Links/canvasTexture3.jpg') repeat-x left top;
}

.main .application {
	font-size:1.25em;
}

.mainHeader {
	float:left;
	width:100%;
	background:url('Links/graphPaper1.jpg');
	padding:10px 0 25px;
}

.mainHeader h1 {
	font-size:1.5em;
	text-align:center;
	margin:10px 0 0;
}

.mainHeader h2 {
	font-size:1em;
	text-align:center;
	margin:0 0 3px;
	color:#e87c1e;
}

.mainHeader p {
	text-align:center;
	margin:0 auto;
	max-width:400px;
}





/* ~~ Help Styles ~~ */

#backButton {
	border:0;
	text-decoration:none;
	color:#0090cd;
	background:none;
	font-size:0.875em;
	padding:5px 0 0 10px;
}

#backButton:hover {
	color:#e87c1e;
}

.help {
	float:left;
	width:100%;
}

.help h1 {
	padding:25px 10px 0;
	margin:35px 0 10px;
	border-top:1px solid #cdcdcd;
}

.help h2 {
	font-size:1.15em;
	padding:15px 10px 0;
}

.help a {
	padding:0 10px;
}





/* ~~ Table Styles ~~ */

.main table {
	font-size:16px;
	color:#646464;
	padding:10px;
	width:100%;
}

.main table td {
	font-size:1em;
	padding:10px 0 10px 10px;
	text-align:left;
	white-space:no-wrap;
	background:url('Links/canvasTexture1.jpg');
	border-bottom:3px solid #FFF;
}

.main table th {
	font-family:'BitterRegular', 'Bitter';
	font-size:1em;
	background:url('Links/canvasTexture4.jpg') bottom;
	padding:12px 10px 10px;
	white-space:nowrap;
	text-align:left;
	border-bottom:3px solid #FFF;
	font-weight:normal;
}

.main table .refletter {
	font-family:'BitterRegular', 'Bitter';
	color:#e87c1e;
}

.main table .row1 {
	width:60%;
}

.main table .row2, .main table .row3 {
	width:20%;
}

.main table .row2 input {
	width:90%;
}

.main table .row3 {
	font-style:italic;
	color:#999;
}

.main .table2 td, .main .table3 td {
	width:50%;
}

#noborder {
	?order:none;
	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
}




/* ~~ Information hover-overs, signified by a question mark. ~~ */

/* ~~ might not need this anymore, testing... 
a.info	{
	border: none;
	text-decoration: none;
	color: #0090cd;
}

a.info:hover  {
	cursor: help;
	position: relative;
	color: #e77a29;
	text-decoration:none;
}

a.info span {
	display: none;
}

a.info:hover span {
    font-size: 11px;
	color: #444;
	text-align: center;
	border: none;
    padding: 10px;
    display: block;
    z-index: 100;
    background: #FFF;
    left: 0px;
    margin: 10px 0 0 0;
    width: 200px;
    position: absolute;
    top: 10px;
    text-decoration: none;
	white-space:normal;
}

~~ */

.info_two {
    font-size:0.875em;
	line-height:1.35em;
	color:#646464;
	text-align:left;
	border:1px solid #cdcdcd;
    padding:10px;
    display:none;
    z-index:100;
    background:#FFF;
    margin:10px 0 0 0;
    width:200px;
    position:absolute;
    text-decoration:none;
	white-space:normal;
}

.info_three {
    font-size:0.875em;
	line-height:1.35em;
	color:#646464;
	text-align:left;
	border:1px solid #cdcdcd;
    padding:10px;
    display:none;
    z-index:100;
    background:#FFF;
    margin:10px 0 0 0;
    width:200px;
    position:absolute;
    text-decoration:none;
	white-space:normal;
}

.closebutton {
	text-align:right;
}

.closebutton a {
	text-decoration:underline;
}





/* ~~ Calculate Button ~~ */

p.calculate {
	color:#FFF;
	padding:15px 0 10px;
	margin:25px;
	text-align:center;
}

p.calculate input {
	font-family:'BitterRegular', 'Bitter';
	height:44px;
	background:url('Links/canvasTexture2.jpg') bottom;
	color:#FFF;
	font-size:1.25em;
	padding:0 20px;
	text-decoration:none;
	border:none;
	-webkit-appearance: none;
}

p.calculate input:hover {
	color:#FFF;
	background:url('Links/canvasTexture2.jpg') top;
	-webkit-appearance: none;
}





/* ~~ Feedback and Reset Buttons ~~ */

p.secondary {
	text-align:center;
}

p.secondary input {
	font-family:'BitterRegular', 'Bitter';
	height:34px;
	background:url('Links/canvasTexture3.jpg') bottom;
	color:#0090cd;
	font-size:1em;
	padding:0 20px;
	text-decoration:none;
	border:none;
	-webkit-appearance: none;
}
	
p.secondary input:hover {
	color:#e77a29;
	background:url('Links/canvasTexture3.jpg') top;
	-webkit-appearance: none;
}





/* ~~ Cut Panel Display Area ~~ */

.estimate {
	float:left;
	width:100%;
}

.estimate h1 {
	font-size:1.35em;
	margin:50px 10px 15px 10px;
	padding:20px 0 5px;
	border-top:1px solid #cdcdcd;
}

.estimate p {
	font-size:1em;
	padding:0 10px;
}

.estimate img {
	padding-top:25px;
	margin:0;
	max-width:275px;
}

.estimate label {
	font-size:12px;
	text-align:center;
	padding-left:15px;
}

.yardage {
	font-family:'BitterRegular', 'Bitter';
	font-size:1.5em;
	color:#e87c1e;
	display:block;
}

p.selectfabric a {
	font-family:'BitterRegular', 'Bitter';
	height:34px;
	background:url('Links/canvasTexture3.jpg') bottom;
	color:#0090cd;
	font-size:1em;
	padding:7px 20px;
	text-decoration:none;
	border:none;
	-webkit-appearance: none;	
}

p.selectfabric a:hover {
	color:#e77a29;
	background:url('Links/canvasTexture3.jpg') top;
	-webkit-appearance: none;
}

.panelRendering img {
	padding:0 10px;
}

p#videoButton input {
	font-family:'BitterRegular', 'Bitter';
	height:34px;
	background:url('Links/canvasTexture3.jpg') bottom;
	color:#0090cd;
	font-size:1em;
	padding:0 20px;
	text-decoration:none;
	border:none;
	-webkit-appearance: none;
}

p#videoButton input:hover {
	color:#e77a29;
	background:url('Links/canvasTexture3.jpg') top;
	-webkit-appearance: none;
}





/* ~~ Footer ~~ */

.footer {
	width:100%;
	float:left;
	margin:25px 0;
}

.footer p {
	font-size:0.75em;
	padding-bottom:10px;
}

.footer div {
	float:left;
	width:100%;
	margin:25px 0;
	border-top:1px solid #cdcdcd;
	bor?er-bottom:1px solid #cdcdcd;
}

.footer ul {
	margin:0;
	padding:0;
}

.footer li {
	list-style-type:none;
	float:left;
	padding:0 10px;
	margin:10px 0;
	border-right:1px solid #cdcdcd;
}

.footer ul li a {
	font-size:0.875em;
}