#modal_outer {
        position:fixed;
        top:50%;
        left:50%;
        z-index:4563;     
        background-color:#FFFFFF;  
    }
    
    #modal_overlay {
        position:fixed;
        left:0px;
        top:0px;
        z-index:4561;
        background-color:#555555;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        opacity: 0.8;
        height:100%;
        width:100%;
    }
    
    #modal_container {
        text-align: center;
        padding:10px;
        overflow:none;  
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:12px;
    }
    
    #modal_control {
        width:100%;
        height: 39px;
        padding-left: 10px;
        padding-right: 10px;
        text-align:center;
        position:relative;
    }
    
    #modal_control .left{
        position:absolute;
        left:0px;
        top:2px;
    }

    #modal_control .right{
        position:absolute;
        right:0px;
        top:2px;        
    }
        
    #modal_header {
        width: 100%;
        padding: 6px;
        padding-top: 0px;
        height: 33px;
        border-bottom: 1px solid #eaeaea;
    }   
    
    #modal_header .title{
        font-weight: bold;
        font-size: 17px;
        margin-top: 0px;
        margin-top: 10px;
        padding: 0;
        display: inline-block;
    }
    
    #modal_container p, #modal_container ul, #modal_container li {
        font-size: 12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }

/* Modal Buttons - Continue, Close, Page Back, Page Forward (Hover states listed at end) */

/* Contine button */

.modalButtonContinue, .modalButtonClose, .modalButtonBack, .modalButtonForward, .modalButtonNoStyle, .videoModalButtonClose {
	float: right;
	min-width: 30px;
	margin-top: 5px;
	height: 20px;
	padding: 0;
}

#modal_container #controls {
	display: none;
}

.modalButtonContinue a, .modalButtonContinue a:link, .modalButtonContinue a:visited {
	height: 29px;
	margin: 0;
	color: #000;
	background-image: url(/content/common/images/modalButtons/modalButtonContinueBg.gif);
	background-repeat: repeat-x;
	font-size: 13px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: underline;
	padding-top: 4px;
	float: left;
	min-width: 10px;
}
.modalButtonContinue .buttonCapLt, 
.modalButtonContinue .buttonCapRt {
	height: 29px;
    background-repeat: no-repeat;
    float: left;
    margin: 0;
}
.modalButtonContinue .buttonCapLt {
	width: 26px;
	background-image: url(/content/common/images/modalButtons/modalButtonContinueCapLt.gif);
}

.modalButtonContinue .buttonCapRt {
	width: 10px;
	background-image: url(/content/common/images/modalButtons/modalButtonContinueCapRt.gif);
}


/* Close button, Page Back, Page Forward a classes*/

.modalButtonClose a, .modalButtonClose a:link, .modalButtonClose a:visited, .modalButtonBack a, .modalButtonBack a:link, .modalButtonBack a:visited, .modalButtonForward a, .modalButtonForward a:link, .modalButtonForward a:visited, .modalButtonNoStyle a, .modalButtonNoStyle a:link, .modalButtonNoStyle a:visited, .videoModalButtonClose a, .videoModalButtonClose a:link, .videoModalButtonClose a:visited {
	height: 29px;
	margin: 0;
	color: #000;
	background-image: url(/content/common/images/modalButtons/modalButtonBg.gif);
	background-repeat: repeat-x;
	font-size: 13px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: underline;
	padding-top: 4px;
	float: left;
	min-width: 10px;
}

/* NEW MODAL BUTTON */
.btn-new a, .btn-new a:link,.btn-new a:hover {
    background-image: none;
    text-decoration: none;
    height: initial;
    padding: 12px 14px;
    margin: initial;
    float: none;
    position: relative;
    bottom: 6px;
}

.btn-new a:hover, .btn-new a:hover {
    text-decoration: initial !important;
    color: initial !important;
    float: initial !important;
}

.btn-grey a, .btn-grey a:link {
    background-color: #efefef;
}

.btn-grey a:hover {
    background-color: #dedede !important;
}

.btn-green a, .btn-green a:link, .btn-green a:visited {
    background-color: #3a981e;
    color: #ffffff;
}

.btn-green a:hover {
    background-color: #317d1a !important;
    color: #ffffff !important;
}
/* END NEW MODAL BUTTONS */

.modalButtonClose .buttonCapRt, 
.modalButtonBack .buttonCapRt, 
.videoModalButtonClose .buttonCapRt {
	height: 29px;
	float: left;
	width: 10px;
	background-image: url(/content/common/images/modalButtons/modalButtonCapRt.gif);
	background-repeat: no-repeat;
	margin: 0;
}

/* Close Button Left X Graphic */

.modalButtonBack .buttonCapLt, 
.modalButtonClose .buttonCapLt, 
.videoModalButtonClose .buttonCapLt {
	height: 29px;
	width: 24px;
	float: left;
	background-image: url(/content/common/images/modalButtons/modalButtonCloseCapLt.gif);
	background-repeat: no-repeat;
	margin: 0;
}

/* Page Back Button Left Arrow Graphic */

.modalButtonBack .buttonCapLt {
	background-image: url(/content/common/images/modalButtons/modalButtonBackCapLt.gif);
}

/* Page Forward Right Arrow Graphic */

.modalButtonForward .buttonCapLt, 
.modalButtonForward .buttonCapRt {
	height: 29px;
	float: left;
	background-repeat: no-repeat;
    margin: 0;
}

.modalButtonForward .buttonCapLt {
	width: 10px;
	background-image: url(/content/common/images/modalButtons/modalButtonForwardCapLt.gif);
}
.modalButtonForward .buttonCapRt {
    width: 24px;
    background-image: url(/content/common/images/modalButtons/modalButtonForwardCapRt.gif);
}

/* No style buttons - no left or right edge graphics */
.modalButtonNoStyle .buttonCapLt, 
.modalButtonNoStyle .buttonCapRt {
	height: 29px;
	width: 10px;
	float: left;
    background-repeat: no-repeat;
    margin: 0;
}
.modalButtonNoStyle .buttonCapLt {
	background-image: url(/content/common/images/modalButtons/modalButtonForwardCapLt.gif);
}

.modalButtonNoStyle .buttonCapRt {
	background-image: url(/content/common/images/modalButtons/modalButtonCapRt.gif);
}


/* Button HOVERS - Continue, Close, Page Back, Page Forward */

.modalButtonClose a:hover, .modalButtonBack a:hover, .modalButtonForward a:hover, .modalButtonContinue a:hover, .modalButtonNoStyle a:hover, .videoModalButtonClose a:hover {
	text-decoration: none;
	color: #090;
	float: left;
	background-color: transparent;
}

#modalButtonRight {
	float: right;
}

#modalButtonLeft {
	float: left;
}

/* Additional message text styles */

#warningText {
	font-weight: bold;
	color: #f00;
}

#flashZoomifyPhase2Iframe{
	border:0;
	height:100%;
	margin:-5px -5px -5px -9px;
	overflow:hidden;
	width:100%;
}

#modal_outer .noControls {
	border-bottom:3px solid #DEDCDC;
	padding: 0;
}

#modal_outer .noHeader {
	border-top:3px solid #DEDCDC;
}

#modal_outer .noFooter {
	border-bottom:3px solid #DEDCDC;
}

.formOverlayBorder {
	position:absolute;
	top:50%;
	left:50%;
	border:3px solid #dedcdc;
	margin-left: -100px;
	width: 200px;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	z-index: 1000;
	text-align: center;
	padding:10px;
	padding-top:25px;
	background: #FFF url(/content/images/product_details/loading.gif) 50% 3px no-repeat;
	font-size:13px;	
}

.formOverlayBorder .overlayCornerBL {
	background: transparent url(/content/images/productdetails/prodDetailsBL.gif) no-repeat center bottom;
	bottom:0;
	height:10px;
	left:0;
	margin:-3px;
	padding:0;
	position:absolute;
	width:10px;
}


.formOverlayBorder .overlayCornerBR {
	background:transparent url(/content/images/productdetails/prodDetailsBR.gif) no-repeat center bottom;
	bottom:0;
	height:10px;
	right:0;
	margin:-3px;
	padding:0;
	position:absolute;
	width:10px;
}

.overlay {
	background: #FFF none;
	height:100%;
	left:0;
	margin-left:-3px;
	margin-top:-3px;
	position:absolute;
	top:0;
	width:100%;
	z-index:4563;
}

#modalContinueAnchor {
	cursor: pointer;
}

/* VIDEO MODAL STYLING ONLY
-----------------------------------------------------------------*/
.videoModalContainer, 
.videoModalControls {
	padding: 0 !important;
}

.videoModalHeader {
    padding: 10px 0 !important;
}

.videoModalHeader .title {
    padding-left: 10px;
}

/* Irish marketing preferencs - Communication options
-----------------------------------------------------------------*/
.marketingTickBox {
	width: 20px;
	float: left;
	margin-right:3px;
}

/** CSS spinner - use inside a container to position
-----------------------------------------------------------------*/
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(1turn); }
}
@-moz-keyframes spin {
    to { -moz-transform: rotate(1turn); }
}
@-ms-keyframes spin {
    to { -ms-transform: rotate(1turn); }
}
@-o-keyframes spin {
    to { -o-transform: rotate(1turn); }
}
@keyframes spin {
    to { transform: rotate(1turn); }
}

.progress {
    position: relative;
    display: inline-block;
    width: 5em;
    height: 5em;
    margin: 0.5em;
    font-size: 17px;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    border: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;    
    text-indent: 999em;
    overflow: hidden;
    -webkit-animation: spin 1s infinite steps(8);
    -moz-animation: spin 1s infinite steps(8);
    -ms-animation: spin 1s infinite steps(8);
    -o-animation: spin 1s infinite steps(8);
    animation: spin 1s infinite steps(8);
    top: 50%;
}

.no-cssanimations .progress {
	display: none;
}

.small.progress {
    font-size: 6px;
}

.large.progress {
    font-size: 24px;
}

.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
    content: '';
    position: absolute;
    top: 0;
    left: 2.25em; /* (container width - part width)/2  */
    width: .5em;
    height: 1.5em;
    border-radius: .2em;
    background: #ccc;
    box-shadow: 0 3.5em #ccc; /* container height - part height */
    -webkit-transform-origin: 50% 2.5em; /* container height / 2 */
    -moz-transform-origin: 50% 2.5em; /* container height / 2 */
    -ms-transform-origin: 50% 2.5em; /* container height / 2 */   
    -o-transform-origin: 50% 2.5em; /* container height / 2 */
    transform-origin: 50% 2.5em; /* container height / 2 */
}

.progress:before {
    background: #555;
}

.progress:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);	
	-o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: #777;
}

.progress > div:before {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);    
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background: #999;
}

.progress > div:after {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);    
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    background: #bbb;
}

#spinner_container {
    left: 50%;
    position: fixed;
    z-index: 1001;
    height: 100%;
    opacity: 1;    
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);       
    -o-transform: translateX(-50%);      
    transform: translateX(-50%);
}

.no-cssanimations #spinner_container { 
	background-image: url(/presentation/images/common/fallback_spinner.gif);
	background-repeat: no-repeat;
	opacity: 0.6;
	height: 90px;
	width: 90px;
	top: 50%;
}

/** Quickview Modal **/
#modal_outer .quickview-no-product {
    text-align: left;
    height: 310px !important
}

#modal_container.quickview-no-product {
    border: 3px solid #a2a2a2 !important;
    border-radius: 1em !important;
}

#modal_outer .ampl-modal-close {
    background: url("//images2.drct2u.com/content/common/images/commongui/modal-close-cross.gif") no-repeat scroll 38px 0 rgba(0, 0, 0, 0);
    box-shadow: none;
    color: black;
    cursor: pointer;
    float: right;
    font-size: 11px;
    font-weight: normal;
    height: 32px;
    line-height: 25px;
    padding-right: 41px;
    position: absolute;
    right: 4px;
    top: 8px;
    width: 30px;
}