body { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #fff; font-family: 'Open Sans', sans-serif; font-size: 14px; }
a { color: rgb(0, 175, 146) }
.purple { color: rgb(203,0,137); }
input, button { font-family:'Open Sans'; }
input[type="submit"], button { background-color: #d3dce0;  border: 1px solid #787878; cursor: pointer; font-weight: bold; padding: 10px; font-size: 14px; }
form { padding:0; margin: 0; }
img { border: 0; }
fieldset { margin-bottom: 10px; }
table tr td {vertical-align: top;}

/*  GENERAL */
#wrapper { position: absolute; height: 100%;  width: 960px; left: 50%; margin-left: -480px; }

#header { overflow: auto; padding: 20px 20px 20px 20px; }
#logo { float: left; }
#user { float: right; list-style: none; margin:0; padding:0; font-size: 16px; }
#user li { display: inline-block; }

#footer { position: fixed; border: 1px solid #ddd; bottom: 0; width: inherit; background-color:#fff; z-index: 100; }
#footer ul { list-style: none; padding: 20px; margin: 0; }
#footer ul li { display: inline-block; }
#footer ul.left li { margin-right: 14px; }
#footer ul.right li { margin-left: 14px; }

/*  HOMEPAGE */
#default-floater { position:absolute; top: 50%; margin-top: -70px; height: 140px; top: 50%; left: 50%; margin-left: -340px; width: 680px; }
#default-content { clear:both; }
#default-content input { padding: 6px; width: 350px; }
#default-content button { padding: 3px 20px; font-size: 14px;   }
#default-content ul { list-style: none; margin: 0; padding: 0; clear: both; }
#default-content ul li { display: inline-block; padding: 5px; font-size: 16px; }
#default-content p { clear: both; font-size: small; margin: 5px 0; }

/*  OTHER PAGES */
#content { padding: 0 10px; }
#content h1 { font-size: 26px; margin:0 0 10px; }
#content h2 { font-size: 20px; margin:0 0 10px; }

#content section { width: 48%; }
#content section.social button { width: 31%; padding: 8px; cursor: pointer; margin: 3px; }
#content section.social i { background-repeat: no-repeat; width: 16px; height: 16px; display: inline-block; position: relative; top:2px; margin-right: 7px; }
#content section.social i.facebook { background-image: url(/Images/icon_facebook.png); }
#content section.social i.microsoft { background-image: url(/Images/icon_microsoft.png); }
#content section.social i.google { background-image: url(/Images/icon_google.png); }
#content .existing-external { width: 100%; }
#user-management ul { list-style: none; padding:10px; margin: 0; font-size: 16px; }
#user-management ul li { padding: 5px; }
#user-management label { display: inline-block; width: 42%; font-weight: bold; font-size: 14px; }
#user-management label.checkbox { display: inline-block; font-weight: normal; }
#user-management input[type="text"], #user-management input[type="password"] { width: 53%; padding: 5px; font-size: 16px; font-family:'Open Sans'; }
#user-management input[type="submit"] { font-size: 18px;  }
#user-management .validation-summary-valid ul { padding:0; margin: 0; }
.field-validation-error, .validation-summary-errors { color: red; }
.validation-summary-errors ul {  margin: 5px 0 !important; padding: 0 !important; }
.field-validation-error span {  margin: 8px 0 !important; padding: 0 !important; clear: both; }


/*  ADMINISTRATION */
#content-left { width: 250px; float: left; padding-bottom: 62px; }

#content-left button { padding: 15px 20px; font-size: 20px; width: 100%;  }
.destinations { list-style: none; margin: 0; padding:0; }
.destinations a.destination { display: block; padding: 15px; background-color: rgb(203,0,137); color: #fff; text-decoration: none; margin: 10px 0 0 0; }
.destinations a.destination span { display: none; }
.destinations a.destination strong { font-weight: normal; }
.destinations a:hover { background-color: #000; }
.destinations a span { display: block; }
.destinations a.selected { display: block; }
.destinations a.selected span { display: block; }
.destinations a.selected strong { font-size: 16px; font-weight: bold; }

ul.destination { list-style: none; margin: 0; padding:5px; background-color: #fff; border: 5px solid rgb(203,0,137); border-top: 0; }
ul.destination a  { display: block; padding: 15px; background-color:  rgb(0, 175, 146); color: #fff; text-decoration: none; margin: 5px 0 5px 0; cursor: pointer; }
ul.destination a.selected { font-weight: bold; background-color:  rgb(0, 105, 106); }

#mobile-destination { display: none; }

#content-right { width: 690px; margin-left: 280px; min-height: 300px; padding-bottom: 62px; }
#content-right h1 { font-size: 20px; color: rgb(203,0,137); margin: 0 0 5px 0; padding: 0; line-height: 20px; }
#content-right h3 { font-size: 16px; color: rgb(203,0,137); font-weight: bold; margin: 5px 0 10px 0; padding: 0; }

.boxes { width: 47%; }
.boxes .ads img { margin:15px 25px; }

.shortcuts { width: 320px; float: left; }
.shortcuts-title { position: relative; height: 35px; }
.shortcuts-title h3 { position: absolute; left:0; top: 0; }
.shortcuts-title span { width: auto; float: right; padding: 2px 4px; position: absolute; right: 0; top: 4px; color: rgb(0, 175, 146) }
.shortcuts-title a { text-decoration: underline; font-weight: bold; }
.shortcut {  }
.shortcut ul { list-style: none; margin:0 0 10px 0; padding: 0; }
.shortcut ul li { padding: 6px 10px; }
.shortcut .title { background-color: rgb(0, 175, 146); color: #fff; padding: 6px 10px; width: auto; overflow: hidden; }
.shortcut .title span { display: inline-block;   float:left; cursor: pointer; text-decoration: underline; }
.shortcut .title a { display: inline-block; float:right; color: #fff; cursor: pointer; margin-left: 10px; cursor: pointer; }
.shortcut ul span { display: inline-block; }
.shortcut ul .tech { width: 40px; }
.shortcut ul .link { width: 250px;  }
.shortcut ul .icon { width: 30px; position: absolute; }
.shortcut ul .icon img { position: absolute; top: 0; left: 0; width: 20px; }


.lines { height:200px; width:680px; margin-bottom: 10px; }

.graphs { width: 350px; float: right; margin-left: 20px; }
.graphs-full { }

.graphs .pie { width: 170px; height: 250px;  }
.graphs .graph-pie { height: 180px; }

.graphs-full .pie { width: 225px; height: 310px; }
.graphs-full .graph-pie { height: 250px; }

#simplemodal-overlay {background-color:#000;}
#simplemodal-container { background-color:#fff; padding:20px 30px;}
.modal h2 { margin:0; }
.modal input { padding: 6px; width: 500px; margin-left: 15px; }
.modal select { width: 460px; margin-left: 15px; font-size: 15px; }
.modal select option { width: 440px; margin:0; padding:0; border:0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; }
.modal button { padding: 3px 20px; font-size: 14px; margin-left: 10px; }

#simplemodal-container a.modalCloseImg { background:url(/Images/x.png) no-repeat; /* adjust url as required */ width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer; }

.first-column { width: 140px; }
#destination-new-error, #destination-edit-error { color: red; padding: 5px 0; }
#btn-edit, #btn-shortcut-edit { font-size: 14px; display: none; margin-left: 5px; cursor: pointer; color: #999; }
#btn-shortcut-edit { display: inline-block; }
#btn-edit:hover, #btn-shortcut-edit:hover { color: #000;   }

@media (min-width: 1280px) {
    #wrapper {width: 1220px; left: 50%; margin-left: -610px; }
    #content-right { width: 910px; }
    .lines { width:900px;  }

    .graphs { width: 560px;  }
    .graphs .pie { width: 274px; height: 320px; }
    .graphs .graph-pie { height: 250px; }

    .graphs-full .pie { width: 300px; height: 360px; }
    .graphs-full .graph-pie { width: 300px; height: 300px; }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    #wrapper {width: 780px; left: 50%; margin-left: -390px; }

    #content section.social button { width: 30%; padding: 6px; cursor: pointer; margin: 3px; font-weight: normal; }
    #user-management label { display: inline-block; width: 95%; font-weight: bold; font-size: 14px; }
    #user-management input[type="text"], #user-management input[type="password"] { width: 95%; padding: 5px; font-size: 16px; font-family:'Open Sans'; }


    #content-right { width: 470px; }
    .lines { width:470px;  }

    .graphs { width: 470px; float: left; margin-left:0;  }
    .graphs .pie { width: 234px; height: 320px; }
    .graphs .graph-pie { height: 250px; }

    .graphs-full .pie { width: 234px; height: 330px; }
    .graphs-full .graph-pie { width: 234px; height: 250px; }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 767px), 
    only screen and (-webkit-device-pixel-ratio: 2), 
    only screen and (min-device-pixel-ratio : 2) ,
    only screen and (-webkit-min-device-pixel-ratio : 1.5), 
    only screen and (min-device-pixel-ratio : 1.5) {
    #wrapper { width: 100%; left: 0; margin-left:0; }

    #header { padding: 10px; }
    #logo { width: 140px; }
    #user { font-size: small; }
    #user li { display: block; margin: 0 0 3px; }
    #user li.divider { display: none; }

    #footer { display: none; }

    /*  HOMEPAGE */
    #default-floater { left: 0; margin-left: 0; width: 100%; }
    #default-content { padding: 10px; }
    #default-content input { padding: 4px 0; width: 100%; }
    #default-content button { padding: 3px 20px; font-size: 16px; }
    #default-content ul li { display: block; text-align: center; }
    #default-content p { font-size: 16px; text-align: center; }

    /*  OTHER PAGES */
    #content { font-size: 12px; }
    #content h1 { font-size: 18px; margin:0 0 5px; }
    #content h2 { font-size: 16px; margin:0 0 5px; }

    #content section { width: 100%; padding:0;  }
    #content section.social button { width: 30%; padding: 5px 2px; font-size: 11px; font-weight: normal; }
    #content section.social i { width: 12px; height: 12px;  }
    #user-management ul { padding:5px; font-size: 14px; }
    #user-management ul li { padding: 2px 0; }
    #user-management label { width: 100%;  }
    #user-management label.checkbox {  width: 150px; }
    #user-management input[type="text"], #user-management input[type="password"] { width: 100%; padding: 5px 0; margin:0; font-size: 14px; }
    #user-management input[type="submit"] { font-size: 16px;  }
    /*  ADMINISTRATION */
    #content-left { display: none; }

    #content-right { width: 100%; margin-left: 0; min-height: 0; }
    #content-right h1 { font-size: 16px; color: rgb(203,0,137); margin: 5px 10px; padding: 0; line-height: 20px; }
    #content-right h3 { font-size: 14px; color: rgb(203,0,137); margin: 5px 10px; font-weight: normal; padding: 0; }

    #mobile-destination { display: block; padding: 10px; }
    #mobile-destination select { width: 100%; padding:5px 0; font-size: 16px; margin: 3px 0; }
    #mobile-destination button { width: 100%; font-size: 16px; padding: 4px 0; margin: 3px 0; }
    table { padding:0 10px; }

    .boxes { width: 100%; display: none; }
    .boxes .ads {  }
    .boxes .ads img { margin:10px 10px; float: left; }

    .shortcuts { width: auto; float: none; padding: 5px 10px; }
    .shortcuts-title { position: relative; height: 35px; }
    .shortcuts-title h3 { position: absolute; left:0; top: 0; }
    .shortcuts-title button { position: absolute; right:0; top: 0px; padding: 2px 4px; font-size: 13px; }
    .shortcut {  }
    .shortcut ul { list-style: none; margin:0 0 10px 0; padding: 0; }
    .shortcut ul li { padding: 6px 10px; }
    .shortcut .title { background-color: rgb(0, 175, 146); color: #fff; padding: 6px 10px; width: auto; overflow: hidden; }
    .shortcut .title span { display: inline-block;   float:left; cursor: pointer; text-decoration: underline; }
    .shortcut .title a { display: inline-block; float:right; color: #fff; cursor: pointer; margin-left: 10px; }
    .shortcut ul span { display: inline-block; }
    .shortcut ul .tech { width: 40px; }
    .shortcut ul .link { width: 250px;  }
    .shortcut ul .icon { width: 30px; position: absolute; }
    .shortcut ul .icon img { position: absolute; top: 0; left: 0; width: 20px; }


    .lines { height:200px; width:auto; margin: 5px 10px 10px; }

    .graphs { width: auto; float: none; margin: 5px 10px 10px; }
    .graphs h3 { margin:5px 0 !important; }
    .graphs .pie { width: 48%; height: 250px;  }
    .graphs .graph-pie { height: 180px; }

    .graphs-full { width: auto; float: none; margin: 5px 10px 10px; }
    .graphs-full h3 { margin:5px 0 !important; }
    .graphs-full .pie { width: 48%; height: 250px;  }
    .graphs-full .graph-pie { height: 180px; }

    #simplemodal-overlay {background-color:#000;}
    #simplemodal-container { background-color:#fff; padding:5px;}
    .modal h2 { margin:0; }
    .modal input { width: auto; padding:0; }
    .modal select { width: auto; margin-left: 0; font-size: 14px; }
    .modal select option { margin:0; padding:0; border:0;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis; }
    .modal button { padding: 3px 20px; font-size: 14px; margin-left: 10px; }

    #simplemodal-container a.modalCloseImg { background:url(/Images/x.png) no-repeat; /* adjust url as required */ width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer; }

    #destination-new-error, #destination-edit-error { color: red; padding: 5px 0; }
    #btn-edit { font-size: 14px; display: none; margin-left: 5px; cursor: pointer; color: #999; }

}