/***Customizations for Datacom Customer Connect**/
@import url(http://fonts.googleapis.com/css?family=Josefin+Slab);


body, .ui-widget, textarea  {
    font-family: Arial, sans-serif; 
}

a, a:link, a:visited {
    color: #333;
}

#dcc-interaction {
    max-width: 935px;
    min-height: 400px;
    margin-top: 180px;
    padding: 20px 40px 40px;
    background: #efefef;
}

/***Header****/
header {
    background: none;
	padding-bottom: 15px;
    padding-left: 0;
    padding-right: 0;
}

#header-container, #footer-container {
	max-width: none;
}

.login-sidebar th, .logged-in-sidebar th {
    background: #EFEFEF;
    border: none;
    color: black;
    padding: 5px;
}

 @media screen and (max-width: 860px) {


    #nav-wrapper {
        margin-left: 0 !important;
    }
}

 #header-container {
     height: 112px;
 }

#logo {
	width: 296px;
    height: 71px;
    position: relative;
    margin-top: -60px;
    margin-left: 70px;
}

#nav-wrapper {
    min-width: 425px;
    background: #0B1059;
    background: rgba(11, 16, 89, 0.6);
    margin-top: -35px;
}

#middle-zone {
    max-width: 1024px;
    margin: 0 auto;
	float:none !important;
}

#logging {
    max-width: 1015px;
    margin: 0 auto;
    float: none;
    text-align: right;
    height: 0;
}

#logging a {
    color: black;
}

#logging span.welcome 
{
    margin: 0px;
    font-size: 12px;
}
#logging a#logout, #logging span
{
    color: #B3B3B3
}

#logging a#logout:hover
{
    color: #FFFFFF
}

#logo-center {
    max-width: 1277px;
    height: 235px;
    margin: 0 auto;
    background: url(images/banner.png) no-repeat;
    margin-top: 60px;
}

#nav {    
    max-width: 1015px;
margin: 0 auto;
}

#nav li {
height: 35px;
margin-left: -2px;
position: relative;
background-image: url('images/menu-divider.png');
background-repeat: no-repeat;
display: inline-block;
/* min-width: 170px; */
float: left;
}

#nav li:nth-child(2) {
background-image: none;
}

#nav li a 
{
    background: none;
    margin: 8px 5px 8px 5px;
    display: block;
    font-size: 17px;
    color: white;
    font-family: 'Josefin Slab', serif;
    font-weight: 300;
    font-size: 1.3em;
    line-height: 19px !important;
    padding: 0 20px;
}

#nav li a.selected 
{
    background-image: none;
}

#nav li a:hover
{
    text-decoration:none;
}

#nav li a.selected:hover {
    text-decoration: none;
} 






/***Main****/
#content-container {
    /*background: url(images/background-strip.png) repeat-x;*/
}

#form-wrapper h2 {
    color: #2F83C5;
}

.contacts h3  {
    color: #2F83C5;
}

#form-wrapper #select-title {
    /*ie Select Property...*/
    color: #333333;
    text-shadow: 0 1px white;
}

p span {
    color: #3B79B9;
}




/***Buttons***/
/*#step-heading,
.applications table thead tr {
    background: #3574af;
    background:-webkit-linear-gradient(bottom, #ECEDE1, #F6F7F1);
    background:-moz-linear-gradient(bottom, #ECEDE1, #F6F7F1);
    background:-ms-linear-gradient(bottom, #ECEDE1, #F6F7F1);
    color: #333333;
    border: 1px solid #D7D7D7;
    border-bottom: none;
}*/

.button, .fileinput-button a, .link-button a, .save-button, .button:hover, .fileinput-button a:hover, .link-button a:hover,
input[type="submit"].button:hover, a.button:hover, div.button.dropdown:hover,
input[type="button"],
.fileinput-button a,
.link-button a, .login-sidebar a.button, .logged-in-sidebar a.button {
    background: #F48222 !important;
    background:-webkit-linear-gradient(bottom, #D0711F, #F48222) !important;
    background:-moz-linear-gradient(bottom, #D0711F, #F48222) !important;
    background:-ms-linear-gradient(bottom, #D0711F, #F48222) !important; 
    color: white;
}

.button, .fileinput-button a, .link-button a, .save-button {
    background: #D0711F;
}

.button, .fileinput-button a, .link-button a, .save-button, .button:hover, .fileinput-button a:hover, .link-button a:hover,
a.button:hover, div.button.dropdown:hover, input[type="button"].button.repeater-add:hover,
input[type="submit"].button,
input[type="button"],
.fileinput-button a, #popup_panel input[type="button"],
.link-button a { 
    border: 1px solid #F48222 !important;
}

input[type="submit"].button:hover,
 .login-sidebar a.button:hover, .logged-in-sidebar a.button:hover , input[type="button"].button.repeater-add:hover{
    background: #D0711F !important;
    background:-webkit-linear-gradient(bottom, #F48222, #D0711F) !important;
    background:-moz-linear-gradient(bottom, #F48222, #D0711F) !important;
    background:-ms-linear-gradient(bottom, #F48222, #D0711F) !important;
    border: 1px solid #F48222;
}

/** Forms ******/
#form-wrapper h2, h1 {
    color: #F48222;
}

div.charges-summary-container div.charges-summary-row.header {
    background-color: #F48222;
}

div.charges-summary-container {
    border: 1px solid #F48222 !important;
}

div.charges-summary-container div.charges-summary-row.total {
    border-top: 1px solid #F48222;
}

/***My Account***/
.applications#dogs .dog a.moreInfo.open, .applications #add-dog-wrapper #add-dog
{
    background-color: #968B83;
}


.account-link a {
    background: #968B83;
}

.account-link a:hover, .account-link a:active {
    background: #e87a1b;
}

.additional-fee-text {
	display:none !important;
}

.no-additional-fee-text {
	display:inline !important;
}

@media screen and (max-width: 1024px) and (min-width: 720px) {
    header {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #dcc-interaction, #nav, #logo-center {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .services-list .services, .services-list-small .services {
        width: calc(50% - 25px);
    }
}

@media (max-width: 860px) {
    .services h2, 
    .services.Bookings h2, 
    .services.Payments h2, 
    .services + .services h2 {
        background: #6c6f9b;
    }
	
	.services h2 {
	color:white;}

    #logo {
           margin-top: -60px !important;
			margin-left: -25px !important;
        background-position-x: center;
    }
    header, footer {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #content-container {
        margin: 0;
        margin-top: 130px;
    }
    .services {
        width: calc(33% - 20px);
    }
    #dcc-interaction, #nav, #logo-center {
        padding-left: 20px;
        padding-right: 20px;
    }    
    .services-list .services, .services-list-small .services {
        width: calc(100% - 25px);
    }
     #searchoption {
        margin-bottom:10px;
    }
}

@media (max-width: 720px) {
    .blockMsg {
    width: auto !important;
    top: 30% !important;
    left: 3% !important;
    text-indent: 35px !important;
    text-align: center !important;
}

    #progress-bar .page-title span:first-child {
        color: #FFFFFF;
    }
    #progress-bar .current-step span:first-child {
        color: #000000;
    }
    .services {
        width: calc(50% - 40px);
    }
    #dcc-interaction, #nav, #logo-center {
        padding-left: 10px;
        padding-right: 10px;
    }
     #searchoption {
        margin-bottom:10px;
    }
     #progress-bar .step:before, #progress-bar .step:after, #progress-bar .current-step:before, #progress-bar .current-step:after {
         display:none;
     }

     #progress-bar {
        width: 97%;
        margin: 12px auto;
    }
     #progress-bar .step, #progress-bar .current-step {
    padding-left: 2px;
}

#logo-center{
	background:none;
    height: 25px;
	margin-top: 15px;
}

#dcc-interaction {
    margin-top: 165px;
}

#content-container {
margin-top:10px;
}

#nav li  {
width:100%;
margin: 10px 0;
}

#nav-wrapper {
	min-width:0;
	    margin-top: 70px;
}

#logo {
           margin-top: 0px !important;
			margin-left: 5px !important;
    }
}
@media screen and (max-width: 500px) {	

    .blockMsg {
    width: auto !important;
    top: 30% !important;
    left: 3% !important;
    text-indent: 35px !important;
    text-align: center !important;
}

    .services {
        width: 100%;
        margin:0;
    }

    .services li {
        margin-left:10px;
    }

    #dcc-interaction {
        padding: 10px 10px 40px;
    }

    #nav li a {
        width: 100%;
        margin-left:0;
        margin-right:0;
        padding-left:0;
        padding-right:0;
        text-align:center;
    }

    #dcc-interaction, #nav, #logo-center {
        padding-left:0px;
        padding-right:0px;
    }

    #searchoption {
        margin-bottom:10px;
    }

    #progress-bar, #progress-bar div:first-child.current-step,
    #progress-bar .current-step.page-title span.step_cr {
        border: none;
    }

    #progress-bar .step:after, #progress-bar .step:before, #progress-bar .current-step:after , #progress-bar .current-step:before {
        display:none;
    }

    #progress-bar .step, #progress-bar .current-step {
        padding-left:0;
    }
	#progress-bar .current-step:after {
	    display:none;
	}

    div#payment-gateway div.payment input[type="submit"].button {
        margin-left: 0;
        color: white !important;
    }
}