CSS Collision?

[ajmccann11t]

Why would this simple modal CSS break JQ?

JQ works when I delete the lines in "CSS for Modal Popup"...

Thank you for any help/guidance...

    /* CSS for Modal Popup */

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

    /* CSS for JQ DropDown */

.jq-dropdown {
position: absolute;
z-index: 1039;
display: none
}
.jq-dropdown .jq-dropdown-menu,
.jq-dropdown .jq-dropdown-panel {
min-width: 160px;
max-width: 360px;
list-style: none;
background: #fff;
border: solid 1px #ddd;
border-radius: 4px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
overflow: visible;
padding: 4px 0;
margin: 0
}
.jq-dropdown .jq-dropdown-panel {
padding: 10px
}
.jq-dropdown.jq-dropdown-tip {
margin-top: 8px
}
.jq-dropdown.jq-dropdown-tip:before {
position: absolute;
top: -6px;
left: 9px;
content: '';
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ddd;
display: inline-block
}
.jq-dropdown.jq-dropdown-tip:after {
position: absolute;
top: -5px;
left: 10px;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
display: inline-block
}
.jq-dropdown.jq-dropdown-tip.jq-dropdown-anchor-right:before {
left: auto;
right: 9px
}
.jq-dropdown.jq-dropdown-tip.jq-dropdown-anchor-right:after {
left: auto;
right: 10px
}
.jq-dropdown.jq-dropdown-scroll .jq-dropdown-menu,
.jq-dropdown.jq-dropdown-scroll .jq-dropdown-panel {
max-height: 180px;
overflow: auto
}
.jq-dropdown .jq-dropdown-menu li {
list-style: none;
padding: 0 0;
margin: 0;
line-height: 18px
}
.jq-dropdown .jq-dropdown-menu label,
.jq-dropdown .jq-dropdown-menu li>a {
display: block;
color: inherit;
text-decoration: none;
line-height: 18px;
padding: 3px 15px;
margin: 0;
white-space: nowrap
}
.jq-dropdown .jq-dropdown-menu label:hover,
.jq-dropdown .jq-dropdown-menu li>a:hover {
background-color: #f2f2f2;
color: inherit;
cursor: pointer
}
.jq-dropdown .jq-dropdown-menu .jq-dropdown-divider {
font-size: 1px;
border-top: solid 1px #e5e5e5;
padding: 0;
margin: 5px 0
}

[ajmccann11t]

Sorry - never mind.

I moved the html that uses this CSS to the end of the html file (after JQ stuff) and all is well.

Really didn't want to give up JQ!