﻿/*** Main Layout Styles: header, content, footer ***/
html {
	color: #333;
	background-color: #E1E1E1;
}
body {
	width: 995px;
	margin: 1em auto;
}

#header {
	padding:0;
	background-color: #fff;
	-webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
	color: #fff;
	position:relative;
	height:56px;
}
#header h1 {
    display:inline;
}
#header h1 a {
    position:absolute;
    top:2px;
    left:5px;
    width:320px;
    height:52px;
    text-indent:-999em;
    background: transparent url('../images/GradImages-logo.jpg') no-repeat top left;
}
body.Canada #header h1 a {
	background: transparent url('../images/GradImages-ca-logo.jpg') no-repeat top left;
}
#header ul#MainNav {
    position:absolute;
    top:2px;
    left:235px;
    height:52px;
    margin:0;
    padding:0;
    width:760px;
}
ul#MainNav li {
    display:inline;
    width:108px;
    height:52px;
    float: left;
    top:0;
	list-style-type: none;
}
ul#MainNav li a {
    display: table-cell;
    width:108px;
    height:52px;
	vertical-align: middle;
	text-align: center;
	color: #666;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 9pt;
	text-shadow:1px 1px 0px #dadada;
	background: url(../images/main-nav/background-up.png) no-repeat;
	opacity:0.99; /* Added to reduce bold-ness on the mac */
    padding:0 4px 0 4px;
}
ul#MainNav li a:hover {
    background-image:none;
    background-color:#606060;
	color: #eee;
	text-shadow: none;
}
ul#MainNav li ul {
    position: absolute;
    margin: 0;
	top: 52px;
    display: none;
	z-index: 1000;
}
ul#MainNav li ul li {
    display: block;
	clear: left;
    list-style-type: none;
	width: 150px;
	height: auto;
	padding: 5px;
	background-color: #606060;
	border-bottom: 1px solid #999;
}
ul#MainNav li ul li a,
ul#MainNav li ul li a:hover {
	background: transparent;
	display: inline;
	text-align: left;
	text-shadow: none;
}
ul#MainNav li ul li:hover {
	background-color: #A9A9A9;
}
ul#MainNav li ul li:hover a {
	color: #000;
}
ul#MainNav li ul li.First {
	border-top: solid 1px #fff;
}
ul#MainNav li ul li a {
	width: 100%;
	height: auto;
	text-indent: 0;
    font: bold 8pt arial;
    text-decoration: none;
	text-transform: uppercase;
    color: #fff;
}

#Cobranding {
	margin-bottom: 0.5em;
}
img.Cobranding {
	border: 0px none;
}


#TestModeWarning {
	padding: 1em;
	margin: 1em;
	border-top: 1px solid #aa0000;
	border-bottom: 1px solid #aa0000;
	background-color: #FFE0E0;
}

.PaymentNotComplete {
	padding: 1em;
	margin: 1em;
	border-top: 1px solid #e3b000;
	border-bottom: 1px solid #e3b000;
	background-color: #fff8c4;
}

.AlertMessage-Yellow {
	padding: 0.5em 1em;
	margin: 1em 0em;
	border-top: 1px solid #e3b000;
	border-bottom: 1px solid #e3b000;
	background-color: #fff8c4;
}

#content {
	background-color: #fff;
	padding: 1em;
	-webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#content h2 {
    margin:0;
}

#content #TopLeft {
    float:right;
    width: 254px;
}
#content #TopRight {
    float: left;
    width: 662px;
}
#content .BodySection {
    padding: 1em;
}

#footer {
	font-size: 93%;
	padding: 0.4em 0 0 0.4em;
}

#footer p#copyright {
	float: right;
	text-align: right;
	padding: 0.2em 0.4em 0 0;
}
#footer a {
	color: #333;
}

/*** Generic Text Styles: left, right, center ***/
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}
.italic {
	font-style: italic;
}
.bold {
	font-weight: bold;
}
a.PlainText {
	color: #333;
	text-decoration: none;
}
a.PlainText:hover {
	text-decoration: underline;
}
.LargerText {
	font-size: 108%;
}

/*** Text and Input Styles ***/
.example {
	color: #aaa;
}

/*** Validation Errors ***/
#ValidationErrors, .ValidationErrors {
    color: red;
}

#ValidationErrors p, .ValidationErrors p {
    margin-left: 1em;
}
.validation-summary-valid {
    display: none;
}
.validation-summary-errors {
    display: block;
    color: Red;
}
.input-validation-error {
    background-color: #F8E0E0;
}


/*** Catalog Views ***/
div.CatalogContentContainer {
	margin-top: 1em;
	width:100%;
}

div.CatalogRightColumn {
    float:right;
    width:775px;
	padding-top: 1em;
}

#TitleBar {
	padding: 0.5em;
	background-color: #ddd;
	border-bottom: solid 1px #ccc;
	border-top: solid 1px #ccc;
}

#TitleBar h2 {
	font-weight: normal;
	margin-top:.6em;
}

/*** Offer Group Links ***/
    div#PackageGroupLinks {
        margin-bottom:0.5em;
    }
    ul.OfferGroupList {
        margin:0;
        padding:0;
        width:100%;
    }
    ul.OfferGroupList li {
        display:inline;
        list-style:none;
    }
    
    ul.OfferGroupList li a {
        margin:0;
        padding:4px 0px;
        margin-right:0px;
        float:left;
        display:inline;
        position:relative;
    }
    ul.OfferGroupList li a div {
        margin:0;
        background-color:#fff;
        color:#616161;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        border:1px solid #999;
        text-transform:uppercase;
        font-size:12px;
        font-weight:bold;
        text-decoration:none;
        width:153px;
        height:40px;
        text-align: center;
        padding-top: 10px;
        margin-right:0px;
        position:relative;
    }
    ul.OfferGroupList li a span.GroupName {
       display:inline-block;
    }
    ul.OfferGroupList li a:hover div {
        border:1px solid #000;
        background-color: #eee;
    }

/*** Mini Proof Browser ***/
#MiniPhotoBrowser {
    width: 180px;
    float: left;
    background-color: #eee;
    border: solid 1px #ccc;
    padding: 5px;
}

#MiniPhotoBrowser h2 {
    margin-top: 0;
    padding-top: 0;
	margin-bottom: 0.25em;
}

#OtherProofs {
    text-align: center;
    margin-top: 5px;
}
#OtherProofs a {
    position:relative;
    display:inline-block;
}
#OtherProofs a .fa-star {
    position:absolute;
    bottom:15px;
    left:10px;
}
#OtherProofs img {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

/*** Order Package Info (Cart/Added Page) ***/
div.PackageInfo {
	padding: 0.5em 0em;
	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
	margin-top: 1em;
}

div.PackageInfo h3 {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}
div.PackageInfo div.RetailSummary,
 div.PackageInfo div.Options {
	color: #666;
}
div.PackageInfo div.Options span.Option {
	
}
img.CartProof {
	height: 80px;
}

/*** Cart ***/
table.Cart {
	width: 100%;
}
table.Cart th {
	text-align: center;
	padding: 1em 0.4em;
}
table.Cart th, 
table.Cart thead td,
table.Cart tbody td,
table.Cart tfoot td.Extension {
	border: solid 1px #ddd;
}
table.Cart th.OrderPackage {
	text-align: left;
}
td.OrderPackage div.PackageInfo {
	border: 0px none #fff;
	padding:0em;
	margin: 0em;
}
td.ShippingStatus {
    width: 120px;
	text-align: center;
}
td.Price {
	width: 90px;
	text-align: right;
}
td.Quantity {
	width: 90px;
	text-align: center;
}
td.Extension {
	width: 90px;
	text-align: right;
	padding-right: 5px;	
}

table.Cart td.Totals table th,
table.Cart td.Totals table td {
    border: 0px none #fff;
    padding: 0.2em 0em;
    margin: 0px;
    text-align: right;
}
table.Cart td.Totals table td {
    width: 80px;
}
table.Cart td.Totals {
    text-align: right;
}
table.Cart #OrderTotals {
    width: 100%;
    margin: 0px;
}

/*** MicroCart ***/
.MicroCart {
    float: right;
    border: solid 1px #999;
    font-size: 93%;
    text-align: center;
    -moz-border-radius:6px;
	-webkit-border-radius:6px;
    border-radius: 6px;
}
.MicroCart h2 {
    text-transform: uppercase;
    font-size: 93%;
    background-color: #999;
    margin:0;
    padding:5px 10px;
    color: #eee;
}
.MicroCart div {
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 4px;
}
.MicroCart button {
    font-size: 93%;
    padding: 3px 7px;
}
.MicroCart div.ItemCount {
    font-weight: bold;
    padding-top: 2px;
}
.MicroCart a {
    color: #0000ff;
}
.MicroCart h2 img {
    vertical-align: text-bottom;
    padding-right: 3px;
}
/*** Checkout ***/
td.State select,
td.Country select {
	width: 200px;
}


/*** Bottom of the Receipt/Review Pages ***/
.ReceiptSection {
    width: 250px;
    border: 1px solid #D8D8D8;
    float: left;
    margin-right: 2em;
    height: 165px;
}
.ReceiptSection .Title {
    font-size: larger;
    background-color: #E6E6E6;
    padding: 1em 1em;
    margin: 0;
    position: relative;
}
.ReceiptSection div.Title div.Link {
    font-size: 85%;
    position: absolute;
    right: 1em;
    top: 1.25em;
}
.ReceiptSection div.Contents {
    padding: 1em;
}

/* Static Pages - About Us, Contact Us, etc. */
.twoColMain #leftSideMain {
    float: left;
    width: 410px;
}
.twoColMain #rightSideMain {
    float: left;
    width: 550px;
}
a.Button,
button {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e0e0e0), color-stop(1, #adadad) );
	background:-moz-linear-gradient( center top, #e0e0e0 5%, #adadad 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#adadad');
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#e0e0e0;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #c1c1c1;
	display:inline-block;
	color:#646464;
	font-family:arial;
	font-size:14px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	cursor:pointer;
}
button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	text-shadow:1px 1px 0px #fff;
	background-color:#dfdfdf;
}
button:active {
	position:relative;
	top:1px;
}

.GreenButton,
a.GreenButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #a4e271;
	-webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
	background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
	background-color:#89c403;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #74b807;
	display:inline-block;
	color:#ffffff;
	text-shadow:1px 1px 0px #528009;
}
.GreenButton:hover,
a.GreenButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403) );
	background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
	background-color:#77a809;
	text-shadow:1px 1px 0px #528009;
    text-decoration: none;
}

button.Small {
	font-size: 12px;
	padding: 6px 8px;
}

button.Smaller {
	font-size: 11px;
	padding: 3px 5px;
}

button.Crop {
	padding: 5px 10px;
	background: auto;
	font-size:100%;
	font-weight: normal;
	text-decoration:none;
	cursor:pointer;
}
button.Crop:hover {
}

button.Crop a {
	color: #333;
	text-decoration: none;
}

/** Removes the styled look to allow links inside a button to show **/
button.LinkButton {
	background: #fff;
	border: 0px none;
	font-size: 100%;
	font-weight: normal;
	padding:0px;
	margin:0px;
	color: #0000ff;
	text-decoration: underline;
}
button:hover.LinkButton {
	background: #fff;
}

/* site styles */
#TopLeft h2 {
    text-transform: uppercase;
    color:#606060;
    font-weight:bold;
}
#TopLeft h2 {
    font-size:1.5em;
    text-align:center;
    margin-bottom:.6em;
}
#content h2.CustomerInfo,
#content h3.CustomerInfo {
    color:#606060;
    margin:0;
}
#content h2.CustomerInfo {
    margin-bottom:.4em;
}
#content h3.CustomerInfo {
    margin-bottom:.8em;
}

.PackageInfo .LeftColumn,
.PackageInfo .RightColumn {
    float:left;
}
.PackageInfo .LeftColumn {
    width:50px;
    text-align:center;
}

/* Social Sharing */
.Social {
    margin-top:10px;
	background-color: #eee;
	padding: 0.5em 0em 0.5em 0.5em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.Social h2 {
	display:inline;
}
.SocialButtons,
.SocialButton {
	display:inline;
}

button.SocialShare {
	width: 130px;
	color: #333;
	font-size: 11px;
	padding: 2px 5px;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eeeeee), color-stop(1, #cccccc) );
	background:-moz-linear-gradient( center top, #eeeeee 5%, #cccccc 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
	background-color:#eeeeee;
}
button.SocialShare:hover {
	text-shadow:1px 1px 0px #eee;
	border:1px solid #aaa;
}

button.SocialShare img {
	vertical-align: text-bottom;
	padding-right: 2px;
}

.Social #fb {
	padding-top: 2px;
	height: 26px;
}

/** Email Share ***/
#ShareEmailFormWrapper label {
	display: block;
	padding: 0.5em 0em 0em 0em;
	font-weight: bold;
}
#ShareEmailFormWrapper label.inline {
	display: inline;
}
#ShareEmailFormWrapper input[type=text],
#ShareEmailFormWrapper textarea {
    width:350px;
}
#ShareEmailFormWrapper textarea {
    height: 50px;
}
div.Indent {
	padding-left: 20px;
}
div.input-field {
	padding-top: 0.5em;
}
p.ShareMessageText {
	width: 350px;
	padding: 0.5em;
	border: solid 1px #999;
	background-color: #eee;
	margin-top: 0.25em;
}
#ShareEmailFormWrapper .SmallText {
	font-size: 85%;
	color: #999;
	font-weight: normal;
}

#ShareEmailSubmitSuccess {
    width:100%;
    height:100%;
}

#CardFailure {
    margin: 1em 0em;
    padding: 1em 1em 0.25em 1em;
    width: 750px;
    border: 1px solid #cc0000;
    background-color: #FFD6D6;
}

#CardFailure p {
    margin-top: 0em;
    margin-bottom: 0.75em;
}

#CardFailure p.CardFailureMessage {
    font-style: italic;
}

#ShoppingOptions button {
    margin-top:.5em;
}

/*** Shutterfly Text ***/
.ShutterflyText {
	color: #F7941E;
	font-weight: bold;
}

#LiveChatOffline {
}
#LiveChatOffline h2 {
	color: #004207;
	margin: 0px 0px 1em 0px;
	padding: 0;	
}

#LiveChatOffline ul,
#LiveChatOffline li {
	list-style-type: none;
}

/*** Receipt Page ***/
div.ProductReceiptLoading {
	margin: 1em 0em;
	background-color: #eee;
	padding: 1em;
}

img.LoadingGraphic {
    margin-right: 10px;
}

#ShutterflyCodeReceipt {
	margin: 1em 0em;
	padding: 1em;
	background-color: #eee;
}
#ShutterflyCodeReceipt p {
	margin: 0em;
	padding: 0em 0em 0.5em 0em;
}
#ShutterflyCodeReceipt a {
    color: #33d;
}
#ShutterflyCodeReceipt .ShutterflyTerms {
	font-size: 11px;
	color: #666;
}

.alertNotes {
    margin-bottom: 1em;
    border: 1px solid #CC2828;
    background-color: #F7D5D5;
    padding: 1em;
    font-size: 93%;
    width: 550px;
}

.warningNotes {
    margin-bottom: 1em;
    border: 1px solid #cdcd77;
    background-color: #ffffcc;
    padding: 1em;
    font-size: 93%;
}

.facebookOutboundPromo {
	clear: both;
	padding: 1em 2em 1em 1em;
	margin: 1em 0em;
	border: 1px solid #cdcd77;
	background-color: #ffffcc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float: left;
	font-weight: bold;
	text-shadow: #eee 1px 1px 4px;
}

/*** Corner Marks ***/
.CornerMark {
	position: absolute; 
	top: 0;
}
.CornerMark.Cropped {
	left: 0;
}
.CornerMark.Retouched {
	right: 0;
}

#ProductTabs .ui-widget-header {
    background-image: none;
    background-color: #f55d2b;
}

#NotMeModalProofImage img.ProofImage {
    position:static;
}

.buttonGroupWrapper {
    margin-bottom:5px;
    display:inline-block;
}
.buttonGroupWrapper div {
    margin:2px;
    float:left;
}

.buttonGroupWrapper .Button {
    width: 80px;
    height:35px;
}

.InstructionWrapper{
            background-color: #bbb;
            border: solid 2px #999;
}

#EmptyCart {
    margin: 1em auto 1em auto;
    padding: 1em;
    width: 440px;
    border: solid 1px #999;
    text-align:center;
}
#CartContainer.EmptyCart {
    float:none;
    width:100%;
}
#CartContainer.EmptyCart p {
    text-align:center;
}

#content-inner {
    min-height:280px;
}

div.ErrorMessage {
    color: #ee0000;
}

 .StaticPage2Column .LeftColumn,
.StaticPage2Column .RightColumn {
    float: left;
}
.StaticPage2Column .RightColumn {
    width: 620px;
    margin-left: 30px;
}
.StaticPage2Column .LeftColumn {
    width: 310px;
}
.wCard {
    font-family: sans-serif;
    width: 280px;
    padding-left: 7px;
    padding-top: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    background-color: #dfdfdf;
    font-size: 14px;
    margin:0;
    padding:0;
}
.wCard .Header {
    margin-bottom: 10px;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 16px;
    background-color: #f15925;
    height: 25px;
    vertical-align: middle;
    text-align: left;
    padding-left: 7px;
    padding-top: 4px;
}
.wCard .Content {
    padding:.4em 1em;
}
.wCard table th {
    width: 65px;
    font-family: sans-serif;
    font-size: 10px;
    vertical-align: top;
    font-weight: bold;
    text-align:left;
}
.wCard table td {
    font-weight: normal;
    font-family: sans-serif;
    font-size: 10px;
    vertical-align: top;
}
.LeftColumn .ImagePane {
    margin-top:.8em;
}
.LeftColumn .ImagePane img {
    width: 280px;
}

.PushInfo {
    margin: 1em;
}

.PushInfo label {
    font-weight: bold;
    width: 100px;
    margin-right: 1em;
    margin-left: 3em;
    display: inline-block;
}

.PushInfo p {
    padding-top: 10px;
}
.PushInfo p.top {
    padding-top: 0px;
}

#VideoClipsModal .PlayerPane {
    float: left;
    width: 500px;
}
#VideoClipsModal .ThumbPane {
    float: left;
    width: 140px;
    height:300px;
    overflow:auto;
}
#VideoClipsModal .ThumbPane .Thumb {
    margin-bottom:.4em;
    cursor:pointer;
}
#VideoClipsModal .CloseBtnWrapper {
    margin:.6em 0 .6em 0;
}
.VideoClipThumb {
    width:120px;
}
.VideoClipsModalLink {
    color:#f15925;
    font-weight:bold;
}
.sponsored-image-modal-header {
    background-color:#f15925;
}
.sponsored-image-modal-btn {
    background-color:#f15925;
}
.sponsored-image-modal-btn:hover {
    background-color:#d24e21;
}
.sponsored-image-modal-btn .fa {
    background-color:#d24e21;
}
.SearchPane label {
    font-weight:normal;
}

.form-group .form-control {
    width: 100%;
    padding: 0 11px;
    height:36px;
    line-height:normal;
}