/* OptionBundle Picker Image*/
.optionbundle-picker-unselected {border:1px solid white; margin-right:2px;}
.optionbundle-picker-selected {border:1px solid black; margin-right:2px;}


/* 

Narrow Layout Group Section

It is used when "Display product options in : Product Info Column" is selected on the edit product page in Magento admin panel.
(when options container id=product-options-wrapper has width < 590 )
*/


/* OptionBundle Above */
dd.optionbundle-narrow-above {width:290px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-narrow-above img.optionbundle-image {float:left; width:100px; height:100px; margin:8px 0 0 0;}
dd.optionbundle-narrow-above select {margin:8px 0 10px 0;}
dd.optionbundle-narrow-above ul.options-list {margin:0 0 10px 0;}
dd.optionbundle-narrow-above .description {width:180px; float:right;font-size:10px; display:block; margin:8px 0 0 0; font-weight:normal; font-style:normal; }
dd.optionbundle-narrow-above .spacer{height:1px; clear:both;}

/* OptionBundle Above Checkbox */
dd.optionbundle-narrow-above-checkbox  {width:290px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-narrow-above-checkbox img.optionbundle-image {width:100px; height:100px; margin:8px 0 0 0;}
dd.optionbundle-narrow-above-checkbox ul.options-list {margin:0 0 10px 0;}
dd.optionbundle-narrow-above-checkbox .truncated .optionbundle-icon {vertical-align:middle; margin:0 0 1px 4px;}
dd.optionbundle-narrow-above-checkbox .truncated {display:inline;}
dd.optionbundle-narrow-above-checkbox .price-notice {margin-right:4px;}


/* OptionBundle Before Select*/
dd.optionbundle-narrow-before-select {width:290px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-narrow-before-select img.optionbundle-image {float:left; width:100px; height:100px; vertical-align:middle; margin:10px 10px 10px 0;}
dd.optionbundle-narrow-before-select select {float:left; width:175px; margin-top:50px;}
dd.optionbundle-narrow-before-select .truncated {float:left; width:14px; margin:8px 100px 0 0;}
dd.optionbundle-narrow-before-select .spacer{height:1px; clear:both;}

/* OptionBundle Before Radio*/
dd.optionbundle-narrow-before-radio {padding:0; margin:0 0 10px 0;}
dd.optionbundle-narrow-before-radio img.optionbundle-image {width:100px; height:100px; float:left; vertical-align:middle; margin:10px 10px 10px 0;}
dd.optionbundle-narrow-before-radio ul.options-list {list-style-type:none; float:left; margin:10px 0 10px 0;}
dd.optionbundle-narrow-before-radio .truncated .optionbundle-icon {vertical-align:middle; margin:0 0 1px 4px;}
dd.optionbundle-narrow-before-radio .truncated {display:inline;}
dd.optionbundle-narrow-before-radio .spacer{height:1px; clear:both;}
dd.optionbundle-narrow-before-radio .price-notice {margin-right:4px;}


/* OptionBundle Below */
dd.optionbundle-narrow-below {width:290px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-narrow-below img.optionbundle-image {float:left; width:100px; height:100px; margin:0 0 4px 0;}
dd.optionbundle-narrow-below select {margin:4px 0 10px 0;}
dd.optionbundle-narrow-below ul.options-list {margin:0 0 10px 0;}
dd.optionbundle-narrow-below .description {width:180px; float:right;font-size:10px; display:block; margin:0; font-weight:normal; font-style:normal; }
dd.optionbundle-narrow-below .spacer{height:1px; clear:both;}

/* OptionBundle Below Checkbox */
dd.optionbundle-narrow-below-checkbox {width:290px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-narrow-below-checkbox img.optionbundle-image {width:100px; height:100px; margin:0 0 4px 0;}
dd.optionbundle-narrow-below-checkbox ul.options-list {margin:0 0 10px 0;}
dd.optionbundle-narrow-below-checkbox .truncated .optionbundle-icon {vertical-align:middle; margin:0 0 1px 4px;}
dd.optionbundle-narrow-below-checkbox .truncated {display:inline;}
dd.optionbundle-narrow-below-checkbox .price-notice {margin-right:4px;}


/* OptionBundle Swap Select*/
dd.optionbundle-narrow-swap-select {width:290px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-narrow-swap-select select {margin:8px 0 10px 0;}
dd.optionbundle-narrow-swap-select .description {font-size:10px; margin:0 0 8px 0; font-weight:normal; font-style:normal; }

/* OptionBundle Swap Radio*/
dd.optionbundle-narrow-swap-radio {padding:0; margin:0 0 10px 0;}
dd.optionbundle-narrow-swap-radio ul.options-list {float:left; margin:0 0 10px 0;}
dd.optionbundle-narrow-swap-radio .truncated .optionbundle-icon {vertical-align:middle; margin:0 0 1px 4px;}
dd.optionbundle-narrow-swap-radio .truncated {display:inline;}
dd.optionbundle-narrow-swap-radio .spacer{height:1px; clear:both;}
dd.optionbundle-narrow-swap-radio .price-notice {margin-right:4px;}


/* OptionBundle Picker */
dd.optionbundle-narrow-picker {width:290px; padding:0; margin:5px 0 10px 0;}
dd.optionbundle-narrow-picker select {margin:2px 0 10px 0;}
dd.optionbundle-narrow-picker .description {font-size:10px; margin:0 0 8px 0; font-weight:normal; font-style:normal; }


/* OptionBundle Note */
.optionbundle-narrow-note {font-size:12px;}


/* OptionBundle Grid */
dd.optionbundle-narrow-grid {padding:0; margin:0 0 10px 0;}
dd.optionbundle-narrow-grid ul.options-list {list-style-type:none; padding:10px 0 0 0; margin:0;}
dd.optionbundle-narrow-grid ul.options-list li {width:135px; height:145px; float:left; margin-right:10px; line-height:normal; padding:0}
dd.optionbundle-narrow-grid ul.options-list input.radio { float:none; margin:0; position: relative; left: 8px;}
dd.optionbundle-narrow-grid ul.options-list input.checkbox { float:none; margin:0; position: relative; left: 8px;}
dd.optionbundle-narrow-grid ul.options-list .label {text-align:center; margin:3px 0 0 0; display:block; }
dd.optionbundle-narrow-grid ul.options-list label { font-weight:normal; }
dd.optionbundle-narrow-grid .optionbundle-image {width:100px; height:100px; vertical-align:middle;}
dd.optionbundle-narrow-grid ul.validation-failed { padding:10px 0 0 0; }
dd.optionbundle-narrow-grid .spacer{height:1px; clear:both;}
dd.optionbundle-narrow-grid .truncated { position: relative; top: 30px; right: 7px;display:inline;}
dd.optionbundle-narrow-grid .truncated img {vertical-align:middle;}
dd.optionbundle-narrow-grid .truncated .show dl { top:-60px; left:0; }


/* OptionBundle List */
dd.optionbundle-narrow-list {padding:0; margin:0 0 10px 0; border:none;}
dd.optionbundle-narrow-list ul.options-list {list-style-type:none; padding-top:10px; margin:0; }
dd.optionbundle-narrow-list ul.options-list li {margin-bottom:10px; border:1px solid #e4e4e4; line-height:normal; padding:0; }
dd.optionbundle-narrow-list img {float:left; width:100px; height:100px; margin:10px 10px 5px 10px;}
dd.optionbundle-narrow-list li.none img {width:100px; height:15px; margin:9px 10px 8px 10px;}
dd.optionbundle-narrow-list ul.options-list input.radio {float:right; margin:0;}
dd.optionbundle-narrow-list ul.options-list input.checkbox {float:right; margin:0;}
dd.optionbundle-narrow-list ul.validation-failed { padding:0; }
dd.optionbundle-narrow-list .content {display:block; width:160px; float:right; padding: 10px 10px 5px 0;}
dd.optionbundle-narrow-list .price-notice {padding:0;}
dd.optionbundle-narrow-list .description {min-height:60px; font-size:10px; margin:4px 0px 5px 10px;}
dd.optionbundle-narrow-list .spacer{height: 1px; clear: both;}







/* 

Wide Layout Group Section

It is used when "Display product options in : Block after Info Column" is selected on the edit product page in Magento admin panel.
(when options container id=product-options-wrapper has width > 590 )
*/



/* OptionBundle Above */
dd.optionbundle-wide-above {width:590px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-wide-above img.optionbundle-image {float:left; width:100px; height:100px; margin:8px 0 0 0;}
dd.optionbundle-wide-above select {margin:8px 0 10px 0;}
dd.optionbundle-wide-above ul.options-list {margin:0 0 10px 0;}
dd.optionbundle-wide-above .description {width:480px; float:right;font-size:10px; display:block; margin:8px 0 0 0; font-weight:normal; font-style:normal; }
dd.optionbundle-wide-above .spacer{height:1px; clear:both;}

/* OptionBundle Above Checkbox */
dd.optionbundle-wide-above-checkbox {width:590px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-wide-above-checkbox img.optionbundle-image {width:100px; height:100px; margin:8px 0 0 0;}
dd.optionbundle-wide-above-checkbox ul.options-list {margin:0 0 10px 0;}
dd.optionbundle-wide-above-checkbox .truncated .optionbundle-icon {vertical-align:middle; margin:0 0 1px 4px;}
dd.optionbundle-wide-above-checkbox .truncated {display:inline;}
dd.optionbundle-wide-above-checkbox .price-notice {margin-right:4px;}


/* OptionBundle Before Select*/
dd.optionbundle-wide-before-select {width:590px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-wide-before-select img.optionbundle-image {float:left; width:100px; height:100px; vertical-align:middle; margin:10px 10px 10px 0;}
dd.optionbundle-wide-before-select select {float:left; width:474px; margin-top:50px;}
dd.optionbundle-wide-before-select .truncated {float:left; width:14px; margin:8px 100px 0 0;}
dd.optionbundle-wide-before-select .spacer{height:1px; clear:both;}

/* OptionBundle Before Radio*/
dd.optionbundle-wide-before-radio {padding:0; margin:0 0 10px 0;}
dd.optionbundle-wide-before-radio img.optionbundle-image {width:100px; height:100px; float:left; vertical-align:middle; margin:10px 10px 10px 0;}
dd.optionbundle-wide-before-radio ul.options-list {list-style-type:none; float:left; margin:10px 0 10px 0;}
dd.optionbundle-wide-before-radio .truncated .optionbundle-icon {vertical-align:middle; margin:0 0 1px 4px;}
dd.optionbundle-wide-before-radio .truncated {display:inline;}
dd.optionbundle-wide-before-radio .spacer{height:1px; clear:both;}
dd.optionbundle-wide-before-radio .price-notice {margin-right:4px;}


/* OptionBundle Below */
dd.optionbundle-wide-below {width:590px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-wide-below img.optionbundle-image {float:left; width:100px; height:100px; margin:0 0 4px 0;}
dd.optionbundle-wide-below select {margin:4px 0 10px 0;}
dd.optionbundle-wide-below ul.options-list {margin:0 0 10px 0;}
dd.optionbundle-wide-below .description {width:480px; float:right;font-size:10px; display:block; margin:0; font-weight:normal; font-style:normal; }
dd.optionbundle-wide-below .spacer{height:1px; clear:both;}

/* OptionBundle Below Checkbox */
dd.optionbundle-wide-below-checkbox {width:590px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-wide-below-checkbox img.optionbundle-image {width:100px; height:100px; margin:0 0 4px 0;}
dd.optionbundle-wide-below-checkbox ul.options-list {margin:0 0 10px 0;}
dd.optionbundle-wide-below-checkbox .truncated .optionbundle-icon {vertical-align:middle; margin:0 0 1px 4px;}
dd.optionbundle-wide-below-checkbox .truncated {display:inline;}
dd.optionbundle-wide-below-checkbox .price-notice {margin-right:4px;}


/* OptionBundle Swap Select*/
dd.optionbundle-wide-swap-select {width:590px; padding:0; margin:0 0 10px 0;}
dd.optionbundle-wide-swap-select select {margin:8px 0 10px 0;}
dd.optionbundle-wide-swap-select .description {font-size:10px; margin:0 0 8px 0; font-weight:normal; font-style:normal; }

/* OptionBundle Swap Radio*/
dd.optionbundle-wide-swap-radio {padding:0; margin:0 0 10px 0;}
dd.optionbundle-wide-swap-radio ul.options-list {float:left; margin:0 0 10px 0;}
dd.optionbundle-wide-swap-radio .truncated .optionbundle-icon {vertical-align:middle; margin:0 0 1px 4px;}
dd.optionbundle-wide-swap-radio .truncated {display:inline;}
dd.optionbundle-wide-swap-radio .spacer{height:1px; clear:both;}
dd.optionbundle-wide-swap-radio .price-notice {margin-right:4px;}


/* OptionBundle Picker */
dd.optionbundle-wide-picker {width:590px; padding:0; margin:5px 0 10px 0;}
dd.optionbundle-wide-picker select {margin:2px 0 10px 0;}
dd.optionbundle-wide-picker .description {font-size:10px; margin:0 0 8px 0; font-weight:normal; font-style:normal; }


/* OptionBundle Note */
.optionbundle-wide-note {font-size:12px;}


/* OptionBundle Grid */
dd.optionbundle-wide-grid {padding:0; margin:0 0 10px 0;}
dd.optionbundle-wide-grid ul.options-list {list-style-type:none; padding:10px 0 0 0; margin:0;}
dd.optionbundle-wide-grid ul.options-list li {width:139px; height:145px; float:left; margin-right:10px; line-height:normal; padding:0}
dd.optionbundle-wide-grid ul.options-list input.radio { float:none; margin:0; position: relative; left: 8px;}
dd.optionbundle-wide-grid ul.options-list input.checkbox { float:none; margin:0; position: relative; left: 8px;}
dd.optionbundle-wide-grid ul.options-list .label {text-align:center; margin:3px 0 0 0; display:block; }
dd.optionbundle-wide-grid ul.options-list label { font-weight:normal; }
dd.optionbundle-wide-grid .optionbundle-image {width:100px; height:100px; vertical-align:middle;}
dd.optionbundle-wide-grid ul.validation-failed { padding:10px 0 0 0; }
dd.optionbundle-wide-grid .spacer{height:1px; clear:both;}
dd.optionbundle-wide-grid .truncated { position: relative; top: 30px; right: 7px;display:inline;}
dd.optionbundle-wide-grid .truncated img {vertical-align:middle;}
dd.optionbundle-wide-grid .truncated .show dl { top:-60px; left:0; }


/* OptionBundle List */
dd.optionbundle-wide-list {padding:0; margin:0 0 10px 0; border:none;}
dd.optionbundle-wide-list ul.options-list {list-style-type:none; padding-top:10px; margin:0; }
dd.optionbundle-wide-list ul.options-list li {margin-bottom:10px; border:1px solid #e4e4e4; line-height:normal; padding:0; }
dd.optionbundle-wide-list img {float:left; width:100px; height:100px; margin:9px 10px 8px 10px;}
dd.optionbundle-wide-list li.none img {width:100px; height:15px; margin:10px 10px 5px 10px;}
dd.optionbundle-wide-list ul.options-list input.radio {float:right; margin:0;}
dd.optionbundle-wide-list ul.options-list input.checkbox {float:right; margin:0;}
dd.optionbundle-wide-list ul.validation-failed { padding:0; }
dd.optionbundle-wide-list .content {display:block; width:465px; float:right; padding: 10px 10px 5px 0;}
dd.optionbundle-wide-list .price-notice {padding:0;}
dd.optionbundle-wide-list .description {min-height:60px; font-size:10px; margin:4px 0px 5px 10px;}
dd.optionbundle-wide-list .spacer{height: 1px; clear: both;}