/* OpoCore — public site, replica of the legacy OPOSite stylesheet.css.
   Admin styles live in admin.css (scoped under .adminScreen). */

@font-face { font-family: HilaDrorLight-Regular; src: url("../fonts/HilaDrorLight-Regular.eot"); }
@font-face { font-family: HilaDrorLight-Regular; src: url("../fonts/HilaDrorLight-Regular.ttf"); }
@font-face { font-family: HilaDrorBlack-Regular; src: url("../fonts/HilaDrorBlack-Regular.eot"); }
@font-face { font-family: HilaDrorBlack-Regular; src: url("../fonts/HilaDrorBlack-Regular.ttf"); }

body { margin: 0; padding: 0; font-family: Arial; }
img { border: 0; }

header {
    width: 100%;
    height: 122px;
    background-image: url(../images/topBannerBG.png);
    background-repeat: repeat-x;
}
header center div { max-width: 980px; }
header center div nav { float: left; }

#logo { cursor: pointer; float: right; border: 0; }

#facebookLikeDiv { position: relative; left: 36px; top: 12px; }

#slogen {
    text-align: left;
    float: left;
    clear: both;
    max-width: 720px;
    font-family: HilaDrorLight-Regular;
    color: #c0866d;
    font-size: 22pt;
    font-weight: bold;
    text-shadow: 2px 2px 2px #888;
}

#mainDiv {
    font-family: Arial;
    max-width: 980px;
    padding-right: 4px;
    padding-left: 4px;
    text-align: right;
}

article {
    width: 720px;
    float: left;
}
article.Wide { width: 100%; }

aside {
    width: 246px;
    font-family: Arial;
    float: right;
}

footer { padding-top: 10px; clear: both; }
#bottomDiv {
    background-image: url(../images/bottomDivBg.png);
    background-repeat: repeat-x;
    height: 112px;
    width: 100%;
}

/* ===== main menu (rendered into #mainMenuDiv by App.cs InjectMenuAsync) ===== */
#mainMenuDiv { border-collapse: separate; margin: 0; padding: 0; }
#mainMenuDiv > img { float: right; }
#mainMenuDiv a {
    display: block;
    float: right;
    border-left: 1px solid #c4e0e6;
    border-right: 1px solid #407279;
    color: #fdffff;
    padding: 9px 20px 0 20px;
    cursor: pointer;
    font-family: Arial;
    background-image: url(../images/menuBG.png);
    background-repeat: repeat-x;
    height: 32px;
    text-decoration: none;
}
#mainMenuDiv a:hover, #mainMenuDiv a:visited { text-decoration: none; color: #fdffff; }
#mainMenuDiv a:hover { background-image: url(../images/menuBGLight.png); }

/* ===== right-aside cubes ===== */
.bigBlueRightMenu, .bigOrangeRightMenu, .BlueRightMenu {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    text-align: justify;
    width: 215px;
    padding: 19px 12px 0 8px;
    font-size: 10pt;
    margin-bottom: 16px;
    border-collapse: separate;
    box-shadow: 6px 6px 4px #aaa;
    cursor: pointer;
}
.bigBlueRightMenu { height: 144px; background-color: #dceff1; color: #31a3b9; }
.bigOrangeRightMenu { height: 144px; background-color: #f2e7e0; color: #c0866d; }
.BlueRightMenu { height: 75px; padding-top: 8px; background-color: #dceff1; color: #31a3b9; text-align: left; }

.BlueRightMenu:hover, .bigBlueRightMenu:hover { background-color: #eafeff; box-shadow: 6px 6px 6px #777; }
.bigOrangeRightMenu:hover { background-color: #fff4ed; box-shadow: 6px 6px 6px #777; }

.bigBlueRightMenu hr, .BlueRightMenu hr { border: 0; border-top: 1px solid #2ea7bf; height: 1px; }
.bigOrangeRightMenu hr { border: 0; border-top: 1px solid #c0866d; height: 1px; }

.blueTitle, .blueTitle a, .blueTitle a:visited, .blueTitle a:hover {
    font-size: 16pt; font-weight: bold; color: #31a3b9; padding-bottom: 2px; height: 18px;
    text-shadow: 1px 1px 1px #888; text-decoration: none;
}
.blueTitleSmall, .blueTitleSmall a, .blueTitleSmall a:visited, .blueTitleSmall a:hover {
    font-size: 14pt; font-weight: bold; color: #31a3b9; margin-bottom: -6px;
    text-shadow: 1px 1px 1px #888; text-decoration: none;
}
.orangeTitle, .orangeTitle a, .orangeTitle a:visited, .orangeTitle a:hover {
    color: #c0866d; font-size: 16pt; font-weight: bold; padding-bottom: 2px; height: 18px;
    text-shadow: 1px 1px 1px #888; text-decoration: none;
}

.firstBlueIcon { position: relative; left: 188px; top: -44px; }
.bigBlueArrow { position: relative; left: 0; top: 40px; }
.firstOrangeIcon { position: relative; left: 169px; top: -39px; }
.bigOrangeArrow { position: relative; left: 0; top: 46px; }
.arrowImageDiv { margin-top: 17px; }

/* ===== slideshow on home page ===== */
.slideshow {
    margin: 0 auto;
    position: relative;
    left: 0;
    width: 401px;
    height: 251px;
    overflow: hidden;
    border-left: 1px solid #edb099;
    background-color: #edb099;
}
.slideshow li { position: absolute; left: 0; top: 0; width: 401px; height: 251px; display: none; list-style: none; }

#mainTransitionTd { padding: 0; margin: 0; border: 0; width: 401px; height: 251px; }
#mainLeftTd {
    width: 308px;
    height: 526px;
    background-image: url(../images/leftbg.png);
    background-repeat: no-repeat;
    background-position: right top;
}
#textTd { padding: 10px 20px 20px 3px; text-align: justify; height: 260px; }
#textTd div { width: 360px; }

/* ===== contact form on home page (#contactUsDiv) ===== */
#contactUsDiv {
    position: relative;
    top: 134px;
    width: 271px;
    height: 392px;
    background-color: #565656;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    color: white;
    font-family: Arial;
}
#contactUsDiv table { width: 244px; margin-right: 10px; }
#contactUsDiv td { height: 48px; }
#contactUsDiv input[type=text], #contactUsDiv input[type=email], #contactUsDiv input[type=tel] {
    width: 200px;
    background-color: white;
    border: 0;
    height: 20px;
    border-radius: 6px;
}
#contactUsDiv textarea {
    width: 200px;
    background-color: white;
    border: 0;
    height: 70px;
    border-radius: 6px;
}
#contactUsDiv a, #contactUsDiv a:visited, #contactUsDiv a:active { color: white; }
#contactUsDiv a:hover { color: #f0f0ff; }
.sendButton {
    width: 57px;
    height: 57px;
    background-color: transparent;
    background-image: url(../images/sendButton.png);
    background-repeat: no-repeat;
    border: 0;
    cursor: pointer;
}
.sendButton:hover { background-image: url(../images/sendButtonOver.png); }
.contactMessage { display: inline-block; color: white; padding-right: 8px; font-weight: bold; }

/* ===== free-service strip below the home text ===== */
#freeServiceDiv {
    margin-top: 14px;
    background-color: #f2f1f1;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    width: 710px;
    height: 140px;
    box-shadow: 6px 6px 4px #aaa;
}
#freeServiceDiv:hover { background-color: #f8f9f9; }
#freeServiceDiv table { margin-right: 20px; width: 670px; }
.hila { font-family: HilaDrorBlack-Regular; color: #229bb3; font-size: 27pt; margin-bottom: 3px; }
.freeItem {
    width: 178px;
    height: 26px;
    background-color: #dad9d9;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    color: #666;
    margin-bottom: 10px;
    background-image: url(../images/smallArrow.png);
    background-repeat: no-repeat;
    background-position: left center;
    font-weight: bold;
    cursor: pointer;
}
.freeItem b { display: block; margin-top: 2px; }
.freeItem a { margin-right: 10px; text-decoration: none; color: #666; padding-top: 2px; display: block; }
.freeItem a:hover { color: #666; text-decoration: underline; }

/* ===== mainbox: most inner-screen content lives in one of these ===== */
.mainbox {
    background: url(../images/titlebg.png);
    background-repeat: no-repeat;
    background-position: top;
    text-align: justify;
}
.mainbox h1 {
    font-size: 16pt;
    color: white;
    padding-right: 20px;
    padding-top: 13px;
    margin-bottom: 40px;
}
.mainbox a, .mainbox a:visited { color: #017389; text-decoration: none; }
.mainbox a:hover { text-decoration: underline; }
.mainbox h2 { margin-top: 14px; font-size: 16pt; font-weight: bold; color: #31a3b9; }
.mainbox h3 { margin-top: 8px; font-size: 14pt; font-weight: bold; color: #2193a9; }
.mainbox ul { padding-right: 20px; list-style-type: disc; }
strong { font-weight: bold; color: #017389; }

/* ===== customers / portfolio ===== */
#customersDiv div {
    text-align: center;
    width: 190px;
    height: 100px;
    border: 1px solid #2ea7bf;
    border-radius: 6px;
    float: right;
    padding: 0.3em;
    margin: 0.4em;
}
.customerCard { display: block; color: black; text-decoration: none; }
.customerCard img { max-width: 100%; max-height: 70px; }

/* ===== blog ===== */
.blogDate { padding-top: 4px; font-size: 8pt; }
.blogContent { margin-top: 8px; }
.blogRight { width: 200px; border-left: 1px solid #2ea7bf; padding: 8px; }
.bodyTextBox { display: none; }
.commentForm { margin-top: 1em; }
.commentForm label { display: block; margin: 0.3em 0; }
.commentsList .comment { margin: 1em 0; padding: 0.5em 1em; background: #f5f7fa; border-right: 3px solid #31a3b9; }
.commentFrom { font-weight: bold; color: #31a3b9; margin-bottom: 0.2em; }

/* ===== sites grid ===== */
.sites { text-align: center; }
.sites a, .sites a:visited { display: inline-block; margin: 0.5rem; font-weight: bold; text-decoration: none; color: black; }
.sites a:hover { text-decoration: underline; background-color: yellow; }
.sites a img { display: block; border: 0; }

/* admin-button overlay in the side menu */
.adminLink { margin-top: 12px; font-size: 10pt; }
.adminLink input[type=button] {
    background: none; border: 0; color: #fdffff; cursor: pointer;
    font: bold 10pt Arial; padding: 4px 10px;
}
.adminLink span { color: #fdffff; padding: 0 8px; font-size: 9pt; }